I am currently implementing a custom texture using a WebGLRenderTarget. My goal now is to directly draw the resulting renderTarget.texture onto the canvas, without having to add it to a plane first.
The motivation behind this approach is that my camera is constantly orbiting and moving. I want the texture to stay fixed in the top-right corner like a billboard, without lagging behind.https://i.sstatic.net/Qvzn3.jpg
This is what my pseudo-code looks like:
// Create renderer 1
var renderer1 = new THREE.WebGLRenderer();
renderer1.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer1.domElement);
// Create renderer 2
var renderer2 = new THREE.WebGLRenderer();
renderer2.setSize(100, 100);
document.body.appendChild(renderer2.domElement);
var renderTarget = new THREE.WebGLRenderTarget(100, 100);
// Create texture for renderTarget
renderer1.render(textureScene, ortoCam, renderTarget, false);
// Render textureScene on the second renderer to visualize texture
renderer2.render(textureScene, ortoCam);
// Render the rest of the scene with a dynamically moving camera perspective
renderer1.render(scene, perspCam);
This solution functions as intended but seems somewhat inefficient since it requires creating an additional renderer to accommodate a 100x100 canvas. Is there a way to access the renderTarget.texture and overlay it on the first canvas so that the use of a secondary renderer can be avoided? I need the renderTarget output to generate height maps while also displaying it in a billboard style at the top-right corner.
Update: I attempted to create a 2D canvas context and utilize
context.drawImage(this.renderTarget.texture.image, 10, 10, 20, 20);renderTarget.texture.image returns undefined. Any insights into why I'm unable to retrieve image data from it?