Tiler3D is in fact an odd way to perform image transitions. Each image will be turned into a 3D swarm of flying tiles which will end up showing the next image.
It is my first try into html5, enough to realize that you should better see Tiler3D with Chrome browser. Other browsers either tends to draw visual artifacts between a quad’s adjacent triangles, giving an unpolished appearance or fails to play the animation (I guess it’s when a 0 pixel polygon must drawn).

The controls are used to set up the number of tiles by dividing the images in a 3d grid. The system will set-up from at least min rows/columns to randomly up to min_rows+max_extra_rows/min_columns+max_extra_columns.
Max transition time controls the maximum time an individual tile will take to transize from image A to image B.
The double axis checkbos will control whether the Tiler will avoid rotating the tiles as a whole.

Tiler3D live demo:


Video of Tiler3D in action, just In case you were unable to see it:

Hope you liked it.

Images are under Creative Comons License by jasonhill and luhaiwong

11 thoughts on “Tiler3D-HTML5”

  1. Nice work!

    Just a pitty the HTML5 implementation in multiple browsers is still not as good as it should (hopefully it will improve over time and get standarized).

    It’s nice to see these effects come back!

    Keep up the great job!


    1. Sure. By now, only Chrome and Opera are suitable browser to see those processor-intensive eye-candy-html5-lets.
      In fact, nothing new under the hoods, the canvas capabilities are not worth fifteen-years-old- good-c/c++-demoscene-coding 😉 ( try { impatiently waiting for web-gl canvas capabilities } catch(bored-exception) {} ).
      Thanks for your comment, hope to see u again :D.


  2. > Firefox 3.6 also tends to draw visual artifacts between a quad’s adjacent triangles, giving an unpolished appearance

    Isn’t that Firefox and the others used antialiased clipping while Chrome does not support it? It could simply be you are not using correct coordinates for your quads (I get the same artifact with QtWebKit, Firefox and Safari).


    1. Hi Benjamin, maybe you’re right. In fact, I’ve tried to force projected coords and/or uvs’ into integers by issuing Math.floor, as well as leaving them with decimals and forcing them to be half way (in .5). But nothing has worked for me (maybe i’ve been doing it all wrongly ?). I’m right now implementing env mapping (by using the average normal on vertex) and same thing happens. I’d thank a lot if you could point me out in the right direction I’m not able to solve that myself :(.
      Thanks for your comment. Hope to see u again.


  3. You made some excellent points there. I did a search on the topic and almost not got any specific details on other sites, but then happy to be here, seriously, thanks.

    – Lucas


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s