three.jsによる⼀歩進めたグラフィカルな表現

2016.08.03 ⼋⽊ 啓太

⾃⼰紹介

⼋⽊ 啓太

2011年にデジタルハリウッドで学び、 卒業後はWebディレクターとして転職。 プログラムでものを作ることにやりがいを覚え、 現在は制作会社のフロントエンドエンジニアとして従事。

Twitter: @shafflife →気になった技術系トピックをつぶやいています。

今夜はp5.jser縛り？ でも気にせずthree.jsについて話します

p5.js

p5.js

p5.js ?

p5.js ?

p5.js ?

p5.js

three.js使ってますか？

ここで⽌まっていたりしませんか？

three.jsの導⼊で作ったサンプル

今回のテーマ

・three.jsの導⼊について触れる記事は多いが、  そこからステップアップする内容のものが少ない

・やりたいことに近しいものがあるが、  バージョンが新しくなってそのまま使えなかったりする

現⾏バージョンに基づいた表現周りを かいつまんで紹介

three.jsを使った表現あれこれ

1. three.jsのおさらい

2. オブジェクトのトゥイーンアニメーション

3. three.jsでテキストを扱う

4. skydome/skyboxで背景演出

5. 動的なマテリアル表現

1. three.jsのおさらい(1/3)

three.jsとは・・・

WebGLを使った3Dグラフィック系ライブラリ。 WebGLをjsで1から書くと、多くのことを記述する必要 があるが、jQueryのように抽象化されており、 少ない記述で3D表現が可能。

1. three.jsのおさらい(2/3)

Sceneを作る

CameraをSceneに設置 MeshをSceneに設置

LightをSceneに設置

Rendererで描画

ディスプレイ

2次元 3次元

1. three.jsのおさらい(3/3)

Mesh(オブジェクト) のできあがり

=Material

+Geometry

2. オブジェクトのトゥイーンアニメーション

three.jsの導⼊で作ったサンプル(2回⽬)

ソースコードを⾒てみると

// three.jsでSceneやMeshを作成 … … // アニメーションの関数 render();

function render(){ mesh.rotation.x += 0.01; mesh.rotation.z += 0.006; renderer.render(scene, camera); requestAnimationFrame(render); }

Rendererが描画するたびにオブジェクトの回転⾓を加算 →これはこれでいいけど、任意で変化をつけたアニメーションができない

対策：TweenMaxを使う https://greensock.com/tweenmax

// TweenMax.to([要素], [秒数], { // [変更後プロパティ, (イージング)] // }

TweenMax.to(mesh.rotation, 1, { y: Math.PI * 2, ease: Power2.easeInOut, // easing onComplete: function(){ // アニメーション完了後に実⾏ } });

オブジェクトの⾓度だけでなく、位置やサイズの変更も可能

3. three.jsでテキストを扱う

対策：three.jsのサンプルコードを参考にする http://threejs.org/examples/#webgl_geometry_text

// FontLoaderでfontファイルを読み込み、 // callbackでオブジェクト作成 var loader = new THREE.FontLoader(); loader.load('assets/json/helvetiker_regular.typeface.json', function(font){ var text = new THREE.TextGeometry('Hello, Three.js', { size: 24, height: 2, curveSegments: 5, font: font, weight: 'regular', style: ʻnormal', bevelThickness: 5, bevelSize: 1, bevelEnabled: true }); var material = new THREE.MeshStandardMaterial({color: 0x00ffff}); mesh = new THREE.Mesh(text, material); scene.add(mesh); });

⽇本語フォントを扱うには

①サブセットフォントメーカーで 使う⽂字種を選定し、フォントファイルとして書き出す

②Facetype.js converterで ①にて書き出したフォントファイルをjson形式に⽣成

https://gero3.github.io/facetype.js/ http://opentype.jp/subsetfontmk.htm

4. skydome/skyboxで背景演出

three.jsの導⼊で作ったサンプル(3回⽬)

背景が寂しかったりしません？

skydome/skyboxとは・・・

3D空間内で、空や周囲の⾵景を表現する⼿法。 skydomeとskyboxの違いは形状で、 前者が球体、後者が四⾯体を指している。 skydomeはSphereGeometryにパノラマサイズの画像を貼り付け、skyboxはBoxGeometryの各⾯に6⾯の画像を貼り付ける。

skyboxskydive

// TextureLoaderで画像を読み込み後、skydomeを作成。 // レンダリング時にTHREE.BackSideで内側にレンダリング var skyBox; var geometry = new THREE.SphereGeometry(1600, 60, 40); var loader = new THREE.TextureLoader(); loader.load( './assets/img/tokyo.jpg', function(texture){ var material = new THREE.MeshBasicMaterial({ map: texture}); skyBox = new THREE.Mesh(geometry, material); skyBox.material.side = THREE.BackSide; scene.add(skyBox); } );

5. 動的なマテリアル表現

three.jsのマテリアル素材

three.jsのマテリアルは豊富で、画像をテクスチャとして 貼り付けることも可能。ではマテリアルを動的に切替えるには？

GPU環境で動く、GLSLで記述されたシェーダーで レンダリングを⾏う。

対策：ShaderMaterialを使う http://threejs.org/docs/index.html#Reference/Materials/ShaderMaterial

// Vertex(頂点), Fragment(フラグメント)のシェーダーを記述 // Vertex <script id="vertexShader" type="x-shader/x-vertex"> void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); } </script>

// Fragment <script id="fragmentShader" type="x-shader/x-fragment"> uniform vec3 diffuse; void main() { gl_FragColor = vec4(diffuse.x, diffuse.y, diffuse.z, 1.0); } </script>

var uniforms = { // JSからシェーダーに送る設定値を記述 speed: { type: "f", value: 15.0 } };

// JS側でmaterial指定を⾏う箇所でShaderMaterialを使⽤ var geometry = new THREE.BoxGeometry(30, 30, 30); var material = new THREE.ShaderMaterial({ uniforms : uniforms, vertexShader : document.getElementById('vertexShader').text, fragmentShader : document.getElementById('fragmentShader').text, });

// 動的に値を変更する場合、アニメーションを⾏う箇所に記述 uniforms.speed.value = 10.0;

three.jsで表現の幅を広げるには(1/2)

⾄極ありきたりではありますが、、

◆three.jsのサンプルを⾒て、写経する 最新バージョンに基づいた、基本的な書き⽅が載っている。 他サイトにも載っていたりするが、three.jsのバージョンが古かったりして、仕様上その書き⽅が使えなくなったり変わっていたりするので注意。

◆three.jsのサンプルから少しいじってみる 写経だと眠くなるので、元のサンプルのオブジェクトを変えてみたり、 サンプル同⼠を組み合わせるだけでも1から作るより⾒栄えが良い(オイオイ)

基礎的な部分だけでなく、 PostprocessingとかGPGPUといった ⾼度な表現系サンプルもあります

three.jsで表現の幅を広げるには(2/2) https://webgl.souhonzan.org/