Firefox os関東勉強会20130719
Upcoming SlideShare
Loading in...5
×
 

Firefox os関東勉強会20130719

on

  • 1,088 views

 

Statistics

Views

Total Views
1,088
Views on SlideShare
641
Embed Views
447

Actions

Likes
4
Downloads
2
Comments
0

9 Embeds 447

http://www.kisato.net 287
http://dword.jp 142
http://localhost 5
http://summary 3
http://cloud.feedly.com 3
http://webcache.googleusercontent.com 3
http://192.168.56.101 2
https://twitter.com 1
http://plus.url.google.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Firefox os関東勉強会20130719 Firefox os関東勉強会20130719 Presentation Transcript

  • 関東Firefox OS勉強会 2nd 3次元のJSをおさわりする
  • 本日のレシピ  FirefoxOSで3次元CGを扱うために用意するもの  ポリゴンを表示するにはこの3つが必要  右手座標系と右ネジの法則  カメラと視錐台(視野)  ポリゴンと色  デモを動かしてみる
  • 自己紹介
  • 自己紹介(twitter:@inuchin 安川貴志)  3次元の嫁より2.5次元の嫁がいいです。  15年ほど出版やゲーム関係に従事  武礼堂/DWORDで作品がいくつか。  現在は株式会社ブリリアントサービス所属  最近だとこんな仕事をしてました。
  • http://www.youtube.com/user/koihimearcade?feature=watch
  • ポリゴンを表示するに はこの3つが必要
  • FirefoxOSで3次元CGを扱うために 用意するもの three.js http://threejs.org/
  • 右手座標系 右ネジの法則
  • 右手座標系 指先が+方向として、 親指:X座標 人差し指:Y座標 中指:Z座標 となる X Y Z
  • m9(^Д^)プギャーwwwwww ではないので注意
  • 右ねじの法則 Y 親指の方向が 回転させたい軸 残りの4本の指の 指先方向に回転する。 回転角度θは、ラジアン(rad)で表記 rad = θ ✕ π / 180
  • 角度(度数法)をラジアンに変換する公式
  • カメラと視錐台(視野)
  • カメラと視錐台 1 1 カメラの座標を(0,1,1)に設定 カメラは、どの座標からドッチの 向き(座標)にあるポリゴンを描画 するかを決める。 さらにカメラにはUPベクトルが あり、カメラの上方向を定義する ことができる。 カメラのUPベクトルを変えると、 画面全体が回転する(ロール)
  • カメラと視錐台 視錐台(PerspectiveCamera)を (90, aspect比, 1, 1000)に設定 1 1000 視錐台は、左の点線に囲まれた領 域のみを描画する為に設定します。 視野角(上下左右90度の範囲内)で、 かつ距離が1〜1000までの間に 入っているポリゴンが描画対象
  • three.jsのコードで表現 var aspect = window.innerWidth / window.innerHeight; var camera = new THREE.PerspectiveCamera(90,aspect, 1, 1000); camera.position.x = 0; camera.position.z = 1; camera.position.y = 1; camera.up.x = 0; camera.up.y = 1; camera.up.z = 0;
  • ポリゴンと色
  • ポリゴンと色 1)レンダリング方法の設定 2)ポリゴンは組み込みのプリミティブから作成 3)マテリアル(素材)をポリゴンに設定する
  • three.jsのコードで表現 for ( var i = 0; i < 500; i ++ ) { material = new THREE.MeshPhongMaterial( { specular: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } ); var size = Math.random() * 10.0 + 10.0; geometry = new THREE.CubeGeometry( size, size, size ); var mesh = new THREE.Mesh( geometry, material ); mesh.position.x = Math.floor( Math.random() * 20 - 10 ) * 20; mesh.position.y = Math.floor( Math.random() * 20 ) * 20 + 10; mesh.position.z = Math.floor( Math.random() * 20 - 10 ) * 20; scene.add( mesh ); material.color.setHSL( Math.random() * 1.0, 0.75, Math.random() * 0.25 + objects.push( mesh ); } 1 2 3
  • デモンストレーション