使用自定义着色器扩展 Three.js 内置材质时，如何知道要替换哪个 ShaderChunk？

Question

当使用 .onBeforeCompile() 方法用我自己的自定义 glsl 着色器扩展 Three.js 材质时，我们替换现有材质着色器代码的某些部分，例如：

myMaterial.onBeforeCompile = (shader) => {
  const parseVertexString = /* glsl */ `#include <displacementmap_pars_vertex>`;
  shader.vertexShader = shader.vertexShader.replace(
    parseVertexString,
    parseVertexString + vertexShaderPars
  );
}

我从互联网上得到了这个代码片段，其中我不明白的部分是我们如何知道要替换哪个 Three.js ShaderChunk？

在我的示例中，我们正在替换“displacementmap_pars_vertex”shaderChunk，但我再次不确定为什么我们要替换该特定的着色器块。如果我们想要一个自定义片段着色器，我应该选择替换哪个shaderChunk？

Answer 1

使用

Material.onBeforeCompile()

需要很好地理解内置材质着色器的实现方式。一般来说，材质的着色器由不同的着色器块组成。您可以在以下目录中找到每种材料的组合物：

https://github.com/mrdoob/ Three.js/tree/dev/src/renderers/shaders/ShaderLib

例如文件

meshphong.glsl.js

代表

MeshPhongMaterial

的着色器。根据您想要更改或自定义着色器的哪一部分，您必须选择不同的着色器块并用

Material.onBeforeCompile()

覆盖它。