Utilizing A-Frame and Three.JS, my goal is to render to a WebGLRenderTarget and generate a material based on its texture. Here's a snippet of the code:
var targetPlane = new THREE.Mesh(
new THREE.PlaneBufferGeometry(2, 2),
new THREE.MeshBasicMaterial({color: 'blue'})
);
targetPlane.position.set(-2, 1, -2);
scene.add(targetPlane);
var redPlane = new THREE.Mesh(
new THREE.PlaneBufferGeometry(2, 2),
new THREE.MeshBasicMaterial({color: 'red'})
);
redPlane.position.set(2, 1, -2);
scene.add(redPlane);
var myCamera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);
myCamera.position.set(2, 1, 0);
scene.add(myCamera);
var myRenderer = new THREE.WebGLRenderer();
myRenderer.setSize(200, 200);
myRenderer.render(scene, myCamera);
var renderTarget = new THREE.WebGLRenderTarget(200, 200, {minFilter: THREE.LinearFilter,
magFilter: THREE.NearestFilter});
myRenderer.setRenderTarget(renderTarget);
myRenderer.render(scene, myCamera);
targetPlane.material = new THREE.MeshBasicMaterial({map: renderTarget.texture});
renderer.render(scene, camera);
After running the above code, I noticed that the result was just a blank white material even though the camera settings were correct. Surprisingly, this alternative code proved to be effective:
myRenderer.setRenderTarget(null);
myRenderer.render(scene, myCamera);
img.src = myRenderer.domElement.toDataURL();
To showcase this issue and solution, I created a fiddle.