This gallery showcases a number of scenes created with WebShader, that will run within any WebGL enabled browser.  Click the thumbnail image to view the scene.  

WebShader Gallery: Fur Ball

Fur Ball

A build up of expanding shells surrounding an initial object gives the appearance of fur.  Offsetting the texture coordinates based on time allows the fur strands to move as if blowing in the wind.  The published version of this scene is available here.

WebShader Gallery: Sea Bubbles

Sea Bubbles

This scene shows a number of ascending reflective translucent bubbles, along with a slightly shimmering background.  Use the mouse to manually rotate the scene to get a different perspective of the flowing bubbles.

WebShader Gallery: Soap Bubble

Soap Bubble

This scene shows varying reflection and refraction effects based on the animated attributes of a soap bubble.  The bubble is rotatable, and the light source follows the position of the mouse.

WebShader Gallery: 2D Fluid Flow

2D Fluid Flow

Use the mouse to add bursts of simulated fluid to a 2D container.  The added fluid flows will automatically dissipate once the mouse button has been released.

WebShader Gallery: Volumetric Isosurface

Volumetric Isosurface

Using the same simulated volumetric data set below, this scene dynamically creates an isosurface in realtime based on the volumetric density.  Change the selected density by moving the mouse horizontally.  Adjust the amount of lighting used by moving the mouse vertically.  As before, the object can also be manually rotated.

WebShader Gallery: Simulated Volume Mapping

Simulated Volume Mapping

This scene utilizes a simulated volume mapping technique to show the various layers of a 3D medical scan.  Move the mouse over the scene to adjust the visibility of the layers.  The object can also be manually rotated.

WebShader Gallery: Environment Mapping

Environment Mapping

A reflection map and an environment cubemap get used to simulate a varying reflective surface.  An extra rendering pass has been inserted to add a skybox using the same environment map.

WebShader Gallery: Normal Mapping

Normal Mapping

Similar to the Texture Mapping demo below, but with a modified lighting model to include the use of a normal map applied to the object.

WebShader Gallery: Texture Mapping

Texture Mapping

This scene shows Phong Illumination applied to a texture mapped object with a single light source.  The object is rotatable, and the light source follows the position of the mouse.

All product names are trademarks or registered trademarks of their respective holders.