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

3c557c6103a4addc52f7b76ffd0a0f27?s=47 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)

3c557c6103a4addc52f7b76ffd0a0f27?s=128

yomotsu

March 29, 2016
Tweet

Transcript

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

    JS! Presented by Akihiro Oyamada (@yomotsu) Mar 29, 2016
  2. Frontend Engineer at PixelGrid, Inc. Akihiro Oyamada @yomotsu

  3. My Favorites 3

  4. None
  5. None
  6. None
  7. None
  8. None
  9. Made me
 want to make! 9

  10. Glitches are
 good example 10

  11. None
  12. None
  13. None
  14. None
  15. Making game
 in JavaScript 15

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

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

  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. Collision detection vs. 524 tris

  28. 28 vs. around 30 tris
 thanks to Octree

  29. Make more fun
 with WebGL 29

  30. • Based on OpenGL ES 2.0 • Low-level JS API

    • 3D and 2D graphics 8FC(-
  31. • “Middle-level” library • Most popular WebGL library • Strong

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

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

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

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

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

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

  38. Abstracted Elements

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

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

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

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

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

  44. 3D Modeler to three.js

  45. None
  46. None
  47. None
  48. http://yomotsu.github.io/inori/index.html

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

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

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

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

  53. Almost everywhere!

  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

  55. MMO Experience
 With WebSockets 55

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

  57. None
  58. None
  59. None
  60. player[ socket.id ] = { position : position, velocity :

    velocity, direction : direction, isGrounded : isGrounded, ... }; Socket Data
  61. http://localhost:8001/_index.html

  62. WebGL is
 the technology for the Web 62

  63. to bring into
 Web Pages 63

  64. • Virtual Shopping Mall • Walkable Map • Meeting Space

    GPS8FC$POUFOUT
  65. WebGL is not only for game experiences
 but also Web

    Design! 65
  66. https://github.com/yomotsu/GLSlideshow.js

  67. Conclusion 67

  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
  69. Interested in WebGL Contents? Contact us! http://www.pxgrid.com/

  70. gl.finish(); @yomotsu