ShaderToy着色器移植到Three.js全过程记录

在这里插入图片描述

推荐：用 NSDT设计器快速搭建可编程3D场景。

作为 Publicis Pixelpark Innovationlab 研究的一部分，我们研究了如何将较低底层的语言用于网络技术。显而易见的选择似乎是 asm.js 或 WebAssembly。

但你也可以使用 WebGL 着色器来解决面向机器的问题。着色器使用类似于 C/C++ 的语言进行编程，虽然它们主要不是为了解决一般问题，但它们的用途不仅仅是渲染图像和 3D 场景。

第二个动机源于使用着色器可以实现的美观性。 2002 年，威斯康星大学麦迪逊分校的一群学生发布了 NPRQuake（“Non-PhotoRealistic Rendering Quake”），这是著名游戏 Quake 的变体，通过将代码注入到渲染管道中。
在这里插入图片描述

这种变化的美学品质令人惊叹。我们立即意识到这些效果可能会改变项目的游戏规则。在 2002 年，这种变化只能通过编写 OpenGL 驱动程序来实现，而现在在 2018 年可以通过着色器来实现——甚至在 Web 浏览器中也是如此。

因此，当我们最近参与一个艺术项目时，我们决定尝试一下着色器。

1、着色器代码的可用性

如果你不太习惯对着色器进行编程，那么显而易见的选择是搜索免费提供的示例并使用它们（仔细查看所涉及的许可证）。在这方面脱颖而出的一个库是 Shadertoy，另一个例子是 ShaderFrog。

在我们决定在 ThreeJS 中使用 Shadertoy 的后处理着色器发布我们的发现之前，我们已经成功地使用 ThreeJS 了。

2、ThreeJS 中的着色器

ThreeJS 可用于利用后处理着色器（可改变整个渲染图像）以及材质着色器（可改变 3D 对象的材质）。两种类型都需要顶点和片段着色器部分；顶点着色器可以更改 3D 中顶点的位置，而片段着色器通常会替换渲染图像的颜色。

该图显示了四种可能的变化。
在这里插入图片描述

在左上角，后处理着色器向渲染图像添加颜色渐变。在它的右侧，顶点着色器减少了渲染区域。底部的两个图像显示材质着色器；左边的仅改变颜色，右边的改变顶点的位置。由于着色器始终由顶点部分和片段部分组成，因此最后一个示例也会更改颜色。

3、Shadertoy 的简单示例

早在 2014 年，我们就研究了如何将着色器从 Shadertoy 转移到 ThreeJS，第一个结果发布在 StackOverflow 上。我们发现以下模式很有用：

添加 ShaderToy 特定变量，如 iGlobalTime 等。
将 mainImage(out vec4 z, in vec2 w) 重命名为 main()
将 z 重命名为 gl_FragColor

通过遵循此模式，可以将简单的着色器传输到 ThreeJS。
在这里插入图片描述

4、来自 Shadertoy 的复杂示例

对于更复杂的着色器，你需要做更多的事情，正如我们现在将概述的那样。作为一个重要的示例，我们选择了 candycat 的 Noise Contour，因为会遇到一些问题。可以在这里找到它。

此示例还使用着色器语言创建整个场景。但在 ThreeJS 中，你通常希望控制 3D 对象，因此我们决定在 ThreeJS 中创建场景，同时仍然利用着色器来更改它。

5、了解着色器的结构

我们首先尝试了解着色器的结构；这可以通过 Shadertoy 的编辑器来实现。由于可以实时看到对代码的编辑，因此我们可以进行一些小的更改来了解它的工作原理。
在这里插入图片描述

在实际代码下面，我们看到该代码基于名为 iChannel0 的通道，其中 B 表示缓冲区。
在这里插入图片描述

要查看此缓冲区的实际效果，我们注释掉第 37 行并添加以下内容：

// fragColor = mix(EdgeColor, mCol, edge);
fragColor = texture(iChannel0, uv);

结果应该是：
在这里插入图片描述

这个简单的更改会导致显示前一个缓冲区的颜色，而不是该缓冲区的结果。

通过检查前一个缓冲区（Buf B），我们发现这个缓冲区也使用 iChannel0，因此我们仍然没有查看原始场景创建代码。
在这里插入图片描述

使用与之前相同的技巧，我们注释掉第 29 行并添加一行计算 uv 和实际颜色，如下所示：

// fragColor = vec4(edge, sample0.w, 1.0, 1.0);
fragColor = texture(iChannel0, fragCoord / iResolution.xy);

这应该给我们留下：
在这里插入图片描述

这看起来更像是一个普通的场景。此外，Buf A 不使用其他缓冲区，因此我们正在查看原始场景创建代码。
在这里插入图片描述

6、在ThreeJS 中重构

这里完全免责声明：接下来的代码绝不是“最佳”代码，而只是以最直接的方式解决问题的一种方法。

6.1 创建场景

我们首先创建一个稍微简单的场景，只有一个球体和一个平面。此外，我们想使用 ThreeJS 中的 MeshNormalMaterial。

此处显示了可能的结果：
在这里插入图片描述

该代码包含在名为 index.html 的 HTML 文件中：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ThreeJS Shader Experiment 1 - Step 0</title>
<style>html,body {height: 100%;width: 100%;margin: 0;padding: 0;overflow: hidden;}
</style>
</head>
<body><!-- https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.min.js --><script src="three.min.js"></script><!-- https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js --><script src="OrbitControls.js"></script><!-- https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/js/shaders/CopyShader.js --><script src="CopyShader.js"></script><!-- https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/js/postprocessing/EffectComposer.js --><script src="EffectComposer.js"></script><!-- https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/js/postprocessing/ShaderPass.js --><script src="ShaderPass.js"></script><!-- https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/js/postprocessing/RenderPass.js --><script src="RenderPass.js"></script><script src="index.js"></script>
</body>
</html>

我们需要处理对 ThreeJS 库的依赖关系，并且还在 index.js 中添加我们自己的代码：

const container = document.body;
const FOV = 45;
const NEAR = 0.1;
const FAR = 1000;
let height = container.clientHeight;
let width = container.clientWidth;
const ASPECT = width / height;const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio || 1);
renderer.setClearColor(0x000000);const canvas = renderer.domElement;const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(FOV, ASPECT, NEAR, FAR);
camera.position.set(-2, 2, 2);
camera.target = new THREE.Vector3(0, 0, 0);const controls = new THREE.OrbitControls(camera, canvas);const matNormal = new THREE.MeshNormalMaterial();const floorGeo = new THREE.PlaneBufferGeometry(2.0, 2.0);
const floor = new THREE.Mesh(floorGeo, matNormal);
floor.position.set(0, -0.5, 0);
floor.rotation.x = -((Math.PI * 90) / 180);const sphereGeo = new THREE.SphereBufferGeometry(0.5, 32, 32);
const sphere = new THREE.Mesh(sphereGeo, matNormal);scene.add(floor);
scene.add(sphere);
scene.add(camera);const resize = (width, height) => {camera.aspect = width / height;camera.updateProjectionMatrix();renderer.setSize(width, height);
};const render = () => {const tmpHeight = container.clientHeight;const tmpWidth = container.clientWidth;if (tmpHeight !== height || tmpWidth !== width) {height = tmpHeight;width = tmpWidth;resize(width, height);}controls.update();renderer.render(scene, camera);requestAnimationFrame(render);
};container.appendChild(canvas);
resize(width, height);
render();

这段 JavaScript 代码创建了一个渲染器、一个相机、一个轨道控件以及带有 MeshNormalMaterial 的平面和球体。它还负责窗口大小的更改和渲染。

从 Shadertoy 移植场景的第 0 步到此结束。

在这里插入图片描述

6.2 重新创建第一个着色器通道

在下一步中，我们尝试在缓冲区中重新创建第一个着色器渲染步骤；这基本上是将着色器代码复制到 ThreeJS。

这应该是结果：
在这里插入图片描述

为了实现这一目标，我们使用了 ThreeJS 的 EffectComposer，它提供了一种使用后处理着色器的简单方法。

// ...
scene.add(sphere);
scene.add(camera);const drawShader = {
uniforms: {
tDiffuse: { type: 't', value: null },
},
vertexShader: VERTEX,
fragmentShader: FRAGMENT,
};const composer = new THREE.EffectComposer(renderer);
composer.addPass(new THREE.RenderPass(scene, camera));const pass = new THREE.ShaderPass(drawShader);
pass.renderToScreen = true;
composer.addPass(pass);const resize = (width, height) => {camera.aspect = width / height;
// ...

这将创建一个 EffectComposer 实例，其中添加一个普通渲染通道和一个附加着色器通道。我们将着色器代码复制到变量 VERTEX 和 FRAGMENT 中。着色器定义还定义了 EffectComposer 使用的称为 tDiffuse 的 Uniform。它包含来自上一个渲染通道的图像，该图像将在当前通道中更改。

通过这个新的渲染步骤，我们将显示此通道而不是原始场景。因此我们需要添加一些代码来调整大小，因此我们添加：

const resize = (width, height) => {
camera.aspect = width / height;
camera.updateProjectionMatrix();composer.setSize(width, height);renderer.setSize(width, height);
};const render = () => {
const tmpHeight = container.clientHeight;
const tmpWidth = container.clientWidth;
if (tmpHeight !== height || tmpWidth !== width) {
height = tmpHeight;
width = tmpWidth;
resize(width, height);
}controls.update();// renderer.render(scene, camera);
composer.render();requestAnimationFrame(render);
};

现在我们需要定义常量 VERTEX 和 FRAGMENT。我们不能使用Shadertoy的顶点着色器，所以我们需要定义自己的：

const VERTEX = `
varying vec2 vUv;
void main() {vec4 mvPosition = modelViewMatrix * vec4(position, 1.);gl_Position = projectionMatrix * mvPosition;vUv = uv;
}

不过，我们确实使用了 Shadertoy 中的片段着色器，并将其添加到 FRAGMENT 中：

const FRAGMENT = `
// Edge detection Pass
#define Sensitivity (vec2(0.3, 1.5) * iResolution.y / 400.0)
float checkSame(vec4 center, vec4 samplef)
{vec2 centerNormal = center.xy;float centerDepth = center.z;vec2 sampleNormal = samplef.xy;float sampleDepth = samplef.z;vec2 diffNormal = abs(centerNormal - sampleNormal) * Sensitivity.x;bool isSameNormal = (diffNormal.x + diffNormal.y) < 0.1;float diffDepth = abs(centerDepth - sampleDepth) * Sensitivity.y;bool isSameDepth = diffDepth < 0.1;return (isSameNormal && isSameDepth) ? 1.0 : 0.0;
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{vec4 sample0 = texture(iChannel0, fragCoord / iResolution.xy);vec4 sample1 = texture(iChannel0, (fragCoord + vec2(1.0, 1.0)) / iResolution.xy);vec4 sample2 = texture(iChannel0, (fragCoord + vec2(-1.0, -1.0)) / iResolution.xy);vec4 sample3 = texture(iChannel0, (fragCoord + vec2(-1.0, 1.0)) / iResolution.xy);vec4 sample4 = texture(iChannel0, (fragCoord + vec2(1.0, -1.0)) / iResolution.xy);float edge = checkSame(sample1, sample2) * checkSame(sample3, sample4);fragColor = vec4(edge, sample0.w, 1.0, 1.0);
}
`;

这基本上创建了着色器，但我们仍然需要解决以下问题：

顶点着色器坐标尚未在片段着色器中使用

片段着色器使用当前 WebGL 上下文中未知的纹理
mainImage 必须重命名为 main
iResolution 尚未设置。

所以着色器还没有工作。

解决第一个问题会产生以下定义：

const FRAGMENT = `
// Edge detection Pass
varying vec2 vUv;
// ...

现在我们可以使用向量 vUv 代替 fragCoord / iResolution.xy。这导致：

// ...
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
vec4 sample0 = texture(tDiffuse, vUv);
vec4 sample1 = texture(tDiffuse, vUv + (vec2(1.0, 1.0) / iResolution.xy));
vec4 sample2 = texture(tDiffuse, vUv + (vec2(-1.0, -1.0) / iResolution.xy));
vec4 sample3 = texture(tDiffuse, vUv + (vec2(-1.0, 1.0) / iResolution.xy));
vec4 sample4 = texture(tDiffuse, vUv + (vec2(1.0, -1.0) / iResolution.xy));
// ...

现在我们只需用texture2D 替换所有出现的纹理。

另外，我们将 mainImage 更改为不带参数的 main：

// void mainImage( out vec4 fragColor, in vec2 fragCoord ) {void main () {
// ...

main 还应该返回 gl_FragColor 而不是 fragColor，它定义了着色器中的颜色。

void main () {
// ...
gl_FragColor = vec4(edge, sample0.w, 1.0, 1.0);
}

最后，我们需要通过将 iResolution 添加到uniforms来设置它。我们通过定义一个存储宽度和高度的 ThreeJS 向量来做到这一点：

const resolution = new THREE.Vector2(width, height);

现在我们可以将分辨率添加到uniforms中：

const drawShader = {uniforms: {tDiffuse: { type: 't', value: null },iResolution: { type: 'v2', value: resolution },},vertexShader: VERTEX,fragmentShader: FRAGMENT,
};

我们需要增强调整大小功能：

const resize = () => {
// ...
pass.uniforms.iResolution.value.set(width, height);
};

重要的是我们使用实际渲染通道的uniforms。原版已经被EffectComposer深度克隆；更改变量分辨率不会产生任何影响。

由于我们确实定义了两个uniform，因此我们需要将它们引入片段着色器，因此我们定义它们：

const FRAGMENT = `
uniform sampler2D tDiffuse;
uniform vec2 iResolution;
// ...

这个着色器通道到此结束，如果一切顺利，我们会看到以下内容：
在这里插入图片描述

从蓝线我们看到它通常可以工作，但粉红色的部分仍然缺失。让我们改变这一点。

6.3 解决阴影问题

粉色部分缺失，因为 Shadertoy 中的着色器秘密地将阴影渲染到一开始不可见的 Alpha 通道，如下图所示：

在这里插入图片描述

有多种方法可以解决这个问题 - 我们使用直接的方法，添加一种可以容纳阴影的材质。这些必须在额外的渲染通道中处理。

让我们在 ThreeJS 中创建阴影：

// ...
renderer.shadowMap.enabled = true;
renderer.shadowMap.renderReverseSided = false;// ...
floor.receiveShadow = true;// ...
sphere.castShadow = true;
sphere.receiveShadow = true;

阴影需要光，在本例中是定向光：

const SHADOW_MAP_SIZE = 1024;const directionalLight = new THREE.DirectionalLight( 0xffffff, 1.5 );
directionalLight.position.set( -1, 1.75, 1 );
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.width = SHADOW_MAP_SIZE;
directionalLight.shadow.mapSize.height = SHADOW_MAP_SIZE;
directionalLight.shadow.camera.far = 3500;
directionalLight.shadow.bias = -0.0001;scene.add(directionalLight);

MeshPhongMaterial 可以容纳阴影。

const matShadow = new THREE.MeshPhongMaterial({color: 0xffffff,shininess: 0.0,
});

而新的渲染目标会保存它们。

const PARAMETERS = {minFilter: THREE.LinearFilter,magFilter: THREE.LinearFilter,format: THREE.RGBFormat,stencilBuffer: false
};const shadowBuffer = new THREE.WebGLRenderTarget(1, 1, PARAMETERS);

同样，需要一个调整大小的函数：

shadowBuffer.setSize(width, height);

现在我们可以将阴影传输到新的渲染目标并为着色器做好准备：

const render () => {const tmpHeight = container.clientHeight;const tmpWidth = container.clientWidth;if (tmpHeight !== height || tmpWidth !== width) {height = tmpHeight;width = tmpWidth;resize(width, height);}controls.update();floor.material = matShadow;sphere.material = matShadow;renderer.render(scene, camera, shadowBuffer);pass.uniforms.tShadow.value = shadowBuffer.texture;floor.material = matNormal;sphere.material = matNormal;composer.render();requestAnimationFrame(render);
}

这些行设置材质、渲染场景、将阴影设置为统一并将材质更改回 MeshNormalMaterial。

现在着色器需要了解阴影才能处理它们，因此我们更改uniforms：

const drawShader = {uniforms: {tDiffuse: { type: 't', value: null },tShadow: { type: 't', value: null },iResolution: { type: 'v2', value: resolution },},vertexShader: VERTEX,fragmentShader: FRAGMENT,
};

片段着色器也是如此：

const FRAGMENT = `
uniform sampler2D tDiffuse;
uniform sampler2D tShadow;
uniform vec2 iResolution;
varying vec2 vUv;
//...

然后我们用阴影替换前一行。

// gl_FragColor = vec4(edge, sample0.w, 1.0, 1.0);
float shadow = texture2D(tShadow, vUv).x;
gl_FragColor = vec4(edge, shadow, 1.0, 1.0);

结果应该类似于 Shadertoy 上的第二步。
在这里插入图片描述

现在我们只差第二个着色器通道来完成此操作。

6.4 最终的着色器通道

对于最终的着色器通道，我们添加另一个 EffectComposer 实例。

让我们定义另一个着色器：

const FRAGMENT_FINAL = `
#define EdgeColor vec4(0.2, 0.2, 0.15, 1.0)
#define BackgroundColor vec4(1,0.95,0.85,1)
#define NoiseAmount 0.01
#define ErrorPeriod 30.0
#define ErrorRange 0.003
// Reference: https://www.shadertoy.com/view/MsSGD1
float triangle(float x)
{return abs(1.0 - mod(abs(x), 2.0)) * 2.0 - 1.0;
}
float rand(float x)
{return fract(sin(x) * 43758.5453);
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{float time = floor(iTime * 16.0) / 16.0;vec2 uv = fragCoord.xy / iResolution.xy;uv += vec2(triangle(uv.y * rand(time) * 1.0) * rand(time * 1.9) * 0.005,triangle(uv.x * rand(time * 3.4) * 1.0) * rand(time * 2.1) * 0.005);float noise = (texture(iChannel1, uv * 0.5).r - 0.5) * NoiseAmount;vec2 uvs[3];uvs[0] = uv + vec2(ErrorRange * sin(ErrorPeriod * uv.y + 0.0) + noise, ErrorRange * sin(ErrorPeriod * uv.x + 0.0) + noise);uvs[1] = uv + vec2(ErrorRange * sin(ErrorPeriod * uv.y + 1.047) + noise, ErrorRange * sin(ErrorPeriod * uv.x + 3.142) + noise);uvs[2] = uv + vec2(ErrorRange * sin(ErrorPeriod * uv.y + 2.094) + noise, ErrorRange * sin(ErrorPeriod * uv.x + 1.571) + noise);float edge = texture(iChannel0, uvs[0]).r * texture(iChannel0, uvs[1]).r * texture(iChannel0, uvs[2]).r;float diffuse = texture(iChannel0, uv).g;float w = fwidth(diffuse) * 2.0;vec4 mCol = mix(BackgroundColor * 0.5, BackgroundColor, mix(0.0, 1.0, smoothstep(-w, w, diffuse - 0.3)));fragColor = mix(EdgeColor, mCol, edge);fragColor = texture(iChannel0, uv);//fragColor = vec4(diffuse);
}`;const finalShader = {uniforms: {tDiffuse: { type: 't', value: null},},vertexShader: VERTEX,fragmentShader: FRAGMENT_FINAL
};const passFinal = new THREE.ShaderPass(finalShader);
passFinal.renderToScreen = true;
composer.addPass(passFinal);

我们停用前一个渲染通道的 renderToScreen：

const pass = new THREE.ShaderPass(drawShader);
// REMOVED FOR FINAL SHADER pass.renderToScreen = true;
composer.addPass(pass);

再次，引入更多变量；随着时间的推移改变变量的时间和通道 1 添加噪声的时间。

在这里插入图片描述

我们为 iTime 使用 ThreeJS 时钟。

const clock = new THREE.Clock();

每次更改时，我们也会更新 iTime：

const render () => {
// ...
const elapsed = clock.getElapsedTime();
passFinal.uniforms.iTime.value = elapsed;composer.render();// ....
}

我们在uniforms中添加 iTime 和噪音：

const finalShader = {uniforms: {tDiffuse: { type: 't', value: null},iTime: { type: 'f', value: 0.0},tNoise: { type: 't', value: new THREE.TextureLoader().load('noise.png')}},vertexShader: VERTEX,fragmentShader: FRAGMENT_FINAL
};

噪声只是一种噪声纹理（例如来自 Shadertoy 的纹理），我们使用 ThreeJS 将其加载到 tNoise 中。

现在我们需要使片段着色器适应新变量，因此我们应用以下措施：

将 mainImage 更改为 main
定义uniform并调整变量
定义 vUv 坐标
将返回结果改为gl_FragColor
用texture2D替换纹理

这给了我们：

const FRAGMENT_FINAL = `
uniform sampler2D tDiffuse;
uniform sampler2D tNoise;
uniform float iTime;
varying vec2 vUv;
#define EdgeColor vec4(0.2, 0.2, 0.15, 1.0)
#define BackgroundColor vec4(1,0.95,0.85,1)
#define NoiseAmount 0.01
#define ErrorPeriod 30.0
#define ErrorRange 0.003
// Reference: https://www.shadertoy.com/view/MsSGD1
float triangle(float x)
{return abs(1.0 - mod(abs(x), 2.0)) * 2.0 - 1.0;
}
float rand(float x)
{return fract(sin(x) * 43758.5453);
}
void main()
{float time = floor(iTime * 16.0) / 16.0;vec2 uv = vUv;uv += vec2(triangle(uv.y * rand(time) * 1.0) * rand(time * 1.9) * 0.005,triangle(uv.x * rand(time * 3.4) * 1.0) * rand(time * 2.1) * 0.005);float noise = (texture2D(tNoise, uv * 0.5).r - 0.5) * NoiseAmount;vec2 uvs[3];uvs[0] = uv + vec2(ErrorRange * sin(ErrorPeriod * uv.y + 0.0) + noise, ErrorRange * sin(ErrorPeriod * uv.x + 0.0) + noise);uvs[1] = uv + vec2(ErrorRange * sin(ErrorPeriod * uv.y + 1.047) + noise, ErrorRange * sin(ErrorPeriod * uv.x + 3.142) + noise);uvs[2] = uv + vec2(ErrorRange * sin(ErrorPeriod * uv.y + 2.094) + noise, ErrorRange * sin(ErrorPeriod * uv.x + 1.571) + noise);float edge = texture2D(tDiffuse, uvs[0]).r * texture2D(tDiffuse, uvs[1]).r * texture2D(tDiffuse, uvs[2]).r;float diffuse = texture2D(tDiffuse, uv).g;float w = fwidth(diffuse) * 2.0;vec4 mCol = mix(BackgroundColor * 0.5, BackgroundColor, mix(0.0, 1.0, smoothstep(-w, w, diffuse - 0.3)));gl_FragColor = mix(EdgeColor, mCol, edge);
}
`;

在这些更改之后，着色器仍然无法编译，因为该着色器需要特定的 WebGL 扩展。值得庆幸的是，这很容易在 ThreeJS 中添加：

const passFinal = new THREE.ShaderPass(finalShader);
passFinal.renderToScreen = true;
passFinal.material.extensions.derivatives = true;
composer.addPass(passFinal);

这给了我们以下结果：
在这里插入图片描述