talk about making game and to bring MMO game experience to the web, with JavaScript and WebGL (and three.js)
Don’t just buy a new video game, make one, in JS!Presented by Akihiro Oyamada (@yomotsu)Mar 29, 2016
View Slide
Frontend Engineerat PixelGrid, Inc.Akihiro Oyamada@yomotsu
My Favorites3
Made me want to make!9
Glitches are good example10
Making game in JavaScript15
https://github.com/yomotsu/meshwalk.js
if ( radius >= distance ) {// collide}
Collision detectionvs. 524 tris
28vs. around 30 tris thanks to Octree
Make more fun with WebGL29
• Based on OpenGL ES 2.0• Low-level JS API• 3D and 2D graphics8FC(-
• “Middle-level” library• Most popular WebGL library• Strong communityUISFFKT
https://www.khronos.org/files/rfq/Khronos-glTF-RFQ.pdf
https://developer.mozilla.org/en/docs/Games/Techniques/
https://msdn.microsoft.com/en-us/library/bg182648%28v=vs.85%29.aspx
Abstracted Elements
http://localhost:8000/materials.htmlBuild-in materialsBasic Lambert Phong Standard Normal
http://localhost:8000/pbrMaterial.htmlStandardMaterial a.k.a. PBRlanded in r74roughness: 0 roughness: 1
http://yomotsu.github.io/ExtraMaterials/examples/ClearCoatMaterial.htmlExtensible Materialswith ShaderMaterial
http://yomotsu.github.io/ExtraMaterials/examples/ClearCoatMaterial2.htmlExtensible Materialswith ShaderMaterial
http://yomotsu.neocities.org/1/
3D Modeler to three.js
http://yomotsu.github.io/inori/index.html
https://yomotsu.github.io/walkthrough
https://www.youtube.com/watch?v=ABPyWx8puzsIE 11 on Surface with touch
https://www.youtube.com/watch?v=8qRwpHhD_hYiOS Safari
http://caniuse.com/#feat=webgl
Almost everywhere!
http://yomotsu.net/blog/assets/2015-12-25-xmas/demo/index.htmlhttp://yomotsu.net/blog/assets/2015-12-25-xmas/demo/index2.html
MMO Experience With WebSockets55
http://yomotsu.net/MOC/
player[ socket.id ] = {position : position,velocity : velocity,direction : direction,isGrounded : isGrounded,...};Socket Data
http://localhost:8001/_index.html
WebGL is the technology for the Web62
to bring into Web Pages63
• Virtual Shopping Mall• Walkable Map• Meeting SpaceGPS8FC$POUFOUT
WebGL is not only for game experiences but also Web Design!65
https://github.com/yomotsu/GLSlideshow.js
Conclusion67
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
Interested in WebGL Contents?Contact us!http://www.pxgrid.com/
gl.finish();@yomotsu