Using GLSL 3 ES with three.js

Question

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?

Alvarez

Answer 1

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.

Identic

WebGL 2.0 is in the works: khronos.org/registry/webgl/specs/latest/2.0 – Pinkney

I think the WebGL 2.0 spec was release recently. Any update on the initial question of the OP ? – Bogart

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. – Azurite

Answer 2

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, });

Irmgard

Answer 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

Azurite

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? – Freshen

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. – Azurite

As of 2019, you can use the ShaderMaterial with WebGL2. It's working great. – Azurite