Tiler3D-HTML5

This application requires a (fast) HTML5 compliant browser.
min rows: min cols: max extra rows: max extra cols: max transition time (ms): double Axis

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.

Watch Tiler3D in action.

Hope you liked it.

Images are under Creative Comons License by jasonhill and luhaiwong

  • Iker Jamardo Zugaz

    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!

    • hyperandroid

      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 .

  • Benjamin

    > 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).

    • hyperandroid

      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.

  • PKV

    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

    • hyperandroid

      You are welcome.
      Thanks for your kind comment ;) .

  • http://digizaal.nl dirk digizaal

    w7 ie9 works!! and is even faster

  • Shankarmca009

    Super Super

  • http://twitter.com/noeliasfranco Noelia Franco ツ

    Really cool! Thanks!

  • http://www.facebook.com/baron.adi Adi Baron

    can this be downloaded ?