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

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

yomotsu
March 29, 2016

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)

yomotsu

March 29, 2016
Tweet

More Decks by yomotsu

Other Decks in Programming

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