@woosh/meep-engine/src/engine/graphics/util/renderObjectToSampler2D.js

Pure JavaScript game engine. Fully featured and production ready.

import { LinearFilter, RGBAFormat, WebGLRenderTarget } from "three";
import AABB2 from "../../../core/geom/2d/aabb/AABB2.js";
import Vector2 from "../../../core/geom/Vector2.js";
import { WebGLRendererPool } from "../render/RendererPool.js";
import { makeMeshPreviewScene } from "./makeMeshPreviewScene.js";

/**
 * Renders a given object to sampler, framed exactly form the front. Additional focus parameters can be supplied to adjust the framing
 * @param {Sampler2D} target
 * @param {THREE.Object3D|THREE.Mesh} mesh
 * @param {THREE.WebGLRenderer} [renderer]
 * @param {AABB2} [focus]
 * @returns {{render:Function,dispose:Function}}
 */
export function renderObjectToSampler2D(target, mesh, renderer, focus = AABB2.unit) {
    const size = new Vector2(target.width, target.height);

    let used_pool_renderer = false;

    if (renderer === undefined) {
        renderer = WebGLRendererPool.global.get();
        renderer.setClearColor(0xffffff, 0);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(size.x, size.y);

        used_pool_renderer = true;
    }
    //render
    const renderTargetOptions = {
        minFilter: LinearFilter,
        magFilter: LinearFilter,
        format: RGBAFormat,
        stencilBuffer: false,
        depthBuffer: true,
        generateMipmaps: false
    };
    const renderTarget = new WebGLRenderTarget(size.x, size.y, renderTargetOptions);

    const preview = makeMeshPreviewScene(mesh, size, focus);
    const scene = preview.scene;
    const camera = preview.camera;

    //flip camera upside-down to account for how image is flipped when reading it from render target
    camera.rotation.z = Math.PI;


    function render() {
        const _state_rt = renderer.getRenderTarget();

        renderer.setRenderTarget(renderTarget);

        renderer.render(scene, camera);

        /**
         *
         * @type {WebGLRenderingContext | CanvasRenderingContext2D}
         */
        const gl = renderer.getContext();

        gl.readPixels(0, 0, target.width, target.height, gl.RGBA, gl.UNSIGNED_BYTE, target.data);

        // restore renderer state
        renderer.setRenderTarget(_state_rt);
    }

    function dispose() {
        renderTarget.dispose();

        if (used_pool_renderer && renderer !== null) {
            // released renderer back into the pool
            WebGLRendererPool.global.release(renderer);

            renderer = null;
        }
    }

    return {
        render,
        dispose,
        scene,
        camera
    }
}