WebGL: The graphics API for web developers

WebGL:  The graphics API  for web developers Presented by Akihiro
Oyamada (@yomotsu) Jun 18, 2015

Frontend Engineer at PixelGrid, Inc. Akihiro Oyamada @yomotsu

Limitations of the Web 3D

4 www.nike.com/gb/en_gb/c/nikeid

5 http://www2.asics.co.jp/baseball/3dorder

6 http://www2.asics.co.jp/io/help/help.html They also provide  an installation guide…

There were  no graphics APIs  for the Web

The history  of the web 3d

• A Web Standerd • A JavaScript feature • Great
performance • Programable Shaders in GLSL

Click a link,  Just it will open!

Maintained by Khronos Group, not W3C

13 http://caniuse.com/#feat=webgl

Most of browsers support WebGL

Hardware-  accelerated

vec3(-1, -1, 0) vec3( 1, -1, 0) vec3(-1, 1, 0)
vec3(-1, 1, 0) vec3( 1, -1, 0) vec3( 1, 1, 0) ... 1 0 0 0 1 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 ✕ position matrix

for ( var i = 0, l = position.length; i
< l; i ++ ) { ! matrix.multiplyVector( position[ i ] ); ! }

Scalar Operation SIMD Operation

CPU GPU

Super fast! because of the parallel processing

• Tech deﬁnitions • Verbose initialization of WebGL • Shaders
in GLSL • Math: Linear algebra, physics, etc… :PVTUJMMIBWFUPMFBSO

three.js PIXI.js TWGL

three.js

29 http://threejs.org/

30 http://threejs.org/docs/

31 http://www.apple.com/macbook/design/

32 https://www.ana-ﬂightconnections.com/

33 https://www.ana-ﬂightconnections.com/

34 http://fr.special-t.com/media/ogreen/en/

35 https://yomotsu.github.io/walkthrough

make a scene

make a camera

add a light

add an object

http://localhost:8000/threejs/threejs_0_basic.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>=^.^=</title> </head> <body> <script
src="./lib/three.min.js"></script> <script> var width = window.innerWidth, height = window.innerHeight; ! var scene = new THREE.Scene(); ! var camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 ); camera.position.set( 0, 0, 3 ); ! var renderer = new THREE.WebGLRenderer(); renderer.setSize( width, height ); document.body.appendChild( renderer.domElement ); !

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>=^.^=</title> </head> <body> <script
src="./lib/three.min.js"></script> <script> var width = window.innerWidth, height = window.innerHeight; ! var scene = new THREE.Scene(); ! var camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 ); camera.position.set( 0, 0, 3 ); ! var renderer = new THREE.WebGLRenderer(); renderer.setSize( width, height ); document.body.appendChild( renderer.domElement ); ! load pixi.js

var scene = new THREE.Scene(); ! var camera = new
THREE.PerspectiveCamera( 40, width / height, 1, 1000 ); camera.position.set( 0, 0, 3 ); ! var renderer = new THREE.WebGLRenderer(); renderer.setSize( width, height ); document.body.appendChild( renderer.domElement ); ! var directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set( 0, 1, 1 ).normalize(); scene.add( directionalLight ); ! var box = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 1 ), new THREE.MeshPhongMaterial( { color: 0xff0000 } ) ); scene.add( box ); ! ( function renderLoop () { ! make a renderer

! var renderer = new THREE.WebGLRenderer(); renderer.setSize( width, height );
document.body.appendChild( renderer.domElement ); ! var directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set( 0, 1, 1 ).normalize(); scene.add( directionalLight ); ! var box = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 1 ), new THREE.MeshPhongMaterial( { color: 0xff0000 } ) ); scene.add( box ); ! ( function renderLoop () { ! requestAnimationFrame( renderLoop ); box.rotation.y += 0.01; renderer.render( scene, camera ); ! make a light

var directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set( 0, 1,
1 ).normalize(); scene.add( directionalLight ); ! var box = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 1 ), new THREE.MeshPhongMaterial( { color: 0xff0000 } ) ); scene.add( box ); ! ( function renderLoop () { ! requestAnimationFrame( renderLoop ); box.rotation.y += 0.01; renderer.render( scene, camera ); ! } )(); </script> ! </body> </html> make an 3d object

scene.add( directionalLight ); ! var box = new THREE.Mesh( new
THREE.BoxGeometry( 1, 1, 1 ), new THREE.MeshPhongMaterial( { color: 0xff0000 } ) ); scene.add( box ); ! ( function renderLoop () { ! requestAnimationFrame( renderLoop ); box.rotation.y += 0.01; renderer.render( scene, camera ); ! } )(); </script> ! </body> </html> render it

http://localhost:8000/threejs/threejs_0_basic.html

3D Models http://localhost:8000/threejs/threejs_1_3dmodel.html

skeletal animation http://localhost:8000/threejs/threejs_2_animation.html

events http://localhost:8000/threejs/threejs_3_event.html

custom shader http://yomotsu.github.io/VolumetricFire/examples/example2.html

• 3D model import • Animations • Math functions (
such as vector and matrix ) • Build-in Shaders • Post processing eﬀects and more!

56 http://www.pixijs.com/

57 http://pixijs.github.io/docs/

58 http://www.html5gamedevs.com/forum/15-pixijs/

59 http://www.goodboydigital.com/runpixierun/

60 http://kaatje.ketnet.be/html/

61 http://www.wolverineunleashed.com/

62 http://archive.revolutionsinsound.com/#/explore/clubnights/bugged-out

http://localhost:8000/pixijs/pixi_0_basic.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>=^.^=</title> <style> body{margin: 0;}
canvas{display: block;} </style> </head> <body> ! <script src="pixi.min.js"></script> ! <script> ! var renderer = new PIXI.autoDetectRenderer( 600, 400, { backgroundColor : 0xCCCCCC } ); document.body.appendChild( renderer.view ); !

backgroundColor : 0xCCCCCC } ); document.body.appendChild( renderer.view ); ! var
stage = new PIXI.Container(); ! var monster = new PIXI.Sprite.fromImage( 'monster.png' ); monster.position.set( 100, 50 ); stage.addChild( monster ); ! var animate = ( function animate() { ! requestAnimationFrame( animate ); renderer.render( stage ); ! } )(); ! </script> ! </body> </html> make a container as a stage

backgroundColor : 0xCCCCCC } ); document.body.appendChild( renderer.view ); ! var
stage = new PIXI.Container(); ! var monster = new PIXI.Sprite.fromImage( 'monster.png' ); monster.position.set( 100, 50 ); stage.addChild( monster ); ! var animate = ( function animate() { ! requestAnimationFrame( animate ); renderer.render( stage ); ! } )(); ! </script> ! </body> </html> make a display object

var stage = new PIXI.Container(); ! var monster = new
PIXI.Sprite.fromImage( 'monster.png' ); monster.position.set( 100, 50 ); stage.addChild( monster ); ! var animate = ( function animate() { ! requestAnimationFrame( animate ); renderer.render( stage ); ! } )(); ! </script> ! </body> </html> render it

http://localhost:8000/pixijs/pixi_0_basic.html

ﬁlters http://localhost:8000/pixijs/pixi_1_blend.html

sprite animations http://localhost:8000/pixijs/pixi_2_sprite.html

events http://localhost:8000/pixijs/pixi_3_event.html

shaders http://localhost:8000/pixijs/pixi_4_shader.html

custom shaders http://localhost:8000/pixijs/pixi_5_shader2.html

• Sprite and spine animations • Mouse and touch events
• Pixel manipulation with WebGL • Custom shaders and more

• Stage has been deprecated, now container • Name spaces
has been changed • EventListener has been supported • Color matrix has been changed to 5x4 from 4x4 and many changes %JGGFSFODFTCFUXFFO7BOE7

TWGL.js by the author of WebGL Fundamentals

79 http://twgljs.org/

http://localhost:8000/twgljs/twgl_1.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>=^.^=</title> <style> body{margin: 0;}
canvas{display: block;} </style> </head> <body> ! <canvas id="canvas" width="512" height="512"></canvas> ! ! <script src="twgl-full.js"></script> <script> ! var canvas = document.getElementById( 'canvas' ); canvas.width = window.innerWidth; canvas.height = window.innerHeight;

</head> <body> ! <canvas id="canvas" width="512" height="512"></canvas> ! ! <script
src="twgl-full.js"></script> <script> ! var canvas = document.getElementById( 'canvas' ); canvas.width = window.innerWidth; canvas.height = window.innerHeight; ! var gl = twgl.getWebGLContext( canvas ); ! var vs = [ 'attribute vec3 position;', 'attribute vec2 texcoord;', 'uniform mat4 projectionMatrix;', 'uniform mat4 viewMatrix;', prepare a canvas

</head> <body> ! <canvas id="canvas" width="512" height="512"></canvas> ! ! <script
src="twgl-full.js"></script> <script> ! var canvas = document.getElementById( 'canvas' ); canvas.width = window.innerWidth; canvas.height = window.innerHeight; ! var gl = twgl.getWebGLContext( canvas ); ! var vs = [ 'attribute vec3 position;', 'attribute vec2 texcoord;', 'uniform mat4 projectionMatrix;', 'uniform mat4 viewMatrix;', load twgl.js

! <script src="twgl-full.js"></script> <script> ! var canvas = document.getElementById( 'canvas'
); canvas.width = window.innerWidth; canvas.height = window.innerHeight; ! var gl = twgl.getWebGLContext( canvas ); ! var vs = [ 'attribute vec3 position;', 'attribute vec2 texcoord;', 'uniform mat4 projectionMatrix;', 'uniform mat4 viewMatrix;', 'uniform mat4 modelMatrix;', 'varying vec2 vUv;', 'void main () {', get gl context

! var vs = [ 'attribute vec3 position;', 'attribute vec2
texcoord;', 'uniform mat4 projectionMatrix;', 'uniform mat4 viewMatrix;', 'uniform mat4 modelMatrix;', 'varying vec2 vUv;', 'void main () {', 'gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0 );', 'vUv = texcoord;', ! '}' ].join( '\n' ); ! var fs = [ prepare VS source

].join( '\n' ); ! var fs = [ 'precision mediump
float;', ! 'uniform sampler2D diffuse;', ! 'varying vec2 vUv;', ! 'void main () {', ! 'vec4 diffuseColor = texture2D( diffuse, vUv );', 'gl_FragColor = diffuseColor;', // 'gl_FragColor = vec4( 0, 0, 0, 1 );', ! '}' ].join( '\n' ); ! var programInfo = twgl.createProgramInfo( gl, [ vs, fs ] ); ! var arrays = { position: { prepare FS source

! '}' ].join( '\n' ); ! var programInfo = twgl.createProgramInfo(
gl, [ vs, fs ] ); ! var arrays = { position: { numComponents: 3, data: [ -1, -1, 0, 1, -1, 0, -1, 1, 0, ! -1, 1, 0, 1, -1, 0, 1, 1, 0 ] }, indices: { numComponents: 3, data: [ compile those and  create a program

! var arrays = { position: { numComponents: 3, data:
[ -1, -1, 0, 1, -1, 0, -1, 1, 0, ! -1, 1, 0, 1, -1, 0, 1, 1, 0 ] }, indices: { numComponents: 3, data: [ 0, 1, 2, 3, 4, 5 ] }, prepare attributes

}, indices: { numComponents: 3, data: [ 0, 1, 2,
3, 4, 5 ] }, texcoord: { numComponents: 2, data: [ 0, 1, 1, 1, 0, 0, ! 0, 0, 1, 1, 1, 0 ] } }; !

}; ! var bufferInfo = twgl.createBufferInfoFromArrays( gl, arrays ); !
! var projectionMatrix = twgl.m4.perspective( 30 * Math.PI / 180, gl.canvas.clientWidth / gl.canvas.clientHeight, 1, 1000 ); var viewMatrix = twgl.m4.translate( twgl.m4.identity(), [ 0, 0 ,-5 ] ); var modelMatrix = twgl.m4.rotationY( 1 ); ! ! var tex = twgl.createTexture( gl, { min: gl.NEAREST, mag: gl.NEAREST, src: './uv.png' }, function () {} ); ! make a buffer

! var projectionMatrix = twgl.m4.perspective( 30 * Math.PI / 180,
gl.canvas.clientWidth / gl.canvas.clientHeight, 1, 1000 ); var viewMatrix = twgl.m4.translate( twgl.m4.identity(), [ 0, 0 ,-5 ] ); var modelMatrix = twgl.m4.rotationY( 1 ); ! ! var tex = twgl.createTexture( gl, { min: gl.NEAREST, mag: gl.NEAREST, src: './uv.png' }, function () {} ); ! var uniforms = { projectionMatrix: projectionMatrix, viewMatrix : viewMatrix, modelMatrix : modelMatrix, prepare unifroms

}, function () {} ); ! var uniforms = {
projectionMatrix: projectionMatrix, viewMatrix : viewMatrix, modelMatrix : modelMatrix, diffuse : tex }; ! var render = function ( time ) { ! twgl.resizeCanvasToDisplaySize( gl.canvas ); gl.viewport( 0, 0, gl.canvas.width, gl.canvas.height ); uniforms.modelMatrix = twgl.m4.rotationY( time * 0.001 ); ! gl.useProgram( programInfo.program ); twgl.setBuffersAndAttributes( gl, programInfo, bufferInfo ); twgl.setUniforms( programInfo, uniforms ); gl.drawElements( gl.TRIANGLES, bufferInfo.numElements, gl.UNSIGNED_SHORT, 0 ); !

! var render = function ( time ) { !
twgl.resizeCanvasToDisplaySize( gl.canvas ); gl.viewport( 0, 0, gl.canvas.width, gl.canvas.height ); uniforms.modelMatrix = twgl.m4.rotationY( time * 0.001 ); ! gl.useProgram( programInfo.program ); twgl.setBuffersAndAttributes( gl, programInfo, bufferInfo ); twgl.setUniforms( programInfo, uniforms ); gl.drawElements( gl.TRIANGLES, bufferInfo.numElements, gl.UNSIGNED_SHORT, 0 ); ! requestAnimationFrame( render ); ! }; ! render( 0 ); ! </script> ! render it!

• Less verbose initialization • Math functions That’s it!

WebGL is not PS4

• WebUI for 3D contents  Still not exist a lot
• Multiple devices  High-End Gaming PC, Laptop, Mobile and others • Internet Connection 8IBUXFOFFEUPUIJOLBCPVU

• Number of polygons  esp. ﬁle size • Texture size
• Resolution • Number of Draw-calls 8IBUXFOFFEUPDBSFBCPVU

Like 3DS, PSP, PSVita FYI: Playable characters in FINAL FANTASY
TYPE-0 consist of  about 1000 tris and 76KB textures http://hexadrive.jp/lab/case/1573/

Video games could be  great knowledge

d = navigator.  getVRDevices()

d = navigator.  getVRDevices() •d[ i ].VRDevice (Type of the
device) •d[ i ].VREyeParameters •FOV •eyeTranslation •d[ i ].VRPositionState •position •velocity •orientation •angularVelocity othres...

vrHMD.getEyeTranslation( ‘left' ); vrHMD.getEyeTranslation( 'right' ); vrHMD.getRecommendedEyeFieldOfView( 'left' ); vrHMD.getRecommendedEyeFieldOfView(
'right' );

Chromium WebVR Builds Firefox Nightly Builds WebVR Oculus Rift Enabler
as of Jun, 2015

Virtuix Omni Locomotion HMD Cyberith Virtualizer OCULUS Rift SONY Morpheus
HTC Vine • Leap Motion • PrioVR • Control VR • Sixense Stem • Razer Hydra Others

110 https://www.youtube.com/watch?v=aTtfAQEeAJI

Drop-in Phone  Viewers

Drop-in Phone  Viewers • Diﬀerent APIs  (It will use DeviceOrientation
API instead) • Limited performance  (Stereo rendering on mobile device)

Conclusion

WebGL is  a cross-platform,  web standard, fast,  powerful graphics API

Several JS libraries  are available  for diﬀerent purposes

WebGL is still expanding WebGL2, WebVR and others

gl.ﬁnish(); @yomotsu

WebGL: The graphics API for web developers

WebGL: The graphics API for web developers

More Decks by yomotsu

Other Decks in Programming

Featured

Transcript

WebGL: The graphics API for web developers

WebGL: The graphics API for web developers