使用四边形ThreeJS语法的交叉褪色

Question

当编码淡出转换时，下面的代码意味着什么？我希望实现与http://jsfiddle.net/DW9q4/85/相同的效果，但我有两个场景，两个不同的地图立方体通过一个PerspectiveCamera渲染。我很难理解发生了什么，代码在做什么？

uniforms: {

        tDiffuse1: {
            type: "t",
            value: rtTexture1                                
        },
        tDiffuse2: {
            type: "t",
            value: rtTexture2                                
        },
        mixRatio: {
            type: "f",
            value: 0.5
        },
        opacity: {
            type: "f",
            value: 1.0
        }

    },
    vertexShader: [

        "varying vec2 vUv;",

        "void main() {",

        "vUv = vec2( uv.x, 1.0 - uv.y );",
        "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",

        "}"

    ].join("\n"),
    fragmentShader: [

        "uniform float opacity;",
        "uniform float mixRatio;",

        "uniform sampler2D tDiffuse1;",
        "uniform sampler2D tDiffuse2;",

        "varying vec2 vUv;",

        "void main() {",

        "vec4 texel1 = texture2D( tDiffuse1, vUv );",
        "vec4 texel2 = texture2D( tDiffuse2, vUv );",
        "gl_FragColor = opacity * mix( texel1, texel2, mixRatio );",

        "}"

    ].join("\n")

所有的帮助都非常感谢！

Answer 1

如果你在谷歌上搜索“vertexShader”或“fragmentShader”，你会得到大量点击量。这些着色器是WebGL的核心。如果您想了解着色器和WebGl，有许多在线资源。Three.js为您生成着色器调用。对于大多数正常的工作，您可以忽略着色器，并完全使用three.js。