Don't just buy a new video game, make one in JS!

talk about making game and to bring MMO game experience to the web, with JavaScript and WebGL (and three.js)

Transcript

1. Don’t just buy a new video game,

   make one, in JS!
   Presented by Akihiro Oyamada (@yomotsu)
   Mar 29, 2016
   

   View Slide

2. Frontend Engineer
   at PixelGrid, Inc.
   Akihiro Oyamada
   @yomotsu
   

   View Slide

3. My Favorites
   3
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. Made me

   want to make!
   9
   

   View Slide

10. Glitches are

    good example
    10
    

    View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. Making game

    in JavaScript
    15
    

    View Slide

16. https://github.com/yomotsu/meshwalk.js
    

    View Slide

17. View Slide

18. View Slide

19. if ( radius >= distance ) {
    // collide
    }
    

    View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. Collision detection
    vs. 524 tris
    

    View Slide

28. 28
    vs. around 30 tris

    thanks to Octree
    

    View Slide

29. Make more fun

    with WebGL
    29
    

    View Slide

30. • Based on OpenGL ES 2.0
    • Low-level JS API
    • 3D and 2D graphics
    8FC(-
    

    View Slide

31. • “Middle-level” library
    • Most popular WebGL library
    • Strong community
    UISFFKT
    

    View Slide

32. https://www.khronos.org/files/rfq/Khronos-glTF-RFQ.pdf
    

    View Slide

33. https://www.khronos.org/files/rfq/Khronos-glTF-RFQ.pdf
    

    View Slide

34. https://developer.mozilla.org/en/docs/Games/Techniques/
    

    View Slide

35. https://developer.mozilla.org/en/docs/Games/Techniques/
    

    View Slide

36. https://msdn.microsoft.com/en-us/library/bg182648%28v=vs.85%29.aspx
    

    View Slide

37. https://msdn.microsoft.com/en-us/library/bg182648%28v=vs.85%29.aspx
    

    View Slide

38. Abstracted Elements
    

    View Slide

39. http://localhost:8000/materials.html
    Build-in materials
    Basic Lambert Phong Standard Normal
    

    View Slide

40. http://localhost:8000/pbrMaterial.html
    StandardMaterial a.k.a. PBR
    landed in r74
    roughness: 0 roughness: 1
    

    View Slide

41. http://yomotsu.github.io/ExtraMaterials/examples/ClearCoatMaterial.html
    Extensible Materials
    with ShaderMaterial
    

    View Slide

42. http://yomotsu.github.io/ExtraMaterials/examples/ClearCoatMaterial2.html
    Extensible Materials
    with ShaderMaterial
    

    View Slide

43. http://yomotsu.neocities.org/1/
    

    View Slide

44. 3D Modeler to three.js
    

    View Slide

45. View Slide

46. View Slide

47. View Slide

48. http://yomotsu.github.io/inori/index.html
    

    View Slide

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

    View Slide

50. https://www.youtube.com/watch?v=ABPyWx8puzs
    IE 11 on Surface

    with touch
    

    View Slide

51. https://www.youtube.com/watch?v=8qRwpHhD_hY
    iOS Safari
    

    View Slide

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

    View Slide

53. Almost everywhere!
    

    View Slide

54. http://yomotsu.net/blog/assets/2015-12-25-xmas/demo/index.html
    http://yomotsu.net/blog/assets/2015-12-25-xmas/demo/index2.html
    

    View Slide

55. MMO Experience

    With WebSockets
    55
    

    View Slide

56. http://yomotsu.net/MOC/
    

    View Slide

57. View Slide

58. View Slide

59. View Slide

60. player[ socket.id ] = {
    position : position,
    velocity : velocity,
    direction : direction,
    isGrounded : isGrounded,
    ...
    };
    Socket Data
    

    View Slide

61. http://localhost:8001/_index.html
    

    View Slide

62. WebGL is

    the technology for the Web
    62
    

    View Slide

63. to bring into

    Web Pages
    63
    

    View Slide

64. • Virtual Shopping Mall
    • Walkable Map
    • Meeting Space
    GPS8FC$POUFOUT
    

    View Slide

65. WebGL is not only for game experiences

    but also Web Design!
    65
    

    View Slide

66. https://github.com/yomotsu/GLSlideshow.js
    

    View Slide

67. Conclusion
    67
    

    View Slide

68. https://www.youtube.com/watch?v=6XvmhE1J9PY
    “Don’t just buy

    a new video game,

    make one”

    ʔ President Obama asks America

    to learn computer science
    

    View Slide

69. Interested in WebGL Contents?
    Contact us!
    http://www.pxgrid.com/
    

    View Slide

70. gl.finish();
    @yomotsu
    

    View Slide