Question

我试图让基本的渲染目标在我渲染到1个场景的地方工作，然后将其用作纹理来渲染四边形。我有一个基本的演示，但是当我运行它时，结果都是像素化的，好像它被渲染到一个小屏幕然后被拉伸到四边形。

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

        <title></title>

        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="three.min.js" type="text/javascript"></script>

        <style>
            body {
                color: #ffffff;
                font-family:Monospace;
                font-size:13px;
                text-align:center;
                font-weight: bold;
                background-color: #000000;
                margin: 0px;
                overflow: hidden;
            }

            #info {
                position: absolute;
                top: 0px; width: 100%;
                padding: 5px;
            }

            a {
                color: #ffffff;
            }

        </style>
    </head>
    <body>
        <div id="container"></div>

        <script id="vertex-shader-test" type="x-shader/x-vertex">
            void main() {
                gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
            }
        </script>

        <script id="fragment-shader-test" type="x-shader/x-vertex">
            void main() {
                gl_FragColor = vec4(1,1,1,1);
            }
        </script>

        <script id="vertex-shader-screen" type="x-shader/x-vertex">
            varying vec2 vertexUV;

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

        <script id="fragment-shader-screen" type="x-shader/x-fragment">
            precision highp float;
            varying vec2 vertexUV;
            uniform sampler2D rtTexture;

            void main() {
                gl_FragColor = texture2D(rtTexture, vertexUV);
            }
        </script>

        <script>

            var scene = null,
                rtScene = null,
                camera = null,
                cameraRTT = null,
                renderer = null,
                plane = null;

            var rtTexture;

            init();
            render();

            function init()
            {
                container = document.getElementById( 'container' );

                scene = new THREE.Scene();
                rtScene = new THREE.Scene();

                rtTexture = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat });

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

                rtCamera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
                rtCamera.position.z = 100;
                rtCamera.position.y = 10;

                var material2 = new THREE.ShaderMaterial({
                    vertexShader: document.getElementById('vertex-shader-test').textContent,
                    fragmentShader: document.getElementById('fragment-shader-test').textContent,
                });

                var geometry = new THREE.PlaneBufferGeometry(100, 100, 200, 200);

                plane = new THREE.Mesh(geometry, material2);
                plane.rotateX(-Math.PI / 2);
                rtScene.add(plane);

                var geometry = new THREE.PlaneBufferGeometry(1, 1);

                var material = new THREE.ShaderMaterial({
                    uniforms: {
                        rtTexture: { type: "t", value: rtTexture }
                    },
                    vertexShader: document.getElementById('vertex-shader-screen').textContent,
                    fragmentShader: document.getElementById('fragment-shader-screen').textContent,
                });

                var mesh = new THREE.Mesh(geometry, material);

                scene.add(mesh);

                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.autoClear = false;

                container.appendChild( renderer.domElement );
            }

            function render() {
                requestAnimationFrame(render);

                camera.lookAt(new THREE.Vector3(0,0,0));
                rtCamera.lookAt(new THREE.Vector3(0,0,0));

                renderer.render(rtScene, rtCamera, rtTexture, true);
                renderer.render(scene, camera);
            }
        </script>
    </body>
</html>

有什么想法吗？

Answer 1

渲染将渲染目标映射到它的平面时，您正在使用透视相机。这将导致渲染输出的大小根据视野而变化。

例如，如果您将摄像机视野从20减少到10，摄像机将进一步放大，您将获得更加明显的踩踏（因为图像已进一步放大）。同样，增加视野，会缩小并减少步进。

但是，对于本例中的内容，我将使用正交投影作为输出渲染目标的主场景。

三个JS像素化渲染目标？

1 个答案: