Performant ways to render many images on planes in a scene

Hi!

You can use GreasedLine for this:

5000 images in 1 draw call. The texture atlas is created dynamically at startup. It loads 16 random 64x64 images from an API. I takes a while to download them.

Without BILLBOARD_MODE:

I had to make a change to the GreasedLineMesh class. It’s in draft and not merged yet but you can try out in the playground snapshot created from the pull request:

500 images version:

1500 images version:

You should propably initialize the mesh in lazy mode when dealing with large number of line segments in GRL (just add these two lines)

Non camera facing version of GreasedLineMesh:

This is just a POC not a final solution.

Some parameters you might want to try to change:

    const TEXTURE_ATLAS_IMAGE_COUNT = 16
    const TEXTURE_ATLAS_WIDTH = 64 * TEXTURE_ATLAS_IMAGE_COUNT
    const TEXTURE_ATLAS_HEIGHT = 64

    const IMAGE_MIN_X = -20
    const IMAGE_MAX_X = 20
    const IMAGE_MIN_Y = -20
    const IMAGE_MAX_Y = 20
    const IMAGE_MIN_Z = -80
    const IMAGE_MAX_Z = 0

    const IMAGE_COUNT = 1500

    //

    mesh.billboardMode = BABYLON.Mesh.BILLBOARDMODE_ALL

    scene.onBeforeRenderObservable.add(() => {
        mesh.rotate(BABYLON.Axis.Z, 0.01 * scene.getAnimationRatio())
    })

You can use points offsets to transform each image separatelly ofcourse and to use everything what GRL supports (color modes, tintig, dashes, …)

I will propose a Texture Atlas feature to the BJS team for building atlases dynamically, Link will be added here afterwards.

:vulcan_salute: