$30 off During Our Annual Pro Sale. View Details »

Web Graphics of the present time,
and the near future

yomotsu
April 11, 2015

Web Graphics of the present time,
and the near future

yomotsu

April 11, 2015
Tweet

More Decks by yomotsu

Other Decks in Design

Transcript

  1. Web Graphics
    of the present time,

    and the near future
    Presented by Akihiro Oyamada (@yomotsu) 

    at WCAN on 11th Apr, 2015

    View Slide

  2. @yomotsu
    小山田 晃浩

    View Slide

  3. Can we use these?

    View Slide

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

    View Slide

  5. View Slide

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

    View Slide

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

    View Slide

  8. 8 → 11

    View Slide

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

    View Slide

  10. View Slide

  11. http://pbskids.org/

    View Slide

  12. http://yourpower.panda.org/

    View Slide

  13. http://altspace.com/

    View Slide

  14. http://alkopedia.dareville.com/

    View Slide

  15. http://www.albinotonnina.com/

    View Slide

  16. Snap.svg

    View Slide

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

    View Slide





  18. =^.^=


    !
    Animate it!
    !
    viewBox="0 0 512 300">
    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"

    View Slide

  19. !
    Animate it!
    !
    viewBox="0 0 512 300">
    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"/>
    height="128">

    !
    !

    class attribute
    guide path
    moving object

    View Slide

  20. !
    !

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

    View Slide

  21. 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();

    View Slide

  22. !
    playAnim();
    !
    var button = document.querySelector( 'button' );
    button.addEventListener( 'click', playAnim );
    !

    !

    View Slide

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

    View Slide

  24. View Slide

  25. View Slide





  26. =^.^=


    !
    class="octoIcon">
    !

    !


    !

    !

    View Slide



  27. !
    class="octoIcon">
    !

    !


    !

    !

    !

    !
    !

    <br/>!<br/>

    View Slide


  28. !

    !
    !

    <br/>!<br/>var icon =<br/>Snap( document.querySelector( '.octoIcon' ) );<br/>var pathMain =icon.select('.main');<br/>var pathDefault=icon.select('.default').attr('d');<br/>var pathHover =icon.select(‘.hover').attr('d');<br/>!<br/>pathMain.attr( 'd', pathDefault );<br/>!<br/>icon.node.addEventListener('mouseover',function(){<br/>!<br/>pathMain.animate( {<br/>d: pathHover<br/>

    View Slide

  29. 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 );
    !
    });
    !

    !

    View Slide

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

    View Slide





  31. =^.^=


    !
    viewBox="0 0 800 480">
    !
    !


    <br/>//<br/>// snapsvg ʹ΋؆୯ͳςϯϓϨʔτߏจΛαϙʔτ͍ͯ͠Δ͕ػ<br/>ೳ͸͔ͳΓগͳ͍<br/>//<br/>

    View Slide





  32. =^.^=


    !
    viewBox="0 0 800 480">
    !
    !


    <br/>//<br/>// snapsvg ʹ΋؆୯ͳςϯϓϨʔτߏจΛαϙʔτ͍ͯ͠Δ͕ػ<br/>ೳ͸͔ͳΓগͳ͍<br/>//<br/>

    View Slide

  33. }
    !
    var template = _.template( [
    '<% var gridBottom = ( data.cellLength.y - 1 ) *
    data.cellSize.height + data.cellOffset.y; %>',
    '',
    !
    // 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; %>',
    'dasharray="6, 6" stroke-width="2"/>',
    '

    View Slide

  34. ].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' ) );

    View Slide

  35. • K2VFSZͷΑ͏ͳ47(%0.ૢ࡞

    SVG DOM manipulation, like jQuery
    • Ξχϝʔγϣϯ

    Animations
    • ςϯϓϨʔτల։

    Templating
    • "KBYʹΑΔ֎෦47(ಡΈࠐΈ

    Import external SVG file with Ajax
    • 47(ಠࣗػೳͷαϙʔτ

    SVG features support, like masking, clipping, patterns etc...

    View Slide

  36. http://snapsvg.io/

    View Slide

  37. http://snapsvg.io/docs/

    View Slide

  38. +
    8
    Raphael.js

    View Slide


  39. View Slide

  40. http://dreamplus.asia/en/

    View Slide

  41. http://kato-hosp.jp/

    View Slide

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

    View Slide

  43. http://martin-h.com/

    View Slide

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

    View Slide

  45. View Slide

  46. make a stage

    View Slide

  47. make display objects

    View Slide

  48. add them to the stage

    View Slide

  49. add them to the stage

    View Slide

  50. add them to the stage

    View Slide

  51. render the stage

    View Slide

  52. http://localhost:8000/easeljs_0_basic.html

    View Slide





  53. =^.^=


    !


    !
    <br/>
    <br/>!<br/>var canvas =<br/>document.querySelector( '#myCanvas' );<br/>var stage = new createjs.Stage( canvas );<br/>!<br/>

    View Slide





  54. =^.^=


    !


    !
    <br/>
    <br/>!<br/>var canvas =<br/>document.querySelector( '#myCanvas' );<br/>var stage = new createjs.Stage( canvas );<br/>!<br/>make a canvas element<br/>

    View Slide


  55. =^.^=


    !


    !
    <br/>
    <br/>!<br/>var canvas =<br/>document.querySelector( '#myCanvas' );<br/>var stage = new createjs.Stage( canvas );<br/>!<br/>var robot = new createjs.Bitmap( './img/<br/>craftybot.png' );<br/>robot.set( {<br/>x: 200,<br/>y: 100<br/>load create.js<br/>

    View Slide



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

    View Slide


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

    View Slide

  58. 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

    View Slide

  59. 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 );

    !

    View Slide

  60. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  64. • อ࣋Ϟʔυ"1*ͷΑ͏ͳɺ

    ΦϒδΣΫτ؅ཧ

    Specific objects management, like retained mode APIs

    • 4QSJUF΍4QJOFͷΞχϝʔγϣϯ

    Sprite and Spine animations

    • ϐΫηϧૢ࡞΍جຊతͳϑΟϧλʔ

    Pixel manipulation and basic filters

    • Ϛ΢εͱλονΠϕϯτ

    Mouse and touch events

    View Slide

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

    View Slide

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

    View Slide

  67. SVG vs Canvas

    View Slide

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

    View Slide

  69. View Slide

  70. View Slide

  71. http://archive.revolutionsinsound.com/

    View Slide

  72. http://www.wolverineunleashed.com/

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide





  77. =^.^=


    !

    !
    <br/>var renderer=new PIXI.autoDetectRenderer(640,360);<br/>document.body.appendChild( renderer.view );<br/>!<br/>var stage = new PIXI.Stage( 0xffffff );<br/>!<br/>var robot = new PIXI.Sprite.fromImage( './img/<br/>craftybot.png' );<br/>robot.position.set( 200, 100 );<br/>

    View Slide




  78. =^.^=


    !

    !
    <br/>var renderer=new PIXI.autoDetectRenderer(640,360);<br/>document.body.appendChild( renderer.view );<br/>!<br/>var stage = new PIXI.Stage( 0xffffff );<br/>!<br/>var robot = new PIXI.Sprite.fromImage( './img/<br/>craftybot.png' );<br/>robot.position.set( 200, 100 );<br/>stage.addChild( robot );<br/>!<br/>( function animate() {<br/>load pixi.js<br/>

    View Slide

  79. =^.^=


    !

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

    View Slide

  80. !

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

    View Slide

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

    View Slide

  82. 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 );
    !
    } )();
    !

    !

    View Slide

  83. 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 );
    !
    } )();
    !

    !

    View Slide

  84. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide





  90. =^.^=


    !

    !
    <br/>!<br/>var MyFilter = ( function () {<br/>!<br/>var MyFilter = function() {<br/>!<br/>PIXI.AbstractFilter.call( this );<br/>!<br/>this.passes = [ this ];<br/>!<br/>

    View Slide

  91. !
    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

    View Slide

  92. // 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

    View Slide

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

    View Slide

  94. • &BTFM+4ͱΑ͘ࣅͨ"1*

    Very similar APIs to EaselJS

    • 8FC(-Λར༻ͨ͠ߴ଎ॲཧ

    High speed pixel manipulation with WebGL

    • ಠࣗγΣʔμʔͷ௥Ճ

    Custom shaders

    View Slide

  95. http://www.pixijs.com/

    View Slide

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

    View Slide

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

    View Slide

  98. three.js

    View Slide

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

    View Slide

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

    View Slide

  101. https://www.ana-flightconnections.com/

    View Slide

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

    View Slide

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

    View Slide

  104. make a scene

    View Slide

  105. make a camera

    View Slide

  106. add a light

    View Slide

  107. add an object

    View Slide

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

    View Slide





  109. =^.^=



    <br/>var width = window.innerWidth,<br/>height = window.innerHeight;<br/>!<br/>var scene = new THREE.Scene();<br/>!<br/>var camera = new THREE.PerspectiveCamera( 40,<br/>width / height, 1, 1000 );<br/>camera.position.set( 0, 0, 3 );<br/>!<br/>var renderer = new<br/>

    View Slide

  110. 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(

    View Slide

  111. 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;

    View Slide

  112. 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 );
    !
    } )();

    !

    View Slide

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

    !

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  117. View Slide

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

    View Slide

  119. View Slide

  120. http://threejs.org/

    View Slide

  121. http://threejs.org/docs/

    View Slide

  122. • %ϞσϧಡΈࠐΈ

    Import 3D models

    • Ξχϝʔγϣϯ

    Animations

    • ܭࢉܥͷػೳ ϕΫτϧɺߦྻͳͲ

    Math functions, like vector, matrix
    • ಠࣗγΣʔμʔͷ௥Ճ

    Custom shaders
    Post process, Debugging WebGL, Rapid update,

    BOENPSF

    View Slide

  123. WebVR

    View Slide

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

    View Slide

  125. d = navigator.

    getVRDevices()

    View Slide

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

    getVRDevices()

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  132. Drop-in Phone

    Viewers

    View Slide

  133. Drop-in Phone

    Viewers
    • Different APIs

    (use DeviceOrientation API instead)
    • Limited performance

    (stereo rendering on mobile device)

    View Slide

  134. View Slide

  135. View Slide

  136. for more info,

    visit http://webvr.info/

    View Slide

  137. Conclusion

    View Slide

  138. ύϥϥοΫεޮՌ͸

    ΋͸΍લ࣌୅
    Parallax Effects are no longer cool

    View Slide

  139. 47(΍$BOWBTΛ

    ࢖ͬͯΈΑ͏
    Time to start using SVG and Canvas

    View Slide

  140. 47(ʹ͸4OBQ47(

    $BOWBTʹ͸&BTFM+4
    SnapSVG for SVG, EaselJS for Canvas

    View Slide

  141. 8FC(-͸͞Βʹύϫϑϧʂ

    QJYJKT΍UISFFKTΛ࢖͓͏
    WebGL is more powerful! Use pixi.js and three.js

    View Slide

  142. 8FC73͕Մೳʹ͢Δ8FCͰͷ

    όʔνϟϧɾϦΞϦςΟʔ
    WebVR Brings Virtual Reality to the Web

    View Slide

  143. Thanks!
    @yomotsu

    View Slide