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