How to bake RectAreaLight into texture?

Questions
21

i tried it. No effect.
that code:

wallData.forEach((data) => {

    const camera = new OrthographicCamera;

    camera.left = data.left;
    camera.right = data.right;
    camera.top = data.top;
    camera.bottom = data.bottom;

    camera.rotation.copy(data.euler);
    camera.translateZ(data.offset);
    camera.updateProjectionMatrix();
    camera.updateMatrixWorld();

    const renderTarget = new WebGLRenderTarget(width, height, {
        minFilter: LinearFilter,
        magFilter: LinearFilter,
        format: RGBAFormat,
        generateMipmaps: true
    })

    renderer.setRenderTarget(renderTarget);
    renderer.clear();
    renderer.render(scene, camera);
    renderer.setRenderTarget(null);

    const buffer = new Uint8Array(width * height * 4);

    renderer.readRenderTargetPixels(renderTarget, 0, 0, width, height, buffer);

    renderTarget.dispose();

    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    let imageData = new ImageData(new Uint8ClampedArray(buffer), width, height);

    ctx.putImageData(imageData, 0, 0);
    ctx.scale(1, -1);
    ctx.drawImage(canvas, 0, -width);

    imageData = ctx.getImageData(0, 0, width, height);

    ctx.putImageData(imageData, 0, 0);

    return canvas;
})

maybe Iā€™m missed somethingā€¦

22

For now, I set FloatType as the type for renderTarget, and after reading the pixels, converted it to Uint8Array.
Additionally the magFilter and minFilter properties of the resulting CanvasTexture set to LinearFilter.

image
image1920Ɨ1083 26.2 KB

Now it looks better, but still ugly .
Thanks to everyone for your valuable advice :handshake:

4 Likes
23

Looks very good.

24

Try add to your renderTarget options type: HalfFloatType
Upd: Sorry, I didnā€™t read everything.. But it`s better to set HalfFloatType rather than FloatType, because FloatType may not be supported on some devices, particularly phones.
However, try using the renderTarget texture directly. Perhaps it wasnā€™t working because of the wrong texture type.

    const renderTarget = new WebGLRenderTarget(width, height, {
        minFilter: LinearFilter,
        magFilter: LinearFilter,
        format: RGBAFormat,
        type: THREE.HalfFloatType
    })
...
    wallMaterial.map = renderTarget.texture