WebGL - It's GO Time

3,981 views

Published on

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/

Published in: Technology, Art & Photos
6 Comments
11 Likes
Statistics
Notes
No Downloads
Views
Total views
3,981
On SlideShare
0
From Embeds
0
Number of Embeds
127
Actions
Shares
0
Downloads
74
Comments
6
Likes
11
Embeds 0
No embeds

No notes for slide

WebGL - It's GO Time

  1. 1. WebGL: it’s GO time. tony parisi september 30, 2013
  2. 2.  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
  3. 3. 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
  4. 4. 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 http://www.tonyparisi.com 10/3/20 13
  5. 5. visualization 10/3/20 13 http://www.tonyparisi.com 100,000 Stars Google Experiment http://workshop.chromeexperiments.com/stars/
  6. 6. products and e-commerce 10/3/20 13 http://www.tonyparisi.com product concept piece – Vizi - TC Chang/T. Parisi http://vizi.gl/engine/tests/futurgo.html
  7. 7. advertising and media 10/3/20 13 http://www.tonyparisi.com 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/
  8. 8. games http://www.tonyparisi.com 10/3/20 13 ported in 5 days Unreal native C++ engine -> JavaScriptEmscripten + asm.js60FPS
  9. 9. 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 10/3/20 13
  10. 10. 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 10/3/20 13
  11. 11. 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 10/3/20 13
  12. 12. 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 10/3/20 13
  13. 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 10/3/20 13
  14. 14. 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 10/3/20 13
  15. 15. three.js flagship projects http://www.tonyparisi.com 10/3/20 13
  16. 16. 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 10/3/20 13
  17. 17. 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 http://www.tonyparisi.com
  18. 18. 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 http://www.tonyparisi.com the WebGL content pipeline - coming soon: glTF
  19. 19. 10/3/20 13 http://www.tonyparisi.com glTF work flows
  20. 20. glTF demo 10/3/20 13 http://www.tonyparisi.com model from 3drt.com
  21. 21. WebGL game engines and frameworks 10/3/20 13 http://www.tonyparisi.com 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/
  22. 22. 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 http://www.tonyparisi.com
  23. 23. browser support 10/3/20 13 http://www.tonyparisi.com 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
  24. 24. 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

×