Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Playing With JAX

Playing With JAX

Lightning talk material.

Yukimitsu Izawa

August 19, 2012
Tweet

More Decks by Yukimitsu Izawa

Other Decks in Programming

Transcript

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

  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೔೔༵೔
  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೔೔༵೔
  4. Hands on! 12೥8݄19೔೔༵೔

  5. Teatime ✤ Initialize Gemfile: gem ’jax’, ’>=2.0’ % bundle %

    rails generate jax:install or % gem install jax % jax new demo 12೥8݄19೔೔༵೔
  6. Teatime ✤ Generate % jax generate scaffold teapot % jax

    generate light sun directional % jax generate light candle point 12೥8݄19೔೔༵೔
  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೔೔༵೔
  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೔೔༵೔
  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೔೔༵೔
  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೔೔༵೔
  11. Teatime ✤ run % jax server (access localhost:3000 with browser)

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

  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೔೔༵೔