8

Has anyone been successful in using GLSL 3 ES shaders with three.js library? From what I know it is impossible for latest revision (r68) beacuse one can't even set a directive (which is required, and has to be before anything else in shader code):

#version 300 es

beacause of prefix that is added to each shader by three.js.

Does anyone knows any solution to that problem? Would it be enough to change the three.js code to append the directive on the begining of the threejs shader prefix?

Xyz
  • 1,522
  • 17
  • 23

3 Answers3

7

Three.js uses WebGL, which is available in web browsers, not GLES, which is a variant of OpenGL for mobile devices. While it is true that WebGL is itself closely related to GLES2, it is still a different thing. And currently, there only exists WebGL 1.0. Maybe future version will be more related to GLES3, but currently, no WebGL implementation will support ES 3 shaders.

derhass
  • 43,833
  • 2
  • 57
  • 78
  • WebGL 2.0 is in the works: https://www.khronos.org/registry/webgl/specs/latest/2.0/ – BAR Aug 21 '16 at 09:45
  • 1
    I think the WebGL 2.0 spec was release recently. Any update on the initial question of the OP ? – BConic Oct 02 '16 at 13:19
  • This is quite outdated. WebGL2 is now supported everywhere, so yes it's now possible to use `#version 300 es`, and even better, Three.js already appends it to your shaders. – David Peicho Jul 14 '22 at 16:24
6

You can use glslVersion property of ShaderMaterial. Don't use 

#version 300 es
directive in shader code.
const material = new three.ShaderMaterial({ uniforms: {}, 
vertexShader: vscode, 
fragmentShader: fscode, 
glslVersion: three.GLSL3, });
Can Deniz
  • 71
  • 1
  • 3
3

Three.js is now starting to support WebGL 2.0 on the development branch. You can checkout the development version from Github.

In order to use WebGL 2.0, you can simply create a RawShaderMaterial, with your custom code, and add the #version 300 es directive at the top of your shader source.

EDIT: As of 2020 (Three.js > v113), you can directly use a ShaderMaterial and the framework already adds #version 300 es and performs other kind of conversion automatically when using WebGL2

David Peicho
  • 453
  • 4
  • 16
  • I want to set #version in a ShaderPass, but if I put "#version 300 es" at the beginning of my shader code I get: "#version directive must occur before anything else, except for comments and white space". I think this is because ShaderPass adds some code before mine, so how could version be set for ShaderPass? – cmant Nov 01 '18 at 14:31
  • Yes, that's exactly it. I ended up using on RawShaderMaterial so they do not append anything to my code. However, I think ShaderPass uses ShaderMaterial internally, which creates your problem. You could still write your own Pass by extending the default one, that's fairly simple. – David Peicho Nov 01 '18 at 22:41
  • As of 2019, you can use the ShaderMaterial with WebGL2. It's working great. – David Peicho Oct 07 '19 at 10:45