WebGLRenderTarget:着色器纹理均匀的空纹理

问题描述 投票:1回答:1

[虽然使用THREE.WebGLRenderTarget将场景渲染为纹理并将该纹理传递给第二个着色器,但是在Shader纹理统一变量中接收的值始终为null。

代码流:

  1. Shader1用于renderDepthMap(在屏幕上渲染时可以正常工作)
  2. 渲染的depthMap作为纹理统一传递到shader2,该shader2最终在屏幕上渲染。

相关代码段:

//Initialize the renderTarget
var options = {

                minFilter : THREE.LinearFilter,
                magFilter : THREE.LinearFilter,
                format : THREE.RGBAFormat,
                type : /(iPad|iPhone|iPod)/g.test(navigator.userAgent) ? THREE.HalfFloatType : 
                        THREE.FloatType
            };

    renderTarget1 = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, 
                                   options);
    renderTarget1.stencilBuffer = false;
    renderTarget1.texture.needsUpdate = true;
    renderTarget1.texture.generateMipmaps = false;

    //Define the Shader2 uniforms
        uniforms = {
                     depthMap : { type: "t", value: renderTarget1.texture},
                     O_SIZE : { type: "float", value: 0.000375},
                   };

        //Creating Material for Shader2
        materialShader2 = new THREE.ShaderMaterial({
                            uniforms: uniforms,
                            vertexShader : document.getElementById('vertex2_Shader').textContent,
                            fragmentShader : document.getElementById('fragment2_Shader').textContent
                          });


    materialShader2.needsUpdate = true;


    //Animate function
    function animate()
    {
        // render depth map in renderTarget1
        renderer.setRenderTarget(renderTarget1); //setting render target
        renderer.render(sceneDepthMap, shadowCamera); // rendering depthmap to framebuffer
        renderer.setRenderTarget(null);
        renderer.render(scene2, shadowCamera);
        requestAnimationFrame( animate );
    }
three.js shader
1个回答
0
投票

我无权访问您的GLSL着色器代码,但是您确定统一名称相同吗?应该为uniform sampler2D depthMap;,注意大小写。同样,您不再需要在制服中声明type: "t",引擎会根据其值自动检测到它。

第二,如果要获得渲染的深度纹理,则需要将WebGLRenderTarget.depthTexture设置为纹理,然后将其用作统一值:

var renderTarget1 = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);
renderTarget1.depthTexture = new THREE.DepthTexture(
    window.innerWidth,
    window.innerHeight
);


var materialShader2 = new THREE.ShaderMaterial({
    uniforms: {
        // Notice uniform name, depthTexture and no type
        depthMap : { value: renderTarget1.depthTexture},
        O_SIZE : { value: 0.000375},
    },
    vertexShader : document.getElementById('vertex2_Shader').textContent,
    fragmentShader : document.getElementById('fragment2_Shader').textContent
});
© www.soinside.com 2019 - 2024. All rights reserved.