Engagement/Developer Engagement/Grab bag/WebGL: Difference between revisions
< Engagement | Developer Engagement | Grab bag
Jump to navigation
Jump to search
(Created page with "WebGL is the web port of OpenGL, a technology that allows for 3D gaming and animations on the web.") |
No edit summary |
||
| Line 1: | Line 1: | ||
WebGL is the web | WebGL is the 3D equivalent of canvas. It is hardware accelerated and allows you to create 3D animations and games in the browser. WebGL is the web version of OpenGL which is used to create desktop games. This means a lot of talent from the games industry can now come to the web without having to learn a new skill. The introduction of WebGL to the browser gave us a few new tricks like indexed arrays which allow for heavy computation in JavaScript using the GPU instead of the main CPU. | ||
Issues with WebGL | |||
* Programming WebGL is a different skill set from web development and the learning kerb might be a bit high for people. Libraries like [https://github.com/mrdoob/three.js/ three.js] make things much easier but it still is a switch from a 2D to a 3D world. | |||
* [https://www.dropbox.com/s/6asiwy65c9mfryp/webgl.mp4 WebGL screencast(MP4)] showing various demos from [http://alteredqualia.com/ Alteredqualia] | |||
* [http://www.stickmanventures.com/labs/demo/webgl-threejs-morph-target/ Ginger] is a great example for facial expressions in WebGL [http://cf.cdn.vid.ly/7y3w5q/webm.webm webm] [http://cf.cdn.vid.ly/7y3w5q/mp4.mp4 mp4] [http://cf.cdn.vid.ly/7y3w5q/ogv.ogv ogv] | |||
* The [http://alteredqualia.com/three/examples/webgl_materials_skin.html Skin renderer in WebGL] looks pretty creepy but also very impressive. [http://cf.cdn.vid.ly/2s7y3e/webm.webm webm] [http://cf.cdn.vid.ly/2s7y3e/mp4.mp4 mp4] [http://cf.cdn.vid.ly/2s7y3e/ogv.ogv ogv] | |||
* The [http://mozillalabs.com/blog/2011/09/we-got-the-winners winners of the Mozilla Demoparty Competition] are great examples of what can be done with WebGL | |||
* The [https://github.com/mrdoob/three.js/#readme three.js demo site] has a lot of great demos of both 2D and 3D examples using the library. | |||
* [http://bodybrowser.googlelabs.com/ Body Browser] - Google took a 3D model of the human body and built a maps-style interface to it in WebGL [http://cf.cdn.vid.ly/1c5x1n/webm.webm webm] [http://cf.cdn.vid.ly/1c5x1n/mp4.mp4 mp4] [http://cf.cdn.vid.ly/1c5x1n/ogv.ogv ogv] | |||
* Evan Wallace has some very cool WebGL demos. One of them is a [http://madebyevan.com/webgl-water/ Water simulation] [http://cf.cdn.vid.ly/7i1v8e/webm.webm webm] [http://cf.cdn.vid.ly/7i1v8e/mp4.mp4 mp4] [http://cf.cdn.vid.ly/7i1v8e/ogv.ogv ogv] and another is a [http://madebyevan.com/webgl-path-tracing/ path tracing demo] [http://cf.cdn.vid.ly/6x2q3v/webm.webm webm] [http://cf.cdn.vid.ly/6x2q3v/mp4.mp4 mp4] [http://cf.cdn.vid.ly/6x2q3v/ogv.ogv ogv] | |||
Revision as of 09:43, 14 July 2014
WebGL is the 3D equivalent of canvas. It is hardware accelerated and allows you to create 3D animations and games in the browser. WebGL is the web version of OpenGL which is used to create desktop games. This means a lot of talent from the games industry can now come to the web without having to learn a new skill. The introduction of WebGL to the browser gave us a few new tricks like indexed arrays which allow for heavy computation in JavaScript using the GPU instead of the main CPU.
Issues with WebGL
- Programming WebGL is a different skill set from web development and the learning kerb might be a bit high for people. Libraries like three.js make things much easier but it still is a switch from a 2D to a 3D world.
- WebGL screencast(MP4) showing various demos from Alteredqualia
- Ginger is a great example for facial expressions in WebGL webm mp4 ogv
- The Skin renderer in WebGL looks pretty creepy but also very impressive. webm mp4 ogv
- The winners of the Mozilla Demoparty Competition are great examples of what can be done with WebGL
- The three.js demo site has a lot of great demos of both 2D and 3D examples using the library.
- Body Browser - Google took a 3D model of the human body and built a maps-style interface to it in WebGL webm mp4 ogv
- Evan Wallace has some very cool WebGL demos. One of them is a Water simulation webm mp4 ogv and another is a path tracing demo webm mp4 ogv