Display many thousand images in three.js

Question

I have up to 200'000 individual images in a scene (done with sprites, so far). I want to look at these sprites, and when I fly around they should always face the camera (as sprites do). My question is: How can I achieve the best performance WebGL-wise? Are Sprites with useScreenCoordinates:false rendered as with GL_POINT? At the moment the fps drops with very low image counts already. I'm using mipmapping and sprites so far. And since they need to turn around to face me I didn't want to use BufferGeometry..

I'd highly appreciate some ideas and inputs :) Thanks!

PS: Point of it all is that you can "fly" through 200'000 images and stop/select the ones you figure to be interesting

Answer 1

My team needed to accomplish this too, and sadly Doidel's notes trail off before the project is completed. We developed PixPlot, a three.js visualization layer for images:

I put together a blog post outlining the details here: http://douglasduhaime.com/posts/visualizing-tsne-maps-with-three-js.html

In short, if others face this problem, you'll want to create one geometry (ideally) with one large image atlas (a single jpg of size 2048px by 2048px containing lots of smaller images) serving as the texture for the geometry. Add vertices, faces, and vertexUV's for each of the little images to display, and pull each image from the atlas texture.

Answer 2

Used tons of techniques and stuff, I'll be writing about it on http://blogs.fhnw.ch/threejs/ once I got it all working