three.js はじめましょ

CanvasでWebGL, 3D 初めて物語

13年3月12日火曜日

Flash / ActionScriptHTML, CSS, JavaScriptPerl, PHPMySQL, PostgreSQLiOS / Objective-CUnity

お仕事のほとんどがJavaScriptカキカキになってしまいました...

自己紹介

おおくぼ　ひろあき aka @taikikenインタラクティブ・デザイナー

13年3月12日火曜日

http://mrdoob.github.com/three.js/

three.js

13年3月12日火曜日

three.js

http://en.wikibooks.org/wiki/GLSL_Programming/Vertex_Transformations

WebGL基礎知識【 座標 position( x, y, z )】Camera, Viewport ( Near, Far )

13年3月12日火曜日

three.js

WebGL基礎知識【 座標 position( x, y, z )】Camera, Viewport ( Near, Far )

Camera

http://en.wikibooks.org/wiki/GLSL_Programming/Vertex_Transformations

y+

y-

x+x-

13年3月12日火曜日

three.js

1.Scene, Camera, Renderer *必須 *Camera, Rendererインスタンス

Scene: THREE.Scene (ASでいうStageみたいなもの？)

Camera: THREE.OrthographicCamera THREE.PerspectiveCamera

Renderer: THREE.CanvasRenderer THREE.WebGLRenderer

*canvas DOMElementはRendererが生成するのでtagを準備しなくても良い*HTMLへのappendChildが必要

Renderer: THREE.CSS3DRenderer

*標準パケージではなくexamples/js/renderer

13年3月12日火曜日

three.js

2. Object3D * Object3DインスタンスをSceneへadd

Object3Dが表示オブジェクト(Mesh)の親クラス

Mesh

Geometry Material

Object3D Meshを作成しSceneへadd

13年3月12日火曜日

three.js

3. 描画(Rendering)

function animate () { requestAnimationFrame(animate); camera.lookAt(scene.position); renderer.render(scene, camera);}*requestAnimationFrame (Loop処理) は１カ所にまとめる

13年3月12日火曜日

three.js

4. window.onresize（フルスクリーン時）への対策

filterWindowSize = function (size){ var w = size.width, h = size.height; return {width: w < MIN_WIDTH ? MIN_WIDTH : w,height: h < MIN_HEIGHT ? MIN_HEIGHT: h};};

getWindowSize = function () { return {width: window.innerWidth,height: window.innerHeight};};

onWindowResize = function (){ var size = this.filterWindowSize(this.getWindowSize()), camera = this.camera;

this.renderer.setSize(size.width, size.height);

camera.aspect = size.width / size.height; camera.updateProjectionMatrix();};

*windowサイズから想定最小サイズを差引きrenderer, cameraへ

13年3月12日火曜日

http://www.greensock.com/gsap-js/

TweenMax / TweenLite, TimelineMax / TimelineLite

13年3月12日火曜日

TweenMax / TweenLite, TimelineMax / TimelineLite

使用した理由

•機能が豊富•three.jsとの相性も良い（GreenSockサイトに書いてあった）

•パフォーマンスも良かった

*後処理を忘れないように stop, kill*tween終了後、目標値が近似値にしかならないことがあった

13年3月12日火曜日

three.js

ActionScript 3D Library と関数、機能が似てる

Alternativa3DとかAway3Dやってるならすぐに使い始められると思います

13年3月12日火曜日

three.js

開発の心構え・1

•寛容な心*アップデートで関数が無くなる、関数の機能が変わる、バグる

•Documentでなくソースを読む*コミッターで情報量が違う*アップデートに対応していないことがある

•Object参照に注意!*インスタンスもObject、安易な代入はトラブルのもと

•ブログ記事は日付に注意*今は使えない情報かもしれない

•とにかく試す

13年3月12日火曜日

three.js

開発の心構え・2

•Canvasを使っていることを忘れない*ブラウザのDOMElementです*毎フレームcanvas全体をクリア->描画を繰返している

•window.onresizeの対策を忘れない（フルスクリーン時）*windowサイズから想定最小サイズを差し引きcanvasへstyle設定する*マウスインタラクション実装時にイベント発生座標が狂う

•大量のパーツはTHREE.Particleで*THREE.Particleは2D、レンダリングコストが低い

13年3月12日火曜日

参考資料

http://www.natural-science.or.jp/article/20120220155529.php「HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（１／３）～」

http://stackoverflow.com/questions/tagged/three.jsstackoverflow

http://www.amazon.co.jp/dp/4839932778/ http://www.amazon.co.jp/dp/144932357X/http://www.amazon.co.jp/dp/4862671292/

13年3月12日火曜日

ありがとうございました

13年3月12日火曜日