Web Graphics of the present time, and the near future

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