WebGL & three.js




            2012/2/12 @ DevFest X sapporo
                      @yukio_andoh
                      @webos_goodies


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




2012   2   12                                                     3
get.webgl.org




2012   2   12                   4
IEWebGL




2012   2   12             5
Pros and Cons
           of Using WebGL
                            DOM Canvas

                            OpenGL ES + GLSL




2012   2   12                                  6
WebGL on iOS (iAd)
           WebGL on Android(firefox)




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




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




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




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




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




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




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




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




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




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




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




2012   2   12                              18
My Robot Nation / KODAMA Studios :             3D




                                    http://www.myrobotnation.com/
2012   2   12                                                       19
Resouces




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




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




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




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




2012   2    12                                                        24
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
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
LEARNING WEBGL
           http://learningwebgl.com/blog/




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




2012   2   12                        28
education

                Useful   science

                         data visualization


                         fine arts
                                              and more !
                Art      music video
                         demo scene


                Ad       promotion

                         banner
                         storytelling


2012   2   12                                              29
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
2012   2   12   31
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
2012   2   12   33
Thank you.   @yukio_andoh




2012   2   12                          34

Dev Fest X (Sapporo) WebGL

  • 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.
  • 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 (googlecode) http://code.google.com/p/webglsamples/ 2012 2 12 11
  • 12.
    PlayWebGL http://playwebgl.com/ 2012 2 12 12
  • 13.
    Emberwind (HTML5 orWebGL) 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.
  • 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 andDesign 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