Three.js

Question

我是 three.js 的新手，我在实现以下效果时遇到了问题：渲染 2 个场景并将它们与混合着色器混合。第一个 TexturePass 没问题，但第二个像频闪仪一样闪烁。结果可以在这里看到：https://codepen.io/anon/pen/jYKqyj?editors=0010#0

这是代码：

THREE.Custom = THREE.Custom || {};

// Taken from https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/js/shaders/AdditiveBlendShader.js
THREE.Custom.AdditiveShader = {
    uniforms: {
        tDiffuse: { type: "t", value: null },
        tAdd: { type: "t", value: null },
        fCoeff: { type: "f", value: 1.0 }
    },

    vertexShader: [
        "varying vec2 vUv;",

        "void main() {",
            "vUv = uv;",
            "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
        "}"
    ].join("\n"),

    fragmentShader: [
        "uniform sampler2D tDiffuse;",
        "uniform sampler2D tAdd;",
        "uniform float fCoeff;",

        "varying vec2 vUv;",

        "void main() {",
            "vec4 texel = texture2D( tDiffuse, vUv );",
            "vec4 add = texture2D( tAdd, vUv );",
            "gl_FragColor = texel + add * fCoeff, 1.0;",
        "}"
    ].join("\n")
};

var TestBlending = (function (){

    var canvasWidth, canvasHeight, canvasRatio;

    var clock = new THREE.Clock();
    var container, camera, scene1, scene2, renderer;

    var stats, statsDisplay = true;
    var box1, box2;

    var composerFinal, composerScene1, composerScene2, composerBlending, renderTarget;
    var composerDebugScene1, composerDebugScene2;

    var delta;


    function createScene1 () {

        scene1 = new THREE.Scene();
        scene1.name = "scene1";

        var light = new THREE.DirectionalLight( 0xffffff, 1 );
        light.position.set( 0, 10, 20 );
        light.name = "light1";

        scene1.add(light);

        var material = new THREE.MeshPhongMaterial( { color: 0xcc00cc } );
        var geometry = new THREE.BoxGeometry( 1, 1, 1 );
        box1 = new THREE.Mesh( geometry, material );
        scene1.add( box1 );


    }
    function createScene2 () {

        scene2 = new THREE.Scene();
        scene2.name = "scene2";

        var light = new THREE.DirectionalLight( 0xffffff, 1 );
        light.position.set( 0, 10, 20 );
        light.name = "light2";

        scene2.add(light);

        var material = new THREE.MeshPhongMaterial( { color: 0x33cc33 } );
        var geometry = new THREE.BoxGeometry( 1, 1, 1 );
        box2 = new THREE.Mesh( geometry, material );
        scene2.add( box2 );


    }

    function init() {

        container = document.getElementById('test_blending');

        updateCanvasSize();

        // RENDERER
        renderer = new THREE.WebGLRenderer( {
            antialias: true,
            alpha: true
        } );
        renderer.setPixelRatio( (window.devicePixelRatio) ? window.devicePixelRatio : 1 );
        renderer.setSize(canvasWidth, canvasHeight);
        renderer.setClearColor( new THREE.Color(0x0), 0 );
        renderer.autoClear = false;

        // CAMERA
        camera = new THREE.PerspectiveCamera( 10, canvasRatio, 1, 10000 );
        camera.position.set(0, 0, 30);
        camera.lookAt(new THREE.Vector3(0,0,0));

        createScene1();
        createScene2();

        window.addEventListener( 'resize', onWindowResize, false );

    }

    function updateCanvasSize () {
        canvasWidth = window.innerWidth;
        canvasHeight = window.innerHeight;
        canvasRatio = canvasWidth / canvasHeight;
    }

    function initProcessingPasses () {

        var parameters = {
            minFilter: THREE.LinearFilter,
            magFilter: THREE.LinearFilter,
            format: THREE.RGBAFormat,
            stencilBuffer: true
        };
        renderTarget = new THREE.WebGLRenderTarget( canvasWidth, canvasHeight, parameters );

        processing = { pass: {}, texture: {} };

        processing.pass.clear = new THREE.ClearPass();

        processing.pass.renderScene1 = new THREE.RenderPass( scene1, camera );
        processing.pass.renderScene1.clear = true;
        processing.pass.renderScene1.renderToScreen = false;
        processing.pass.renderScene1.clearDepth = true;

        processing.pass.renderScene2 = new THREE.RenderPass( scene2, camera );
        processing.pass.renderScene2.clear = true;
        processing.pass.renderScene2.renderToScreen = false;
        processing.pass.renderScene2.clearDepth = true;

        processing.pass.blending = new THREE.ShaderPass( THREE.Custom.AdditiveShader );
        //processing.pass.blending.needsSwap = true;
        processing.pass.blending.clear = true;
        processing.pass.blending.renderToScreen = false;

        processing.pass.output = new THREE.ShaderPass( THREE.CopyShader );
        processing.pass.output.renderToScreen = true;

        setPostProcessingPasses();

    }
    function setPostProcessingPasses () {

        console.log('setPostProcessingPasses');

        composerScene1 = null;
        composerScene1 = new THREE.EffectComposer( renderer, renderTarget );
        composerScene1.addPass( processing.pass.clear );
        composerScene1.addPass( processing.pass.renderScene1 );
        processing.texture.renderedScene1 = new THREE.TexturePass(composerScene1.renderTarget2.texture);

        composerScene2 = null;
        composerScene2 = new THREE.EffectComposer( renderer, renderTarget );
        composerScene2.addPass( processing.pass.clear );
        composerScene2.addPass( processing.pass.renderScene2 );
        processing.texture.renderedScene2 = new THREE.TexturePass(composerScene2.renderTarget2.texture);

        composerBlending = null;
        composerBlending = new THREE.EffectComposer( renderer, renderTarget );
        composerBlending.addPass( processing.pass.clear );
        composerBlending.addPass( processing.texture.renderedScene1 );
        processing.pass.blending.uniforms[ 'tAdd' ].value = composerScene2.renderTarget2.texture;
        composerBlending.addPass( processing.pass.blending );
        processing.texture.renderedBlending = new THREE.TexturePass(composerBlending.renderTarget2.texture);


        composerFinal = null;
        composerFinal = new THREE.EffectComposer( renderer, renderTarget );
        composerFinal.addPass( processing.pass.clear );
        composerFinal.addPass( processing.texture.renderedBlending );
        composerFinal.addPass( processing.pass.output );

        composerDebugScene1 = new THREE.EffectComposer( renderer, renderTarget );
        composerDebugScene1.addPass( processing.pass.clear );
        composerDebugScene1.addPass( processing.texture.renderedScene1 );
        composerDebugScene1.addPass( processing.pass.output );
        composerDebugScene2 = new THREE.EffectComposer( renderer, renderTarget );
        composerDebugScene2.addPass( processing.pass.clear );
        composerDebugScene2.addPass( processing.texture.renderedScene2 );
        composerDebugScene2.addPass( processing.pass.output );
    }

    function addStats (container) {
        stats = new Stats();
        if (statsDisplay) container.appendChild( stats.dom );
    }

    function addToDOM() {
        var canvas = container.getElementsByTagName('canvas');
        if (canvas.length>0) {
            container.removeChild(canvas[0]);
        }
        container.appendChild( renderer.domElement );
        addStats(container);
    }

    function animate() {
        window.requestAnimationFrame(animate);

        var time = performance.now() * 0.001;
        var cDelta = clock.getDelta();

        box1.rotation.y = time / 5;
        box1.rotation.x = 10;

        box2.rotation.z = time / -5;
        box2.rotation.x = time / -5;
        box2.rotation.y = 5;

        stats.update();

        render();
    }

    function render() {

        delta = clock.getDelta();;

        renderer.setViewport( 0, 0, canvasWidth, canvasHeight );

        composerScene1.render(delta);
        composerScene2.render(delta);
        composerBlending.render(delta);
        composerFinal.render(delta);

        // DEBUG
        renderer.setViewport( 0, 0, canvasWidth/3, canvasHeight/3 );
        composerDebugScene1.render(delta);
        renderer.setViewport( canvasWidth/3*2, canvasHeight/3*2, canvasWidth/3, canvasHeight/3 );
        composerDebugScene2.render(delta);

    }

    function onWindowResize() {
        camera.aspect = canvasRatio;
        camera.updateProjectionMatrix();
        renderer.setSize( canvasWidth, canvasHeight );
        composerScene1.setSize( canvasWidth, canvasHeight );
        composerScene2.setSize( canvasWidth, canvasHeight );
        composerBlending.setSize( canvasWidth, canvasHeight );
        composerFinal.setSize( canvasWidth, canvasHeight );
    }


    return {
        init: function () {
            init();
            initProcessingPasses();
            addToDOM();
            animate();

        }
    }

})();

TestBlending.init();

如有任何帮助，我们将不胜感激。谢谢

Answer 1

主要问题是 processing.pass.renderScene1 的目标纹理被添加了两次。它作为一个单独的传递添加到 composerBlending，它也用于 processing.pass.blending。

创建一个不使用默认漫反射纹理的混合着色器tDiffuse:

THREE.Custom.AdditiveShader = {
  uniforms: {
      tBase:  { type: "t", value: null },
      tAdd:   { type: "t", value: null },
      fCoeff: { type: "f", value: 1.0 }
  },

  vertexShader: [
      "varying vec2 vUv;",

      "void main() {",
          "vUv = uv;",
          "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
      "}"
  ].join("\n"),

  fragmentShader: [
      "uniform sampler2D tBase;",
      "uniform sampler2D tAdd;",
      "uniform float fCoeff;",

      "varying vec2 vUv;",

      "void main() {",
          "vec4 texel = texture2D( tBase, vUv );",
          "vec4 add = texture2D( tAdd, vUv );",
          "gl_FragColor = texel + add * fCoeff;",
      "}"
  ].join("\n")
};

并将由场景通道创建的 2 个纹理手动设置为混合通道的 unifor 采样器变量。

composerBlending = new THREE.EffectComposer( renderer, renderTarget );
processing.pass.blending.uniforms[ 'tBase' ].value = composerScene1.renderTarget2.texture;
processing.pass.blending.uniforms[ 'tAdd' ].value = composerScene2.renderTarget2.texture;
composerBlending.addPass( processing.pass.blending );

查看代码片段：

THREE.Custom = THREE.Custom || {};

// Taken from https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/js/shaders/AdditiveBlendShader.js
  THREE.Custom.AdditiveShader = {
      uniforms: {
          tBase: { type: "t", value: null },
          tAdd: { type: "t", value: null },
          fCoeff: { type: "f", value: 1.0 }
      },

      vertexShader: [
          "varying vec2 vUv;",

          "void main() {",
              "vUv = uv;",
              "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
          "}"
      ].join("\n"),

      fragmentShader: [
          "uniform sampler2D tBase;",
          "uniform sampler2D tAdd;",
          "uniform float fCoeff;",

          "varying vec2 vUv;",

          "void main() {",
              "vec4 texel = texture2D( tBase, vUv );",
              "vec4 add = texture2D( tAdd, vUv );",
              "gl_FragColor = texel + add * fCoeff;",
          "}"
      ].join("\n")
  };

var TestBlending = (function (){

    var canvasWidth, canvasHeight, canvasRatio;

    var clock = new THREE.Clock();
    var container, camera, scene1, scene2, renderer;

    var stats, statsDisplay = true;
    var box1, box2;

    var composerFinal, composerScene1, composerScene2, composerBlending, renderTarget;
    var composerDebugScene1, composerDebugScene2;

    var delta;


    function createScene1 () {

        scene1 = new THREE.Scene();
        scene1.name = "scene1";

        var light = new THREE.DirectionalLight( 0xffffff, 1 );
        light.position.set( 0, 10, 20 );
        light.name = "light1";

        scene1.add(light);

        var material = new THREE.MeshPhongMaterial( { color: 0xcc00cc } );
        var geometry = new THREE.BoxGeometry( 1, 1, 1 );
        box1 = new THREE.Mesh( geometry, material );
        scene1.add( box1 );


    }
    function createScene2 () {

        scene2 = new THREE.Scene();
        scene2.name = "scene2";

        var light = new THREE.DirectionalLight( 0xffffff, 1 );
        light.position.set( 0, 10, 20 );
        light.name = "light2";

        scene2.add(light);

        var material = new THREE.MeshPhongMaterial( { color: 0x33cc33 } );
        var geometry = new THREE.BoxGeometry( 1, 1, 1 );
        box2 = new THREE.Mesh( geometry, material );
        scene2.add( box2 );


    }

    function init() {

        container = document.getElementById('test_blending');

        updateCanvasSize();

        // RENDERER
        renderer = new THREE.WebGLRenderer( {
            antialias: true,
            alpha: true
        } );
        renderer.setPixelRatio( (window.devicePixelRatio) ? window.devicePixelRatio : 1 );
        renderer.setSize(canvasWidth, canvasHeight);
        renderer.setClearColor( new THREE.Color(0x0), 0 );
        renderer.autoClear = false;

        // CAMERA
        camera = new THREE.PerspectiveCamera( 10, canvasRatio, 1, 100 );
        camera.position.set(0, 0, 30);
        camera.lookAt(new THREE.Vector3(0,0,0));

        createScene1();
        createScene2();

        window.addEventListener( 'resize', onWindowResize, false );

    }

    function updateCanvasSize () {
        canvasWidth = window.innerWidth;
        canvasHeight = window.innerHeight;
        canvasRatio = canvasWidth / canvasHeight;
    }

    function initProcessingPasses () {

        var parameters = {
            minFilter: THREE.LinearFilter,
            magFilter: THREE.LinearFilter,
            format: THREE.RGBAFormat,
            stencilBuffer: true,
        };

        var parameters2 = {
            minFilter: THREE.LinearFilter,
            magFilter: THREE.LinearFilter,
            format: THREE.RGBAFormat,
            stencilBuffer: true,
        };
        renderTarget = new THREE.WebGLRenderTarget( canvasWidth, canvasHeight, parameters );

        processing = { pass: {}, texture: {} };

        processing.pass.clear = new THREE.ClearPass();

        processing.pass.renderScene1 = new THREE.RenderPass( scene1, camera );
        processing.pass.renderScene1.clear = true;
        processing.pass.renderScene1.renderToScreen = false;
        processing.pass.renderScene1.clearDepth = true;
        
        processing.pass.renderScene2 = new THREE.RenderPass( scene2, camera );
        processing.pass.renderScene2.clear = true;
        processing.pass.renderScene2.renderToScreen = false;
        processing.pass.renderScene2.clearDepth = true;
        
        processing.pass.blending = new THREE.ShaderPass( THREE.Custom.AdditiveShader );
        processing.pass.blending.renderToScreen = false;
        processing.pass.blending.clear = true;
        
        processing.pass.output = new THREE.ShaderPass( THREE.CopyShader );
        processing.pass.output.needsSwap = true;
        processing.pass.output.renderToScreen = true;
        
        setPostProcessingPasses();

      }
      
      function setPostProcessingPasses () {
    
        console.log('setPostProcessingPasses');

        composerScene1 = new THREE.EffectComposer( renderer, renderTarget );
        composerScene1.addPass( processing.pass.clear );
        composerScene1.addPass( processing.pass.renderScene1 );
        processing.texture.renderedScene1 = new THREE.TexturePass(composerScene1.renderTarget2.texture);

        composerScene2 = new THREE.EffectComposer( renderer, renderTarget );
        composerScene2.addPass( processing.pass.clear );
        composerScene2.addPass( processing.pass.renderScene2 );
        processing.texture.renderedScene2 = new THREE.TexturePass(composerScene2.renderTarget2.texture);

        composerBlending = new THREE.EffectComposer( renderer, renderTarget );
        processing.pass.blending.uniforms[ 'tBase' ].value = composerScene1.renderTarget2.texture;
        processing.pass.blending.uniforms[ 'tAdd' ].value = composerScene2.renderTarget2.texture;
        composerBlending.addPass( processing.pass.blending );
        processing.texture.renderedBlending = new THREE.TexturePass(composerBlending.renderTarget2.texture);


        composerFinal = new THREE.EffectComposer( renderer, renderTarget );
        composerFinal.addPass( processing.texture.renderedBlending );
        composerFinal.addPass( processing.pass.output );

        composerDebugScene1 = new THREE.EffectComposer( renderer, renderTarget );
        composerDebugScene1.addPass( processing.pass.clear );
        composerDebugScene1.addPass( processing.texture.renderedScene1 );
        composerDebugScene1.addPass( processing.pass.output );
        composerDebugScene2 = new THREE.EffectComposer( renderer, renderTarget );
        composerDebugScene2.addPass( processing.pass.clear );
        composerDebugScene2.addPass( processing.texture.renderedScene2 );
        composerDebugScene2.addPass( processing.pass.output );
    }

    function addStats (container) {
        //stats = new Stats();
        //if (statsDisplay) container.appendChild( stats.dom );
    }

    function addToDOM() {
        container.appendChild( renderer.domElement );
        addStats(container);
    }

    function animate() {
        window.requestAnimationFrame(animate);

        var time = performance.now() * 0.001;
        var cDelta = clock.getDelta();

        box1.rotation.y = time / 5;
        box1.rotation.x = 10;

        box2.rotation.z = time / -5;
        box2.rotation.x = time / -5;
        box2.rotation.y = 5;

        //stats.update();

        render();
    }

    function render() {

        delta = clock.getDelta();

        renderer.setViewport( 0, 0, canvasWidth, canvasHeight );

        composerScene1.render(delta);
        composerScene2.render(delta);
        composerBlending.render(delta);
        composerFinal.render(delta);

        // DEBUG
        renderer.setViewport( 0, 0, canvasWidth/3, canvasHeight/3 );
        composerDebugScene1.render(delta);
        renderer.setViewport( canvasWidth/3*2, canvasHeight/3*2, canvasWidth/3, canvasHeight/3 );
        composerDebugScene2.render(delta);

    }

    function onWindowResize() {
        updateCanvasSize();
        camera.aspect = canvasRatio;
        camera.updateProjectionMatrix();
        renderer.setSize( canvasWidth, canvasHeight );
        composerScene1.setSize( canvasWidth, canvasHeight );
        composerScene2.setSize( canvasWidth, canvasHeight );
        composerBlending.setSize( canvasWidth, canvasHeight );
        composerFinal.setSize( canvasWidth, canvasHeight );
    }


    return {
        init: function () {
            init();
            initProcessingPasses();
            addToDOM();
            animate();

        }
    }

})();

TestBlending.init();

<script src="https://threejs.org/build/three.min.js"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script-->
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/ClearPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/TexturePass.js"></script>

<div id="test_blending"></div>

Three.js - EffectComposer - 混合场景闪烁

Three.js - EffectComposer - Blended scene is blinking

javascript

blending