Fluid Simulation

http://www.byronknoll.com/smoke.html

This is a simulation of the Navier-Stokes equations. The implementation is based on this paper:

Stam, Jos (2003), Real-Time Fluid Dynamics for Games

Unfortunately the simulation turned out to be very slow, so my demo has a tiny grid size.

Normal Mapping

I made a HTML5 shader using normal mapping: http://www.byronknoll.com/dragon.html.

I made this based on a demo by Jonas Wagner. I actually found some mistakes in the underlying math in Jonas Wagner's demo, which I fixed in my version.

I got the dragon model here. I rendered the dragon using Blender. Here is the texture and normal map:



I now have a gallery of the HTML5 demos I have made: http://www.byronknoll.com/html5.html

Redesign

I just updated my homepage with a new CSS layout. Let me know if you see any issues or have suggested improvements.

Deformable Textures in HTML5 Canvas

Inspired by this HTML5 demo, I decided to try to add a texture to the HTML5 blob I made earlier. Here is my attempt: http://www.byronknoll.com/earth.html



Initially I was stuck because it is too slow to actually manipulate and render individual pixels to HTML5 canvas. In order to get a decent framerate you need to either use vector graphics or render chunks of a raster image using drawImage(). My breakthrough came when I read this stack overflow thread. Using the transform() method, you can perform a linear transformation on regions of a raster image. I split up the image of earth into pizza slices and mapped each slice onto the blob with the appropriate transformation (to match up with the boundary vertices of the blob). Seems to work well and even has a decent framerate on my phone.