three.js - 使用 quadmaterial 交叉淡入淡出 - ThreeJS 语法

Question

在编码淡入淡出过渡时，以下代码是什么意思？我希望达到与http://jsfiddle.net/DW9q4/85/相同的效果，但我有 2 个场景，其中有 2 个不同的地图立方体通过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。