用threejs实现着色器答案

【问题标题】：Implement shader with threejs用threejs实现着色器
【发布时间】：2017-04-05 05:45:08
【问题描述】：

我一直在使用threejs 库并创建一个带有浴缸和天空盒的基本场景。您可以在以下位置找到我的原始代码（没有任何 shaderimplementation）； https://liuloppan.github.io/watershader/

现在我想使用 GLSL 为我的水制作一个着色器，但我正在努力让它工作，只是将顶点着色器和片段着色器链接到一个程序中。现在我只想要一个使用 GLSL 的标准蓝色着色器，我查看了 ShaderMaterial 函数、RawShaderMaterial 以及试图使其工作的 WebGL 教程。目前我有 3 个不同的问题。

使用 ShaderMaterial 和 RawShaderMaterial 示例，我注意到大多数代码示例使用 ../build/three.js，但我使用缩小后的 three.min.js，它有多大区别制作？
我按照本教程进行操作； https://aerotwist.com/tutorials/an-introduction-to-shaders-part-1/ 我收到错误“无法初始化着色器”VALIDATE_STATUS false gl 错误。如何解决这个问题？
您知道使用threejs 实现着色器的任何最新示例吗？我发现的大多数示例似乎都使用了一些或多个已弃用的方法，因此我无法自己运行这些示例。

【问题讨论】：

example 有一个很棒的 WaterShader.js 模块。

标签： javascript three.js glsl webgl shader

【解决方案1】：

1 > full 和 minified 之间没有功能上的区别。

2 & 3 > 在three.js 代码中查找两个对象，分别为ShaderLib 和ShaderChunk。这些是three.js 中基本着色器的构建块。这些应该可以帮助您了解three.js 期望着色器如何被组装，并且您可以确定他们的方式对于在three.js 中使用是正确的。

【讨论】：