Playing With JAX

Lightning talk material.

Transcript

1. 2012.08.18 Kanazawa.rb #1
   Playing with JAX
   Yukimitsu Izawa
   12೥8݄19೔೔༵೔
   

   View Slide

2. What’s JAX
   ✤ JAX is a development framework
   ✤ for JavaScript-driven WebGL applications
   ✤ JAX has MVC architecture
   ✤ JAX lives with RoR source tree
   ✤ app/assets/jax/{controllers,models,views,etc.}
   12೥8݄19೔೔༵೔
   

   View Slide

3. What’s WebGL
   ✤ WebGL(Web Graphics Library) is a JavaScript API
   ✤ for rendering 3D/2D graphics within any compatible Web browser
   ✤ for more info.
   ✤ http://www.khronos.org/webgl/
   12೥8݄19೔೔༵೔
   

   View Slide

4. Hands on!
   12೥8݄19೔೔༵೔
   

   View Slide

5. Teatime
   ✤ Initialize
   Gemfile:
   gem ’jax’, ’>=2.0’
   % bundle
   % rails generate jax:install
   or
   % gem install jax
   % jax new demo
   12೥8݄19೔೔༵೔
   

   View Slide

6. Teatime
   ✤ Generate
   % jax generate scaffold teapot
   % jax generate light sun directional
   % jax generate light candle point
   12೥8݄19೔೔༵೔
   

   View Slide

7. Teatime
   ✤ Code (Controller)
   app/assets/jax/controllers/
   teapot_controller.js.coffee
   @world.addObject Teapot.find "actual"
   @world.addLightSource "sun"
   @world.addLightSource "candle"
   12೥8݄19೔೔༵೔
   

   View Slide

8. Teatime
   ✤ Code (Model)
   app/assets/jax/models/
   teapot.js.coffee
   after_initialize: ->
   @mesh = new Jax.Mesh.Teapot
   size: this.size
   material: "teapot"
   update: () ->
   @camera.rotate 0.05, [0,1,0]
   12೥8݄19೔೔༵೔
   

   View Slide

9. Teatime
   ✤ Code (teapot’s resources)
   app/assets/jax/resources/teapots/
   actual.resource
   size: 1.0
   position:
   x: 0
   y: 0
   z: -5
   12೥8݄19೔೔༵೔
   

   View Slide

10. Teatime
    ✤ Code (candle’s resources)
    app/assets/jax/resources/light_sources/
    candle.resource
    position:
    x: -1.2
    y: -1.2
    z: -4.0
    color:
    ambient:
    red: 1.0
    green: 0.2
    blue: 0.2
    12೥8݄19೔೔༵೔
    

    View Slide

11. Teatime
    ✤ run
    % jax server
    (access localhost:3000 with browser)
    12೥8݄19೔೔༵೔
    

    View Slide

12. Teatime
    ✤ You can see, Pink Rotation Teapot :)
    12೥8݄19೔೔༵೔
    

    View Slide

13. References
    ✤ Getting Started with JAX
    ✤ http://guides.jaxgl.com/getting_started.html
    ✤ JAX Source Code in Github
    ✤ https://github.com/sinisterchipmunk/jax
    ✤ Forum
    ✤ http://blog.jaxgl.com/forum/jax-group1/jax-forum1/
    ✤ API
    ✤ http://guides.jaxgl.com/api/js/index.html
    12೥8݄19೔೔༵೔
    

    View Slide