Перекрестное затухание с использованием квадранта - синтаксис 3JS

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

Если вы googled 'vertexShader' или 'fragmentShader', вы получите тонны хитов. Эти шейдеры являются основой для WebGL. Если вы хотите понять шейдеры и WebGl, есть много онлайн-ресурсов. Three.js генерирует вызовы шейдеров для вас. Для большинства нормальных работ вы можете игнорировать шейдеры и полностью работать с three.js.