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?)