Web Graphics of the present time, and the near future

Web Graphics of the present time,  and the near future
Presented by Akihiro Oyamada (@yomotsu)   at WCAN on 11th Apr, 2015

@yomotsu 小山田晃浩

Can we use these?

SVG 9+ 3+ Canvas2D 9+ WebGL 11+ 8+ 8+ 37+

https://support.microsoft.com/gp/microsoft-internet-explorer

Windows Vista IE 9 - Windows 7 IE 11 -
Windows 8.1 IE 11 - Windows 10 Spartan ( IE11 )

8 → 11

1. SVG with SnapSVG 2. Canvas with EaselJS 3. WebGL
with pixi.js and three.js 4. WebVR

http://pbskids.org/

http://yourpower.panda.org/

http://altspace.com/

http://alkopedia.dareville.com/

http://www.albinotonnina.com/

Snap.svg

path animation http://localhost:8000/snapsvg_1_pathAnimation.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>=^.^=</title> </head> <body> !
<button>Animate it!</button> ! <svg class="pathAnim2" width="512" height="300" viewBox="0 0 512 300"> <path d="M12.5,130c0,0,46.5-60.5,172-60.5S333,...." fill="none" stroke="#ffffff" stroke-opacity="0.5" strokeMiterLimit="10" stroke-width="4" stroke-dasharray="12, 6"

! <button>Animate it!</button> ! <svg class="pathAnim2" width="512" height="300" viewBox="0 0
512 300"> <path d="M12.5,130c0,0,46.5-60.5,172-60.5S333,...." fill="none" stroke="#ffffff" stroke-opacity="0.5" strokeMiterLimit="10" stroke-width="4" stroke-dasharray="12, 6" stroke-dashoffset="100"/> <image xlink:href="truck.svg" width="128" height="128"> </svg> ! ! <script src="./lib/snap.svg-min.js"></script> class attribute guide path moving object

! ! <script src="./lib/snap.svg-min.js"></script> <script> ! var pathAnim = Snap(
'.pathAnim2' ); var path = pathAnim.select( 'path' ); var truck = pathAnim.select( 'image' ); var pathLength = path.getTotalLength(); var duration = 5000; ! var playAnim = function () { ! Snap.animate( 0, 1, function( progress ) { ! var movePoint = path.getPointAtLength( pathLength * progress ); ! truck.transform( 't' + ( movePoint.x - 64 ) + ',' +

var pathLength = path.getTotalLength(); var duration = 5000; ! var
playAnim = function () { ! Snap.animate( 0, 1, function( progress ) { ! var movePoint = path.getPointAtLength( pathLength * progress ); ! truck.transform( 't' + ( movePoint.x - 64 ) + ',' + ( movePoint.y - 64 ) + 'r' + ( movePoint.alpha - 180 ) ); ! }, duration, mina.easeinout ); ! }; ! playAnim();

! playAnim(); ! var button = document.querySelector( 'button' ); button.addEventListener(
'click', playAnim ); ! </script> ! </body> </html>

morphing http://localhost:8000/snapsvg_2_morph.html

</head> <body> ! <svg width="128" height="128" viewBox="0 0 64 64"
class="octoIcon"> ! <defs> ! <path class="default" d="M11.2,37.6c-0.1-...."/> <path class="hover" d="M7,39.8c0,0-0.1-0..."/> ! </defs> ! <path fill="#fff" class="main"/> ! </svg> ! ! <script src="./lib/snap.svg-min.js"></script> <script> !

<path fill="#fff" class="main"/> ! </svg> ! ! <script src="./lib/snap.svg-min.js"></script> <script>
! var icon = Snap( document.querySelector( '.octoIcon' ) ); var pathMain =icon.select('.main'); var pathDefault=icon.select('.default').attr('d'); var pathHover =icon.select(‘.hover').attr('d'); ! pathMain.attr( 'd', pathDefault ); ! icon.node.addEventListener('mouseover',function(){ ! pathMain.animate( { d: pathHover

pathMain.attr( 'd', pathDefault ); ! icon.node.addEventListener('mouseover',function(){ ! pathMain.animate( { d:
pathHover }, 500, mina.bounce ); ! }); ! icon.node.addEventListener('mouseout',function(){ ! pathMain.animate( { d: pathDefault }, 500, mina.bounce ); ! }); ! </script> !

templating http://localhost:8000/snapsvg_3_graph.html

} ! var template = _.template( [ '<% var gridBottom
= ( data.cellLength.y - 1 ) * data.cellSize.height + data.cellOffset.y; %>', '<g class=“grid">', ! // grid holizontal '<% for ( var i = 0, l = data.cellLength.y; i < l; i ++ ) { %>’, ! '<% var x1 = data.cellOffset.x - 20; %>', '<% var y1 = data.cellOffset.y + data.cellSize.height * i; %>', '<% var x2 = data.cellOffset.x + data.cellSize.width * ( data.cellLength.x - 1 ); %>', '<% var y2 = y1; %>', '<line x1="<%= x1 %>" y1="<%= y1 %>" x2="<%= x2 %>" y2="<%= y2 %>" stroke="#ffffff" stroke- dasharray="6, 6" stroke-width="2"/>', '<text x="<%= x1 - 10 %>" y="<%= y1 %>" font-

].join( '\n' ) ); ! ! ! var svgSource =
template( { data: data } ); var svgDOM = Snap.parse( svgSource ); graph.append( svgDOM ); ! ! var point = graph.selectAll( '.point' ); var points = graph.selectAll( '.points' ); var surface = graph.select( '.surface' ); ! _.each( point, function ( el ) { ! var mat1 = new Snap.Matrix(); var mat2 = new Snap.Matrix(); ! mat1.translate( +el.attr( 'data-cx1' ), +el.attr( 'data-cy1' ) );

• K2VFSZͷΑ͏ͳ47(%0.ૢ࡞  SVG DOM manipulation, like jQuery • Ξχϝʔγϣϯ  Animations
• ςϯϓϨʔτల։  Templating • "KBYʹΑΔ֎෦47(ಡΈࠐΈ  Import external SVG ﬁle with Ajax • 47(ಠࣗػೳͷαϙʔτ  SVG features support, like masking, clipping, patterns etc...

http://snapsvg.io/

http://snapsvg.io/docs/

+ 8 Raphael.js

http://dreamplus.asia/en/

http://kato-hosp.jp/

http://wheel.dunlop.co.jp/simulator/2/

http://martin-h.com/

http://www.itsumokawaii.jp/en/

make a stage

make display objects

add them to the stage

render the stage

http://localhost:8000/easeljs_0_basic.html

<canvas width="640" height="360" id=“myCanvas"> </canvas> ! <script src=“./lib/createjs-2014.12.12.min.js"> </script> <script> ! var canvas = document.querySelector( '#myCanvas' ); var stage = new createjs.Stage( canvas ); !

<canvas width="640" height="360" id=“myCanvas"> </canvas> ! <script src=“./lib/createjs-2014.12.12.min.js"> </script> <script> ! var canvas = document.querySelector( '#myCanvas' ); var stage = new createjs.Stage( canvas ); ! make a canvas element

<canvas width="640" height="360" id=“myCanvas"> </canvas> ! <script src=“./lib/createjs-2014.12.12.min.js"> </script> <script>
! var canvas = document.querySelector( '#myCanvas' ); var stage = new createjs.Stage( canvas ); ! var robot = new createjs.Bitmap( './img/ craftybot.png' ); robot.set( { x: 200, y: 100 } ); stage.addChild( robot ); ! var update = function() { make a stage

</script> <script> ! var canvas = document.querySelector( '#myCanvas' ); var
stage = new createjs.Stage( canvas ); ! var robot = new createjs.Bitmap( './img/ craftybot.png' ); robot.set( { x: 200, y: 100 } ); stage.addChild( robot ); ! var update = function() { ! stage.update(); ! } make a display object

var canvas = document.querySelector( '#myCanvas' ); var stage = new
createjs.Stage( canvas ); ! var robot = new createjs.Bitmap( './img/ craftybot.png' ); robot.set( { x: 200, y: 100 } ); stage.addChild( robot ); ! var update = function() { ! stage.update(); ! } ! createjs.Ticker.setFPS( 60 ); createjs.Ticker.addEventListener( 'tick', update ); add to the stage

craftybot.png' ); robot.set( { x: 200, y: 100 } );
stage.addChild( robot ); ! var update = function() { ! stage.update(); ! } ! createjs.Ticker.setFPS( 60 ); createjs.Ticker.addEventListener( 'tick', update ); </script> ! </body> </html> update to render

blend mode http://localhost:8000/easeljs_1_blend.html

sprite animations http://localhost:8000/easeljs_2_sprite.html

events http://localhost:8000/easeljs_3_event.html

• อ࣋Ϟʔυ"1*ͷΑ͏ͳɺ  ΦϒδΣΫτ؅ཧ  Speciﬁc objects management, like retained mode APIs
• 4QSJUF΍4QJOFͷΞχϝʔγϣϯ  Sprite and Spine animations • ϐΫηϧૢ࡞΍جຊతͳϑΟϧλʔ  Pixel manipulation and basic ﬁlters • Ϛ΢εͱλονΠϕϯτ  Mouse and touch events

http://www.createjs.com/#!/EaselJS

http://www.createjs.com/Docs/EaselJS/modules/EaselJS.html

SVG vs Canvas

https://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx#19graphicsInHtml5 canvas vs svg ύϑΥʔϚϯε

http://archive.revolutionsinsound.com/

http://www.wolverineunleashed.com/

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

http://www.theboxtrolls.com/experience/the-cavern

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

http://localhost:8000/pixi_0_basic.html

<html> <head> <meta charset="utf-8"> <title>=^.^=</title> </head> <body> ! <script src="./lib/pixi.js"></script>
! <script> var renderer=new PIXI.autoDetectRenderer(640,360); document.body.appendChild( renderer.view ); ! var stage = new PIXI.Stage( 0xffffff ); ! var robot = new PIXI.Sprite.fromImage( './img/ craftybot.png' ); robot.position.set( 200, 100 ); stage.addChild( robot ); ! ( function animate() { load pixi.js

<title>=^.^=</title> </head> <body> ! <script src="./lib/pixi.js"></script> ! <script> var renderer=new
PIXI.autoDetectRenderer(640,360); document.body.appendChild( renderer.view ); ! var stage = new PIXI.Stage( 0xffffff ); ! var robot = new PIXI.Sprite.fromImage( './img/ craftybot.png' ); robot.position.set( 200, 100 ); stage.addChild( robot ); ! ( function animate() { ! requestAnimationFrame( animate ); renderer.render( stage ); make a renderer canvas

! <script src="./lib/pixi.js"></script> ! <script> var renderer=new PIXI.autoDetectRenderer(640,360); document.body.appendChild( renderer.view
); ! var stage = new PIXI.Stage( 0xffffff ); ! var robot = new PIXI.Sprite.fromImage( './img/ craftybot.png' ); robot.position.set( 200, 100 ); stage.addChild( robot ); ! ( function animate() { ! requestAnimationFrame( animate ); renderer.render( stage ); ! } )(); ! make a stage

! <script> var renderer=new PIXI.autoDetectRenderer(640,360); document.body.appendChild( renderer.view ); ! var
stage = new PIXI.Stage( 0xffffff ); ! var robot = new PIXI.Sprite.fromImage( './img/ craftybot.png' ); robot.position.set( 200, 100 ); stage.addChild( robot ); ! ( function animate() { ! requestAnimationFrame( animate ); renderer.render( stage ); ! } )(); ! </script> ! make a display object

document.body.appendChild( renderer.view ); ! var stage = new PIXI.Stage( 0xffffff
); ! var robot = new PIXI.Sprite.fromImage( './img/ craftybot.png' ); robot.position.set( 200, 100 ); stage.addChild( robot ); ! ( function animate() { ! requestAnimationFrame( animate ); renderer.render( stage ); ! } )(); ! </script> ! </body> </html> add to the stage

var stage = new PIXI.Stage( 0xffffff ); ! var robot
= new PIXI.Sprite.fromImage( './img/ craftybot.png' ); robot.position.set( 200, 100 ); stage.addChild( robot ); ! ( function animate() { ! requestAnimationFrame( animate ); renderer.render( stage ); ! } )(); ! </script> ! </body> </html> render it!

blend mode http://localhost:8000/pixi_1_blend.html

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

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

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

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

! var MyFilter = ( function () { ! var
MyFilter = function() { ! PIXI.AbstractFilter.call( this ); ! this.passes = [ this ]; ! // types // '1f': scalar // '2f': vec2 // '3f': vec3 // '4f': vec4 // 'mat4': mat4 this.uniforms = { size: { type: '1f', value:0.01 } }; ! // http://www.html5gamedevs.com/topic/10585-list- of-available-filter-shader-uniforms/ extend Filter class

// http://wp.applesandoranges.eu/?p=14 this.fragmentSrc = [ ! 'precision mediump float;', 'varying
vec2 vTextureCoord;', 'varying vec4 vColor;', 'uniform sampler2D uSampler;', ! 'uniform float size;', ! 'void main( void ) {', ! 'vec4 sum = vec4( 0 );', ! 'for ( int i = -4; i < 4; i ++ ) {', ! 'for( int j = -4; j < 4; j++ ){', ! 'sum += texture2D( uSampler, vTextureCoord + vec2( j, i ) * size ) * 0.05;', ! '}', write your   fragment  shader

'if ( alpha > 0.8 ) {', ! 'gl_FragColor =
texColor;', ! '} else {', ! 'gl_FragColor = sum;', ! '}', ! '}' ! ]; ! }; ! MyFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); ! return MyFilter; ! } )();

• &BTFM+4ͱΑ͘ࣅͨ"1*  Very similar APIs to EaselJS • 8FC(-Λར༻ͨ͠ߴ଎ॲཧ 
High speed pixel manipulation with WebGL • ಠࣗγΣʔμʔͷ௥Ճ  Custom shaders

http://www.pixijs.com/

http://www.goodboydigital.com/pixijs/docs/

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

three.js

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

http://gravitymovie.warnerbros.com/#/home

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

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

https://yomotsu.github.io/walkthrough

make a scene

make a camera

add a light

add an object

http://localhost:8000/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

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( { antialias: true } ); 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(

THREE.WebGLRenderer( { antialias: true } ); 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;

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>

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

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

skeletal animation http://localhost:8000/threejs_2_bone.html

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

custom shader http://localhost:8000/threejs_4_shader.html

http://threejs.org/

http://threejs.org/docs/

• %ϞσϧಡΈࠐΈ  Import 3D models • Ξχϝʔγϣϯ  Animations
• ܭࢉܥͷػೳ ϕΫτϧɺߦྻͳͲ   Math functions, like vector, matrix • ಠࣗγΣʔμʔͷ௥Ճ  Custom shaders Post process, Debugging WebGL, Rapid update, BOENPSF

https://www.youtube.com/watch?v=pMrhaLb6UeQ

d = navigator.  getVRDevices()

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

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

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

https://www.youtube.com/watch?v=cBvCS78ZC1c

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

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

Drop-in Phone  Viewers

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

for more info,  visit http://webvr.info/

Conclusion

ύϥϥοΫεޮՌ͸  ΋͸΍લ࣌୅ Parallax Eﬀects are no longer cool

47(΍$BOWBTΛ  ࢖ͬͯΈΑ͏ Time to start using SVG and Canvas

47(ʹ͸4OBQ47(  $BOWBTʹ͸&BTFM+4 SnapSVG for SVG, EaselJS for Canvas

8FC(-͸͞Βʹύϫϑϧʂ  QJYJKT΍UISFFKTΛ࢖͓͏ WebGL is more powerful! Use pixi.js and three.js

8FC73͕Մೳʹ͢Δ8FCͰͷ  όʔνϟϧɾϦΞϦςΟʔ WebVR Brings Virtual Reality to the Web

Thanks! @yomotsu

Web Graphics of the present time, and the near future

Web Graphics of the present time, and the near future

More Decks by yomotsu

Other Decks in Design

Featured

Transcript

Web Graphics of the present time, and the near future

Web Graphics of the present time, and the near future