Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
WebGL2 '#version 300 es' is not prepended when using RawShaderMaterials with 'defines' option
See original GitHub issueDescription of the problem
When using RawShaderMaterial with the defines option, the #define definitions are prepended to the vertex/fragment program source code. However this becomes incompatible with WebGL2 shaders since the first line of these shader must be #version 300 es.
A proposed fix is to check for the #version XXX string as the first line and add the #define definitions after it.
Three.js version
- Dev
- r119
- r118
Browser
- All of them
- Chrome
- Firefox
- Internet Explorer
OS
- All of them
- Windows
- macOS
- Linux
- Android
- iOS
Hardware Requirements (graphics card, VR Device, …)
Issue Analytics
- State:
- Created 3 years ago
- Comments:18 (8 by maintainers)
Top Results From Across the Web
WebGL2 Shaders and GLSL
In WebGL fundamentals we showed that we can do no math in the shader and just pass the data directly through. #version 300...
Read more >Using GLSL 3 ES with three.js - Stack Overflow
In order to use WebGL 2.0, you can simply create a RawShaderMaterial, with your custom code, and add the #version 300 es directive...
Read more >RawShaderMaterial and WebGL 2 - Questions - three.js forum
The winding order of your vertices was wrong. If you want to use RawShaderMaterial you have to define projectionMatrix and modelViewMatrix in the...
Read more >First steps in WebGL - Aral Roca
The first line ( #version 300 es ) tells the version of GLSL we are using. The second line ( precision mediump float;...
Read more >Transform Feedback
Then we'll define our shaders, which we'll write in GLSL ES 3.0 since we're using WebGL 2: const transformVs = `\ #version 300...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I’ve tested your PR in detail today and provided feedback here: https://github.com/mrdoob/three.js/pull/20005#issuecomment-674378445
Implementing the suggested code should make the PR ready to merge.
The Harp.gl has modified their code to support WebGL2 and they are waiting for this bug to be resolved. See this PR. Will you review and merge PR #20005 to solve this bug?