Making of BODA-RIDE
•
6 likes•3,117 views
GREE Tech Talk #08 http://techtalk.labs.gree.jp/08/ BODA-RIDE https://boda.sensors.jp/ https://boda.sensors.jp/hq.html -- 岩渕智幸 @buccchi Bascule Inc. Visual Artist / Engineer
Recommended
More Related Content
Similar to Making of BODA-RIDE
Similar to Making of BODA-RIDE (20)
Making of BODA-RIDE
- 1. Making of BODA-RIDE 2015.06.18 @GREE Tech Talk #08
- 2. 自己紹介 岩渕智幸 株式会社バスキュールのフロントエンジニア集団「技術開発部」所属。 Flash Stage3D ・BLOODY TUBE ・… WebGL ・BODA-RIDE @buccchi
- 3. 2014年8月 SENSORS 番組プロジェクト始動 2014年12月 BODA-RIDE サイト公開 2015年1月 テレビ連動版 BODA-RIDE 放送（マジすか学園コラボ） SENSORS IGNITION 2015 開催決定 2015年3月 BODA-RIDE LIVE 開催（SENSORS IGNITION内） プロジェクト全体の流れ 2015年4月 NY ADC GOLD 受賞 2015年2月 FWA SITE OF THE MONTH 受賞
- 11. Windows BlackMagic Design社の映像機器 映像出力 depth 情報 color 情報 1つの画像に キャプチャシステム
- 13. DEMO GPUで頂点を動かす
- 17. BufferGeometryを作る
- 18. positions = new Float32Array( n * 3 * 3 ) # v0 positions[0] = 0 positions[1] = 100 positions[2] = 0 # v1 positions[3] = 0 positions[4] = 0 positions[5] = 0 # v2 positions[6] = 100 positions[7] = 0 positions[8] = 100 # v3 positions[9] = 100 positions[10] = 0 positions[11] = 0 addAttribute( 'position', new THREE.BufferAttribute( positions, 3 )) 頂点を作る（頂点座標の設定） x z v0 (0, 0, 100) v2 (100, 0, 100) v1 (0, 0, 0) v3 (100, 0, 0)
- 19. 面を張る（頂点インデックスの設定） indices = new Uint32Array( n * 3 ) # 1枚目のポリゴン indices[0] = 0 indices[1] = 1 indices[2] = 2 addAttribute( 'index', new THREE.BufferAttribute( indices, 1 )) x z v0 v2 v1 v3
- 20. uvs = new Float32Array( n * 3 * 2 ) # v0 uvs[0] = 0 uvs[1] = 1 # v1 uvs[2] = 0 uvs[3] = 0.5 # v2 uvs[4] = 0.5 uvs[5] = 1 addAttribute( 'uv', new THREE.BufferAttribute( uvs, 2 ) ) 面に色をつける（テクスチャの設定） x z v0 v2 v1 v3 0 +V 1.0 +U 1.0 v0 (0, 1) v2 (0.5, 1) v1 (0, 0.5) UV
- 21. 面のエッジを立てる v0 v2 v1 v3 共有している頂点を分離 1つのポリゴンを 構成する3つの頂点すべてに 同じ uv 値を設定 v1 v5 v3 v4 v0 v2 v1 v5 v3 v4 v0 v2
- 25. 映像の Depth エリアを Canvas に描画して色情報を取得 context.drawImage( image, sx, sy, sw, sh, dx, dy, dw, dh ) imagedata = context.getImageData( sx, sy, sw, sh ).data [ r,g,b,a, r,g,b,a, r,g,b,a, … ] 0 255 の範囲 → 0 1 の範囲に変換して保持
- 26. 頂点座標の更新 attributes.position.array の中身 index = 0 skip = 3 * 3 for i in [0…n] # 1つのポリゴンの y座標を更新 attributes.position.array[ index +1 ] = v0のy座標 attributes.position.array[ index +4 ] = v1のy座標 attributes.position.array[ index +7 ] = v2のy座標 index += skip # 頂点情報の更新を通知 attributes.position.needsUpdate = true v1 v0 v2 v2 [x,y,z, x,y,z, x,y,z, …] v1v0 BufferGeometry の中身を書き換え
- 31. 横線を排除してスピードレースに
- 32. 曲線の表現 THREE.Spline( points ) 与えられた頂点データに対してスプライン補間を行う v0 spline.getPoint( 0.083 ) spline.getPoint( 1 ) spline.getPoint( 0 ) v1 v2 v3 v4 スプライン補間された曲線基順点 各頂点の座標を取得
- 33. コースラインの表現 THREE.Line( geometry, material, type ） update:()-> ... # 頂点座標変更処理 ... # 頂点カラー変更処理 line.geometry.verticesNeedUpdate = true line.geometry.colorsNeedUpdate = true 頂点、色を更新 線オブジェクトを生成 16本の線を 1オブジェクトで扱いたいので type は LinePieces
- 34. DEMO グラビアアイドル
- 39. BODA-RIDE LIVE 会場スクリーン I L E A J C K G A H B F N D M H B F C B E J I A E P F C A G Mac
- 43. 258 212 106 130 27,560 ポリゴン （82,680 頂点） BufferGeometry の分割数を増加 109,392 ポリゴン （328,176 頂点）
- 44. パーティクル演出の追加 THREE.PointCloud( geometry, material ) カスタムシェーダー THREE.ShaderMaterial( 頂点シェーダー, フラグメントシェーダー, uniforms, attributes ) スキャンラインが通過した場所からパーティクルを発生させる
- 45. uniforms 全頂点の共通パラメータ attributes 個々の頂点情報 time texture initPosition initTime dotColor lifeTime moveVolume scale : vec3 # 設定時の位置座標 : float # 設定時の経過時間 : vec3 # パーティクルの色 : float # 生存時間（乱数） : vec3 # 移動量（乱数） : float # パーティクルの大きさ（乱数） : float # 経過時間 : sampler2D # パーティクルのテクスチャ（png） THREE.ShaderMaterial
- 46. : float # 経過時間 : sampler2D # パーティクルのテクスチャ（png） : vec3 # 設定時の位置座標 : float # 設定時の経過時間 : vec3 # パーティクルの色 : float # 生存時間（乱数） : vec3 # 移動量（乱数） : float # パーティクルの大きさ（乱数） 毎フレーム更新 スキャンラインが 通過したタイミングで 通過した頂点分だけ更新 THREE.ShaderMaterial uniforms 全頂点の共通パラメータ attributes 個々の頂点情報 time texture initPosition initTime dotColor lifeTime moveVolume scale
- 48. このスキャンラインが…
- 49. 次のフレームではこの位置
- 50. このエリア内で y 座標が一定値を超えた頂点分だけ、 attributes の各パラメータを再設定する （初期座標、再設定時の経過時間、パーティクルの色）