Most impressing HTML5 with WebGL demonstrations

Date: 12th Oct 2011 Author: admin 1 Comment
Posted in: HTML5, resources |Tags: , , ,

Most impressing WebGL demonstrations

What is WebGL? This is new modern software library that extends the JavaScript language to allow it to generate real interactive 3D graphics into compatible web browser. WebGL supported by many new web browsers, such as Google Chrome, Mozilla Firefox (from v4.0), Safari. Today I prepared new collection of interesting HTML5 examples made with WebGL. Sure that you will able to pick new ideas to self here.


1. Lighting and Lee Perry-Smith’s head

Another one 3D head in good quality.
aerotwist

2. Dynamic Light Demo

Here we see the strolling man, and at the same time themselves can walk along the corridor.
CopperLicht

3. Cubed

Simple and nice little rolling ball game from Daniel Rapp
Cubed

4. Snake

Infinitely crawling snake.
Snake

5. Denied

This is a visualisation of the hosts.deny report generated for that website (of demo).
Denied

6. WebGL Water Simulation

A pool of water rendered with reflection, refraction, caustics, and ambient occlusion. The pool is simulated with a heightfield and contains a sphere that can interact with the water’s surface.
WebGL Water

7. Endless Forest

Running through endless forest.
Endless Forest

8. BoxDemo

25 boxes are stacked on each other to form a wall. Tear the wall down using the mouse or shoot spheres at it to see it fall.
BoxDemo

9. Traveling Wavefronts

Very interesting graphic visualization: extended Reaction-Diffusion system. A final representation shader recolors the red color patch and takes it as a height map for the lighting too.
Traveling Wavefronts

10. Undulating Monkey

Face of monkey with vertex positions using WebGL.
Undulating Monkey


Conclusion

I quite sure that in coming future we will see more and more interesting projects with WebGL and HTML5, just because this giving you great possibilities. Hope that our new collection was really interesting for you. Good luck!

Enjoyed this Post?

If you enjoyed this article, feel free to share our tutorial with your friends.
    Tweet
   
   

Stay connected with us:

  1. 網站製作學習誌 » [Web] 連結分享 on October 15, 2011 at 5:39 am

Leave a Reply

Your email address will not be published. Required fields are marked *

*

CAPTCHA Image
Refresh Image

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>