Autodesk MayaとDomemaster3Dで360°動画(spherical video)を書き出す方法。


Google CardboardでYouTubeの360°動画を観たら未来を感じました。

観ているうちに自分でも作りたいと思い先日360°カメラとしては破格のRicoh Theta Sを購入しました。

レビューとかは気が向いたら書きます。

撮影動画の編集自体は要領を掴むまで色々苦労しましたが極座標と直交座標の仕組みが分かれば普通の動画編集と変わりませんでした。

しかしYouTubeチャンネルにアップロードする以上カッコいいイントロは必須です。

どうせならイントロも360°にしたいと思い久々にMayaを立ち上げてイントロアニメーションをちょちょっと作成。

OpeningAnime

後はThetaと同じ天球動画、英語で言うとSpherical videoとして書き出します。

3D制作ソフトの中にはFoVを360°にすればそのまま天球イメージが書き出せるものもあるようですがMayaではビューアングルが165°までしか書き出せないようです。

fov165

しかし有能なエンジニア様達がフリーで天球イメージを書き出せるプラグインを作ってくれていたみたいで助かりました。

Domemaster3D

これをリンク先下部の説明に従ってインストールします。

するとメニューにDomemaster3Dの項目が追加されているのでLatLong Stereo Cameraを設置します。

domemaster3d

すると3台のカメラが設置されます。

threecam

今回使用するのは真ん中のカメラだけなので、LatLong Cameraだけの設置でも良いですが、後々複眼タイプの3D動画を書き出したくなった時の為にこちらを選択しておきます。

カメラのアトリビュートからcenter_LatLong_Stereoを選択してFoV(Vert)とFoV(Horiz)がそれぞれ180°と360°なのを確認したらレンダー設定からLatLongStereoCameraY(立体視ペアではない方)を選択。

centerlatsetting

rendersettingjpg

あとはTheta Sの展開イメージと同じ比率(2:1)で書き出します。

今回のような用途の場合は透過のある画像(PNG等)として書き出したほうが後で色々捗ります。

あとはイメージシーケンスとしてPremiereなりFCPにぶち込みましょう。

ちなみにレンダラ―はMental Rayしか使用できないようです。

そして完成した動画がこちら。


Riverdale Art Walk – FILMARTIST 360° Art Experience

チャンネル登録お願いします。

以上です。


【Three.js r73】colladaLoaderのモデルをRaycasterでピッキング(クリック可能)にする。


日本語は勿論英語のStack Overflowやその他色々Three.jsの事を扱っている記事を見ても現行のr73について扱った記事が無かったので備忘録。

結論から言うと以前のバージョンよりかなり簡単になっています。

「Three.js Collada Raycaster」とググって一番最初に出てくるMouse-Picking Collada Models with three.js, Part IIではr62を扱っていますがこれと比べればどの程度簡単になったのか一目瞭然。

開発者様達には感謝です。

まずcolladaLoaderでモデルを読み込む場合以下のように読み込みます。

出力したソフトや設定によってはMeshの場所が異なる場合があるのでconsole.log()等を使って予めMeshの場所を特定してテクスチャやサイズの変更を行います。
※MAYAの場合はcollada.scene.children[0].children[0]にMeshがありました。

しかしcollada.sceneをそのままシーンに追加するとTHREE.Groupとして出力されるためraycasterでピッキングできません。

r73ではレンダリングされたMeshオブジェクトをピッキングしているのでColladaモデルもMeshとしてシーンに追加します。

collada.scene内にMeshが1つの場合はscene.add(model)をscene.add(model.children[0].children[0])に書き換えてMeshを直接シーンに追加できますが、複数のMeshある場合は一つずつ取り出します。

これ全く同じものがレンダリングされますがTHREE.GroupではなくTHREE.Meshとして出力されるため他のMeshと同様にRaycasterでピッキング可能になります。

シーンごと追加した時と違うサイズや座標で出力されてしまう場合はモデル作成時に位置やサイズ情報をフリーズ(全値をデフォルト化)してない可能性があります。

MAYAの場合は「修正(Modify)>トランスフォームのフリーズ(Freeze Transformations)」
Blenderは分からないので自分で調べてください。

この方法で追加したデモがこちら。

colladaLoaderのraycasterデモ
http://cityjumperweb.com/webgl/colladaPick/

See the Pen ZQpZdZ by Yuya Saito (@U-YA) on CodePen.

これは静止したモデルでの場合なのでまだ試していませんが、アニメーションが付いている場合は勝手が違うかもしれません。

順序が逆になりましたがraycasterやcolladaLoaderの使い方については後日書く予定。


よく利用するThree.js旧バージョンからのコード書き換え(メモ)


毎回調べるのも面倒なので覚書。
色々試したくてGitHubやCodepenから他の人のコード拾ってきて弄繰り回してますが、ライブラリのバージョンが古いと一部コードに互換性が無いので、そのままでは動作しない場合があります。
バージョンアップに伴う仕様の変更はjQuery等の他のライブラリにもよくある事ですがWebGL自体まだ新しい技術なのでThree.jsは特に仕様がコロコロ変わります。
数か月前のコードをそのまま使おうとしても上手く動くことの方が稀。

ImageUtils.loadTexture

Three.jsの現行バージョンr73でもImageUtils.loadTexture(‘src’)は動きますがコンソールにもうすぐ使えなくなるという旨の注意書きがでてくるので書き換え方法

旧コード

新コード

ドキュメンテーションには.load ( url, onLoad, onProgress, onError )とあるのでロード後、ロード中、エラー時と処理を分岐できるのでもっと便利ですが、そうするとコードの構造自体書き換える必要があるのであくまで応急処置。

shadowCamera

旧バージョンではHelperを作成するのにカメラにもライトにもshadowCameraを使っていたようですが、新バージョンではそれぞれに対応するヘルパーがあるのでスポットライトに使っていたshadowCameraは使用でき代わりにSpotLightHelper(),CameraHelper()等を使います。
新しいだけあって此方の方が遥かに便利。

こちらが以前の記事『WebGLライブラリThree.jsの基礎と照明(Light)色々。』にも掲載した各種ライトのヘルパー。

See the Pen KdOVqe by Yuya Saito (@U-YA) on CodePen.

ちなみにこちらがShadowCameraで作った以前のバージョンのSpotlightのヘルパー。(by Mad Dog Tutorials)

See the Pen THREE.js Basic Scene with Spot Light by Patrick (@wpdildine) on CodePen.

今後も気づいたら色々追記していきます。


WebGLライブラリThree.jsの基礎と照明(Light)色々。


はじめに

WebGLとは
3Dモデリングの開発ソフト等に使用される3次元コンピュータグラフィックスAPIのOpenGLをJavaScriptとバインディングしてWebブラウザに適応した技術。そのまま弄るのは少し敷居が高い。
Three.js
敷居の高いWebGLを少しの3D知識とJavaScriptの知識で簡単に記述出来るようにしてくれる素敵ライブラリ。Babylon.js等他にもライブラリは沢山あるけど多分シェアと取っつき易さは1番。

バージョンアップにドキュメンテーションの更新も一部追いついていないみたいなのでドキュメンテーションを見ながらでも一部混乱した部分があったので備忘録。

  1. Three.jsの基本的な使い方
  2. ジオメトリマテリアルの種類
  3. 照明(Light)の種類

Three.jsの基礎

処理の流れ

  1. HTMLファイルの作成
  2. シーンを追加
  3. カメラの追加
  4. 物体の追加
  5. シーンのレンダリング

まずは出力するための土台となるHTMLを書きます。

各種ライブラリの読み込みとjQueryを使い慣れている人は併用も可能

続いてThree.js公式サイトから最新版のThree.js(2015/11月現在r73)をダウンロード。

ファイル内のBuildフォルダの中にThree.jsの本体があるので任意のディレクトリに移動。

examplesフォルダの中には色々なプラグインが入っているので以下の3ファイルも任意の場所に移動します。

examples->js->controls->Orbitcontrols.js
examples->js->libs->dat.gui.min.js
examples->js->libs->stats.min.js

練習用なのでbodyの中にアペンド用のdivタグが1つあればOK。

次に実際の処理。

まずScene(場面)とCamera(視点)を追加。

レンダリングするまで何を書いても出力されないので、先にレンダリング処理を行う。

ここまでの処理が最低限の土台。

ジオメトリ、マテリアルの種類

続いて物体を追加、流れは以下の通り

  1. ジオメトリ(図形)の作成
  2. マテリアル(表面)の作成
  3. 位置や回転率を設定
  4. シーンに追加

Three.jsではBlender等で作成したobjやjson,dae形式の3Dファイルの読み込みにも対応していますが、基本的なジオメトリはそのまま追加可能です。

Geometry一覧
※リンク先はドキュメンテーションでサンプルを見れます。

2D

PlaneGeometry
四角形

CircleGeometry

RingGeometry

3D

BoxGeometry
立方体

SphereGeometry
球体

TorusGeometry
トーラス(ドーナツ型)

TorusKnotGeometry
トーラス結び目

CylinderGeometry
多角柱(radiusSegmentsを増やすと実質円柱)

TetrahedronOctahedronGeometryDodecahedronGeometryIcosahedronGeometry
三角錐(三面体)、八面体、十二面体、二十面体、

TextGeometry
文字(要TextGeometry.js&フォントJSファイル読み込み)

基本的なマテリアル一覧

MeshBasicMaterial
光を一切反射しないのっぺりマテリアル

MeshPhongMaterial
光沢のあるマテリアル

MeshLambertMaterial
光沢の無い光を反射するマテリアル

3Dモデリングの基礎で使用するのは大抵この3種類。

コーディングは以下。

ここまでの処理を出力するとこんな感じ。

See the Pen MaNKmP by Yuya Saito (@U-YA) on CodePen.

照明を設定していない状態Besicマテリアルを使用すると影絵のような物体しか表示されず3Dっぽくありません。

照明の設定

続いて照明(Light)の設定を行います。

Three.jsには基本5種類の照明があります。

Ambient light
シーン全体を全方向から照らす照明です。
物理的にはほぼあり得ない照明なので照明というよりはシーン全体基本色と考えたほうが合点が行くと思います。
引数はHex(色)のみ。

Directional light
対象物の全体を1方向から照らす照明。
第一引数にはHex、第二引数にはIntensity(光の強さ)をとります。

Spot light
スポットライト。
第一引数にはHex、第二引数にはIntensity(光の強さ)、第三引数にDistance(距離)、第四引数にAngle(絞り具合)、第五引数にExponent(ターゲットの方向からの光の弱まり具合)、第六引数にDecay(拡散による光の弱まり具合)をとります。

Point light
裸電球のようにその場で全方向に拡散する照明。
第一引数にはHex、第二引数にはIntensity(光の強さ)、第三引数にDistance(距離)、第四引数にDecay(光の弱まり具合)をとります。

Hemisphere light
Point Lightと似たような特性だが上半分(skyColor)と下半分(groundColor)で別の色を設定できる照明。
第一引数にはskyColorのHex、第二引数にはgroundColorのHexをとります。

上記の通りBasicマテリアルでは光の反射は見えないのでBasic以外のマテリアルを使用。

ドキュメンテーションにも説明が掲載されていますが、読んでも実際にどう動くかわからないので色々弄ってみます。

See the Pen KdOVqe by Yuya Saito (@U-YA) on CodePen.

次はサンプルや公式ドキュメンテーションにも使用されているDAT GUIの使い方と各種Helperの使い方。