Three.js 着色器-纹理闪烁-6ren

Three.js 着色器-纹理闪烁

转载作者：行者123 更新时间：2023-12-04 20:47:05

我是 Three.js 的新手，我认为它很棒。我试图更好地控制将纹理数据移动到着色器，以便我可以主要使用 GPU。我的程序基于 Doob 先生的魔法灰尘示例，但我没有使用粒子，而是使用存储在纹理中的加载模型。我目前遇到了闪烁的问题。下面的代码是闪烁的粗略示例，与我正在做的事情有些接近。如果有人可以帮助我了解我做错了什么或闪烁的来源......我很确定一切都是最新的，就像纹理映射和three.js修订版一样。
非常感谢

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Sample Three.js</title>
    </head>

    <div id="container">
    </div>

    <body>
        <script type="text/javascript" src="./Scripts/three.js"></script>

        <script type="text/javascript">

        //
        // as name suggests - utilty functions mostly from Mr.doob from THREE.FBOUtils
        //
        UtilityFuncs = function() {
            this.textureWidth = 0;
            this.textureHeight = 0;
            this.scene = null;
            this.camera = null;
            this.renderer = null;
            this.material = null;
            this.jsonLoader = null;
            this.jsonModel = null;
            this.loadCount = 0;
        }

        UtilityFuncs.prototype.createScene = function( textureWidth, textureHeight, renderer ) {
            var gl = renderer.getContext();

            if( !gl.getExtension( "OES_texture_float" )) {
                    alert( "No OES_texture_float support for float textures!" );
                    return;
            }

            if( gl.getParameter(gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS) == 0) {
                    alert( "No support for vertex shader textures!" );
                    return;
            }

            var camera = new THREE.OrthographicCamera(-textureWidth/2, textureHeight/2,
                                                      textureWidth/2, -textureHeight/2,
                                                      -1000, 1000);
            camera.position.z = 100;

            // Shader Stuff
            var vertex_shader = [
                "varying vec2 vUv;",
                "void main() {",
                "    vUv = vec2(uv.x, 1.0 - uv.y);",
                "    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
                "} "
            ].join("\n");

            var fragment_shader = [
                "varying vec2 vUv;",
                "uniform sampler2D tPositions;",
                "void main() {",
                "    vec4 pos = texture2D( tPositions, vUv );",
                "    gl_FragColor = pos;",
                "}"
            ].join("\n");

            var material = new THREE.ShaderMaterial({
                    uniforms: {
                        tPositions: { type: "t", value: null }
                    },
                    vertexShader: vertex_shader,
                    fragmentShader: fragment_shader,
                    blending: THREE.NoBlending,
                    depthTest: false,
                    depthWrite: false,
                    side: THREE.DoubleSide
            });

            var plane = new THREE.PlaneGeometry(textureWidth, textureHeight);
            var quad = new THREE.Mesh(plane, material);
            quad.position.z = 0;
            var scene = new THREE.Scene();
            scene.add(camera);
            scene.add(quad);

            this.textureWidth = textureWidth;
            this.textureHeight = textureHeight;
            this.scene = scene;
            this.camera = camera;
            this.renderer = renderer;
            this.material = material;
        }

        UtilityFuncs.prototype.createRenderTarget = function(width, height) {
            var rtTexture = new THREE.WebGLRenderTarget(width, height,
                                            {
                                                wrapS:THREE.RepeatWrapping,
                                                wrapT:THREE.RepeatWrapping,
                                                minFilter: THREE.NearestFilter,
                                                magFilter: THREE.NearestFilter,
                                                format: THREE.RGBAFormat,
                                                type:THREE.FloatType,
                                                // renderbuffer defaults to RGB4
                                                // if stencil & depth false! 
                                                // three.js, setupRenderBuffer::24848 
                                                stencilBuffer: false,
                                                depthBuffer: true
                                            });
            rtTexture.generateMipmaps = false;
            return rtTexture;
        }

        UtilityFuncs.prototype.createFloatTextureFromData = function(width, height, data) {
            var texture = new THREE.DataTexture(
                data,
                width,
                height,
                THREE.RGBAFormat,
                THREE.FloatType,
                null,
                THREE.RepeatWrapping,
                THREE.RepeatWrapping,
                THREE.NearestFilter,
                THREE.NearestFilter
            );

            texture.generateMipmaps = false;
            texture.needsUpdate = true;

            return texture;
        };

        UtilityFuncs.prototype.readFramebuffer = function(renderer, framebuffer, width, height) {
                var gl = renderer.getContext();
                gl.flush();
                if (framebuffer != null)
                    gl.bindFramebuffer( gl.FRAMEBUFFER, framebuffer );
                var rdData = new Uint8Array(width*height*4);
                gl.readPixels( 0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, rdData );
                return rdData;
        }

        UtilityFuncs.prototype.readFloatFramebuffer = function(renderer, framebuffer, width, height) {
                var gl = renderer.getContext();
                gl.flush();
                if (framebuffer != null)
                    gl.bindFramebuffer( gl.FRAMEBUFFER, framebuffer );
                var rdData = new Float32Array(width*height*4);
                gl.readPixels( 0, 0, width, height, gl.RGBA, gl.FLOAT, rdData );
                return rdData;
        }

        UtilityFuncs.prototype.renderToTexture = function(texture, renderToTexture) {
            this.material.uniforms.tPositions.value = texture;
            this.renderer.render(this.scene, this.camera, renderToTexture, false);
        };

        UtilityFuncs.prototype.render = function(texture) {
            this.material.uniforms.tPositions.value = texture;
            this.renderer.render(this.scene, this.camera);
        };

        //
        // start of main routines
        //
        var WIDTH = window.innerWidth,
            HEIGHT = window.innerHeight;
        var texWidth = 4,
            texHeight = 4;
        var container, renderer;
        var start = Date.now();
        var rtTexture, rtTexture2;
        var utilities;
        var rdData, rdData2, ardData, ardData2;

        function launch() {

            container = document.getElementById("container");
            renderer = new THREE.WebGLRenderer({antialias:true});
            renderer.setSize(WIDTH, HEIGHT);
            container.appendChild(renderer.domElement);

            utilities = new UtilityFuncs();

            utilities.createScene( texWidth, texHeight, renderer );

            rtTexture = utilities.createRenderTarget(texWidth, texHeight);
            rtTexture2 = utilities.createRenderTarget(texWidth, texHeight);


            // Create constant color test textures
            var mData = new Float32Array(texWidth*texHeight*4);
            for (var i = 0; i < 8; i++) {
                    mData[4*i] = 1.0; mData[4*i+1] = 0.0; mData[4*i+2] = 1.0; mData[4*i+3] = 1.0;
            }
            magentaTexture = utilities.createFloatTextureFromData(texWidth, texHeight, mData)

            // Create constant color test textures
            var cData = new Float32Array(texWidth*texHeight*4);
            for (var i = 0; i < 8; i++) {
                    cData[4*i] = 0.0; cData[4*i+1] = 1.0; cData[4*i+2] = 1.0; cData[4*i+3] = 1.0;
            }
            cyanTexture = utilities.createFloatTextureFromData(texWidth, texHeight, cData)

            utilities.renderToTexture(cyanTexture, rtTexture);
            rdData = utilities.readFramebuffer(renderer, rtTexture.__webglFramebuffer,
                                               texWidth, texHeight);

            utilities.renderToTexture(magentaTexture, rtTexture2);
            rdData2 = utilities.readFramebuffer(renderer, rtTexture2.__webglFramebuffer,
                                                texWidth, texHeight);

            if (rdData[0] != 0 || rdData[1] != 255 || rdData[2] != 255 || rdData[3] != 255)
                console.log("rtTexture load fail\n");

            if (rdData2[0] != 255 || rdData2[1] != 0 || rdData2[2] != 255 || rdData2[3] != 255)
                console.log("rtTexture2 load fail\n");

            animate();
        }

        var timer = 0;

        function animate() {
            requestAnimationFrame( animate );
            render();
        }

        function render() {
            //
            // copy rtTexture and rtTexture2 between each other
            //

            utilities.renderToTexture(rtTexture, rtTexture2);
            ardData2 = utilities.readFramebuffer(renderer, rtTexture2.__webglFramebuffer,
                                                 texWidth, texHeight);

            utilities.renderToTexture(rtTexture2, rtTexture);
            ardData = utilities.readFramebuffer(renderer, rtTexture.__webglFramebuffer,
                                                   texWidth, texHeight);

            if (timer & 1)
                utilities.render(rtTexture2);
            else
                utilities.render(rtTexture);

            if (ardData[0] != 0 || ardData[1] != 255 || ardData[2] != 255 || ardData[3] != 255)
                console.log("rtTexture fail\n");
            if (ardData2[0] != 0 || ardData2[1] != 255 || ardData2[2] != 255 || ardData2[3] != 255)
                console.log("rtTexture2 fail\n");
            timer++;
        }

        //launch();

        </script>
        <button id="renderButton" onClick="launch()">Render</button>
        <br/>
    </body>
</html>

最佳答案

好吧，如果您更改从以下位置填充纹理的 for 循环，闪烁将停止:

for (var i = 0; i < 8; i++) ==>> for (var i = 0; i < texWidth*texHeight*4; i++)

但我在 chrome 和 firefox 上都不断收到“rtTexture2 失败”。

我发现了另一个错误。线;

if (ardData2[0] != 0 || ardData2[1] != 255 || ardData2[2] != 255 || ardData2[3] != 255)

应该:

if (ardData2[0] != 255 || ardData2[1] != 0 || ardData2[2] != 255 || ardData2[3] != 255)

但我仍然无法摆脱上述错误。

关于Three.js 着色器-纹理闪烁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15077762/

文章推荐： excel - 在 Excel 中复制范围时出现运行时错误 6

文章推荐： llvm 内联 channel 不起作用

具有多个显示上下文的 OpenGL 纹理
我有一个未定义数量的显示上下文，每个都将显示一个纹理。当我调用 glGenTextures 时，我会在所有显示上下文中返回相同的名称。这会起作用吗？即使它们具有相同的名称，它们仍会存储和显示不同的纹理
css - 在物理文本上使用背景图像/纹理？
我在 SVG 中看到过:文本填充是图像而不是颜色；我一直想知道使用 CSS3 是否可以实现这样的事情。我浏览了整个网络，到目前为止只找到了基本上将图像覆盖在文本上的解决方法(请参阅 this ，这对
Webgl:销毁或重用缓冲区/纹理？
我是 WebGL 的新手。 :)我知道顶点数据和纹理不应该经常更新，但是当它们确实发生变化时，首选哪个:- 通过调用 gl.deleteBuffer 销毁先前的缓冲区 (static_draw) 并创
iPhone， float 纹理
我需要将 GL_RGBA32F 作为内部格式，但我在 OpenGL ES 实现中没有得到它。相反，我只得到 GL_FLOAT 作为纹理数据类型。 OES_texture_float 规范没有说明里面的
javascript - Threejs 纹理
当我执行某些几何体的渲染时，我可以在控制台中看到此警告: THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter sho
javascript - 无法渲染到帧缓冲区(纹理)
我正在尝试使用阴影贴图实现阴影，因此我需要将场景渲染到单独的帧缓冲区(纹理)。我无法让它正常工作，因此在剥离我的代码库后，我留下了一组相对简单的指令，这些指令应该将场景渲染到纹理，然后简单地渲染纹理。
XNA .Fbx 纹理
我在 XNA 中使用带有自定义着色器的标准 .fbx 导入器。当我使用 BasicEffect 时，.fbx 模型被 UV 正确包裹并且纹理正确。但是，当我使用我的自定义效果时，我必须将纹理作为参数加
android - Libgdx - 纹理
如果我创建一个 .PNG 1024 x 1024 的纹理并在中间画一个 124 x 124 的圆，它周围是空的，它使用的 RAM 量是否与我画一个 124 x 的圆一样124 x 124 空间上的 1
android - 纹理/顶点的不同索引数组
我试图在 Android 中绘制一个地球仪，为此我使用了 OpenGL。然而，为了让它更容易理解，我将从制作一个简单的 3D 立方体开始。我使用 Blender 创建我的 3D 对象(立方体)，并在我
javascript - 文本的前景图像/纹理
文本本身的背景图像层是否有任何 JS/CSS 解决方案？示例最佳答案检查这个http://lea.verou.me/2012/05/text-masking-the-standards-way/
Swift SpriteKit 纹理
非功能代码: if sprite.texture == "texture" { (code) } 当 Sprite 具有特定纹理时，我正在尝试访问 Sprite 的纹理以运行代码。目前纹理仅在我的
ios - SceneKit 纹理
我正在尝试学习适用于 iOS 的 SceneKit 并超越基本形状。我对纹理的工作原理有点困惑。在示例项目中，平面是一个网格，并对其应用了平面 png 纹理。你如何“告诉”纹理如何包裹到物体上？在 3
three.js - 无法克隆()纹理
基本上，这有效: var expl1 = new THREE.ImageUtils.loadTexture( 'images/explodes/expl1.png' ); this.material
opengl - 如何从帧缓冲区取消绑定(bind)纹理
我正在尝试将各种场景渲染为一组纹理，每个场景都有自己的纹理到应该绘制的位置...... 问题: 创建 512 个 FBO，每个 FBO 绑定(bind)了 512 个纹理，这有多糟糕。只使用一个 FB
configuration - 纹理 protobuf 中的评论？
我正在使用文本 protobuf 文件进行系统配置。我遇到的一个问题是序列化的 protobuf 格式不支持注释。有没有办法解决？我说的是文本序列化数据格式，而不是方案定义。这个问题是有人在某
opengl - 计算着色器不修改 3d 纹理
我想将我的 3D 纹理的初始化从 CPU 移到 GPU。作为测试，我编写了一个着色器将所有体素设置为一个常数值，但纹理根本没有修改。我如何使它工作？计算着色器: #version 430 layou
java - 如何创建 JavaFX 纹理
我可以像这样用 JavFX 制作一个矩形: Rectangle node2 = RectangleBuilder.create() .x(-100) .
iPhone OpenGLES 纹理 - 色带
我在 iPhone 上遇到了 openGL 问题，我确信一定有一个简单的解决方案! 当我加载纹理并显示它时，我得到了很多我认为所谓的“色带”，其中颜色，特别是渐变上的颜色，似乎会自动“优化”。只是为
caching - GORM(纹理)-缓存Blob图片或其他内容
假设我有一个域类 class Profile{ String name byte[] logo } 和一个 Controller : class ImageController {
c++ - 缓存 OpenGL 纹理
我正在开发一款使用 SDL 的 2D 游戏。由于某些系统的 CPU 较弱而 GPU 较强，因此除了普通的 SDL/软件之外，我还有一个使用 OpenGL 的渲染器后端。渲染器界面的简化版本如下所示:

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Three.js 着色器-纹理闪烁