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