Display thousands of pictures on a 3D map

Hi,

Thanks for this awesome library !! :slight_smile:

I’m a beginner with babylon.js and with 3D in general.

I have a side project where I need to display at least 10 000 differents pictures.

Descriptions

  • All pictures are positioned with x and y.
  • The z axis is only used to avoid superposition between picture, it’s a random float between 0 -> 10.
  • Once picture are positioned, they never moved.
  • I position my camera to (0, 0, -200) and I can zoom in/out and right/left bottom/up between all pictures.
  • The user can zoom on each picture if he want.
  • All pictures can be displayed at the same time if I zoom out.
  • If the user click on a picture, I display some information about the corresponding image.
  • the user can search for a tag, and I color the corresponding picture
  • Pictures have a resolution of 128, and are concatenated by 1000 in one big pictures of 3.6 Mo. To avoid load time.
  • I have a JSON which contains the list of all pictures, with:
    – Coords x, y, z.
    – The url of the big picture.
    – The coords in pixel of the corresponding part in the big picture.
    – Tags

I’ve tried different solutions:

  1. Big mesh with dynamic texture
  • 10 big mesh, position at (0, 0, [0, 1, …, 10]), with a resolution equal to the max of possible picture coordinates.
  • In each mesh I have a material with dynamic texture and useAlpha=true.
  • Then I draw each image in the texture.
  • That’s work.
  • But it’s difficult to detect a click on a picture.
  • And it’s difficult to colorise a specific picture.
  • And the render quality is not satisfying
  1. One mesh by picture
  • One mech by picture.
  • The mesh is a clone of an origin one. They have all the same size.
  • For each, one dynamic texture where I draw a part of the big picture.
  • Tried with mipmaps=true and false.
  • That works, I can click on picture
  • The render is good.
  • With diffuseColor='red' I can colorise a specific mesh correspond to the tag, the user have searched
  • But … it is really slow (less than 10 fps).
  • I understand Babylon have to call a draw for each visible mesh.
  1. The same as 2
  • But instead of using concatenated picture, I used a compressed file by picture (-dxt.ktx) with mipmaps generated.
  • But there is not a visible difference on fps.
  • And the loading time is way too long.

Questions time :wink: :

  • Is there a solution I’ve not tried ?
  • Or some improvement
  • Or may be, I’m not using the right library for what I want to do.

Thanks in advance for your advices

Did you check the Solid Particle System - Babylon.js Documentation ? I guess this could be a good option

Generally speaking I will encourage you to reduce the number of textures as much as you can by grouping them

I’ve already checked, but the first time I didn’t understand how to have different material and textures for particles each particles.
That’s why I didn’t test deeper.

But after your message, I check again, and discover the concept of group texture and the use of particle.uvs.
So now I’ve created one big Texture, and one SPS by big picture.

Then use uvs to select the good part of texture for each particles.

And now I can display 30 000 images at 60 fps !! :slight_smile: Awesome !!

I have now a problem with memory if I display more pictures, but 30 000 is enough.

Thanks a lot for your advice !!

1 Like

Glad that it helped!!
Please share your demo / app when you can!

This sounds really cool !

1 Like