使用GLSL 3 ES和three.js

Question

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

#version 300 es 

由于three.js为每个着色器添加前缀，因此出现了这个问题。有人知道解决这个问题的方法吗？是否足够改变three.js代码以在前缀的开头附加指令？

- Xyz

Answer 1

Three.js使用WebGL，它在网页浏览器中可用，而不是移动设备的OpenGL变体GLES。尽管WebGL与GLES2密切相关，但它仍然是一种不同的技术。目前只有WebGL 1.0存在，也许未来版本将更加关注GLES3，但当前没有任何WebGL实现支持ES 3着色器。

- derhass

---

WebGL 2.0正在开发中：https://www.khronos.org/registry/webgl/specs/latest/2.0/ - BAR

我认为WebGL 2.0规范最近已经发布。关于原始帖子中的初始问题是否有更新？ - BConic

这已经相当过时了。现在WebGL2已经得到了普遍支持，所以现在可以使用#version 300 es，更好的是，Three.js已经将其附加到您的着色器中了。 - David Peicho

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

- Can Deniz

Answer 3

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

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

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

- David Peicho

---

我想在一个ShaderPass中设置#version，但是如果我在着色器代码开头放置“＃version 300 es”，我会得到以下错误信息：“＃version指令必须出现在任何其他内容之前，除了注释和空格”。我认为这是因为ShaderPass在我的代码之前添加了一些代码，那么如何为ShaderPass设置版本？ - cmant

是的，完全正确。我最终使用了 RawShaderMaterial，这样它们就不会向我的代码添加任何内容。然而，我认为 ShaderPass 在内部使用 ShaderMaterial，这就造成了你的问题。你仍然可以通过扩展默认的 Pass 来编写自己的 Pass，这非常简单。 - David Peicho

截至2019年，您可以在WebGL2中使用ShaderMaterial。它的表现非常出色。 - David Peicho