Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Don’t just buy a new video game, make one, in JS! Presented by Akihiro Oyamada (@yomotsu) Mar 29, 2016
Slide 2
Slide 2 text
Frontend Engineer at PixelGrid, Inc. Akihiro Oyamada @yomotsu
Slide 3
Slide 3 text
My Favorites 3
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Made me want to make! 9
Slide 10
Slide 10 text
Glitches are good example 10
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Making game in JavaScript 15
Slide 16
Slide 16 text
https://github.com/yomotsu/meshwalk.js
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
if ( radius >= distance ) { // collide }
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Collision detection vs. 524 tris
Slide 28
Slide 28 text
28 vs. around 30 tris thanks to Octree
Slide 29
Slide 29 text
Make more fun with WebGL 29
Slide 30
Slide 30 text
• Based on OpenGL ES 2.0 • Low-level JS API • 3D and 2D graphics 8FC(-
Slide 31
Slide 31 text
• “Middle-level” library • Most popular WebGL library • Strong community UISFFKT
Slide 32
Slide 32 text
https://www.khronos.org/files/rfq/Khronos-glTF-RFQ.pdf
Slide 33
Slide 33 text
https://www.khronos.org/files/rfq/Khronos-glTF-RFQ.pdf
Slide 34
Slide 34 text
https://developer.mozilla.org/en/docs/Games/Techniques/
Slide 35
Slide 35 text
https://developer.mozilla.org/en/docs/Games/Techniques/
Slide 36
Slide 36 text
https://msdn.microsoft.com/en-us/library/bg182648%28v=vs.85%29.aspx
Slide 37
Slide 37 text
https://msdn.microsoft.com/en-us/library/bg182648%28v=vs.85%29.aspx
Slide 38
Slide 38 text
Abstracted Elements
Slide 39
Slide 39 text
http://localhost:8000/materials.html Build-in materials Basic Lambert Phong Standard Normal
Slide 40
Slide 40 text
http://localhost:8000/pbrMaterial.html StandardMaterial a.k.a. PBR landed in r74 roughness: 0 roughness: 1
Slide 41
Slide 41 text
http://yomotsu.github.io/ExtraMaterials/examples/ClearCoatMaterial.html Extensible Materials with ShaderMaterial
Slide 42
Slide 42 text
http://yomotsu.github.io/ExtraMaterials/examples/ClearCoatMaterial2.html Extensible Materials with ShaderMaterial
Slide 43
Slide 43 text
http://yomotsu.neocities.org/1/
Slide 44
Slide 44 text
3D Modeler to three.js
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
http://yomotsu.github.io/inori/index.html
Slide 49
Slide 49 text
https://yomotsu.github.io/walkthrough
Slide 50
Slide 50 text
https://www.youtube.com/watch?v=ABPyWx8puzs IE 11 on Surface with touch
Slide 51
Slide 51 text
https://www.youtube.com/watch?v=8qRwpHhD_hY iOS Safari
Slide 52
Slide 52 text
http://caniuse.com/#feat=webgl
Slide 53
Slide 53 text
Almost everywhere!
Slide 54
Slide 54 text
http://yomotsu.net/blog/assets/2015-12-25-xmas/demo/index.html http://yomotsu.net/blog/assets/2015-12-25-xmas/demo/index2.html
Slide 55
Slide 55 text
MMO Experience With WebSockets 55
Slide 56
Slide 56 text
http://yomotsu.net/MOC/
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
player[ socket.id ] = { position : position, velocity : velocity, direction : direction, isGrounded : isGrounded, ... }; Socket Data
Slide 61
Slide 61 text
http://localhost:8001/_index.html
Slide 62
Slide 62 text
WebGL is the technology for the Web 62
Slide 63
Slide 63 text
to bring into Web Pages 63
Slide 64
Slide 64 text
• Virtual Shopping Mall • Walkable Map • Meeting Space GPS8FC$POUFOUT
Slide 65
Slide 65 text
WebGL is not only for game experiences but also Web Design! 65
Slide 66
Slide 66 text
https://github.com/yomotsu/GLSlideshow.js
Slide 67
Slide 67 text
Conclusion 67
Slide 68
Slide 68 text
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
Slide 69
Slide 69 text
Interested in WebGL Contents? Contact us! http://www.pxgrid.com/
Slide 70
Slide 70 text
gl.finish(); @yomotsu