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

Question

我一直在尝试学习三种着色器 material。至此我明白了uniforms、vertexShader和fragmentShader是如何在glsl和webgl的世界中对顶点和片段进行投影和着色的。我一直试图找到一些很好的例子，其中使用 THREE.ShaderLib.

扩展了 THREEJS 的 ShaderMaterial

假设我想扩展一个标准的 threejs material (THREE.ShaderLib['standard']) 来编写 envmap 纹理，这可能吗？还是我绝对有必要从头开始编写所有内容？

Answer 1

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

在最高层，有一个THREE.Material形式的抽象。你在哪里描述抽象属性和三个配置引擎盖下的着色器。

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

ShaderMaterial 期望您编写原始 GLSL，但仍然包含一些您必须手动执行的操作。所以 "writing from scratch" 并不完全正确。使用 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 命名空间具有 THREE.ShaderChunk 字典。这些是 GLSL 的各种命名片段，所有 material 都是基于这些片段构建的。

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

可以用字符串模板来写：

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

但是如果你想扩展内置的 materials，material 有一个（恕我直言，有缺陷和不可靠:)）的特性，叫做 onBeforeCompile。有了这个，您可以将回调传递给任何内置的 materials，并在编译之前获取着色器对象。在这里你可以注入你自己的 glsl，交换块或任何你能想到的对字符串做的事情。

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

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

How to create custom shaders using THREE.ShaderLib

javascript

webgl

three.js

webgl-extensions

aframe