GPU Acceleration and WebGL

 

cdl_capture_2011-06-08-03_ 000

Aquarium

By Human Engines and Gregg Tavares
Technology: JavaScript, WebGL
Link: http://webglsamples.googlecode.com/hg/aquarium/aquarium.html
What is it?
Immerse yourself in a beautiful aquarium full of fish, sharks and coral.  This demo features 3D models with high-quality textures, scene animation, pixel shader animation, reflections, refraction and caustics.  Use the control panel on the left to set the number of fish and change camera views. (Fun hint: Hit "L" when the demo is running)


Wall of Photos

By Cooliris
Technology: JavaScript, WebGL, Google Image Search API
Link: http://cooliris-wall.appspot.com
What is it?
Cooliris has brought its immersive 3D image browsing experience to WebGL. Cooliris also took advantage of the pixel shaders available in WebGL to add per pixel, glossy highlights as users scroll through images.  Enter a search query to view Google Images results in the revolutionary interface. Navigate left and right by using your mouse to navigate horizontally along the wall. If you have a track pad on Mac, be sure to check out two-finger scrolling. Simply click on an item to view it in a beautiful, high-resolution display.

Collectibles Painter

By Human Engines

Technology: JavaScript, WebGL, 2D Canvas
Link: http://webglsamples.googlecode.com/hg/collectibles/index.html
What is it?
Collectibles Painter is a WebGL based collectible figure designer that allows you to create your own personal toy collectible with paint, decals, and materials. You can then share your favorite creation with your friends. Choose from 10 different skin tones, faces, hair styles, clothing tops, clothing bottoms, and stickers. Graphics effects include: Environment-based lighting, a single-pass shader effects, soft shadows using PCF filtering and texture based projection for stickers.

Field
By Gregg Tavares
Technology: JavaScript, WebGL
Link: http://webglsamples.googlecode.com/hg/field/field.html

What is it?

Watch the wind sweep across 1000s of blades of grass on rolling hills.  This demo uses pixel shaders to create a realistic wind and depth-of-field effects across many procedurally drawn patches of grass.  Use the control panel on the left to set the amount of grass and press the asterisk to adjust advanced controls like depth-of-field and sway parameters.

Leave a comment