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