[虽然使用THREE.WebGLRenderTarget将场景渲染为纹理并将该纹理传递给第二个着色器,但是在Shader纹理统一变量中接收的值始终为null。
代码流:
相关代码段:
//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 );
}
我无权访问您的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
});