1

私は現在、この素晴らしいライブラリで遊んでいますが、EffectComposer にはいくつか問題があります。

ShaderPass によって導入されたポストプロセス シェーダーにテクスチャを送信できません。

これはバグだと思います...または、何かばかげたことをしています (needUpDate、ワープ、... ??)

(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 フィールドの次の後に: 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();

2 つのパス間のリンクはうまく機能しますが、画面を覆う 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 );

three.js r.54

于 2013-01-14T19:28:14.590 に答える