three.js - 将 GLSL 3 ES 与 three.js 一起使用

Question

有没有人成功地将 GLSL 3 ES 着色器与three.js库一起使用？据我所知，最新版本（r68）是不可能的，因为甚至无法设置指令（这是必需的，并且必须在着色器代码中的任何其他内容之前）：

#version 300 es 

因为三个.js 添加到每个着色器的前缀。

有谁知道该问题的任何解决方案？更改three.js 代码以在threejs 着色器前缀的开头附加指令就足够了吗？

Answer 1

Three.js 使用WebGL，它在 Web 浏览器中可用，而不是 GLES，它是用于移动设备的 OpenGL 的变体。虽然 WebGL 本身确实与 GLES2 密切相关，但它仍然是另一回事。而目前，只存在 WebGL 1.0。也许未来的版本会更多地与 GLES3 相关，但目前，没有 WebGL 实现将支持 ES 3 着色器。

Answer 2

Three.js 现在开始在开发分支上支持 WebGL 2.0。您可以从Github签出开发版本。

为了使用 WebGL 2.0，您可以简单地使用自定义代码创建RawShaderMaterial，然后#version 300 es在着色器源代码的顶部添加指令。

编辑：截至 2020 年（Three.js > v113），您可以直接使用 aShaderMaterial并且框架已经#version 300 es在使用 WebGL2 时自动添加并执行其他类型的转换

Answer 3

您可以使用 ShaderMaterial 的 glslVersion 属性。不要使用

#version 300 es

着色器代码中的指令。

const material = new three.ShaderMaterial({ uniforms: {}, 
vertexShader: vscode, 
fragmentShader: fscode, 
glslVersion: three.GLSL3, });