将ShaderToy中的着色器移至Three.js(1)

更多示例代码：github地址

更多示例效果：demo地址

基本的转换规则：

1. 把ShaderToy特定变量做为 uniform 变量添加到本身的着色器中，如iGlobalTime、iResolution等
2. 把mainImage(out vec4 z, in vec2 w)重命名为main()
3. 把输出变量重命名为gl_FragColor，而输入变量即为顶点着色器里的输出
4. 利用three.js内置的uv变量，重写shadertoy里对于坐标的计算

遵守这种基本模式，能够在three中转换shadertoy中的着色器代码。

我首先在shadertoy上选了一个看起来很简单的效果，上升气泡。

大概是这个样子的。

下面是它的shader代码：

短小精悍，很是适合作最初的测试。

而后就是去尝试对它进行改造了。

首先，咱们知道shadertoy中提供的只是片元着色器，因此我须要本身首先补充一个顶点着色器，代码以下：

precision mediump float;
varying vec2 vUv;
void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
复制代码

很简单，只须要作一件事，转换目标的坐标系。

第二步是抄代码，把shadertoy里的代码直接复制下来，粘贴到咱们的片元着色器中。

第三步，改造。咱们不须要知道它是如何完成动画和几何体构建的，只须要按照模式，改掉不兼容的地方便可。

3.1 咱们看到代码里有两个以 "i" 开头的变量，iGlobalTime 和 iResolution ，这两个在shader中对应的是uniform变量，须要咱们在js代码里传进来。我暂时没必要知道这两个变量将被赋予什么样的值，先在最顶部手动去定义这两个变量便可。

3.2 mainImage() => main()；fragColor => gl_FragColor。

3.3 修改uv坐标：shadertoy中没有内置uv变量，因此它须要进行一次计算，而咱们在three.js里能够跳过这一步，直接把第6行改成，' -1.0 + 2.0 * vUv '。

到这一步，fragment shader改造结束:

precision mediump float;
uniform float iGlobalTime;
uniform vec2 iResolution;
varying vec2 vUv;

void main() {
    vec2 uv = -1.0 + 2.0 * vUv;
    uv.x *=  iResolution.x / iResolution.y;
    vec3 color = vec3(0.8 + 0.2 * uv.y);
    for( int i = 0; i < 40; i++ ){

        // bubble seeds
        float pha =      sin(float(i) * 546.13 + 1.0) * 0.5 + 0.5;
        float siz = pow( sin(float(i) * 651.74 + 5.0) * 0.5 + 0.5, 4.0 );
        float pox =      sin(float(i) * 321.55 + 4.1) * iResolution.x / iResolution.y;

        // buble size, position and color
        float rad = 0.1 + 0.5 * siz;
        vec2  pos = vec2( pox, -1.0 - rad + (2.0 + 2.0 * rad) * mod(pha + 0.1 * iGlobalTime * (0.2 + 0.8 * siz), 1.0));
        float dis = length( uv - pos );
        vec3  col = mix(vec3(0.94, 0.3, 0.0), vec3(0.1, 0.4, 0.8), 0.5 + 0.5 * sin(float(i) * 1.2 + 1.9));
        //    col += 8.0 * smoothstep( rad * 0.95, rad, dis );

        // render
        float f = length(uv-pos)/rad;
        f = sqrt(clamp(1.0 - f * f, 0.0, 1.0));
        color -= col.zyx * (1.0 - smoothstep( rad * 0.95, rad, dis )) * f;
    }
    color *= sqrt(1.5 - 0.5 * length(uv));
    gl_FragColor = vec4(color, 1.0);
}
复制代码

这时还没结束，咱们如今依然不知道iGlobalTime和iResolution是什么。因此咱们仍是须要简单的看一下它的代码，不难发现，iGlobalTime是一个时间流，表明的是帧率，而iResolution表明的则是坐标，咱们能够理解为是这个shader容器的长和宽。

了解了它们是什么，咱们天然就可以知道如何给它们赋值：

// ...
// 初始值
var uniforms = {
    iGlobalTime: {
        type: 'f',
        value: 1.0
    },
    iResolution: {
        type: 'v2',
        value: new THREE.Vector2()
    }
}
uniforms.iResolution.value.x = 1 // window.innerWidth;
uniforms.iResolution.value.y = 1 // window.innerHeight;
 
// 加到shader材质中
var material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: document.getElementById('general').textContent,
    fragmentShader: document.getElementById('frag1').textContent
})
// ...
mesh.startTime = Date.now() // 在网格中保存一个初始时间
mesh.uniforms = uniforms    // 在网格中保存uniform变量
// ...
 
// 逐帧更新时间
function render() {
    var time = (Date.now() - mesh.startTime) / 1000
    mesh.uniforms.iGlobalTime.value = time
    // ...
}

复制代码

效果：

完美改造。

更复杂的shader

固然，这只是一个简单例子，实际在three.js中，不少时候咱们是须要把着色器的效果做用于场景，而不是单个的网格内部，这时上述套路很明显就再也不适合了。

如何在场景中随意发挥着色器的威力，把shadertoy或者本身写的着色器融合进后处理通道中，这也是我目前正在研究和解决的问题，在解决以后会继续更新这篇文章。