如何使用THREE.ShaderLib创建自定义着色器

Posted 2021-05-02

我一直在努力学习THREEJS着色器材料。到目前为止，我了解制服，vertexShader和fragmentShader如何在glsl和webgl世界中投影和着色顶点和片段。我一直试图找到一些很好的例子，其中使用THREE.ShaderLib扩展了THREEJS的ShaderMaterial。

假设我想扩展一个标准的三个材质（THREE.ShaderLib ['standard']）来编写envmap纹理，那可能吗？或者我是否绝对有必要从头开始编写所有内容？

答案

着色器只是字符串，它取决于您使用它们做什么以及如何获得它们。话虽如此，three.js有许多工具可以帮助您更好地构建它们。

在最高级别，有一个THREE.Material形式的抽象。在描述抽象属性的地方，三个在引擎盖下配置着色器。

//no shaders involved
var redPlastic = new THREE.MeshStandardMaterial({
   color: 'red',
   roughness: notVeryRough
}) 

ShaderMaterial希望您编写原始GLSL，但仍然包含一些您必须手动执行的操作。所以“从头开始写作”并不完全正确。使用RawShaderMaterial，您可以从头开始编写所有内容。 THREE.ShaderMaterial：

varying vec2 vUv;
void main(){
  vUv = uv; // <- magic! where does uv come from?
  vec4 worldPosition = modelMatrix * vec4( position, 1.); // <- more magic! where do modelMatrix and position come from?
  gl_Position = projectionMatrix * viewMatrix * worldPosition; // more!
}

在运行时，当三个编译并包含在页面上时，THREE命名空间具有THREE.ShaderChunk字典。这些是GLSL的各种命名片段，所有材料都是由它构建的。

您可以从源文件中复制这些片段，并将它们粘贴到您自己的着色器文件或字符串中。

您可以使用字符串模板编写它：

`${THREE.ShaderChunk.some_chunk}
 void main(){
 ...
 ${anotherChunk}
 gl_Position = ...
`

但是如果你想扩展内置材料，那就有一种叫做onBeforeCompile的材料（恕我直言。通过这种方式，您可以将回调传递给任何内置材质，并在编译之前获取着色器对象。在这里，您可以注入自己的glsl，将块或其他任何您能想到的内容换成字符串。

为了使用这个，需要熟悉从https://github.com/mrdoob/three.js/tree/dev/src/renderers/shaders/ShaderChunk构建的着色器的结构