WebGL - It's GO Time

WebGL: it’s GO time.
tony parisi
september 30, 2013

 a billion desktops – check.
 mobile support on by default – check.
 Microsoft on board – check.
 engines, tools, killer apps – check.
it’s GO time.
10/3/20
13
http://www.tonyparisi.com

about me
serial entrepreneur
founder, stealth startup
consulting architect and CTO
co-creator, VRML and X3D web standards
co-designer, glTF
author, speaker instructor
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
https://github.com/tparisi/Programming3DApplications
get the books!
WebGL: Up and Running
http://www.amazon.com/dp/144932357X
Programming 3D Applications with HTML and WebGL
http://www.amazon.com/Programming-Applications-
HTML5-WebGL-Visualization/dp/1449362966 http://www.tonyparisi.com
10/3/20
13

WebGL:
real-time 3D rendering
the 3D API standard
OpenGL ES™ in a browser
JavaScript API bindings
supported in all modern browsers
supported on many devices
shipped since early 2011
supported in
• Safari, Firefox, Chrome, Opera
• Internet Explorer (late 2013)
• iOS mobile Safari – iAds only
• Android – mobile Chrome, mobile Firefox
• Blackberry, Tizen, Firefox OS
• 500M+ seats -> 1B
10/3/20
13

visualization
10/3/20
13
100,000 Stars Google Experiment
http://workshop.chromeexperiments.com/stars/

products and e-commerce
10/3/20
13
product concept piece – Vizi - TC Chang/T.
Parisi
http://vizi.gl/engine/tests/futurgo.html

advertising and media
10/3/20
13
collaboration with Rei Inamoto and AKQA
http://makeourmark.levi.com/project-overview-whatmovesyou.html
developed by Tony Parisi and Simo Santavirta
http://www.simppa.fi/

games
10/3/20
13
ported in 5 days Unreal native C++ engine -> JavaScriptEmscripten + asm.js60FPS

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.
10/3/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
10/3/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
10/3/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
10/3/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
10/3/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
10/3/20
13

three.js flagship projects
10/3/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
10/3/20
13

the WebGL content pipeline -
today
still pretty crude – tools and converters under development
sample work flows
A. OBJ (single model)
1. create 3D model or import into Blender
2. export to Three.js JSON format
3. load into Three.js application; hand-layout, hand-light, hand-animate
B. OBJ (single model)
1. convert to Three.js JSON using Python command-line tool
2. load into Three.js application; hand-layout, hand-light, hand-animate
C. MD2/MD5 (Quake single model with animation)
1. convert to Three.js JSON with online tool
2. load into Three.js application; hand-layout, hand-light
D. COLLADA (full scene)
1. export to COLLADA from Maya, 3ds Max, Blender, Sketchup
2. files contain scene layout, cameras, lights and animations – no need to do it by
hand
3. import into Three.js application and use
4. but COLLADA files are big to download and slow to parse 10/3/20
13

a “JPEG for 3D”
bridges the gap between existing 3D formats/tools and today’s GL based APIs
compact, efficient to load representation
balanced, pragmatic feature set
GL native data types require no additional processing
also includes common 3D constructs (hierarchy, cameras, lights, common
materials, animation )
reduces duplicated effort in content pipeline
a common publishing format for content tools
open specification; open process
Khronos Group initiative within the COLLADA working group
F. Robinet (lead), R. Arnaud, P. Cozzi, T. Parisi
http://gltf.gl/
10/3/20
13
the WebGL content pipeline -
coming soon: glTF

10/3/20
13
glTF work flows

glTF demo
10/3/20
13
model from 3drt.com

WebGL game engines and
frameworks
10/3/20
13
game engines/IDEs
PlayCanvas
http://www.playcanvas.com/
Turbulenz https://turbulenz.com/
Goo
Enginehttp://www.gootechnologies.c
om/
Artillery Engine
https://artillery.com/
Verold http://verold.com/
Sketchfab https://sketchfab.com/
Unreal… ?
http://www.extremetech.com/gaming/15190
0-unreal-engine-3-ported-to-javascript-and-
webgl-works-in-any-modern-browser
scene graph/rendering
libraries/application frameworks
Three.js
http://threejs.org/
SceneJS
http://scenejs.org/
BabylonJS
http://www.babylonjs.com/
Voodoo.js
http://www.voodoojs.com/
tQuery
http://jeromeetienne.github.io/tquery/

WebGL programming
language alternatives
Good old JavaScript
asm.js - optimized subset of JavaScript
2x slower than compiled native code == very good
http://asmjs.org/
Emscripten – cross-compile C++ and other native languages to JavaScript/asm.js
https://github.com/kripken/emscripten/wiki
Dart – structured web application programming
Directly supported in Chrome nightlies
Compiles to JavaScript for other browsers
https://www.dartlang.org/
Uno – Like Dart; C#-like language compiles to JavaScript
Still in restricted beta
http://www.outracks.com/
10/3/20
13

browser support
10/3/20
13
Building a game or app?
use Ludei
http://ludei.com/
desktop
• Safari, Firefox, Chrome, Opera
• Internet Explorer (late 2013)
mobile
• iOS - mobile Safari – iAds only
• Android – mobile Chrome
• Blackberry, Tizen, Firefox OS
500M+ seats -> 1B

it’s GO time.
come join me at the HTML5 developer
conference!
http://html5devconf.com/
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
https://github.com/tparisi/Programming3DApplications
get the books!
WebGL: Up and Running
http://www.amazon.com/dp/144932357X
Programming 3D Applications with HTML and WebGL
http://www.amazon.com/Programming-Applications-
HTML5-WebGL-Visualization/dp/1449362966 http://www.tonyparisi.com
10/3/20
13

WebGL - It's GO Time

More Related Content

What's hot

Viewers also liked

Similar to WebGL - It's GO Time

More from Tony Parisi

Recently uploaded

WebGL - It's GO Time