Capturing the image/snapshot of the renderer #65
Description
Hi!
Is there any way I can draw the image of a renderer, sort of like capturing/taking a screenshot of the render?
I need to port some code from ThreeJS to Flutter that looks like this:
renderer.setSize(texture.image.width, texture.image.height);
const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(...);
const mesh = new THREE.Mesh(
new THREE.PlaneGeometry(texture.image.width, texture.image.height),
new THREE.MeshBasicMaterial({ map: texture })
);
scene.add(mesh);
renderer.render(scene, camera);
const canvas = document.createElement('canvas');
canvas.width = ...;
canvas.height = ...;
const context = canvas.getContext('2d');
// perform various operation on the context, such as translate, rotate, scale, etc
context?.drawImage(renderer.domElement, 0, 0);I could use the code found here: https://github.com/Knightro63/three_js/blob/main/examples/lib/terrain/webgl_geometry_terrain.dart#L130 to construct an ImageElement that I can pass to a CanvasTexture. However in order to create an ImageElement I need an Uint8Array object. So my question would be: is there any way to obtain an Uint8Array object that represents the rendered scene (i.e.: the "screenshot" of the scene)?