javascript - 三个 JS 像素化渲染目标？-6ren

javascript - 三个 JS 像素化渲染目标？

转载作者：行者123 更新时间：2023-11-30 16:05:45

28

4

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

这是我的代码:

<!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>

有什么想法吗？

最佳答案

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

例如，如果您将摄像头的视野从 20 缩小到 10，摄像头将进一步放大，您的步进会更加明显(因为图像已进一步放大)。同样，增加视野会缩小并减少步进。

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

关于javascript - 三个 JS 像素化渲染目标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37079835/

28

4

0

文章推荐： python - 在python中将类对象读/写到dat文件

文章推荐： javascript - 如何通过无限滚动正确地抓取网页？

文章推荐： javascript - AngularJS 在指令中操作父级的 DOM

Python word_tokenize 化
我是 python 的新手。我试图找到我的文本的频率分布。这是代码， import nltk nltk.download() import os os.getcwd() text_file=open(
安卓 fragment 化
我对安卓 fragment 感到困惑。我知道内存 fragment 但无法理解什么是 android fragment 问题。虽然我发现很多定义，比如 Android fragmentation re
wordpress - Docker 化 WordPress
尝试对 WordPress 进行 dockerise 我发现了这个场景: 2个数据卷容器，一个用于数据库(bbdd)，另一个用于wordpress文件(wordpress): sudo docker
javascript - 了解页面是否被 iframe 化
这个问题已经有答案了: From the server is there a way to know that my page is being loaded in an Iframe (1 个回答)
php - 如何 docker 化
我正在玩小型服务器，试图对运行在其上的服务进行docker化。为简化起见，假设我必须主要处理:Wordpress和另一项服务。在Docker集线器上有许多用于Wordpress的图像，但是它们似乎都
jquery - 如何使我的新注册设计表单实现 AJAX 化？
我想要发生的是，当帐户成功创建后，提交的表单应该消失，并且应该出现一条消息(取决于注册的状态)。如果成功，他们应该会看到一个简单的“谢谢。请检查您的电子邮件。” 如果不是，那么他们应该会看到一条适当
c# - 添加元数据以对客户进行 strip 化
就是这样，我需要为客户添加一个唯一标识符。通过 strip 元数据。这就是我现在完全构建它的方式，但是我只有最后一部分告诉我用户购买了哪个包。我试着看这里: Plans to stripe 代码在这
java - 是否可以出于测试目的将类包私有(private)化
我有一个类将执行一些复杂的操作，涉及像这样的一些计算: public class ComplexAction { public void someAction(String parameter
java - 使用自定义打包类型对遗留项目进行 Maven 化
这个问题已经有答案了: maven add a local classes directory to module's classpath (1 个回答) 已关闭10 年前。我有一些不应更改的旧 E
Android 相互 fragment 化
我使用 fragment 已经有一段时间了，但我经常遇到一个让我烦恼的问题。 fragment 有时会相互吸引。现在，我设法为此隔离了一个用例，它是这样的: Add fragment A(也使用 ad
html - 包含号码的OL strip 化
我的 html 中有一个 ol 列表，上面有行条纹。看起来行条纹是从数字后面开始的。有没有办法让行条纹从数字开始？我已经包含了正在发生的事情的片段 h4:nth-child(even) {
html - 主菜单 html 化
如何仅使用 css 将附加图像 html 化？如果用纯 css 做不到，那我怎么能至少用一个图像来做最佳答案这不是真正的问题，而是您希望我们为您编写代码。我建议您搜索“css breadcrum
java - 锁拆分与锁 strip 化
以下是 Joshua 的 Effective Java 的摘录: If you do synchronize your class internally, you can use various te
http - REST 化 URL
在这里工作时，我们有一个框向业务合作伙伴提供 XML 提要。对我们的提要的请求是通过指定查询字符串参数和值来定制的。其中一些参数是必需的，但很多不是。例如，我们要求所有请求都指定一个 GUID 来标
c - 如何对像素数据进行位 strip 化？
我有 3 个缓冲区，其中包含在 32 位处理器上运行的 R、G、B 位数据。我需要按以下方式组合三个字节: R[0] = 0b r1r2r3r4r5r6r7r8 G[0] = 0b g1g2g3g4
javascript - 需要帮助了解如何对网站进行 ajax 化
我最近发现了关于如何使用 History.js、jQuery 和 ScrollTo 通过 HTML5 History API 对网站进行 Ajax 化的要点:https://github.com/br
spring - Camel 化 Spring 启动应用程序
我们有一个 Spring Boot 应用程序，由于集成需要，它变得越来越复杂——比如在你这样做之后发送一封电子邮件，或者在你之后广播一条 jms 消息等等。在寻找一些更高级别的抽象时，我遇到了 apa
android - 指定Google Pay token 化
我正在尝试首次实施Google Pay。我面临如何指定gateway和gatewayMarchantId的挑战。我所拥有的是google console帐户，不知道在哪里可以找到此信息。 priva
azure - AWVERIFY 未进行属性(property)化
昨天下午 3 点左右，我为两个想要从一个 Azure 帐户转移到另一个帐户的网站设置了 awverify 记录。到当天结束时，Azure 仍然不允许我添加域，所以我赌了一把，将域和 www 子域重新指
elasticsearch - Elasticsearch Facet token 化
我正在使用terms facet在elasticsearch服务器中获取顶级terms。现在，我的标签"indian-government"不被视为一个标签。将其视为"indian" "governm

首页

博学

6Ren·AI

商城

javascript - 三个 JS 像素化渲染目标？