Embed Size (px)
DESCRIPTION
a billion desktops - check. mobile support turned on by default - check. Microsoft on board - check. engines, tools, killer apps – check. it's GO time. My look at the WebGL landscape circa late 2013, presented at the GamesJS Meetup September 30th 2013. http://www.meetup.com/gamesjs/events/140781742/
Citation preview
WebGL: it’s GO time.tony parisi
september 30, 2013
04/11/2023
http://www.tonyparisi.com
a billion desktops – check.
mobile support on by default – check.
Microsoft on board – check.
engines, tools, killer apps – check.
it’s GO time.
04/11/2023
http://www.tonyparisi.com
about meserial entrepreneur
founder, stealth startup
consulting architect and CTO
co-creator, VRML and X3D web standards
co-designer, glTF
author, speaker instructor
contact [email protected]: auradeluxehttp://twitter.com/auradeluxe http://www.tonyparisi.com/http://www.learningwebgl.com/
book source codehttps://github.com/tparisi/WebGLBook
https://github.com/tparisi/Programming3DApplications
get the books!WebGL: Up and Runninghttp://www.amazon.com/dp/144932357XProgramming 3D Applications with HTML and WebGLhttp://www.amazon.com/Programming-Applications-HTML5-WebGL-Visualization/dp/1449362966
04/11/2023
http://www.tonyparisi.com
WebGL:real-time 3D rendering
the 3D API standardOpenGL 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
04/11/2023
http://www.tonyparisi.com
visualization
100,000 Stars Google Experimenthttp://workshop.chromeexperiments.com/stars/
04/11/2023
http://www.tonyparisi.com
products and e-commerce
product concept piece – Vizi - TC Chang/T. Parisi
http://vizi.gl/engine/tests/futurgo.html
04/11/2023
http://www.tonyparisi.com
advertising and media
collaboration with Rei Inamoto and AKQAhttp://makeourmark.levi.com/project-overview-
whatmovesyou.htmldeveloped by Tony Parisi and Simo Santavirta
http://www.simppa.fi/
04/11/2023
http://www.tonyparisi.com
games
ported in 5 daysUnreal native C++ engine -> JavaScriptEmscripten + asm.js60FPS
04/11/2023
http://www.tonyparisi.com
how WebGL works
it’s a JavaScript drawing APIdraw 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.
04/11/2023
http://www.tonyparisi.com
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
04/11/2023
http://www.tonyparisi.com
buffers and typed arraysvar 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
04/11/2023
http://www.tonyparisi.com
shadersvar 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 value\
n" +" gl_Position = projectionMatrix * modelViewMatrix * \n" +" vec4(vertexPos, 1.0);\n" +" // Output the texture coordinate in vTexCoord\n" +" 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 white\n" +
" 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
04/11/2023
http://www.tonyparisi.com
drawing function 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 coordinatespass transform and projection matricesto the shader
set the texture and pass to the shader
draw the object
04/11/2023
http://www.tonyparisi.com
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 ahigh level using standard3D graphics concepts
can render to WebGL, 2D canvas, SVG and CSS3
04/11/2023
http://www.tonyparisi.com
three.js flagship projects
04/11/2023
http://www.tonyparisi.com
animationrequestAnimationFrame() 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
04/11/2023
the WebGL content pipeline - today
still pretty crude – tools and converters under development
sample work flowsA. 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 parsehttp://www.tonyparisi.com
04/11/2023
http://www.tonyparisi.com
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 setGL native data types require no additional processingalso includes common 3D constructs (hierarchy, cameras, lights, common materials, animation )
reduces duplicated effort in content pipeline
a common publishing format for content toolsopen specification; open process
Khronos Group initiative within the COLLADA working group
F. Robinet (lead), R. Arnaud, P. Cozzi, T. Parisi
http://gltf.gl/
the WebGL content pipeline - coming soon: glTF
04/11/2023
http://www.tonyparisi.com
glTF work flows
04/11/2023
http://www.tonyparisi.com
glTF demo
model from 3drt.com
04/11/2023
http://www.tonyparisi.com
WebGL game engines and frameworks
game engines/IDEs
PlayCanvas http://www.playcanvas.com/
Turbulenz https://turbulenz.com/
Goo Enginehttp://www.gootechnologies.com/
Artillery Engine
https://artillery.com/
Verold http://verold.com/
Sketchfab https://sketchfab.com/
Unreal… ? http://www.extremetech.com/gaming/151900-unreal-engine-3-ported-to-javascript-and-webgl-works-in-any-modern-browser
scene graph/rendering libraries/application frameworks
Three.js http://threejs.org/
SceneJShttp://scenejs.org/
BabylonJShttp://www.babylonjs.com/
Voodoo.jshttp://www.voodoojs.com/
tQueryhttp://jeromeetienne.github.io/tquery/
04/11/2023
http://www.tonyparisi.com
WebGL programminglanguage 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 programmingDirectly supported in Chrome nightlies
Compiles to JavaScript for other browsershttps://www.dartlang.org/
Uno – Like Dart; C#-like language compiles to JavaScriptStill in restricted betahttp://www.outracks.com/
04/11/2023
http://www.tonyparisi.com
browser support
Building a game or app? use Ludeihttp://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
04/11/2023
http://www.tonyparisi.com
it’s GO time.
come join me at the HTML5 developer conference!
http://html5devconf.com/
contact [email protected]: auradeluxehttp://twitter.com/auradeluxe http://www.tonyparisi.com/http://www.learningwebgl.com/
book source codehttps://github.com/tparisi/WebGLBook
https://github.com/tparisi/Programming3DApplications
get the books!WebGL: Up and Runninghttp://www.amazon.com/dp/144932357XProgramming 3D Applications with HTML and WebGLhttp://www.amazon.com/Programming-Applications-HTML5-WebGL-Visualization/dp/1449362966
