Schmetterling (Butterfly) [no WebGL, depth sorting]

Hi community!

Picture:

Video:

DEMO: https://codepen.io/prisoner849/full/LYJLydX

Here is an attempt to apply the sorting by depth (far->close), comparing z-value of objects’ positions in camera space.

PS Music for better perception is at the top-left corner :innocent:

9 Likes

It’s beautiful and runs smoothly.

A nice optimization would be to preserve the renderList and recreate it only if there is a change in the scene hierarchy.

A somewhat relevant material. It is rather old, published 8 ears ago, so it might not be working nowadays.

Z-Buffering in HTML5 Canvas, without iterating over pixels

I’m not sure whether the approach in the link is sufficiently performant. At least it provides a nice stimulus for a thought exercise.

2 Likes

Cool experiment!

Runs smooth as butter(fly) on my old crappy phone. :yum:

1 Like