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
2. Frontend Engineer at PixelGrid, Inc. Akihiro Oyamada @yomotsu
3. My Favorites 3
9. Made me
 want to make! 9
10. Glitches are
 good example 10
15. Making game
 in JavaScript 15
16. https://github.com/yomotsu/meshwalk.js
19. if ( radius >= distance ) { // collide }
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
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/
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 GPS
    8FC
    $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