Hello,
I’m attempting to use WebGLRenderTarget to re-create the effects in the Multiple RenderTargets example. Here’s my code snippet to set this up:
// renderer
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
let canvas_parent_div = document.querySelector('#canvas-container');
canvas_parent_div.appendChild(renderer.domElement);
renderer.domElement.id = 'three-js-canvas';
// final scene pass
finalScene = new THREE.Scene();
// normal scene pass
normalScene = new THREE.Scene();
// lighting on the normal scene
const light2 = new THREE.PointLight(0x404040, 1000, 100);
normalScene.add(light2);
// render target for normal scene
rtNormal = new THREE.WebGLRenderTarget(
innerWidth,
innerHeight,
{
count: 2,
minFilter: THREE.NearestFilter,
magFilter: THREE.NearestFilter,
format: THREE.RGBAFormat,
type: THREE.FloatType, // use float type instead of the default unsigned-byte type to avoid blocky worldPos textures
}
);
rtNormal.textures[ 0 ].name = 'color';
rtNormal.textures[ 1 ].name = 'worldSpacePosition';
console.log(rtNormal);
console.log(rtNormal.textures);
......
However, in the debug console, I got the following error:
index.js:68 Uncaught TypeError: Cannot read properties of undefined (reading '0')
at init (index.js:68:22)
at index.js:245:1
Looks like my textures are not there. I’ve looked up the docs but haven’t had any luck on figuring out what went wrong. Any help is appreciated. Thanks!
