SlideShare una empresa de Scribd logo
1 de 29
building rich internet
applications with HTML5
and WebGL
tony parisi
may 29, 2013
about me
serial entrepreneur
founder, stealth startup
consulting architect and CTO
co-creator, VRML and X3D web standards
author
contact information
tparisi@gmail.com
skype: auradeluxe
http://twitter.com/auradeluxe htt
p://www.tonyparisi.com/
http://www.learningwebgl.com/
book source code
https://github.com/tparisi/WebGLBook
get the book!
WebGL: Up and Running
http://shop.oreilly.com/product/0636920024729.do
discount code: WEBGL13 (expires 6/7/13)
print book ISBN: 9781449323578
ebook ISBN: 9781449326500
http://www.tonyparisi.com
5/29/20
13
“rich internet applications”
term popularized by Adobe
for building animated, media-rich, highly interactive web content
cipher for “you can’t do THAT in a browser without Flash player”
vector graphics and animation
layering and compositing
streaming audio and video
professional-level scripting language
component-based development
TCP/IP sockets
http://www.tonyparisi.com
5/29/20
13
HTML5: the browser as platform
graphics APIs– Canvas, WebGL, SVG
CSS3 – animations, transitions, transforms and filter effects
hardware-accelerated compositing
all elements blend seamlessly on page
JavaScript performance and language enhancements
and a whole lot more…
first-class streaming media types - <audio>, <video>
device input
location and mobile-inspired features
database, local storage, file system
networking – sockets and real-time connections (WebRTC)
multi-threading (Workers)
http://www.tonyparisi.com
5/29/20
13
how rich?
http://www.tonyparisi.com
5/29/20
13
ported in 5 days Unreal native C++ engine -> JavaScriptEmscripten + asm.js60FPS
WebGL:
real-time 3D rendering
the new 3D API standard
OpenGL ES™ in a browser
JavaScript API bindings
supported in nearly all modern browsers
supported on many devices
shipped since early 2011
supported in
• Safari, Firefox, Chrome, Opera
• Internet Explorer (late 2013)
• iOS – iAds only
• Android – mobile Chrome
• Blackberry, Tizen, Firefox OS
• 500M+ seats -> 1B
http://www.tonyparisi.com
5/29/20
13
…and it’s
awesome.
100,000 Stars Google Experiment
how WebGL works
it’s a JavaScript drawing API
draw to a canvas element using a special context
low-level drawing – buffers, primitives, textures and shaders
accelerated by graphics hardware (GPU)
can draw 2D as well as 3D graphics
there is no file format; no markup language; no DOM.
http://www.tonyparisi.com
5/29/20
13
a simple WebGL program
1. create a <canvas> element
2. obtain a drawing context
3. initialize the viewport
4. create one or more buffers
5. create one or more matrices
6. create one or more shaders
7. initialize the shaders
8. draw one or more primitives
http://www.tonyparisi.com
5/29/20
13
buffers and typed arrays
var vertexBuffer;
vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
var verts = [
// Front face
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
1.0, 1.0, 1.0,
-1.0, 1.0, 1.0,
// Back face
-1.0, -1.0, -1.0,
-1.0, 1.0, -1.0,
1.0, 1.0, -1.0,
1.0, -1.0, -1.0,
…
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);
WebGL drawing functions
use buffers of data
new low-level data type
stores arrays of floats
and ints compactly
http://www.tonyparisi.com
5/29/20
13
shaders
var vertexShaderSource =
" attribute vec3 vertexPos;n" +
" attribute vec2 texCoord;n" +
" uniform mat4 modelViewMatrix;n" +
" uniform mat4 projectionMatrix;n" +
" varying vec2 vTexCoord;n" +
" void main(void) {n" +
" // Return the transformed and projected vertex valuen" +
" gl_Position = projectionMatrix * modelViewMatrix * n" +
" vec4(vertexPos, 1.0);n" +
" // Output the texture coordinate in vTexCoordn" +
" vTexCoord = texCoord;n" +
" }n";
var fragmentShaderSource =
" precision mediump float;n" +
" varying vec2 vTexCoord;n" +
" uniform sampler2D uSampler;n" +
" void main(void) {n" +
" // Return the pixel color: always output whiten" +
" gl_FragColor = texture2D(uSampler, vec2(vTexCoord.s, vTexCoord.t));n" +
"}n";
the vertex shader
transforms model-space
positions into screen
space
the fragment shader
outputs a color value for
each pixel
http://www.tonyparisi.com
5/29/20
13
drawingfunction draw(gl, obj) {
// clear the background (with black)
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// set the shader to use
gl.useProgram(shaderProgram);
// connect up the shader parameters: vertex position, texture coordinate,
// projection/model matrices and texture
// set up the buffers
gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer);
gl.vertexAttribPointer(shaderVertexPositionAttribute, obj.vertSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, obj.texCoordBuffer);
gl.vertexAttribPointer(shaderTexCoordAttribute, obj.texCoordSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, obj.indices);
gl.uniformMatrix4fv(shaderProjectionMatrixUniform, false, projectionMatrix);
gl.uniformMatrix4fv(shaderModelViewMatrixUniform, false, modelViewMatrix);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, webGLTexture);
gl.uniform1i(shaderSamplerUniform, 0);
// draw the object
gl.drawElements(obj.primtype, obj.nIndices, gl.UNSIGNED_SHORT, 0);
}
clear the canvas
set the shader
set up buffers for
vertices and
texture
coordinates
pass transform
and projection
matrices
to the shader
set the texture and pass to
the shader
draw the object
http://www.tonyparisi.com
5/29/20
13
three.js:
a JavaScript 3D engine
the most popular WebGL library
renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 45, canvas.width /
canvas.height, 1, 4000 );
scene.add(camera);
var light = new THREE.DirectionalLight( 0xffffff, 1.5);
scene.add( light );
var mapUrl ="../images/webgl-logo-256.jpg“;
var map = THREE.ImageUtils.loadTexture(mapUrl );
var material = new THREE.MeshPhongMaterial({ map: map });
var geometry = new THREE.CubeGeometry(2, 2, 2);
cube = new THREE.Mesh(geometry, material);
scene.add( cube );
https://github.com/mrdoob/three.js/
represents
WebGL at a
high level using
standard
3D graphics
concepts
can render to
WebGL,
2D canvas, SVG
and CSS3
http://www.tonyparisi.com
5/29/20
13
three.js flagship projects
http://www.tonyparisi.com
5/29/20
13
animation
requestAnimationFrame()
http://www.paulirish.com/2011/requestanimationframe-for-
smart-animating/
with JavaScript we can animate anything: materials,
lights, textures…. shaders
three.js has support for key frames, morphs and skins
Tween.js – simple tweening library
https://github.com/sole/tween.js/
var tween = new TWEEN.Tween( { x: 50, y: 0 } )
.to( { x: 400 }, 2000 )
.easing( TWEEN.Easing.Elastic.InOut )
.start();
function animate() {
requestAnimationFrame( animate );
TWEEN.update();
}
create and
start tween
call TWEEN.update()
in your run loop
http://www.tonyparisi.com
5/29/20
13
pipeline tools
WebGL has no file format; no markup
language; no DOM. apps/libraries must
define their own formats
a lot of people are still creating content by
writing code
three.js loads several format types, but the
loaders are incomplete and buggy
3D format standards
COLLADA – XML
http://www.khronos.org/files/collada_spec_1_4.pdf
glTF – compact JSON + binary
https://github.com/KhronosGroup/glTF
art paths from 3ds Max, Maya, Blender,
Sketchup
5/29/20
13
http://www.tonyparisi.com
Maya file exported as COLLADA,
loaded with three.js
CSS3:
advanced page effects
CSS transitions
CSS animations
CSS 3D transforms
CSS filter effects
CSS custom filters
http://www.tonyparisi.com
5/29/20
13
CSS3 transitions
allow gradual changes to CSS properties over time
#box img {
transition: transform .5s ease-in;
transform: translate3d(0, -350px, 0);
}
#box img:hover {
transition: transform .5s ease-in;
transform: translate3d(0, 0px, 0);
cursor: pointer;
}
transition: all .5s ease-in -.1s;
transition-property: all;
transition-duration: .5s;
transition-timing-function: ease-
in;
transition-delay: .1s;
source: http://www.kirupa.com/html5/all_about_css_transitions.htm
shortcut for
specify property to
transition, duration of
transition, easing
function
http://www.tonyparisi.com
5/29/20
13
CSS3 animations
allow fine control over animation behavior with key frames
#bigcloud {
animation: bobble 2s infinite;
}
@keyframes bobble {
0% {
transform: translate3d(50px, 40px, 0px);
animation-timing-function: ease-in;
}
50% {
transform: translate3d(50px, 50px, 0px);
animation-timing-function: ease-out;
}
100% {
transform: translate3d(50px, 40px, 0px);
}
}
keys are used to interpolate
transform values
control timing with
ease in/out functions
each key frame contains a transform
source: http://www.kirupa.com/html5/all_about_css_animations.htm
http://www.tonyparisi.com
5/29/20
13
CSS3 3D transforms
translate, rotate, scale page elements with perspective
.bk-list li {
perspective: 1800px;
}
.bk-list li .bk-front {
transform-style: preserve-3d;
transform-origin: 0% 50%;
transform: translate3d(0,0,20px);
}
.bk-list li .bk-book.bk-bookdefault:hover {
transform: rotate3d(0,1,0,35deg);
}
source
http://tympanus.net/codrops/
2013/01/08/3d-book-
showcase/
browser will render element in 3D perspective
add origin to
translation
apply to child
elements
apply 35 degree rotation about Y axis
http://www.tonyparisi.com
5/29/20
13
CSS3 filter effects
apply post-processing effects to image elements
source: http://html5-demos.appspot.com/static/css/filters/index.html
img {
-webkit-filter: sepia(100%);
}
img {
-webkit-filter: grayscale(100%);
}
img {
-webkit-filter: blur(2px);
}
img {
-webkit-filter: brightness(33%);
}
img {
-webkit-filter: contrast(67%);
}
http://www.tonyparisi.com
5/29/20
13
CSS3 custom filters
.shader {
-webkit-filter: custom(url(shaders/crumple.vs) mix(url(shaders/crumple.fs)
multiply source-atop), 50 50, amount 0, strength 0.2, lightIntensity 1.05, transform
rotateX(0deg) translateZ(0px) );
-webkit-transition: -webkit-filter linear 1.5s;
box-shadow: 0 0 2em #111;
}
.shader:hover {
-webkit-filter: custom(url(shaders/crumple.vs) mix(url(shaders/crumple.fs)
multiply source-atop), 50 50, amount 1, strength 0.2, lightIntensity 1.05, transform
rotateX(0deg) translateZ(0px) );
}
source: http://alteredqualia.com/css-
shaders/crumple.html
http://www.tonyparisi.com
5/29/20
13
Crumple shader by
Branislav Ulicny (AlteredQualia)
http://alteredqualia.com/css-
shaders/crumple.html
CSS3 vertex shader
void main() {
// Compute displacement
float time = 10.0 * quadraticInOut( amount );
vec2 surfaceCoordinate = 0.025 * a_texCoord;
float n = surface( surfaceCoordinate, time );
float curve = strength * n;
vec4 pos = a_position;
pos.z = amount * ( 0.5 * strength - curve );
// Compute normal
const float e = 0.001;
float nx = surface( surfaceCoordinate + vec2( e, 0.0 ), time );
float ny = surface( surfaceCoordinate + vec2( 0.0, e ), time );
vec3 normal = normalize( vec3( n - nx, n - ny, 1.0 - strength * 1.25 ) );
// Compute lighting (directional light)
vec3 lightPosition = normalize( vec3( 0.0, 0.5, 1.0 ) );
float lightWeight = lightIntensity * max( dot( normal, lightPosition ), 0.0 );
// Set vertex position
gl_Position = u_projectionMatrix * perspective( 0.9 ) * transform * pos;
v_uv = a_texCoord;
v_height = n;
v_light = lightWeight;
browser predefines
a_texCoord and
a_position, passes into
shader
shader
outputs new
vertex
position,
passes
lighting
information to
fragment
shader
http://www.tonyparisi.com
5/29/20
13
CSS3 fragment shader
// Uniform values from CSS
uniform float amount;
// Varyings passed in from vertex shader
varying vec2 v_uv;
varying float v_height;
varying float v_light;
void main() {
const float a = 1.0;
float r, g, b;
// Light variant
float n = v_light;
float v = mix( 1.0, n * n, amount );
r = g = b = sqrt( v );
// Set color matrix
css_ColorMatrix = mat4( r, 0.0, 0.0, 0.0,
0.0, g, 0.0, 0.0,
0.0, 0.0, b, 0.0,
0.0, 0.0, 0.0, a );
}
Fragment
shader
outputs blend
value based
on light
calculated in
vertex shader
and user-
supplied
amount
http://www.tonyparisi.com
5/29/20
13
CSS3 support
CSS3 Transitions
supported since
• Safari 3.2: 13/11/2008
• Firefox 4.0: Late 2010
• Chrome 1.0: 02/09/2008
• Opera 10.5: 02/03/2010
• Internet Explorer 10: 09/2011
CSS3 Animations
supported since
• Safari 4.0: 11/06/2008
• Chrome 1.0: 02/09/2008
• Firefox 5: 20/04/2011
• IE 10: 09/2011
• Opera: 03/2012
CSS 3D Transforms
supported since
• Safari 4.0: 11/06/2008
• Chrome: 28/08/2010
• IE 10: 09/2011
• Firefox: 27/10/2011
source: http://css3.bradshawenterprises.com/
CSS3 Filters
supported since
• Safari 6.0
• Chrome: 18.0
CSS3 Custom Filters
supported only in Chrome
http://www.tonyparisi.com
5/29/20
13
fun with three.js and CSS3
http://mrdoob.github.io/three.js/examples/css3d_periodictable.html
http://www.tonyparisi.com
5/29/20
13
language innovations
asm.js
optimizable, low-level subset of JavaScript; strictly typed; improves
performance (2x native vs. 3-10x) runs in FF and Chrome nightlies
http://asmjs.org/
Emscripten
LLVM-to-JavaScript compiler translates C++ native code to
JavaScript; can output to asm.js
https://github.com/kripken/emscripten/wiki
new Web languages - Dart, TypeScript
optionally strongly typed; class-based
https://www.dartlang.org/
http://www.typescriptlang.org/
tackling performance and memory challenges
http://www.tonyparisi.com
5/29/20
13
always bet on JS
5/29/20
13
http://www.tonyparisi.com
From: Brendan Eich’s The State of JavaScript
http://brendaneich.github.com/Strange-Loop-2012/#/
So, I've thought for a long
time ... if I could take a
clean sheet of paper and
write [a new language] that
retains all the goodness of
[JavaScript] ... I would not
have come up with anything
like Dart.
-- Douglas Crockford
resources
WebGL specification http://www.khronos.org/registry/webgl/specs/latest/
Learning WebGL http://www.learningwebgl.com/
three.js https://github.com/mrdoob/three.js/
requestAnimationFrame
http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
CSS specifications
http://www.w3.org/TR/css3-animations/
http://www.w3.org/TR/css3-transitions/
http://www.w3.org/TR/css3-transforms/
http://www.w3.org/TR/filter-effects/
CSS animation demos http://www.creativebloq.com/css3/animation-with-css3-712437
CSS 3D transforms explained http://desandro.github.io/3dtransforms/
Adobe filter lab - playing with filter
effectshttp://html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/
Alan Greenblatt’s blog – CSS filter effects http://blattchat.com/
http://www.tonyparisi.com
5/29/20
13
stay in touch
contact information
tparisi@gmail.com
skype: auradeluxe
http://twitter.com/auradeluxe htt
p://www.tonyparisi.com/
http://www.learningwebgl.com/
get the book!
WebGL: Up and Running
http://shop.oreilly.com/product/0636920024729.do
discount code: WEBGL13 (expires 6/7/13)
print book ISBN: 9781449323578
ebook ISBN: 9781449326500
http://www.tonyparisi.com
5/29/20
13
book source code
https://github.com/tparisi/WebGLBook

Más contenido relacionado

Destacado (20)

How to increase engagement and conversions
How to increase engagement and conversionsHow to increase engagement and conversions
How to increase engagement and conversions
 
5 servidor web
5 servidor web5 servidor web
5 servidor web
 
Catalogue-Oil Cooled-Resin Cast CTs-PTs-ATS
Catalogue-Oil Cooled-Resin Cast CTs-PTs-ATSCatalogue-Oil Cooled-Resin Cast CTs-PTs-ATS
Catalogue-Oil Cooled-Resin Cast CTs-PTs-ATS
 
Aile nin önemi 2003
Aile nin önemi 2003Aile nin önemi 2003
Aile nin önemi 2003
 
Online reputatie-2012
Online reputatie-2012Online reputatie-2012
Online reputatie-2012
 
Aile nin önemi 2003
Aile nin önemi 2003Aile nin önemi 2003
Aile nin önemi 2003
 
Bodylanguage
BodylanguageBodylanguage
Bodylanguage
 
2ª guerra mundial ppt sobre el desarrollo
2ª guerra mundial ppt sobre el desarrollo2ª guerra mundial ppt sobre el desarrollo
2ª guerra mundial ppt sobre el desarrollo
 
Base pdres urbano
Base pdres urbanoBase pdres urbano
Base pdres urbano
 
Mi exposicion de informatica
Mi exposicion de informaticaMi exposicion de informatica
Mi exposicion de informatica
 
Chapter 9: Claims
Chapter 9: Claims Chapter 9: Claims
Chapter 9: Claims
 
BillingViews Facebook Success Index
BillingViews Facebook Success IndexBillingViews Facebook Success Index
BillingViews Facebook Success Index
 
Info2011 DaliaDolev-Technion
Info2011 DaliaDolev-TechnionInfo2011 DaliaDolev-Technion
Info2011 DaliaDolev-Technion
 
Haiku
HaikuHaiku
Haiku
 
Portafolio
PortafolioPortafolio
Portafolio
 
Presentación Corporativa Gyga
Presentación Corporativa Gyga Presentación Corporativa Gyga
Presentación Corporativa Gyga
 
Presentación INNOVATION
Presentación INNOVATIONPresentación INNOVATION
Presentación INNOVATION
 
The right place for NFC
The right place for NFCThe right place for NFC
The right place for NFC
 
Anjni-Catalogue
Anjni-CatalogueAnjni-Catalogue
Anjni-Catalogue
 
A short tutorial on why good companies do well by doing good & what americans...
A short tutorial on why good companies do well by doing good & what americans...A short tutorial on why good companies do well by doing good & what americans...
A short tutorial on why good companies do well by doing good & what americans...
 

Similar a Building Rich Internet Applications with HTML5 and WebGL

Developing Web Graphics with WebGL
Developing Web Graphics with WebGLDeveloping Web Graphics with WebGL
Developing Web Graphics with WebGLTony Parisi
 
WebGL, HTML5 and How the Mobile Web Was Won
WebGL, HTML5 and How the Mobile Web Was WonWebGL, HTML5 and How the Mobile Web Was Won
WebGL, HTML5 and How the Mobile Web Was WonTony Parisi
 
WebGL - It's GO Time
WebGL - It's GO TimeWebGL - It's GO Time
WebGL - It's GO TimeTony Parisi
 
WT-4064, Build Rich Applications with HTML5 and WebGL, by Tony Parisi
WT-4064, Build Rich Applications with HTML5 and WebGL, by Tony ParisiWT-4064, Build Rich Applications with HTML5 and WebGL, by Tony Parisi
WT-4064, Build Rich Applications with HTML5 and WebGL, by Tony ParisiAMD Developer Central
 
WebGL: The Next Generation
WebGL:  The Next GenerationWebGL:  The Next Generation
WebGL: The Next GenerationTony Parisi
 
CSS Architecture - JSIL.pdf
CSS Architecture - JSIL.pdfCSS Architecture - JSIL.pdf
CSS Architecture - JSIL.pdfJonDan6
 
Academy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphicsAcademy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphicsBinary Studio
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Sadaaki HIRAI
 
HTML5DevConf 2013 (October): WebGL is a game changer!
HTML5DevConf 2013 (October): WebGL is a game changer!HTML5DevConf 2013 (October): WebGL is a game changer!
HTML5DevConf 2013 (October): WebGL is a game changer!Iker Jamardo
 
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleWeb Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleEstelle Weyl
 
FGS 2011: Flash+ A Whole New Dimension for Games
FGS 2011: Flash+ A Whole New Dimension for GamesFGS 2011: Flash+ A Whole New Dimension for Games
FGS 2011: Flash+ A Whole New Dimension for Gamesmochimedia
 
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyHtml 5 mobile - nitty gritty
Html 5 mobile - nitty grittyMario Noble
 
Bs webgl소모임004
Bs webgl소모임004Bs webgl소모임004
Bs webgl소모임004Seonki Paik
 
Basic html5 and javascript
Basic html5 and javascriptBasic html5 and javascript
Basic html5 and javascriptwendy017
 
JS Experience 2017 - Animações simples com o three.js
JS Experience 2017 - Animações simples com o three.jsJS Experience 2017 - Animações simples com o three.js
JS Experience 2017 - Animações simples com o three.jsiMasters
 
Una web todos los dispositivos.
Una web todos los dispositivos.Una web todos los dispositivos.
Una web todos los dispositivos.philogb
 
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Patrick Chanezon
 
AFUP Lorraine - Symfony Webpack Encore
AFUP Lorraine - Symfony Webpack EncoreAFUP Lorraine - Symfony Webpack Encore
AFUP Lorraine - Symfony Webpack EncoreEngineor
 

Similar a Building Rich Internet Applications with HTML5 and WebGL (20)

Developing Web Graphics with WebGL
Developing Web Graphics with WebGLDeveloping Web Graphics with WebGL
Developing Web Graphics with WebGL
 
WebGL, HTML5 and How the Mobile Web Was Won
WebGL, HTML5 and How the Mobile Web Was WonWebGL, HTML5 and How the Mobile Web Was Won
WebGL, HTML5 and How the Mobile Web Was Won
 
WebGL - It's GO Time
WebGL - It's GO TimeWebGL - It's GO Time
WebGL - It's GO Time
 
WT-4064, Build Rich Applications with HTML5 and WebGL, by Tony Parisi
WT-4064, Build Rich Applications with HTML5 and WebGL, by Tony ParisiWT-4064, Build Rich Applications with HTML5 and WebGL, by Tony Parisi
WT-4064, Build Rich Applications with HTML5 and WebGL, by Tony Parisi
 
WebGL: The Next Generation
WebGL:  The Next GenerationWebGL:  The Next Generation
WebGL: The Next Generation
 
WebGL Awesomeness
WebGL AwesomenessWebGL Awesomeness
WebGL Awesomeness
 
CSS Architecture - JSIL.pdf
CSS Architecture - JSIL.pdfCSS Architecture - JSIL.pdf
CSS Architecture - JSIL.pdf
 
Academy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphicsAcademy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphics
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
HTML5DevConf 2013 (October): WebGL is a game changer!
HTML5DevConf 2013 (October): WebGL is a game changer!HTML5DevConf 2013 (October): WebGL is a game changer!
HTML5DevConf 2013 (October): WebGL is a game changer!
 
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleWeb Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
 
FGS 2011: Flash+ A Whole New Dimension for Games
FGS 2011: Flash+ A Whole New Dimension for GamesFGS 2011: Flash+ A Whole New Dimension for Games
FGS 2011: Flash+ A Whole New Dimension for Games
 
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyHtml 5 mobile - nitty gritty
Html 5 mobile - nitty gritty
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Bs webgl소모임004
Bs webgl소모임004Bs webgl소모임004
Bs webgl소모임004
 
Basic html5 and javascript
Basic html5 and javascriptBasic html5 and javascript
Basic html5 and javascript
 
JS Experience 2017 - Animações simples com o three.js
JS Experience 2017 - Animações simples com o three.jsJS Experience 2017 - Animações simples com o three.js
JS Experience 2017 - Animações simples com o three.js
 
Una web todos los dispositivos.
Una web todos los dispositivos.Una web todos los dispositivos.
Una web todos los dispositivos.
 
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?
 
AFUP Lorraine - Symfony Webpack Encore
AFUP Lorraine - Symfony Webpack EncoreAFUP Lorraine - Symfony Webpack Encore
AFUP Lorraine - Symfony Webpack Encore
 

Más de Tony Parisi

The New Fine Arts
The New Fine ArtsThe New Fine Arts
The New Fine ArtsTony Parisi
 
Face the Future: Computing in an Augmented World
Face the Future: Computing in an Augmented WorldFace the Future: Computing in an Augmented World
Face the Future: Computing in an Augmented WorldTony Parisi
 
Powering the VR/AR Ecosystem 2017-01-17
Powering the VR/AR Ecosystem 2017-01-17Powering the VR/AR Ecosystem 2017-01-17
Powering the VR/AR Ecosystem 2017-01-17Tony Parisi
 
WebVR: Developing for the Immersive Web
WebVR: Developing for the Immersive WebWebVR: Developing for the Immersive Web
WebVR: Developing for the Immersive WebTony Parisi
 
Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016Tony Parisi
 
WebVR Ecosystem and API Update
WebVR Ecosystem and API UpdateWebVR Ecosystem and API Update
WebVR Ecosystem and API UpdateTony Parisi
 
Foundations of the Immersive Web
Foundations of the Immersive WebFoundations of the Immersive Web
Foundations of the Immersive WebTony Parisi
 
The Immersive Web
The Immersive WebThe Immersive Web
The Immersive WebTony Parisi
 
Virtually Anyone
Virtually AnyoneVirtually Anyone
Virtually AnyoneTony Parisi
 
React-VR: An Early Experiment with React and WebGL for VR Development
React-VR: An Early Experiment with React and WebGL for VR DevelopmentReact-VR: An Early Experiment with React and WebGL for VR Development
React-VR: An Early Experiment with React and WebGL for VR DevelopmentTony Parisi
 
Vrml, or There and Back Again
Vrml, or There and Back AgainVrml, or There and Back Again
Vrml, or There and Back AgainTony Parisi
 
The Coming Distribution War
The Coming Distribution WarThe Coming Distribution War
The Coming Distribution WarTony Parisi
 
Browser-Based Virtual Reality April 2015
Browser-Based Virtual Reality April 2015Browser-Based Virtual Reality April 2015
Browser-Based Virtual Reality April 2015Tony Parisi
 
VR Without Borders RIVER WebVR April 2015
VR Without Borders RIVER WebVR April 2015VR Without Borders RIVER WebVR April 2015
VR Without Borders RIVER WebVR April 2015Tony Parisi
 
glTF and the WebGL Art Pipeline March 2015
glTF and the WebGL Art Pipeline March 2015glTF and the WebGL Art Pipeline March 2015
glTF and the WebGL Art Pipeline March 2015Tony Parisi
 
An Introduction to Web VR January 2015
An Introduction to Web VR January 2015An Introduction to Web VR January 2015
An Introduction to Web VR January 2015Tony Parisi
 
Up And Running With Web VR Fall 2014
Up And Running With Web VR Fall 2014Up And Running With Web VR Fall 2014
Up And Running With Web VR Fall 2014Tony Parisi
 
The Web Eats Everything In Its Path Fall 2014
The Web Eats Everything In Its Path Fall 2014The Web Eats Everything In Its Path Fall 2014
The Web Eats Everything In Its Path Fall 2014Tony Parisi
 
Hacking Reality: Browser-Based VR with HTML5
Hacking Reality: Browser-Based VR with HTML5Hacking Reality: Browser-Based VR with HTML5
Hacking Reality: Browser-Based VR with HTML5Tony Parisi
 
WebGL, WebVR and the Metaverse
WebGL, WebVR and the MetaverseWebGL, WebVR and the Metaverse
WebGL, WebVR and the MetaverseTony Parisi
 

Más de Tony Parisi (20)

The New Fine Arts
The New Fine ArtsThe New Fine Arts
The New Fine Arts
 
Face the Future: Computing in an Augmented World
Face the Future: Computing in an Augmented WorldFace the Future: Computing in an Augmented World
Face the Future: Computing in an Augmented World
 
Powering the VR/AR Ecosystem 2017-01-17
Powering the VR/AR Ecosystem 2017-01-17Powering the VR/AR Ecosystem 2017-01-17
Powering the VR/AR Ecosystem 2017-01-17
 
WebVR: Developing for the Immersive Web
WebVR: Developing for the Immersive WebWebVR: Developing for the Immersive Web
WebVR: Developing for the Immersive Web
 
Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016
 
WebVR Ecosystem and API Update
WebVR Ecosystem and API UpdateWebVR Ecosystem and API Update
WebVR Ecosystem and API Update
 
Foundations of the Immersive Web
Foundations of the Immersive WebFoundations of the Immersive Web
Foundations of the Immersive Web
 
The Immersive Web
The Immersive WebThe Immersive Web
The Immersive Web
 
Virtually Anyone
Virtually AnyoneVirtually Anyone
Virtually Anyone
 
React-VR: An Early Experiment with React and WebGL for VR Development
React-VR: An Early Experiment with React and WebGL for VR DevelopmentReact-VR: An Early Experiment with React and WebGL for VR Development
React-VR: An Early Experiment with React and WebGL for VR Development
 
Vrml, or There and Back Again
Vrml, or There and Back AgainVrml, or There and Back Again
Vrml, or There and Back Again
 
The Coming Distribution War
The Coming Distribution WarThe Coming Distribution War
The Coming Distribution War
 
Browser-Based Virtual Reality April 2015
Browser-Based Virtual Reality April 2015Browser-Based Virtual Reality April 2015
Browser-Based Virtual Reality April 2015
 
VR Without Borders RIVER WebVR April 2015
VR Without Borders RIVER WebVR April 2015VR Without Borders RIVER WebVR April 2015
VR Without Borders RIVER WebVR April 2015
 
glTF and the WebGL Art Pipeline March 2015
glTF and the WebGL Art Pipeline March 2015glTF and the WebGL Art Pipeline March 2015
glTF and the WebGL Art Pipeline March 2015
 
An Introduction to Web VR January 2015
An Introduction to Web VR January 2015An Introduction to Web VR January 2015
An Introduction to Web VR January 2015
 
Up And Running With Web VR Fall 2014
Up And Running With Web VR Fall 2014Up And Running With Web VR Fall 2014
Up And Running With Web VR Fall 2014
 
The Web Eats Everything In Its Path Fall 2014
The Web Eats Everything In Its Path Fall 2014The Web Eats Everything In Its Path Fall 2014
The Web Eats Everything In Its Path Fall 2014
 
Hacking Reality: Browser-Based VR with HTML5
Hacking Reality: Browser-Based VR with HTML5Hacking Reality: Browser-Based VR with HTML5
Hacking Reality: Browser-Based VR with HTML5
 
WebGL, WebVR and the Metaverse
WebGL, WebVR and the MetaverseWebGL, WebVR and the Metaverse
WebGL, WebVR and the Metaverse
 

Último

FDMA FLAP - The first dorsal metacarpal artery (FDMA) flap is used mainly for...
FDMA FLAP - The first dorsal metacarpal artery (FDMA) flap is used mainly for...FDMA FLAP - The first dorsal metacarpal artery (FDMA) flap is used mainly for...
FDMA FLAP - The first dorsal metacarpal artery (FDMA) flap is used mainly for...Shubhanshu Gaurav
 
AORTIC DISSECTION and management of aortic dissection
AORTIC DISSECTION and management of aortic dissectionAORTIC DISSECTION and management of aortic dissection
AORTIC DISSECTION and management of aortic dissectiondrhanifmohdali
 
DNA nucleotides Blast in NCBI and Phylogeny using MEGA Xi.pptx
DNA nucleotides Blast in NCBI and Phylogeny using MEGA Xi.pptxDNA nucleotides Blast in NCBI and Phylogeny using MEGA Xi.pptx
DNA nucleotides Blast in NCBI and Phylogeny using MEGA Xi.pptxMAsifAhmad
 
Pharmacokinetic Models by Dr. Ram D. Bawankar.ppt
Pharmacokinetic Models by Dr. Ram D.  Bawankar.pptPharmacokinetic Models by Dr. Ram D.  Bawankar.ppt
Pharmacokinetic Models by Dr. Ram D. Bawankar.pptRamDBawankar1
 
SGK RỐI LOẠN KALI MÁU CỰC KỲ QUAN TRỌNG.pdf
SGK RỐI LOẠN KALI MÁU CỰC KỲ QUAN TRỌNG.pdfSGK RỐI LOẠN KALI MÁU CỰC KỲ QUAN TRỌNG.pdf
SGK RỐI LOẠN KALI MÁU CỰC KỲ QUAN TRỌNG.pdfHongBiThi1
 
Red Blood Cells_anemia & polycythemia.pdf
Red Blood Cells_anemia & polycythemia.pdfRed Blood Cells_anemia & polycythemia.pdf
Red Blood Cells_anemia & polycythemia.pdfMedicoseAcademics
 
Female Reproductive Physiology Before Pregnancy
Female Reproductive Physiology Before PregnancyFemale Reproductive Physiology Before Pregnancy
Female Reproductive Physiology Before PregnancyMedicoseAcademics
 
EXERCISE PERFORMANCE.pptx, Lung function
EXERCISE PERFORMANCE.pptx, Lung functionEXERCISE PERFORMANCE.pptx, Lung function
EXERCISE PERFORMANCE.pptx, Lung functionkrishnareddy157915
 
power point presentation of Clinical evaluation of strabismus
power point presentation of Clinical evaluation  of strabismuspower point presentation of Clinical evaluation  of strabismus
power point presentation of Clinical evaluation of strabismusChandrasekar Reddy
 
"Radical excision of DIE in subferile women with deep infiltrating endometrio...
"Radical excision of DIE in subferile women with deep infiltrating endometrio..."Radical excision of DIE in subferile women with deep infiltrating endometrio...
"Radical excision of DIE in subferile women with deep infiltrating endometrio...Sujoy Dasgupta
 
SGK LEUKEMIA KINH DÒNG BẠCH CÂU HẠT HAY.pdf
SGK LEUKEMIA KINH DÒNG BẠCH CÂU HẠT HAY.pdfSGK LEUKEMIA KINH DÒNG BẠCH CÂU HẠT HAY.pdf
SGK LEUKEMIA KINH DÒNG BẠCH CÂU HẠT HAY.pdfHongBiThi1
 
Different drug regularity bodies in different countries.
Different drug regularity bodies in different countries.Different drug regularity bodies in different countries.
Different drug regularity bodies in different countries.kishan singh tomar
 
CPR.nursingoutlook.pdf , Bsc nursing student
CPR.nursingoutlook.pdf , Bsc nursing studentCPR.nursingoutlook.pdf , Bsc nursing student
CPR.nursingoutlook.pdf , Bsc nursing studentsaileshpanda05
 
ANATOMICAL FAETURES OF BONES FOR NURSING STUDENTS .pptx
ANATOMICAL FAETURES OF BONES  FOR NURSING STUDENTS .pptxANATOMICAL FAETURES OF BONES  FOR NURSING STUDENTS .pptx
ANATOMICAL FAETURES OF BONES FOR NURSING STUDENTS .pptxWINCY THIRUMURUGAN
 
BENIGN BREAST DISEASE
BENIGN BREAST DISEASE BENIGN BREAST DISEASE
BENIGN BREAST DISEASE Mamatha Lakka
 
Basic structure of hair and hair growth cycle.pptx
Basic structure of hair and hair growth cycle.pptxBasic structure of hair and hair growth cycle.pptx
Basic structure of hair and hair growth cycle.pptxkomalt2001
 
ayurvedic formulations herbal drug technologyppt
ayurvedic formulations herbal drug technologypptayurvedic formulations herbal drug technologyppt
ayurvedic formulations herbal drug technologypptPradnya Wadekar
 
How to cure cirrhosis and chronic hepatitis naturally
How to cure cirrhosis and chronic hepatitis naturallyHow to cure cirrhosis and chronic hepatitis naturally
How to cure cirrhosis and chronic hepatitis naturallyZurück zum Ursprung
 
blood bank management system project report
blood bank management system project reportblood bank management system project report
blood bank management system project reportNARMADAPETROLEUMGAS
 

Último (20)

FDMA FLAP - The first dorsal metacarpal artery (FDMA) flap is used mainly for...
FDMA FLAP - The first dorsal metacarpal artery (FDMA) flap is used mainly for...FDMA FLAP - The first dorsal metacarpal artery (FDMA) flap is used mainly for...
FDMA FLAP - The first dorsal metacarpal artery (FDMA) flap is used mainly for...
 
AORTIC DISSECTION and management of aortic dissection
AORTIC DISSECTION and management of aortic dissectionAORTIC DISSECTION and management of aortic dissection
AORTIC DISSECTION and management of aortic dissection
 
DNA nucleotides Blast in NCBI and Phylogeny using MEGA Xi.pptx
DNA nucleotides Blast in NCBI and Phylogeny using MEGA Xi.pptxDNA nucleotides Blast in NCBI and Phylogeny using MEGA Xi.pptx
DNA nucleotides Blast in NCBI and Phylogeny using MEGA Xi.pptx
 
Pharmacokinetic Models by Dr. Ram D. Bawankar.ppt
Pharmacokinetic Models by Dr. Ram D.  Bawankar.pptPharmacokinetic Models by Dr. Ram D.  Bawankar.ppt
Pharmacokinetic Models by Dr. Ram D. Bawankar.ppt
 
SGK RỐI LOẠN KALI MÁU CỰC KỲ QUAN TRỌNG.pdf
SGK RỐI LOẠN KALI MÁU CỰC KỲ QUAN TRỌNG.pdfSGK RỐI LOẠN KALI MÁU CỰC KỲ QUAN TRỌNG.pdf
SGK RỐI LOẠN KALI MÁU CỰC KỲ QUAN TRỌNG.pdf
 
Red Blood Cells_anemia & polycythemia.pdf
Red Blood Cells_anemia & polycythemia.pdfRed Blood Cells_anemia & polycythemia.pdf
Red Blood Cells_anemia & polycythemia.pdf
 
Rheumatoid arthritis Part 1, case based approach with application of the late...
Rheumatoid arthritis Part 1, case based approach with application of the late...Rheumatoid arthritis Part 1, case based approach with application of the late...
Rheumatoid arthritis Part 1, case based approach with application of the late...
 
Female Reproductive Physiology Before Pregnancy
Female Reproductive Physiology Before PregnancyFemale Reproductive Physiology Before Pregnancy
Female Reproductive Physiology Before Pregnancy
 
EXERCISE PERFORMANCE.pptx, Lung function
EXERCISE PERFORMANCE.pptx, Lung functionEXERCISE PERFORMANCE.pptx, Lung function
EXERCISE PERFORMANCE.pptx, Lung function
 
power point presentation of Clinical evaluation of strabismus
power point presentation of Clinical evaluation  of strabismuspower point presentation of Clinical evaluation  of strabismus
power point presentation of Clinical evaluation of strabismus
 
"Radical excision of DIE in subferile women with deep infiltrating endometrio...
"Radical excision of DIE in subferile women with deep infiltrating endometrio..."Radical excision of DIE in subferile women with deep infiltrating endometrio...
"Radical excision of DIE in subferile women with deep infiltrating endometrio...
 
SGK LEUKEMIA KINH DÒNG BẠCH CÂU HẠT HAY.pdf
SGK LEUKEMIA KINH DÒNG BẠCH CÂU HẠT HAY.pdfSGK LEUKEMIA KINH DÒNG BẠCH CÂU HẠT HAY.pdf
SGK LEUKEMIA KINH DÒNG BẠCH CÂU HẠT HAY.pdf
 
Different drug regularity bodies in different countries.
Different drug regularity bodies in different countries.Different drug regularity bodies in different countries.
Different drug regularity bodies in different countries.
 
CPR.nursingoutlook.pdf , Bsc nursing student
CPR.nursingoutlook.pdf , Bsc nursing studentCPR.nursingoutlook.pdf , Bsc nursing student
CPR.nursingoutlook.pdf , Bsc nursing student
 
ANATOMICAL FAETURES OF BONES FOR NURSING STUDENTS .pptx
ANATOMICAL FAETURES OF BONES  FOR NURSING STUDENTS .pptxANATOMICAL FAETURES OF BONES  FOR NURSING STUDENTS .pptx
ANATOMICAL FAETURES OF BONES FOR NURSING STUDENTS .pptx
 
BENIGN BREAST DISEASE
BENIGN BREAST DISEASE BENIGN BREAST DISEASE
BENIGN BREAST DISEASE
 
Basic structure of hair and hair growth cycle.pptx
Basic structure of hair and hair growth cycle.pptxBasic structure of hair and hair growth cycle.pptx
Basic structure of hair and hair growth cycle.pptx
 
ayurvedic formulations herbal drug technologyppt
ayurvedic formulations herbal drug technologypptayurvedic formulations herbal drug technologyppt
ayurvedic formulations herbal drug technologyppt
 
How to cure cirrhosis and chronic hepatitis naturally
How to cure cirrhosis and chronic hepatitis naturallyHow to cure cirrhosis and chronic hepatitis naturally
How to cure cirrhosis and chronic hepatitis naturally
 
blood bank management system project report
blood bank management system project reportblood bank management system project report
blood bank management system project report
 

Building Rich Internet Applications with HTML5 and WebGL

  • 1. building rich internet applications with HTML5 and WebGL tony parisi may 29, 2013
  • 2. about me serial entrepreneur founder, stealth startup consulting architect and CTO co-creator, VRML and X3D web standards author contact information tparisi@gmail.com skype: auradeluxe http://twitter.com/auradeluxe htt p://www.tonyparisi.com/ http://www.learningwebgl.com/ book source code https://github.com/tparisi/WebGLBook get the book! WebGL: Up and Running http://shop.oreilly.com/product/0636920024729.do discount code: WEBGL13 (expires 6/7/13) print book ISBN: 9781449323578 ebook ISBN: 9781449326500 http://www.tonyparisi.com 5/29/20 13
  • 3. “rich internet applications” term popularized by Adobe for building animated, media-rich, highly interactive web content cipher for “you can’t do THAT in a browser without Flash player” vector graphics and animation layering and compositing streaming audio and video professional-level scripting language component-based development TCP/IP sockets http://www.tonyparisi.com 5/29/20 13
  • 4. HTML5: the browser as platform graphics APIs– Canvas, WebGL, SVG CSS3 – animations, transitions, transforms and filter effects hardware-accelerated compositing all elements blend seamlessly on page JavaScript performance and language enhancements and a whole lot more… first-class streaming media types - <audio>, <video> device input location and mobile-inspired features database, local storage, file system networking – sockets and real-time connections (WebRTC) multi-threading (Workers) http://www.tonyparisi.com 5/29/20 13
  • 5. how rich? http://www.tonyparisi.com 5/29/20 13 ported in 5 days Unreal native C++ engine -> JavaScriptEmscripten + asm.js60FPS
  • 6. WebGL: real-time 3D rendering the new 3D API standard OpenGL ES™ in a browser JavaScript API bindings supported in nearly all modern browsers supported on many devices shipped since early 2011 supported in • Safari, Firefox, Chrome, Opera • Internet Explorer (late 2013) • iOS – iAds only • Android – mobile Chrome • Blackberry, Tizen, Firefox OS • 500M+ seats -> 1B http://www.tonyparisi.com 5/29/20 13 …and it’s awesome. 100,000 Stars Google Experiment
  • 7. how WebGL works it’s a JavaScript drawing API draw to a canvas element using a special context low-level drawing – buffers, primitives, textures and shaders accelerated by graphics hardware (GPU) can draw 2D as well as 3D graphics there is no file format; no markup language; no DOM. http://www.tonyparisi.com 5/29/20 13
  • 8. a simple WebGL program 1. create a <canvas> element 2. obtain a drawing context 3. initialize the viewport 4. create one or more buffers 5. create one or more matrices 6. create one or more shaders 7. initialize the shaders 8. draw one or more primitives http://www.tonyparisi.com 5/29/20 13
  • 9. buffers and typed arrays var vertexBuffer; vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); var verts = [ // Front face -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, // Back face -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, … ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW); WebGL drawing functions use buffers of data new low-level data type stores arrays of floats and ints compactly http://www.tonyparisi.com 5/29/20 13
  • 10. shaders var vertexShaderSource = " attribute vec3 vertexPos;n" + " attribute vec2 texCoord;n" + " uniform mat4 modelViewMatrix;n" + " uniform mat4 projectionMatrix;n" + " varying vec2 vTexCoord;n" + " void main(void) {n" + " // Return the transformed and projected vertex valuen" + " gl_Position = projectionMatrix * modelViewMatrix * n" + " vec4(vertexPos, 1.0);n" + " // Output the texture coordinate in vTexCoordn" + " vTexCoord = texCoord;n" + " }n"; var fragmentShaderSource = " precision mediump float;n" + " varying vec2 vTexCoord;n" + " uniform sampler2D uSampler;n" + " void main(void) {n" + " // Return the pixel color: always output whiten" + " gl_FragColor = texture2D(uSampler, vec2(vTexCoord.s, vTexCoord.t));n" + "}n"; the vertex shader transforms model-space positions into screen space the fragment shader outputs a color value for each pixel http://www.tonyparisi.com 5/29/20 13
  • 11. drawingfunction draw(gl, obj) { // clear the background (with black) gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.enable(gl.DEPTH_TEST); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // set the shader to use gl.useProgram(shaderProgram); // connect up the shader parameters: vertex position, texture coordinate, // projection/model matrices and texture // set up the buffers gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer); gl.vertexAttribPointer(shaderVertexPositionAttribute, obj.vertSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, obj.texCoordBuffer); gl.vertexAttribPointer(shaderTexCoordAttribute, obj.texCoordSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, obj.indices); gl.uniformMatrix4fv(shaderProjectionMatrixUniform, false, projectionMatrix); gl.uniformMatrix4fv(shaderModelViewMatrixUniform, false, modelViewMatrix); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, webGLTexture); gl.uniform1i(shaderSamplerUniform, 0); // draw the object gl.drawElements(obj.primtype, obj.nIndices, gl.UNSIGNED_SHORT, 0); } clear the canvas set the shader set up buffers for vertices and texture coordinates pass transform and projection matrices to the shader set the texture and pass to the shader draw the object http://www.tonyparisi.com 5/29/20 13
  • 12. three.js: a JavaScript 3D engine the most popular WebGL library renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } ); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( 45, canvas.width / canvas.height, 1, 4000 ); scene.add(camera); var light = new THREE.DirectionalLight( 0xffffff, 1.5); scene.add( light ); var mapUrl ="../images/webgl-logo-256.jpg“; var map = THREE.ImageUtils.loadTexture(mapUrl ); var material = new THREE.MeshPhongMaterial({ map: map }); var geometry = new THREE.CubeGeometry(2, 2, 2); cube = new THREE.Mesh(geometry, material); scene.add( cube ); https://github.com/mrdoob/three.js/ represents WebGL at a high level using standard 3D graphics concepts can render to WebGL, 2D canvas, SVG and CSS3 http://www.tonyparisi.com 5/29/20 13
  • 14. animation requestAnimationFrame() http://www.paulirish.com/2011/requestanimationframe-for- smart-animating/ with JavaScript we can animate anything: materials, lights, textures…. shaders three.js has support for key frames, morphs and skins Tween.js – simple tweening library https://github.com/sole/tween.js/ var tween = new TWEEN.Tween( { x: 50, y: 0 } ) .to( { x: 400 }, 2000 ) .easing( TWEEN.Easing.Elastic.InOut ) .start(); function animate() { requestAnimationFrame( animate ); TWEEN.update(); } create and start tween call TWEEN.update() in your run loop http://www.tonyparisi.com 5/29/20 13
  • 15. pipeline tools WebGL has no file format; no markup language; no DOM. apps/libraries must define their own formats a lot of people are still creating content by writing code three.js loads several format types, but the loaders are incomplete and buggy 3D format standards COLLADA – XML http://www.khronos.org/files/collada_spec_1_4.pdf glTF – compact JSON + binary https://github.com/KhronosGroup/glTF art paths from 3ds Max, Maya, Blender, Sketchup 5/29/20 13 http://www.tonyparisi.com Maya file exported as COLLADA, loaded with three.js
  • 16. CSS3: advanced page effects CSS transitions CSS animations CSS 3D transforms CSS filter effects CSS custom filters http://www.tonyparisi.com 5/29/20 13
  • 17. CSS3 transitions allow gradual changes to CSS properties over time #box img { transition: transform .5s ease-in; transform: translate3d(0, -350px, 0); } #box img:hover { transition: transform .5s ease-in; transform: translate3d(0, 0px, 0); cursor: pointer; } transition: all .5s ease-in -.1s; transition-property: all; transition-duration: .5s; transition-timing-function: ease- in; transition-delay: .1s; source: http://www.kirupa.com/html5/all_about_css_transitions.htm shortcut for specify property to transition, duration of transition, easing function http://www.tonyparisi.com 5/29/20 13
  • 18. CSS3 animations allow fine control over animation behavior with key frames #bigcloud { animation: bobble 2s infinite; } @keyframes bobble { 0% { transform: translate3d(50px, 40px, 0px); animation-timing-function: ease-in; } 50% { transform: translate3d(50px, 50px, 0px); animation-timing-function: ease-out; } 100% { transform: translate3d(50px, 40px, 0px); } } keys are used to interpolate transform values control timing with ease in/out functions each key frame contains a transform source: http://www.kirupa.com/html5/all_about_css_animations.htm http://www.tonyparisi.com 5/29/20 13
  • 19. CSS3 3D transforms translate, rotate, scale page elements with perspective .bk-list li { perspective: 1800px; } .bk-list li .bk-front { transform-style: preserve-3d; transform-origin: 0% 50%; transform: translate3d(0,0,20px); } .bk-list li .bk-book.bk-bookdefault:hover { transform: rotate3d(0,1,0,35deg); } source http://tympanus.net/codrops/ 2013/01/08/3d-book- showcase/ browser will render element in 3D perspective add origin to translation apply to child elements apply 35 degree rotation about Y axis http://www.tonyparisi.com 5/29/20 13
  • 20. CSS3 filter effects apply post-processing effects to image elements source: http://html5-demos.appspot.com/static/css/filters/index.html img { -webkit-filter: sepia(100%); } img { -webkit-filter: grayscale(100%); } img { -webkit-filter: blur(2px); } img { -webkit-filter: brightness(33%); } img { -webkit-filter: contrast(67%); } http://www.tonyparisi.com 5/29/20 13
  • 21. CSS3 custom filters .shader { -webkit-filter: custom(url(shaders/crumple.vs) mix(url(shaders/crumple.fs) multiply source-atop), 50 50, amount 0, strength 0.2, lightIntensity 1.05, transform rotateX(0deg) translateZ(0px) ); -webkit-transition: -webkit-filter linear 1.5s; box-shadow: 0 0 2em #111; } .shader:hover { -webkit-filter: custom(url(shaders/crumple.vs) mix(url(shaders/crumple.fs) multiply source-atop), 50 50, amount 1, strength 0.2, lightIntensity 1.05, transform rotateX(0deg) translateZ(0px) ); } source: http://alteredqualia.com/css- shaders/crumple.html http://www.tonyparisi.com 5/29/20 13 Crumple shader by Branislav Ulicny (AlteredQualia) http://alteredqualia.com/css- shaders/crumple.html
  • 22. CSS3 vertex shader void main() { // Compute displacement float time = 10.0 * quadraticInOut( amount ); vec2 surfaceCoordinate = 0.025 * a_texCoord; float n = surface( surfaceCoordinate, time ); float curve = strength * n; vec4 pos = a_position; pos.z = amount * ( 0.5 * strength - curve ); // Compute normal const float e = 0.001; float nx = surface( surfaceCoordinate + vec2( e, 0.0 ), time ); float ny = surface( surfaceCoordinate + vec2( 0.0, e ), time ); vec3 normal = normalize( vec3( n - nx, n - ny, 1.0 - strength * 1.25 ) ); // Compute lighting (directional light) vec3 lightPosition = normalize( vec3( 0.0, 0.5, 1.0 ) ); float lightWeight = lightIntensity * max( dot( normal, lightPosition ), 0.0 ); // Set vertex position gl_Position = u_projectionMatrix * perspective( 0.9 ) * transform * pos; v_uv = a_texCoord; v_height = n; v_light = lightWeight; browser predefines a_texCoord and a_position, passes into shader shader outputs new vertex position, passes lighting information to fragment shader http://www.tonyparisi.com 5/29/20 13
  • 23. CSS3 fragment shader // Uniform values from CSS uniform float amount; // Varyings passed in from vertex shader varying vec2 v_uv; varying float v_height; varying float v_light; void main() { const float a = 1.0; float r, g, b; // Light variant float n = v_light; float v = mix( 1.0, n * n, amount ); r = g = b = sqrt( v ); // Set color matrix css_ColorMatrix = mat4( r, 0.0, 0.0, 0.0, 0.0, g, 0.0, 0.0, 0.0, 0.0, b, 0.0, 0.0, 0.0, 0.0, a ); } Fragment shader outputs blend value based on light calculated in vertex shader and user- supplied amount http://www.tonyparisi.com 5/29/20 13
  • 24. CSS3 support CSS3 Transitions supported since • Safari 3.2: 13/11/2008 • Firefox 4.0: Late 2010 • Chrome 1.0: 02/09/2008 • Opera 10.5: 02/03/2010 • Internet Explorer 10: 09/2011 CSS3 Animations supported since • Safari 4.0: 11/06/2008 • Chrome 1.0: 02/09/2008 • Firefox 5: 20/04/2011 • IE 10: 09/2011 • Opera: 03/2012 CSS 3D Transforms supported since • Safari 4.0: 11/06/2008 • Chrome: 28/08/2010 • IE 10: 09/2011 • Firefox: 27/10/2011 source: http://css3.bradshawenterprises.com/ CSS3 Filters supported since • Safari 6.0 • Chrome: 18.0 CSS3 Custom Filters supported only in Chrome http://www.tonyparisi.com 5/29/20 13
  • 25. fun with three.js and CSS3 http://mrdoob.github.io/three.js/examples/css3d_periodictable.html http://www.tonyparisi.com 5/29/20 13
  • 26. language innovations asm.js optimizable, low-level subset of JavaScript; strictly typed; improves performance (2x native vs. 3-10x) runs in FF and Chrome nightlies http://asmjs.org/ Emscripten LLVM-to-JavaScript compiler translates C++ native code to JavaScript; can output to asm.js https://github.com/kripken/emscripten/wiki new Web languages - Dart, TypeScript optionally strongly typed; class-based https://www.dartlang.org/ http://www.typescriptlang.org/ tackling performance and memory challenges http://www.tonyparisi.com 5/29/20 13
  • 27. always bet on JS 5/29/20 13 http://www.tonyparisi.com From: Brendan Eich’s The State of JavaScript http://brendaneich.github.com/Strange-Loop-2012/#/ So, I've thought for a long time ... if I could take a clean sheet of paper and write [a new language] that retains all the goodness of [JavaScript] ... I would not have come up with anything like Dart. -- Douglas Crockford
  • 28. resources WebGL specification http://www.khronos.org/registry/webgl/specs/latest/ Learning WebGL http://www.learningwebgl.com/ three.js https://github.com/mrdoob/three.js/ requestAnimationFrame http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/ CSS specifications http://www.w3.org/TR/css3-animations/ http://www.w3.org/TR/css3-transitions/ http://www.w3.org/TR/css3-transforms/ http://www.w3.org/TR/filter-effects/ CSS animation demos http://www.creativebloq.com/css3/animation-with-css3-712437 CSS 3D transforms explained http://desandro.github.io/3dtransforms/ Adobe filter lab - playing with filter effectshttp://html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/ Alan Greenblatt’s blog – CSS filter effects http://blattchat.com/ http://www.tonyparisi.com 5/29/20 13
  • 29. stay in touch contact information tparisi@gmail.com skype: auradeluxe http://twitter.com/auradeluxe htt p://www.tonyparisi.com/ http://www.learningwebgl.com/ get the book! WebGL: Up and Running http://shop.oreilly.com/product/0636920024729.do discount code: WEBGL13 (expires 6/7/13) print book ISBN: 9781449323578 ebook ISBN: 9781449326500 http://www.tonyparisi.com 5/29/20 13 book source code https://github.com/tparisi/WebGLBook