有人成功地在three.js库中使用GLSL 3 ES着色器吗? 据我所知,最新版本(r68)是不可能的,因为你甚至不能设置指令(这是必需的,并且必须在着色器代码中的任何其他内容之前):
#version 300 es
由于three.js为每个着色器添加前缀,因此出现了这个问题。有人知道解决这个问题的方法吗?是否足够改变three.js代码以在前缀的开头附加指令?
Three.js使用WebGL,它在网页浏览器中可用,而不是移动设备的OpenGL变体GLES。尽管WebGL与GLES2密切相关,但它仍然是一种不同的技术。目前只有WebGL 1.0存在,也许未来版本将更加关注GLES3,但当前没有任何WebGL实现支持ES 3着色器。
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, });
Three.js现在开始在开发分支上支持WebGL 2.0。 您可以从Github获取开发版本。
为了使用WebGL 2.0,您可以简单地创建一个RawShaderMaterial,使用自定义代码,并在着色器源顶部添加#version 300 es
指令。
编辑:截至2020年(Three.js> v113),您可以直接使用ShaderMaterial
,框架已经添加了#version 300 es
并在使用WebGL2时自动执行其他类型的转换。
#version 300 es
,更好的是,Three.js已经将其附加到您的着色器中了。 - David Peicho