Introduction to HTML5 & WebGL

                                                                          



                 


HTML5 vs HTML


WHAT IS NEW?

 



HTML5 vs HTML



  • Support for latest multimedia
  • Consistency across various browsers & devices
  • Integration with markup languages like XML, MathML
  • Local Storage API
  • Ability to draw graphics on the fly with Javascript

HTML5 vs HTML

  

 <video></video>
        Demo

 <canvas></canvas>
        Demo

 <math></math>
        Demo

HTML5 vs FLASH


HTML5 + CSS + Javascript > Adobe Flash

Steve Jobs said in April 2010
Rather than use Flash, Apple has adopted HTML5, CSS and JavaScript – all open standards. Apple’s mobile devices all ship with high performance, low power implementations of these open standards. HTML5, the new web standard that has been adopted by Apple, Google and many others, lets web developers create advanced graphics, typography, animations and transitions without relying on third party browser plug-ins (like Flash). HTML5 is completely open and controlled by a standards committee, of which Apple is a member.

webgl


  •   API to display 2D/3D graphics without use of plugins
  • GPU accelerated computation for image processing and shading
  • It is controlled by Javascript
  • Uses the HTML5 <canvas> element
  • Open Source and based on OpenGL
  • Automatic Memory Management

WEBGL

   


Google Maps and  Autodesk WebApps are among many   industry heavy, user intensive, full scale applications to implement WebGL as their core technology.



WEBGL

 Key Concepts:

 - Graphics pipeline: 
Camera (what are you focussing on the scene?)

Lighting (what sources of light are having an effect on the area that the camera is focussing?)

Viewing direction (which direction is the camera viewing?)

WEBGL

  
The aim is to process the image that makes a scene in the least time possible. Even videos are just a sequence of images. 

 Image is created by combining:

 vertex shader (position calculator)
 fragment shader (colour picker). 

DEMO: Terrain

 

WEBGL




You no longer need to know heavy duty C++ to make graphics rich games and applications.


All you need to know is....

WEBGL


...HTML & Javascript

The pre-requisites for learning to build WebGL applications.



You can build webgl apps without code by creating graphics scenes in Blender/Autodesk Maya and then exporting them as webgl code.


WEBGL



Go here to see if your browser supports webgl:


http://get.webgl.org/




DEMOS

DEMOS


  Cloth simulation (HTML5 only)
  
  Webcam Toy (HTML5)

  Chemistry demo 1 (WebGL + three.js)

  Chemistry demo 2 (WebGL)

  Fresnel Shader (three.js)

  Human Skin Modelling (three.js bump mapping)

DEMOS


  Google Doodles (HTML5 games)

  Particle physics simulation (WebGL)

 Procedural tree generation (WebGL)

 WebGL water

 Image Editing

 Video Editing

 Ellie Goulding Lights

 

REFERENCES



  Mozilla Demos

  Chrome Experiment

  WebGL.com Demos

LEARNING RESOURCES



  HTML5

 - W3Schools

 - HTMLGoodies

 - Udacity HTML5 Game Development Course

LEARNING RESOURCES



 WEBGL

 - Interactive 3D Graphics with three.js & WebGL

 - Learning WebGL

 - Mozilla's getting started with WebGL




THANK YOU


Vikram Bahl
Project Engineer (SOI)

vikram_bahl@rp.edu.sg