1

我目前正在使用这个很棒的库，但是我在使用 EffectComposer 时遇到了一些困难。

我无法将纹理发送到 ShaderPass 引入的后处理着色器。

我认为这是一个错误......或者我正在做一些愚蠢的事情（needUpDate，warp，......？？）

（r54、W7、Nv9700mGT、FF 17.0.1 和 Chrome 24.0.1312.52）

我使用“webgl_postprocessing.html”示例通过添加这些着色器来重现这种现象：

<script id="vertexShaderBasic" type="x-shader/x-vertex">
    varying vec2 glTexCoord;

    void main() {
        glTexCoord = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    }
</script>

<script id="fragmentShaderBlender" type="x-shader/x-fragment">
    varying vec2 glTexCoord;
    uniform sampler2D sprite1;
    uniform sampler2D previousRender;

    void main() {
        vec3 color = texture2D( previousRender, glTexCoord ).rgb;
        color += texture2D( sprite1, glTexCoord ).rgb;
        gl_FragColor.rgb = color;
        gl_FragColor.a = 1.0;
    }
</script>

这在主脚本的开头，以确保精灵已加载：

var composer2;
function start() {
    init();
    animate();
}
var sprite1 = THREE.ImageUtils.loadTexture( "textures/sprite1.jpg", null, start );

这在作曲家领域，之后：composer.addPass(new THREE.RenderPass(scene, camera));

composer2 = new THREE.EffectComposer( renderer );

var uniforms1 = {
    sprite1: { type: "t", value: sprite1 }, // <- something wrong here
    previousRender: { type: "t", value: null }
};

var blenderShader = {
    uniforms: uniforms1,
    vertexShader: $( 'vertexShaderBasic' ).textContent,
    fragmentShader: $( 'fragmentShaderBlender' ).textContent
};
// link with the previous render
blenderShader.uniforms.previousRender.value = composer.renderTarget2;
// the custom shader
var blenderPass = new THREE.ShaderPass( blenderShader );
blenderPass.renderToScreen = true;

composer2.addPass( blenderPass );

我也对此发表评论，因为它不再相关：

//effect.renderToScreen = true;

我在最后添加了这个：

composer2.render();

两个通道之间的链接运行良好，但精灵从未出现在覆盖屏幕的 EffectComposer 四边形上......

谢谢和对不起我的英语。

编辑回顾：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - postprocessing</title>
        <meta charset="utf-8">
        <style>
            body {
                margin: 0px;
                background-color: #000000;
                overflow: hidden;
            }
        </style>
    </head>
    <body>

        <script src="../build/three.min.js"></script>

        <script src="js/shaders/CopyShader.js"></script>
        <script src="js/shaders/DotScreenShader.js"></script>
        <script src="js/shaders/RGBShiftShader.js"></script>

        <script src="js/postprocessing/EffectComposer.js"></script>
        <script src="js/postprocessing/RenderPass.js"></script>
        <script src="js/postprocessing/MaskPass.js"></script>
        <script src="js/postprocessing/ShaderPass.js"></script>

        <script id="vertexShaderBasic" type="x-shader/x-vertex">

            varying vec2 glTexCoord;

            void main() {
                glTexCoord = uv;
                gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
            }
        </script>


        <script id="fragmentShaderBlender" type="x-shader/x-fragment">

            varying vec2 glTexCoord;

            uniform sampler2D sprite1;
            uniform sampler2D previousRender;

            void main() {

                vec3 color = texture2D( previousRender, glTexCoord ).rgb;

                color += texture2D( sprite1, glTexCoord ).rgb;

                gl_FragColor.rgb = color;
                gl_FragColor.a = 1.0;
            }
        </script>


        <script>

            var camera, scene, renderer, composer;
            var composer2;
            var object, light;

            function start() {
                init();
                animate();
            }

            var sprite1 = THREE.ImageUtils.loadTexture( "textures/sprite1.jpg", null, start );
            //var sprite1 = THREE.ImageUtils.loadTexture( "textures/sprite1.jpg", new THREE.UVMapping(), start ); // change anything

            function init() {

                renderer = new THREE.WebGLRenderer();
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );

                //

                camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.position.z = 400;

                scene = new THREE.Scene();
                scene.fog = new THREE.Fog( 0x000000, 1, 1000 );

                object = new THREE.Object3D();
                scene.add( object );

                var geometry = new THREE.SphereGeometry( 1, 4, 4 );
                var material = new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading } );

                for ( var i = 0; i < 100; i ++ ) {

                    var mesh = new THREE.Mesh( geometry, material );
                    mesh.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();
                    mesh.position.multiplyScalar( Math.random() * 400 );
                    mesh.rotation.set( Math.random() * 2, Math.random() * 2, Math.random() * 2 );
                    mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 50;
                    object.add( mesh );

                }

                scene.add( new THREE.AmbientLight( 0x222222 ) );

                light = new THREE.DirectionalLight( 0xffffff );
                light.position.set( 1, 1, 1 );
                scene.add( light );

                // postprocessing

                composer = new THREE.EffectComposer( renderer );
                composer.addPass( new THREE.RenderPass( scene, camera ) );

                /////////////////////////////////////
                /////////////////////////////////////

                composer2 = new THREE.EffectComposer( renderer );

                var uniforms1 = {
                    sprite1: { type: "t", value: sprite1 },
                    previousRender: { type: "t", value: null }
                };

                //uniforms1.sprite1.value.wrapS = uniforms1.sprite1.value.wrapT = THREE.RepeatWrapping;

                var blenderShader = {
                    uniforms: uniforms1,
                    vertexShader: $( 'vertexShaderBasic' ).textContent,
                    fragmentShader: $( 'fragmentShaderBlender' ).textContent
                };

                blenderShader.uniforms.previousRender.value = composer.renderTarget2;

                var blenderPass = new THREE.ShaderPass( blenderShader );
                blenderPass.renderToScreen = true;

                composer2.addPass( blenderPass );

                /////////////////////////////////////
                /////////////////////////////////////

                var effect = new THREE.ShaderPass( THREE.DotScreenShader );
                effect.uniforms[ 'scale' ].value = 4;
                composer.addPass( effect );

                var effect = new THREE.ShaderPass( THREE.RGBShiftShader );
                effect.uniforms[ 'amount' ].value = 0.0015;
                //effect.renderToScreen = true;
                composer.addPass( effect );

                //

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

            }

            function $( id ) {
                return document.getElementById( id );
            }

            function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            function animate() {

                requestAnimationFrame( animate );

                var time = Date.now();

                object.rotation.x += 0.005;
                object.rotation.y += 0.01;

                composer.render();
                composer2.render();
            }

        </script>

    </body>
</html>

我想要的是 ：

好的

我得到什么：

不好

4

2 回答 2

1

试试这个

var sprite1 = THREE.ImageUtils.loadTexture( "textures/sprite1.jpg", new THREE.UVMapping(), start );

三.js r.54

于 2013-01-14T19:28:14.590 回答
1

我也遇到了这个问题，找到了解决方法。

我对其进行了调试以确定着色器通道中额外纹理的纹理 ID与预期不同，这很糟糕。如果您查看 ShaderPass 构造函数，您会看到它克隆了 uniforms。这似乎是原因。如果我编辑该代码以恢复克隆制服中的原始纹理对象，它会按预期工作。所以这也应该对你有用。

我正在尝试将某种（适当的）错误修复集成到实际版本中。

于 2015-07-13T18:06:27.473 回答