Split Image into Particle Tiles

I try to split an image into a lot of particles and then animate them.

Currently I managed to come up with this demo: https://jsfiddle.net/btearxsz/1/

This works quite ok on my machine, but I would need something around rowCount=70, and columnCount=80, so around 6000 particles. But my attempt doesn’t work, and I would need to optimize performance. Could anyone point me in the right direction?

Using of shaders with attributes can help :slight_smile:

There was a similar question a while ago Pixelizing objects in 3d scene


Yes I heard that before, but could you paste some code how to do that?

Take a look at the @MateuszWis’s reply :slight_smile:

That’s actually not the same thing. It’s easy to give each particle one color, I know how to do that, and make it performant. But problem is, that each particle shows a part of an image, and how to make this performant is the question.

Anyway, using of shaders with custom attributes does the trick :slight_smile:
Based on some parts of @MateuszWis’s example :


Thank you very much! This is awesome!

I also start to understand what I have no idea about, and it is shaders. Do you have a good starting point, where I can learn how to create custom shaders, since they are awesome and really powerful :wink:

You can find several posts from @pailhead here :slight_smile:
Also, one of very good ones is this, from @Mugen87: Points transparent textures depth artifacts (soft particles) - #21 by Mugen87
Yeah, and “The Book of Shaders”,of course :slight_smile:

When I understood correctly, non-uniform scale is not possible for points. But it should still be possible to change the points that are squares at the moment to rectangles. This would probably also be done with custom attributes in the shader? (I am currently catching up with the whole shader thematic)

Just an option: Multiple textures with instanced geometry


That was me asking the same question on stackoverflow, and I can approve this answer.