1. WebGL & three.js
2012/2/12 @ DevFest X sapporo
@yukio_andoh
@webos_goodies
2012 2 12 1

2. 2012 2 12 2

3. History
VRML X3D Canvas3D OpenGL ES Google o3d WebGL
2012 2 12 3

4. get.webgl.org
2012 2 12 4

5. IEWebGL
2012 2 12 5

6. Pros and Cons
of Using WebGL
DOM Canvas
OpenGL ES + GLSL
2012 2 12 6

7. WebGL on iOS (iAd)
WebGL on Android(firefox)
2012 2 12 7

8. WebGL Bookcase
http://workshop.chromeexperiments.com/bookcase
2012 2 12 8

9. Google Body
http://www.zygotebody.com/
2012 2 12 9

10. WebGL Experiments
http://www.chromeexperiments.com/webgl
2012 2 12 10

11. WebGL samples (google code)
http://code.google.com/p/webglsamples/
2012 2 12 11

12. PlayWebGL
http://playwebgl.com/
2012 2 12 12

13. Emberwind (HTML5 or WebGL)
http://operasoftware.github.com/
2012 2 12 13

14. Demo Repository
http://www.khronos.org/webgl/wiki/Demo_Repository
2012 2 12 14

15. WebGL Earth
http://www.webglearth.com/
2012 2 12 15

16. Google MapsGL
http://maps.google.com/gl
2012 2 12 16

17. procedural city
http://alteredqualia.com/three/examples/webgl_city.html
2012 2 12 17

18. WebGL+3D printer
http://www.myrobotnation.com/
2012 2 12 18

19. My Robot Nation / KODAMA Studios : 3D
http://www.myrobotnation.com/
2012 2 12 19

20. Resouces
2012 2 12 20

21. WebGL playground
http://webglplayground.net/
2012 2 12 21

22. WebGL
Reference
Card
http://www.khronos.org/files/
webgl/webgl-reference-
card-1_0.pdf
2012 2 12 22

23. WebGL Inspector
http://benvanik.github.com/WebGL-Inspector/
2012 2 12 23

24. WebGL Conformance
https://cvs.khronos.org/svn/repos/registry/trunk/public/
webgl/sdk/tests/webgl-conformance-tests.html
2012 2 12 24

25. WebGL frameworks
TDL http://code.google.com/p/threedlibrary/
three.js https://github.com/mrdoob/three.js
CubicVR 3D Engine http://www.cubicvr.org/
CopperLicht http://www.ambiera.com/copperlicht/
PhiloGL http://senchalabs.github.com/philogl/
SpiderGL http://spidergl.org/
GLGE http://www.glge.org/
SceneJS http://www.scenejs.com/
2012 2 12 25

26. WebGL frameworks
& Exporters
C3DL http://www.c3dl.org/
Jax http://blog.jaxgl.com/
StormEngineC http://code.google.com/p/stormenginec/
WebGLU http://sourceforge.net/projects/webglu/
Exporter
inka3d http://www.inka3d.com/
Blender to WebGL http://code.google.com/p/blender-webgl-
exporter/
2012 2 12 26

27. LEARNING WEBGL
http://learningwebgl.com/blog/
2012 2 12 27

28. Khronos
http://www.khronos.org/
2012 2 12 28

29. education
Useful science
data visualization
fine arts
and more !
Art music video
demo scene
Ad promotion
banner
storytelling
2012 2 12 29

30. Story boarding and Design
Designing for Responsiveness
Designing for Serendipity
Knowing Your Audience
Modeling and Geometry
The Complexity Budget
Modeling and Conversion
Structuring Models to Improve Performance
Managing Scene Complexity
Layout
Cull Volumes
Navigation and interface
Animation and Morphing
Lighting for mood
Sound designing for ambience
Effect
2012 2 12 30

31. 2012 2 12 31

32. Demoscene +
WebGL
Slides on the Demoscene
and WebGL demo effects
http://
adrianboeing.blogspot.com/
2011/05/slides-on-
demoscene-and-webgl-
demo.html
THE DEVELOPING WEBGL
DEMOSCENE
http://nooshu.com/the-
developing-webgl-demoscene
The Demo Scene
http://
thedemoscene.tumblr.com/
@TheDemoScene
2012 2 12 32

33. 2012 2 12 33

34. Thank you. @yukio_andoh
2012 2 12 34