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.
