mieki256's diary

ポリゴンの縦幅の半分を求める際、距離 * sin(fov / 2.0) で計算してたけど、コレが間違ってた。距離 * tan(fov / 2.0) じゃないとおかしい。何故に自分は、そんな間違った計算を…。

また、前述の perspective() の解説ページは、Processing 1.x時代の内容のせいか、スクリーンまでの距離がとんでもなく大きい値になってた。手元で使ってる processing 3.0.2 とは違ってるらしい。 _perspective() \ Language (API) \ Processing 2+ には、視点からスクリーンまでの距離は、float cameraZ = (height/2.0) / tan(fov/2.0); と書いてあるけど、こちらのほうが正しい。

後は、テクスチャのUV座標を求めてスクロールさせれば…。しかし、360度ループするような式ってどう書けば…。水平画角が60度ならループできたけど、本来は 60度 * (width / height) で1画面分スクロール、になるはずだよな…。

個人的には、「ウルトラマンはテラフォーミング用人工生命体の成れの果て」とか、「ウルトラマンの肉体はナノマシンの集合体」とか、そういう設定が好みなのですが。使い道が無いよな…。

Vue 5 Easel でパノラマ画像をレンダリング。

パノラマ画像をキューブマップ画像に変換するツールを探したところ、 _PanoramaToCubemapConverter - ge56@web でツールを公開されてる方が。ありがたや。

件のツールは、横:縦 = 2:1の画像を渡すことを前提にして作られているらしいのだけど、Vue 5 Easel は出力画像の縦横比率を自由に設定できなくて、あらかじめ決められた比率の中から選ぶしかないので、Vue 5 Easel でレンダリングした画像を GIMP 等で2:1の画像に変更。

変換すると6枚の画像が出力されるので、GIMPで1枚のテクスチャ画像に統合。GIMPのグリッド設定を、画像1枚分のサイズに設定して、グリッド表示on、グリッドにスナップをonにすれば、移動ツールで配置しやすくなる。

他に関係ありそうなページをメモ。

_javascript - Convert 2:1 equirectangular panorama to cube map - Stack Overflow
_キューブマップ ツール | Unreal Engine

NVIDIA Texture Tools でキューブマップ画像に変換できるのかと思いきや、既に出来上がってるキューブマップ画像を既定の並びにしてくれるツール、だったようで。

ついでに、先日書いてた、ウインドウサイズにピッタリの大きさで表示できるポリゴンを配置する実験ソースもアップ。

_sketch_perspective_test (Processing.js版)
_sketch_perspective_test.pde (ソース)
_tex.png (使用画像)

距離 * tan(視野角 / 2) で、縦幅 / 2 を求めてポリゴンを作るだけですけど。一応図解も。
ソースも画像も CC0 / Public Domain ってことで。

上記の画像は、画像の横:縦=1:1だけど。

その比率では使いづらいかもと思って、70mm(46:21 ≒ 2.19:1)の設定で試しにレンダリングしてみたところ、1:1のレンダリング画像の上下を単にトリミングしただけの画像が出力されてしまった。Vueは、出力画像の縦横比率に応じて引き延ばしてレンダリングしてくれるわけではない、ということか…。

レンダリング画像の、空や地面の面積が妙に大きいなと思いながら眺めてるうちに不安になってきた。この画像を縦方向に縮小すれば、いわゆる equirectangular画像 ＝ 正距円筒図法とやらになるのかと思ったけれど。コレはもしかして正距円筒図法にならないのでは…。いや待て。なるのか。どうなんだ。よく分からなくなってきた。一応、縦半分に縮小した画像で、アレコレ試してみたところ、見た目だけはソレっぽく見えてるようではあるけれど。本当にコレで合ってるのか。どうなんだ。自信無し。

Vueのレンダリングオプションについてググってみたら、Vue Easel の上位バージョンには、「球面レンダリング」だか「球状レンダリング」だかそういう名前のオプションがあるようで。ソレを有効にしないといかん気がするけど、Easel版はそんなオプションは無いし、おそらく無効になったままで弄れない気もする。

Vue 5 Easel には、カメラの画角を設定するオプションが無い。焦点距離しか設定できない。ただ、焦点距離を18mmにしたら、画角が90度になってくれた、ような気がする。

そのあたり、 _Vueのカメラ設定 - 日々適当 という記事が大変参考になった。ありがたや。「35mmフィルムの値が36mm x 24mm」と仮定すると、焦点距離 = (36 / 2) / tan(水平画角 /2) になるらしい。水平画角90度として計算すると、焦点距離は 18mm ということになる。

Vue 5 Easel で、6方向のカメラを追加する手順は…。

• メニューの表示 → カメラ生成。
• もしくは、Ctrl + テンキーの「.」。

ダイアログが開くので、任意のカメラ名を入力してEnterを叩けば追加していける。今回は「top」「bottom」「front」「left」等の名前で生成していった。

各カメラの切り替え方は、色々。

• カメラが生成されるたびに、Ctrl + テンキー2、Ctrl + テンキー3 といった感じでショートカットキーが割り当てられるので、該当キーを押してカメラの切り替えができる。
• あるいは、右上の「メインカメラ」ウインドウ内、「メインカメラ」の横の小さな三角を押して他のカメラを選べる。
• もしくは、表示 → カメラ選択。
• はたまた、「メインカメラ」ウインドウの左にあるアイコンをクリックするとカメラマネージャが開くので、そこから切り替え。

カメラの向きは「数値」タブ(物差しみたいなアイコン)をクリックして、左側のアイコンの中の「方向」を選べば指定できる。ピッチは90度、ヨーが0度、ロールが、0,90,180,270度、みたいな感じで指定。天井と真下は、ピッチを0度と180度にすればいい。

出来上がった画像は、360度パノラマ画像から作ったソレとは随分違う画像になった。

_panorama03c_cross_a.png (2.8MB) が、6方向のカメラでレンダリングした画像を並べた Cubemap 画像。

_panorama03c_cross_b.png (2.5MB) が、360度パノラマ画像から生成した Cubemap 画像。これは、画像の横:縦=1:1で360度パノラマ画像をレンダリング → GIMP で縦方向を1/2に縮小して 2:1 の画像に → そこから、 _PanoramaToCubemapConverter を使って Cubemap画像を生成したもの。

さておき。6方向のカメラでレンダリングしたソレは…。

• 当然ながら天井も地面もちゃんと歪まずにレンダリングできてる。
• 画像の変換処理が入らないので画像が荒れない。
• 何より、オブジェクトが縦方向に大きくなってる。

ひょっとして、カメラ毎に自動露出処理が働いてしまって、各画像の明度が異なって綺麗に繋がらないのではと懸念していたけど。幸い、そういう処理はしていないようで、綺麗に繋がってくれた。機能を省いてくれていて助かった。

対して、360度パノラマ画像から作ったソレは…。

• 何故か天井と真下が歪む。
• 画像の変換処理が何度か入るので画像が荒れる。
• オブジェクトが縦方向に小さい。

まあ、後者はGIMPで縦方向を1/2にしてるんだから、オブジェクトが小さくなって当たり前じゃないのか、という気もするけれど。しかし、Vue が360度パノラマ画像をレンダリングする際、縦方向180度をレンダリングしてるなら、縦を1/2にするだけで正距円筒図法に近い結果になりそうな気も。いや、ならないのかな。どうなんだ。

とにかく、Vue で360度パノラマ画像をレンダリングした際、天井と真下が歪むのも妙だし、縦方向をどんな比率でレンダリングしているのかもよく分からないわけで…。どうも怪しい。というか、どんな前提でレンダリングしてるのか、そこが分からない。

とりあえず、6方向のカメラでレンダリングするソレは、6回手作業でカメラ切り替え・画像保存をしなきゃいけないのが面倒だけど、その時間を含めても360度パノラマをレンダリングするより総レンダリング時間が速かったので…。Vue 5 Easel で Cubemap を作る際は、6個カメラを用意するソレで作業したほうが良さそうだなと。面倒だけど。

ちなみに、Vueの現行版・上位バージョンは、レンダリング時のオプションで「球面パノラマレンダリング」とやらがあるらしいし、画像比率も自由に設定できるらしいので、ちゃんと正距円筒図法でレンダリングできるのだろうと想像。 _Vueのパノラマレンダリング - 日々適当 によると、Spherical Render てのがソレっぽい。

以下の Processing で、両方の画像を切り替えながら表示確認してみたところ、一応それらしく見えてるっぽいので、まあ、使えるんじゃないかと。

_sketch_cubemap_test2 (Processing.js版)
_sketch_cubemap_test2.pde (ソース)

ググってたら、 _aitch-two/THETATools: Paint.net Plugins for RICOH THETA というプラグインに遭遇。 _paint.net 上で、 _360度を一度に撮影できる RICOH THETA の画像を編集できるプラグイン、らしい。

THETAの画像は、おそらく正距円筒図法だと思うので、このプラグインを使えば自作画像が該当図法になってるか検証できそうな気がする。

_akokubo/ThetaViewer: RICOH THETA like equirectangular projection panorama HTML5 viewer という、ブラウザ上で動くビューアも役に立ちそう。ローカルでは動かないので、どこかのサーバにアップロードして動かす必要があるけど。自分の場合は、メインPC上で動いてるIISのドキュメントフォルダ以下にファイル群をコピーして使ってみたり。

別のシーンデータで、6方向のカメラを作ってレンダリングしてみたら、おかしなことになった。

_panorama02c_cross_a.png (8.8MB)

• レンズフレアが入ってる画像と入ってない画像がある → 画像の端が全然繋がってない。
• 明度が異なってる画像がある → 画像の端が綺麗に繋がってない。

やっぱり自動露出が働いてるのか…。そこは機能を削ってくれたほうがありがたかった…。レンズフレアもなあ…。コレ、どうしようもないな…。

同じシーンデータでも、大気設定を変更すれば、おかしくならない状態になるときもあるのだけど。

_panorama02d_cross_a.png (8.5MB)

しかしコレでは、暗い風景しか作れない。やっぱり一度で全部レンダリングする方法を見つけないとダメっぽい。

まあ、Vue 5 Easel を使ってこのへんどうにかしようというのが、そもそも無理なんじゃないかと。blender を使えば最初から正距円筒図法でレンダリングできるという情報も見かけたので、そっちを使ってどうにかしようと試みるほうがマシかも。地形データを作るのが一苦労だろうけど。あるいは、もしかすると Terragen 3 あたりを使ったほうがいいのかも。

Vue、使えそうで使えねえ。まあ、古くて安い版だから、ですけど。

GIMPを起動して MathMap を開くと(フィルタ → 汎用 → MathMap)、プレビューウインドウの右に、5つのタブが並んでる。

• Expression ... スクリプトを書いていく場所。
• Setting ... MathMapの処理に関わってくるオプション指定。アンチエイリアスや、画像の端を繰り返す、等。
• User Values ... フィルタによっては入力パラメータを必要とするものがある。その入力項目が表示される場所。
• Filters ... 登録済みのフィルタ(MathMapのスクリプト)が並んでる。フィルタ名をクリックすると、スクリプトが Load されて、Expressionタブに開かれる。
• Composer ... 複数のフィルタを組み合わせて実行する際に使う。左側でフィルタ名をクリックすると右側に追加されて、フィルタの「out」から、別フィルタの「in」にドラッグすると、フィルタを組み合わせることができるらしい。

とりあえず、Epressionタブの中でスクリプトを書いて、Save As... で保存して、次回使う時は Filtersタブから選ぶ、みたいな感じになるのだと思う。

スクリプトを保存すると、拡張子が .mm になって保存される。

Windows環境だと、保存した際に改行コードがおかしくなるっぽい。ちゃんと書けたはずなのに、saveボタンを押したら「parseできねーよ」とエラーが出たら、大体は改行コードが妙なことになってる。その場合は、別途エディタを使ってスクリプトを書いて、改行コードを LF にして保存して、MathMap で Load したほうがトラブルが起きにくいかもしれない。

画像に対するフィルタ処理のスクリプトは、以下のような感じ。

filter hogefugapiyo(image in)

    in(xy:[x, y * 2])

end

• filter フィルタ名(image in) 〜 end で、フィルタを定義。
• (image in) は、画像を入力して処理しますよ、という記述。
• in(xy:[x, y]) は、(x,y)座標の位置にドットを書く際、[x, y]の位置を参照せよ、てな関係を書いていく。

例えば、前述の in(xy:[x, y * 2]) で処理をした場合、y方向が半分になった画像が得られる。y を2倍してるのに、どうして半分に縮小されるのか、ちょっと分かりづらいだろうか…。

• y=2 の位置にドットを描くなら、y * 2 = 4 の位置からドットの色を拾ってきて描く。
• y=4 なら、y * 2 = 8 の位置から拾ってくる。
• y = 100 なら、 y * 2 = 200 の位置から拾ってくる。

とりあえず、[x, y] のあたりを好きなように書き換えて、Preview を押してみればなんとなく分かってくるかも。

横が x軸、縦が y軸。画像の真ん中が(0,0)で、左下が (-1, -1)、右上が (+1, +1)、らしい。たぶん。

_The MathMap Language Tutorial に座標の解説図が載ってるので、ソレを見たほうが分かりやすいかも。

• 画像サイズは、大文字の「W」「H」で取得できる。W が画像の横幅。H が画像の縦幅。だと思う。たぶん。もっとも、画像サイズ(ドット数)に関わらず、x や y は -1.0 〜 +1.0 の値を取るはずなので、W も H も使わずに処理できる場合が多いかも。
• 円周率は pi と書く。

sin()、cos()、tan() に与える値は、単位が度なのかラジアンなのか、ちょっとよく分からず。 _The MathMap Language Reference Manual 内で、単位が明記されてる場所が見つからなくて。関数として、rad2deg() (ラジアンから度への変換)と、deg2rad() (度からラジアンへの変換)が用意されてるあたり、ラジアンを渡しそうな気もするのだけど…。

例えば、Vue から、24:36の比率で、1024x1536のパノラマ画像を得たとする。そして、コレは心射円筒図法だと仮定する。

横方向は球の円周と対応してるはずだから…。円周 2πr = 1024 dot。r = 1024 / 2π になるかなと。

心射円筒図法の場合、y = r * tanθ らしいから…。θ = atan(y / r)、かなと。

• y は、画像の縦幅 / 2 = 1536 / 2。
• r = 1024 / 2π。

だから…。atan( (1536 / 2) / (1024 / 2π)) ≒ 78度、ぐらいになりそう。つまり、この画像だと、y方向は 156度ぐらいしかレンダリングできてない、ということになりそうな。

1:1の比率で、1024x1024のパノラマ画像を得た場合はどうなるだろう。atan( (1024 / 2) / (1024 / 2π)) = 72度ぐらい？ つまり144度ぐらいはレンダリングしている、という状態になるのかな。

_GeoGebra で図を描いて確認してみた。


合ってるような気がする…。

コレを、GIMP の MathMap に反映させないと。

MathMap の場合、横方向の長さは、-1.0から+1.0になるのだから、横の長さは 2.0 ってことになるよなと。円周 2πr = 2、なのだから、r = 2 / 2π = 1/π になるのかな。

y も、-1.0 から +1.0 を取るわけだから…。正距円筒図法の場合、y = θ のはずなので、1.0 が 90度相当になるようにしないといけない。三角関数に与える値の単位がラジアンと仮定して、180度 = πラジアンなのだから、90度 = π/2 ラジアン。y値に π/2 を掛けてやれば、三角関数に与える値になりそう。

心射円筒図法の場合、y = r * tanθ だから…。MathMap では、in(xy:[x, (1 / pi) * tan(y * (pi / 2))])、になる？

そのままだと、縦に引き延ばされたような画像になってしまう。画像サイズを使って、縦方向に縮めてやらないといかん気がする。(H / W) を掛けてやればいいのかな。と思ったけど、コレをしちゃうと、ドットを拾ってくる y の位置が変わってくるから、ちゃんと変換できなくなる、のかな…。

面倒だから、縦方向の縮小は、MathMap でフィルタをかけた後、GIMP の「画像の拡大・縮小」でやってしまおう…。画像横幅の半分のサイズになるように、画像縦幅を指定して縮小すればいいはず。

とりあえず現時点では、MathMap用のスクリプトは以下のような感じに。

_cylindrical2equirectangular.mm

# cylindrical to equirectangular
filter cylindrical2equirectangular(image in)
    in(xy:[x, (1/pi)*tan(y*(pi/2))])
end

結果画像を比較。

• 6方向をレンダリングして、「背景コンバータ」で正距円筒図法の画像に変換したもの。
• 360度パノラマ画像(縦:横=1:1)を、GIMP + MathMap で変換、横:縦 = 2:1 に縮小したもの。

一見すると上手くいったように見え…

あー。ダメだ。360度パノラマ画像のソレは、変換処理は上手くいってるっぽいけど、レンズフレアがとんでもない形になってる。コレ、元の画像が… Vue がレンダリングした時点でダメなんじゃないか？

それと、縦:横 = 1:1 になってないパノラマ画像を MathMap のソレで処理するとおかしなことになる。画像の比率に関係なく、y方向を -1.0 〜 +1.0 として処理してしまうから、だろうけど。補正しないと。

ちなみに「背景コンバータ」は、Cubemap用の6枚の画像から正距円筒図法の画像を生成できるツール。DoGA公式サイトの、 _背景コンバータ から入手できる。ありがたや。

360度パノラマ画像をレンダリングする際、メインカメラの焦点距離に大きい値を入れてみたら、レンズフレアが出ない状態になる時があるような気がしてきた。例えば焦点距離を135mmぐらいにしてみたり、とか。その代り、太陽がどこかに行ってしまう。地形データの明るさは太陽がある時と同じに見えるけど。どうしてこういう状態になるのかは謎。

# cylindrical to equirectangular and scale
filter cylindrical2equirectangular_scale(image in)
    in( xy: [x, (1/pi) * tan( clamp(y*pi, -pi/2, pi/2) ) ] )
end

前述のスクリプトを使う際、対象画像は、横:縦 = 1:1 の画像にしておくこと。

例えば、Vue で 46:21、1024 x 467ドットの360度パノラマ画像をレンダリングしたとして。GIMP で開いてから、以下のような手順になる。

1. 画像 → キャンバスサイズの変更。縦幅を横幅と同じ 1024ドットに、かつ、画像を中央に配置する。オフセットの「中央」ボタンを押せば、中央に配置できる。あくまで、キャンバスサイズの変更をするだけ。画像の拡大縮小はしない。拡大縮小してしまうと、心射円筒図法から正距円筒図法への変換がおかしくなる。
2. そのままだと、対象レイヤーが以前のサイズを引き継いだままになってる。レイヤーサイズも変更しないといけない。レイヤーを右クリック → アルファチャンネルの追加。かつ、レイヤーを右クリック → レイヤーをキャンバスに合わせる。これで、レイヤーも、キャンバスと同じ、1:1のサイズになる。
3. 前述のMathMapスクリプトを実行。フィルタ → 汎用 → MathMap。これで、正距円筒図法の画像になってるはず。

変換後、上下の透明部分が邪魔なので、トリミングしないといけない。

• 画像 → 画像の自動切り抜き。これで上下の透明部分を省いたサイズでトリミングされる。その後、画像 → キャンバスサイズの変更。横:縦 = 2:1 のキャンバスサイズに変更する。
• あるいは、ガイドと切り抜きツールを使ってトリミングしてもいい。表示 → ガイドにスナップ、が有効な状態で、画像 → ガイド → 均等にガイド。横の分割数を1、縦の分割数を4にしてガイドを作成。これで、切り抜きツールを使って 2:1 のサイズでトリミングしやすくなる。

「均等にガイド」は、GIMPの追加スクリプト。 _均等にガイド（Grid of guides） から入手できるはず。

色々試してみたけど、MathMap の Settings の Supersampling は、有効にすればいいというものでもなさそうだなと。有効にしたら、結果画像が結構ぼやけてしまった。

デフォルトでは Antialiasing だけチェックが入ってるけど、その状態が、バランスが取れてるのかもしれず。

なんでもそうだけど、この手のツールは「ブラシツール」や「消しゴムツール」が並んでるツールバーが表示されてないと気分が出てこないじゃないですか。なので、まずはそこから表示。パッと見の印象は大事。 *1

Windows → Other Windows → Toolbar、を選択。

ツールバーが表示されるので、一番上のあたりをマウスでドラッグしてアプリウインドウの端っこのあたりに持っていくと緑色の棒が出て「ここにくっつけることができるよ」と教えてくれるので、そこで離す。と、好きな位置にくっつけて配置することができる。

もしかすると、Tool Option Bar も表示してどこかに置いといたほうがいいのかもしれない。

ついでに、パレットウインドウも表示しておく。このソフトは、線を描いたり色を塗ったりするときに「パレット」というのを使うので…。アニメ制作って、色塗りをする前に、使う色の種類がえてして決められてるわけで。それらを、パレットとして管理するのだろうと。

Windows → Other Windows → Palette、を選択。

コレも、ドラッグして好きな位置にくっつけて配置することができる。

そうすると、見た目がこんな感じになる。 コレなら…なんだか使えそうな気がしてきた…。

アニメ制作ソフトってもんは、オニオンスキンが使えないと、さっぱり気分が出ないわけですよ。だからソレも有効に。

オニオンスキンってのは、前に描いた絵をうっすらと透かして見ることができる機能。手描きアニメで言えば、トレス台みたいなもの。

Customize → Preferences、を選択。

左側で、Onion Skin を選んで、右側の上のほうで、Onion Skin ON にチェックを入れる。

作業中の、有効・無効の切り替えは、画面の中で右クリックするとメニューが出てくるから…。 Activate Onion Skin を選択。コレでオニオンスキンが有効状態になる。

無効にしたい場合は、同様に右クリックして…。 Deactivate Onion Skin を選択。コレでオニオンスキンが無効状態になる。

OpenToonz は、各作業をしやすいように、画面レイアウトがいくつか用意されてるようで。右上のボタンを押せば、レイアウトが切り替えられるっぽい。 お絵描きをしたいので、InknPaint (たぶん、Ink and Paintの略じゃないかな…) をクリック。

デフォルトではツールバー等が表示されてないと思うので、Windows → Toolbar や、Windows → Tool Option Bar を選んで、好きな位置に配置しておいたほうがヨサゲ。

XSheetウインドウ内でクリックして、「このセル/フレームに描くよ」と指定する。
ブラシツール(Brush Tool)や消しゴムツール(Eraser Tool)で、画面に何か描いてみる。ちなみに、ツールバー上のアイコンの上でマウスカーソルをしばらく止めておくと、「Brush Tool」「Eraser Tool」等、ツール名を表示してくれるので、それを頼りにどんなことをするツールなのか予想できそうな予感。
間違って描いてしまったときは、Ctrl + Z キーを押せば、Undo(元に戻す) ができる。

色を塗るときは、バケツツール(Fill Tool)を使う…のだけど。その前に、色塗り用のパレットを用意しておかないといけない。

パレットウインドウ内で右クリック。 New Style を選ぶ。

パレットが一つ追加された。
パレットの色を変更するのは、Palette Edit(PltEdit)で作業したほうが楽だろうから、そっちに切り替える。 右上の、PltEdit をクリックして、色を変更したら、Apply ボタンをクリック。変更が反映される。

InknPaintレイアウトに戻って、塗りに使うパレットを選択。バケツツール(Fill Tool)を選んで、塗りたいところをクリックしていく。 線が閉じていれば、クリックするだけで塗ってくれる模様。

これで、何かしら落書きすることはできた。

いよいよアニメを作ってみる。

1枚1枚、せっせと絵を描いてもいいのだけど…。お試しで作業してるだけなのにシコシコと描いてたら時間がかかるので、既に描いたソレをコピーして使い回すことにする。 選択ツール(Selection Tool) を選んで、マウスドラッグすれば、ドラッグした範囲が選択できる。

選択した状態で、Ctrl + Cキー。これで、選択範囲がクリップボードにコピーできた。

XSheetウインドウ内で、次のフレームをクリック。

おもむろに、Ctrl + Vキーを押す。コピーしてた絵が「貼り付け」されて、XSheet内の表示が変わった。 「このフレームに、2枚目が指定されてるよ」と表示しているのだと思う。

この調子で、バンバン増やす。
増やしたら、2フレーム目や3フレーム目をクリック。各フレームで、絵の位置を変更する。 選択ツールを使って絵を選択してから、絵の上にカーソルを持っていくと、カーソルが十字カーソルになるので、その状態ならドラッグして位置を移動できる。

選択範囲のちょっと外側にカーソルを持っていくと、絵を回転させることもできる。
選択範囲の境界の四角をドラッグすれば、拡大縮小もできる。
これで各フレームは作れた。けど。

たぶんこのままだとタイミングが早過ぎて酷いことになりそう。なので、XSheet(タイムシート)上で、どのフレームを何フレーム表示し続けるか調整する。

XSheetで、フレームをクリックすると、下にちいさいタブっぽい何かが表示される。 このタブっぽい何かを、マウスでググッと下にドラッグする。

1フレーム分を、3フレームの間、表示できるように指定できた。

この作業を1つ1つやっていってもいいのだけど、まとめてやることもできるようで…。 真ん中あたりから下に向けてマウスドラッグすると、複数のフレームを選択することができる。

選択したフレーム上で右クリックするとメニューが表示される。 Step → Step 3 を選択。

一気にタイミングを変えることができた。

ちなみに、XSheet上でフレームをダブルクリックすると、英数字を直接入力することができるようになるので、ガシガシとキー入力してタイミングを変更することも可能。

再生してみるには、ComboViewer とやらを使う。 WIndows → ComboViewer、を選択。

ComboViewer が表示された。 下のほうに、停止ボタン、再生ボタン、ループ再生ボタンがある。クリックすればそれぞれ再生できる。

ということで、ひとまず再生確認までは出来たけど。ここから動画等でエクスポートする方法が、まだ分かってないという…。

動画をレンダリングして出力する方法が分かった。右上のほうで Xsheet を選ぶと、メニューの中に「Render」というのが出現する。ここからレンダリング・動画出力ができる。

Render → Output Settings で、出力形式等を設定。pngにすれば連番画像が出力できるし、aviにすれば動画ファイルとして出力できるようで。

ちなみに。右上のソレを、自分で勝手に「InknPaintレイアウト」「Xsheetレイアウト」とか呼んでしまっていたけど。導入マニュアルpdfを呼んだら「Room と呼んでくれい」と書いてあった。「レイアウト」では、アニメ用語の「レイアウト」と混同しちゃうからマズいよな…。

設定を変えれば、メニュー等を日本語化できると知った。

Customize → Preferences を選ぶ。

Interface → Language で、japanese を選んで、OpenToonz を再起動。

メニュー等が日本語化された。

これで随分と分かりやすくなった…。ありがたや。助かった。

カメラワークは、Xsheet Room でつけていく、らしい。

とりあえず、外部の何かで作った一枚絵を読み込んで実験してみる。 Xsheet Room を選んで、読み込みたいフレームをクリックしてから、その上で右クリック。メニューの中から、レベルを読み込み、を選択。

レベルっていうのは…。OpenToonz の場合、アニメのセルのことをレベル、と呼んでるらしい。日本のアニメ制作では、セルが2枚3枚と重なるたびに、Aセル、Bセル、Cセルと呼び分けていくらしいけど、たぶんソレがレベルに相当するんじゃないかなと。よく知らないけど。

ダイアログが開くので、読み込みたい画像ファイルを指定して、下のほうにある「読み込み」ボタンをクリック。

OpenToonz 以外で作られた画像群は、inputs という名前のフォルダに入れておこうぜ、という約束になってるらしいので、自分も sandbox\inputs\ に入れておいた。

ちなみに。

• tif画像以外に、png画像も読み込めるらしい。
• アルファチャンネルがついたpngも、透明部分を反映した状態で読み込んでくれた。

背景画像が読み込めた。

ちなみに。

• 画像ウインドウ内のズーム(拡大縮小表示)は、マウスホイールでできる。
• 表示位置を変えたい時は、ホイールボタンを押しながらドラッグ。

同様に、背景の手前に表示したい画像(一枚絵)も読み込んだ。

それぞれ、何フレームぐらい表示するのかを指定していく。Xsheet Room で作業する。

フレームをクリックすると、右下にタブっぽいものが出てくるので、そのタブっぽいものをマウスで下にドラッグする。

24フレーム(24コマ/秒のアニメなら、1秒間)、表示することにしてみた。ちなみに、もう一つのセル、というかレベルも、同じように表示するフレームを増やしておく。(スクリーンショットを撮った時は、指定し忘れてた…。)

カメラワークをつけていく。とりあえず、横にPANさせてみる。

PANってのは、ハイジがおじいさん達に食べさせようとクローゼットに隠してた…このボケは、おじさんおばさんしか分かんないな。 _M.S.C animetion studio HP で、PANについてちゃんと解説されてるので、参考にしてください。

フレームをクリックすると、パラメータエディタの右にあるツリーの中で、「Col1」の文字が赤くなって「ココでパラメータを選べるよ」と教えてくれる。左側の小さい「＋」を押して、中身を展開する。

「E/W」をクリックしてみた。パラメータエディタに、「Col1」の「E/W」パラメータの列が表示された。

「E/W」って、何だ？ …おそらくだけど、「East/West」(東/西)の略じゃないかなと。東西方向、つまりは、横方向の変化を指定できるよ、ということだと思う。

ということは、その下にある「N/S」は、「North/South」(北/南)の略だろうと。南北方向、つまりは、縦方向の変化を指定できるのだと思う。

他のパラメータは…。Rotation は回転、Scale は拡大縮小だろうけど、他は何なのか、まだ分かってない。

横方向の変化量を指定していく。1フレーム目の欄をダブルクリックすると、数値入力ができる。ひとまず「0」を入力して Enter を押した。

最終フレームも、ダブルクリックして、「200」を入力してみると…。

最初のフレームと、最後のフレームの、間に入るべき変化量を、自動で補間して作ってくれた。

が、しかし、これではちょっとよろしくない。

補間で作ってくれた最初のフレーム(2フレーム目)をクリックすると、「この欄は補間方法として『スピードイン/スピードアウト』を使ってるよ」と表示された。

できれば、最初から終わりまで、等速で変化させたいわけで。

なので、補間方法を「線形」にして、適用ボタンをクリックすると…。

補間で作ってくれる数値が、以前とは違う値になってくれた。

再生して動きを確認してみる。 ウインドウ → メインビューア、を選択。

よく見ると、メニューの中に、メインビューアが2つあるけど…。この場合、ショートカットキー「(C)」からして、ComboViewer を選んでるのではないかと。

ComboViewer の再生ボタンを押すと、背景がちゃんとPANされてる。

と、こんな感じでカメラワークをつけていくんじゃないかなあ、と…。

カメラワークと言っても、この場合は素材のほうを動かしてるわけで、本当の意味でのカメラワークじゃないんだろうと思うけど。
ちなみに、ComboViewer の上のほうにあるボタンを押すと、こんな感じの3D表示でカメラの動きを確認できるようです。こういう表示ができるってことは…おそらく、3次元的なカメラの動きも指定できるんじゃないかと思うのですが、まだそこまでは分ってない状態。

アニメと言えば透過光、ですけど。透過光って、どういうエフェクトを組み合わせていけば実現できるのでしょうな…。

GIMPのレイヤー名に、「〜 (40ms)(replace)」等を指定しておけば、あらかじめディレイ値とフレーム処理について指定しておくことができる。コレを使えば、特定のレイヤー(フレーム)だけ、長く表示したり、短く表示したり、つまりはアニメのタイミング調整ができる。
_GIMP2でGIFアニメを作成する場合の設定値 - 知識情報アーカイブ

「500ms」は、500ミリ秒表示。
「replace」は、レイヤー表示の置き換え。
初期値値は、「(100ms)(combine)」。
「combine」は、レイヤー表示の結合。

GIMP2でＧＩＦアニメを作成する場合の設定値 - 知識情報アーカイブ より

GIFアニメの再生確認をしたいときは、フィルタ → アニメーション → 再生。

動画再生ウインドウが開く。 再生ボタンを押せば、どんなGIFアニメになりそうか確認できる。

_OpenToonz

Windows/Mac対応。ラスター/ベクター形式。タイムシートの概念有り。

スタジオジブリで使われていたアニメ制作ソフトを、ドワンゴが買い取ってオープンソース化。

元々がプロ用、かつ、海外ソフトなせいか、パッと見は難解だけど…。ジブリが使ってたという点で実績は折り紙付き、なのかもしれない。たぶん。

_Krita 3.0：最初のアルファ版リリース！ | Krita
_2016-04-10 - Kritaでぐるぐるお絵かきブログ
_Krita Desktop | Krita

Windows/Mac/Linux対応。ラスター形式。タイミング調整できるけど、タイムシートの概念は無し。

現行の2.9版にアニメ制作機能はないけれど、3.0開発版にはアニメ制作機能が追加されている。細かい調整ができるオニオンスキン機能有り。

ブラシ機能が超強力。手描き感・アナログ感を強調した絵を、あくまでフリーソフトを使って描きたいなら、これが一番適してるのではないか…と思います。

_FireAlpaca - 窓の杜ライブラリ

Windows/Mac対応。ラスター形式。ベタ打ち前提。

レイヤーを1フレームとして扱うアニメ制作機能付き。オニオンスキン機能有り。ただ、あくまでGIFアニメ作成を念頭に置いたアニメ制作機能なので…。

比較的、動作が軽快。

_AzDrawing2

Windows対応。ラスター形式。ベタ打ち前提。

線画のみを描くことに特化したソフト。レイヤーを1フレームとして扱うアニメ制作機能付き。ちなみに開発は終了している。

最終フレームの次に、最初のフレームがあるものとしてオニオンスキン表示する機能があるので、ループアニメを描く時には便利。この機能、他のソフトもあればいいのに…。また、特定のレイヤーを背景レイヤーとして指定する機能もある。

_GIMP2.8のダウンロード
_GAP-2.6 for Gimp 2.6-Windows by photocomix-resources on DeviantArt
_Andrew Bonnington's blog: Installing GAP for Gimp 2.8 on Windows

Windows/Mac/Linux対応。ラスター形式。

GIMP単体でも、レイヤーを1フレームとして扱うアニメ制作機能(GIFアニメ作成機能)を持っているけど。GAP(Gimp Animation Package) を追加すれば、1ファイル(.xcf)を1フレームとして扱えるようになる。等速運動する単純なカメラワーク(移動や拡大縮小)ぐらいなら、GAP の Move Path でつけることもできる。

もっとも、本当に単純な動きしかつけられない上に、操作が面倒なので、カメラワークは別のソフトでやったほうが…。

GIMP 2.8 Windows用のGAPは公開されてないけれど、GIMP 2.6 Windows用のGAPを流用可能。

レイヤーを1フレームとして扱う状態なら、レイヤー名にディレイ値を書くことでベタ打ち以外もできますが、GAPを使うとベタ打ちしかできないような…。たぶん。

_Pencil2D - opensource animation software
_Topic: Pencil2D Nightly builds 2016 | Pencil2D - opensource animation software

Windows/Mac/Linux対応。ラスター形式。タイミング調整はできるけど、タイムシートの概念は無し。

サクサク描ける印象はあるのだけど…。2015/11頃に、0.5.4 beta版や Nightly build 2014版を試用した時は、あまりに不安定で閉口した記憶あり。

ただ、今現在は2016/03/09版が入手できるようなので、後で試用してみるつもり。

_About Tupi | Tupi
_Tupi: Open 2D Magic - Browse /Windows at SourceForge.net

Windows/Mac/Linux対応。ラスター/ベクター形式。ベタ打ち前提。

昔からあったソフトだけど…。Windows版をインストールすると、システムドライブ内や環境変数を汚しまくった記憶が…。

ただ、2016/03頃に Portable版が出ていたらしい。後で試用してみるつもり。Portable版なら、USBメモリ等に入れて使える版のはずなので、環境変数を汚したりしないのではないかと。

_SOFTだ！SOFTなのか？
_EasyToon（イージートゥーン）動画講座

Windows対応。ラスター形式。白黒のみ。タイミング調整はできるけど、タイムシートの概念無し。

白黒のみに対応したパラパラ漫画・GIFアニメ作成ソフト。

昔からあるソフトなので、とにかく動作が軽快。ちょっとパラパラ漫画を描いて遊んでみたい場合にはオススメ。

_NekoDouga

Windows対応。ラスター形式。

2014年頃から開発停止状態。

_Synfig Studio :: Home

Windows/Mac/Linux対応。ラスター/ベクター形式。

昔からあったソフトだけど…。1.0.2 Windows版は、ブラシツールがまともに動作しないのでガシガシ描くのは無理。素材を別ソフトで制作して読み込んで動きをつける、といった用途なら使えなくもないけれど。UI/操作方法が独特で何が何だか…。更に、ほとんど開発停止状態で。

有償ソフト・商用ソフトに関しては、Wikipediaに結構まとまってるので、そっちを眺めたほうがいいんじゃないかと思います。特に、英語版Wikipediaのページには、知らないソフトがいっぱい載ってるようで。

_List of 2D animation software - Wikipedia, the free encyclopedia
_2Dアニメーション制作ソフト一覧 - Wikipedia

線画だけなら、 _CLIP STUDIO PAINT がヨサゲな印象。ただ、PRO版は24コマしか描けない。値段の高いEX版なら制限無し。

撮影ソフトというか、映像制作ソフトだけど。セル画像と背景画像を組み合わせて、カメラワークをつけて映像にしていくソフトも、一応名前だけ列挙。

_NiVE(NicoVisualEffects)
_Javie
_AviUtl + 拡張編集Plugin

「AviUtlって、単なる動画編集ソフトじゃなかったっけ？」と言われそうだけど。拡張編集Pluginが、NiVE や Javie 並みに色々な動きをつけられる機能を提供してますので。

ただ、どれも、2値化した線にスムージングをかけてくれる機能は無いので…。

ちなみに、2値化した線のスムージングに関しては、 _「アンチジャギツール」を羅列してみる + が大変参考になります。

そういえば、OpenToonz ってアンチジャギ/スムージング関係はどうなってるんだろう？

パーツ分けして動きを補間で作っていくソフトも、一応メモしておこうかなと…。どれも基本は有償ソフトですが、制限付きの無料版があったりするので…。

_E-mote Free Movie Maker「えもふり」
_Live2D (無料で使える版有)
_Spriter (無料で使える版有)
_OPTPiX SpriteStudio (無料で使える版有)
_Spine (有償ソフト)

Live2D にしろ、Spine にしろ、ポリゴン分割して各頂点を任意に移動して動かせるソフトは、パーツ分けで動かしてるソレとは到底思えぬ動きをしますな…。まあ、考えてみたら、3DCGアニメスタジオが3DCGを手描きアニメに近づけるためにモデルをチクチクと手作業で変形させてたりするけれど、アレを2Dでやってるようなもんだし…。

せっかくだから、各ソフトのスクリーンショットも一部追加。

動画を描く時に楽になるように、「next keyframe」「previous keyframe」にショートカットキーを割り当てたかったのだけど、これがどうも上手く行かない。OKを押しても反映されなかったりするし、画像を開いてない時と、画像を開いた時で、割り当てられるショートカットキーのセットが異なってしまうような…？ 気のせいかもしれないけど。

面倒臭くなってきたので、krita_default.shortcuts ファイルを直接エディタで開いて修正。保存場所は以下。

krita-2.99.89インストールフォルダ\share\krita\shortcuts\krita_default.shortcuts

以下の項目を検索して、キーを割り当て。要するに、WASDキーを使ってフレーム変更したいわけですよ。

deselect=Ctrl+D
next_frame=D
next_keyframe=Shift+D
previous_frame=A
previous_keyframe=Shift+A
reset_fg_bg=Ctrl+Alt+D

reset_fg_bg だけは、最後に追加する形になるかもしれない。自分の手元のファイルでは項目が無かった。ちなみに、reset_fg_bg がDキーを取っちゃってるので変更しておかないといけないわけですが。

一応、どこに何を割り当てたか、スクリーンショットも貼っておきます。





このあたり、元々どういう操作/仕様なのか、そこからして分からないので、仕様なのかバグなのか、判断が付かないという…。

ショートカットキー設定時に、必ず不正終了するバグも見つけた。Settings → Configure Krita → Keyboard Shortcuts → Save/Load → Save custom shortcuts → 保存ダイアログが開くので「キャンセル」すると、必ず不正終了する。

ウチの環境だけなのかな…。どうなんだろ。

Portable版を実行すると、OSのテンポラリフォルダに解凍した後、そのままファイル群がほったらかしになるのが気になったので、試しにインストーラ版もインストール。

予想通り、インストーラ版は環境変数を汚しまくる…。システム側のPATHに、3つのフォルダを、システム側の環境変数に3つの変数を追加されてしまう。

環境変数にやたらと追加されるのが気に入らないので、インストーラ版はアンインストールして、Portable版を使うことにした。

Portable版がOSのテンポラリフォルダに解凍したファイル群を別の場所にコピーして、その中の tupi.vbs を実行すれば起動するはず。tupi.vbs から呼ばれるtupi.batの中で、動作に必要な環境変数を追加しているらしい。

tupi.vbs の内容は以下。

Set WshShell = WScript.CreateObject("WScript.Shell")
WshShell.run "tupi.bat", False

tupi.bat の内容は以下。

@echo OFF
set TUPI_HOME=.
set PATH=lib;lib\qt5;lib\libav
set TUPI_SHARE=data
set TUPI_PLUGIN=plugins
REM :\devel\Qt\Tools\mingw492_32\bin\gdb.exe tupi.exe
tupi.exe

しばらく使っているとオブジェクトがどんどん画面に表示されなくなっていく。ファイルオープンダイアログ等も、フォルダリストが出てこなくなったり、アイコンが出てこなくなったり。Tupiを再起動すると直るけど…。どうも動作が不安定な模様。

_OpenToonzインストラクション8 セルの自動中割 - YouTube という動画を目にして、OpenToonzに自動中割機能がついてることを知ったわけで。

試してみたところ、たしかに中割してくれた。おお…。スゲー。と言ってもFLASHについてるソレと似たような感じの処理ですねコレ。

この手の処理は、自分が高校時代に購入した本にも、FM-7/8用 = 8bitPC用のプログラムソースが載ってたぐらいに、とっくの昔に実現できている処理で。問題は、シンプルな線ならともかく複雑な形になると破綻するとか、思ったような制御ができないとか、奥行きを伴う動きを中割させるのは難しいとか、色々あるのだけど。なもんで、24コマ/秒で3コマ撮りの手描きアニメでは「使えねえ」「手で描いたほうが早い」と言われちゃうわけですが。

とは言え、これがもし、秒間60コマの2Dアニメを作れとか言われた日にはもはや手で描いてられないはずで、そういう場面ではひょっとすると使えるかもしれない、などと思ったりもするのですけど。しかし今時は、セルシェーディングの3DCGで動かすという選択肢もあるだろうし、ビットマップ画像をポリゴン分割して動かす方法もあるだろうしで、やっぱり使い道が…。ベクター線だから拡大縮小しても線が荒れないというメリットはあるんだけど。まあ、難しいですね。使いどころが。

_OpenToonz tutorial: make a simple animation with the plastic tool (bones) - YouTube や、 _OpenToonz - Plastic Tool! (#7) - YouTube を目にして、Plastic Tool なる機能を使うと _Photoshop のパペットワープ みたいなことができると知り、せっかくだから少し試していたり。たしかにふにゃふにゃと動かせる。面白い。

ちなみに、静止画でいいなら、 _Kritaのケージ変形 でも似たようなことができるけど。アニメにするとなると、Krita のケージ変形では厳しいわけで。なので、OpenToonz のソレはありがたいなと。

もっとも、コレも2D的な動きしかつけられないので、ちょっと使い道が…。制御も難しいし…。

ただ、自動中割にしろ、この機能にしろ、何かコロンブスの卵のような使い道がありそうな予感も。と言っても自分の固い頭ではちょっと思いつかないけど。

今時のアニメ絵は二段影・三段影がフツーらしいので、OpenToonz のベクター線描画機能で何かしらを描く時にも当然影色で塗ることがあるだろうと思うのだけど。しかしその場合、色の塗り分け線をどう扱ったらいいのか、そのあたりで悩み始めてしまったり。

このあたり、後でまた書きます。

ちなみにFLASHの場合、塗り分けした後で、塗り分け線をダブルクリックすれば、同じ属性、かつ、繋がってる線が全て選択されるし、しかも、その線を削除しても塗り分け部分は残ってくれるので、こういう問題は起きないのですけれど。

その代り、塗り分け部分の境界の形状を変更すると、隣の塗り分け部分が追随してくれなくて隙間ができちゃう。つまりは後から形を修正することが難しいわけですが。

とある漫画家さんの恋愛実録漫画、なのだろうか。そういう分類でいいのか悩んでしまうけど。

大変面白い漫画なのだけど、色々と、酷い…。いやはや、世の中にはこんな事例もあるのだなあ…。一部の人にとっては、読んでいて希望が湧いてくる漫画。だと思います。たぶん。

本に絡む様々な職場・場所を紹介していく内容。本の装丁、国会図書館、辞書を作る現場、校正さん等、とにかく勉強になる内容で。

個人的には、写植の機械を紹介する回がとても興味深かった。写植って光学処理で作ってたのか…。たしかに、大きさやフォント種類がバラバラだもんな…。カメラで撮影していけば、そのあたり調整できるもんな…。上手いこと考えたものだなあ…。よくぞ取材してくれたものだなあ、と。

さすが、おかざき真理作品、なのだろうか。キツイ内容。日本社会の現状を考えさせられる…。

営業畑に転職した主人公が、実は…、という内容。

主人公が感動する場面の描写が、なんというか…。シュールとでもいうか…。作画が上手いことで成立する笑い、なのかなコレ…。とにかく独特としか言いようがなく。漫画って、幅広いなあ…。

人体内部のアレコレを擬人化してバトルしていく漫画。以前に1巻は読んだ記憶があるような。

この漫画は、「もやしもん」と合わせて、小中学校の図書館に絶対に置いておくべき、と思います。こういう漫画の存在は大事。漫画には、こういう強みがある、と思えるわけで。

_落窪物語 を少女漫画化した作品。

あの時代をライトな形で描いていくことに関しては、おそらく第一人者であろう山内直美先生の作品なので、なんだか安心して読めた。こういった作品を入り口にして、その手のアレコレに興味を持ってくれる人が出てくればいいな、と。

ひとまず、Processingでやれるのはこのへんまでかな、このソースを弄るのはここで終了かな、という気がしていたり。

本当は、ライトで照らしたり、フォグをかけたりしたいけど、Processing.js を使う限り、テクスチャを貼ったポリゴンの色を変更することができないのでちょっと難しいなと。いや、機能としてはあるのだけど、色を変えた後のテクスチャを再生成して描画するらしいので、処理が重くなるらしくて。

まあ、それは Processing.js の制限なので、Processing.js を使うことは考えずに、Processing だけでやることにすれば、もうちょっと色々できるかもしれんけど…。

もし、見た目についてもう少し何かしらを試したいなら、WebGL を Three.js だの Away3D TypeScript 経由で使う形で書き直す、みたいなことになるんじゃないかと予想していたり。そういう形なら、ブラウザ内の全画面表示もできて、少しは迫力も増すのかも。

_three.js wiki - トップページ
_THREE.js で WebGL | ヨモツネット
_Webグラフィックをハックする（5）：多彩な表現力のWebGLを扱いやすくする「Three.js」 (1/5) - ＠IT
_three.jsで3Dを作りたい！ - Qiita
_JavaScript 3DレンダリングエンジンのThree.jsを試す | KRAY Inc
_requestAnimationFrame でフレームと再描画更新を制御する
_Timer APIs(Date.getTime, Date.now, performance.now, setTimeout, setInterval, requestAnimationFrame, setImmediate) with Canvas Animation - Qiita
_Three.js リサイズ - Three.jsを使って、作ってみた
_Three.jsで物体に光を当てる | mwSoft
_よく利用するThree.js旧バージョンからのコード書き換え(メモ) | cityJumperWEB.com
_Three.jsでポリゴンを描画するには - non vorrei lavorare
_うだる - ずっと君のターン

昔は THREE.ImageUtils.loadTexture() でテクスチャを読み込んでいたらしいけど。今は THREE.TextureLoader() を使って読み込むようになったらしい。

_よく利用するThree.js旧バージョンからのコード書き換え(メモ) | cityJumperWEB.com で解説されてた。

テクスチャのUV座標を指定する際、昔は new THREE.UV(u, v) で指定してたけど、new THREE.Vector2(u, v) で指定するようになったっぽい。

昔は四角形ポリゴンを Face4 で作れたらしいけど、今現在の版では無くなったらしい。三角形ポリゴン(Face3)を2つ作ってどうにかせい、ということになってるっぽい。

three.js を使って、四角形ポリゴン(= 三角形ポリゴン x 2)を、1枚だけ描画する JavaScript はこんな感じに。

_polygon_test.html (DEMO)

中身はこんな感じ。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>three.js Polygon Test</title>

  <!-- three.js を読み込む -->
  <script src="three.min.js"></script>
  <script src="OrbitControls.js"></script>

  <script>

    ここにJavaScriptを書く

  </script>
</head>

<body>
<div id="canvas-wrapper"></div>
</body>
</html>  

    var renderer;
    var camera;
    var startTime;

    // 時間測定用メソッドを定義
    var now = window.performance && (
      performance.now ||
      performance.mozNow ||
      performance.msNow ||
      performance.oNow ||
      performance.webkitNow);

    var getTime = function () {
      return (now && now.call(performance)) || (new Date().getTime());
    }

    window.addEventListener("DOMContentLoaded", function () {

      // テクスチャ読み込み
      var loader = new THREE.TextureLoader();
      var texture = loader.load('images/lena.png');

      // カメラ生成
      var fov = 60;
      var aspect = window.innerWidth / window.innerHeight;
      var near = 1;
      var far = 1000;
      camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
      camera.up.x = 0;
      camera.up.y = 0;
      camera.up.z = 1;
      camera.position.set(0, 0, 500);
      var controls = new THREE.OrbitControls(camera);

      // シーン生成
      var scene = new THREE.Scene();

      // マテリアル作成
      var material = new THREE.MeshLambertMaterial({
        map: texture,
        color: 0xcccccc,
        side: THREE.DoubleSide, // 両面ポリゴンを指定
      });

      // メッシュ作成
      var geom = new THREE.Geometry();

      // メッシュに頂点群を登録
      geom.vertices.push(new THREE.Vector3(0, 0, 0));
      geom.vertices.push(new THREE.Vector3(250, 0, 0));
      geom.vertices.push(new THREE.Vector3(0, 250, 0));
      geom.vertices.push(new THREE.Vector3(250, 250, 0));

      // 三角形ポリゴンを2つ生成
      // 反時計回りで頂点を並べる
      var face0 = new THREE.Face3(0, 1, 2);
      var face1 = new THREE.Face3(1, 3, 2);

      // ポリゴンをメッシュに登録
      geom.faces.push(face0);
      geom.faces.push(face1);

      // テクスチャ座標設定
      geom.faceVertexUvs[0].push(
        [
        new THREE.Vector2(0.0, 0.0),
        new THREE.Vector2(1.0, 0.0),
        new THREE.Vector2(0.0, 1.0),
      ], [
        new THREE.Vector2(1.0, 0.0),
        new THREE.Vector2(1.0, 1.0),
        new THREE.Vector2(0.0, 1.0),
        ]
      );

      // メッシュをシーンに追加
      var mesh = new THREE.Mesh(geom, material);
      scene.add(mesh);

      // 法線ベクトル生成(自動計算)
      geom.computeFaceNormals();
      geom.computeVertexNormals();

      // 平行光源生成
      var light1 = new THREE.DirectionalLight(0xcccccc, 1.6);
      light1.position.set(100, 100, 100); // ライトの位置
      light1.lookAt(new THREE.Vector3(0, 0, 0)); // ライトの向き
      scene.add(light1);

      // 環境光源生成
      var light2 = new THREE.AmbientLight(0x333333);
      scene.add(light2);

      // レンダラーを用意
      renderer = new THREE.WebGLRenderer({
        antialias: true
      });
      renderer.setSize(window.innerWidth, window.innerHeight);
      var container = document.getElementById('canvas-wrapper');
      container.appendChild(renderer.domElement);

      // アニメさせる
      startTime = getTime();

      function rendering() {
        requestAnimationFrame(rendering);
        
        // 前フレームからの経過時間を取得
        var lastTime = getTime();
        var dt = (lastTime - startTime) / 1000.0;
        
        controls.update();
        mesh.rotation.y += 2.5 * dt;
        renderer.clear();
        renderer.render(scene, camera);
        startTime = lastTime;
      }
      rendering();
    });

    // ウインドウリサイズ時の処理
    window.addEventListener('resize', function () {
      var w = window.innerWidth;
      var h = window.innerHeight;
      renderer.setSize(w, h);
      camera.aspect = w / h;
      camera.updateProjectionMatrix();
    }, false);

最初、カメラの動かし方が分からなかったけど。あちこちの解説ページを見ながらコピペして試していたら、以下のような記述で動いてくれた。

    camera.lookAt({ x: tgtx, y: tgty, z: tgtz });
    camera.position.set(camposx, camposy, camposz);
    camera.up.set(0, 1, 0);

lookAt() で注視点を、position.set() で位置を、up.set() で向き？ 天井がどちらにあるか？ を指定してるらしい。

例えば、var geom = new THREE.Geometry(); でジオメトリを作って、そこに頂点や面を自分で追加して。そのジオメトリ内の頂点座標が後で変化する場合、そのままではレンダラーに渡した時の座標値のままで変化しない・固定された状態になるらしい。

頂点座標その他が変化した時は、ジオメトリを更新しないといけないようで。関係ありそうなところだけ抜き出してみると…。

レンダリング前に、.dynamic = true; を1回設定してから…。

    // Mesh生成
    function initMesh(scene) {

      // メッシュ作成
      geom = new THREE.Geometry();
      road = new Road(geom);

      geom.mergeVertices();

      // 法線ベクトル生成(自動計算)
      geom.computeFaceNormals();
      geom.computeVertexNormals();
      geom.computeBoundingSphere();

      // メッシュをシーンに追加
      var mesh = new THREE.Mesh(geom, material);
      scene.add(mesh);

      // 頂点座標が一部変化するのでGeometryを更新可能にしておく
      geom.dynamic = true;
    };

頂点座標が更新される度に、*NeedUpdate = true; を設定するようで。

      function rendering() {
        // 前フレームからの経過時間を取得
        var lastTime = getTime();
        var dt = (lastTime - startTime) / 1000.0;

        // 時間を進める
        gTime += dt * 6;
        if (gTime >= 1.0) {
          road.incIndex();
          gTime -= 1.0;

          // 頂点座標が一部変化するのでGeometryを更新
          geom.verticesNeedUpdate = true;
          geom.elementsNeedUpdate = true;
          geom.normalsNeedUpdate = true;
          geom.uvsNeedUpdate = true;

          // 法線ベクトル等を再計算
          geom.computeFaceNormals();
          geom.computeVertexNormals();
          geom.computeBoundingSphere();
        }

        renderer.clear();
        renderer.render(scene, camera);

        startTime = lastTime;
        requestAnimationFrame(rendering);
      }
      rendering();

テクスチャ読み込み後、minFilter や magFilter の種類を変更したらぼけなくなった。

    // テクスチャ読み込み
    function loadTexture() {
      var loader = new THREE.TextureLoader();
      texture = loader.load('images/tex2.png');
      texture.minFilter = THREE.LinearFilter;
      texture.magFilter = THREE.LinearFilter;
    };

THREE.PlaneGeometry(横幅, 縦幅, 横分割数, 縦分割数); を使うと、矩形ポリゴンを1枚作れる。(正確には、三角形ポリゴン2枚で矩形ポリゴンを1枚作ってる状態。) 生成時にサイズを指定することができるので、それぞれ違うサイズで生成できる。割り当てるマテリアルに応じて、光源やフォグを反映させることもできる。

そのままだとビルボードにならないけれど、カメラの位置・角度等を決定した後、レンダリング前にカメラの回転行列(?)を利用して、PlaneGeometry がカメラ側を向いているように回転させてやればビルボードっぽくなるのだとか。

    // ビルボード相当をカメラを向くように回転
    for (var i = 0; i < trees.length; i++) {
      // trees[i].quaternion.copy(camera.quaternion);
      trees[i].rotation.setFromRotationMatrix(camera.matrix);
    }

rotation.setFromRotationMatrix(camera.matrix) でカメラ側に向かせることができるけど、quaternion.copy(camera.quaternion) でも同じ効果が得られるらしい。

試してみたのが以下。ソースを見たいときは、htmlソースを表示のこと。

_billboard_test1.html (DEMO)
しかし、何故かテクスチャの透過部分・透明部分の見た目がおかしなことに…。カメラから遠くにある PlaneGeometry の透明部分が、背景色・フォグ色で塗り潰されてしまって、透けて見えるはずの地面テクスチャが見えなくなってる。元テクスチャの透明部分は黒なので、透明部分が無効になってるわけではないのだろうけど。

解決策をググってみたら、renderOrder とやらに0以外を指定しておくと良いという話が。

    var geom = new THREE.PlaneGeometry(w, w, 1, 1);
    var tree = new THREE.Mesh(geom, mat);

    // これを入れないと透過部分がおかしくなる
    tree.renderOrder = 1;

試してみたのが以下。

_billboard_test1_b.html (DEMO)
改善できたように見えるけど、それでもまだ問題が。どうも時々、あちこちの PlaneGeometry が、チラチラする…。

前後関係が変わってチラチラしてるのかと思ったけど、よく見てみると一瞬透明部分が背景色で置き換わってるようで。結局、この不具合に対する解決策は見つからなかった。

パーティクルを描画する時によく使われるらしい、THREE.Points() を使ってみた。2D的なポリゴンを描画してくれるので、カメラの回転行列を利用して云々はしなくていい。光源は反映されないが、フォグを反映させることはできる。

サイズはマテリアル側、THREE.PointsMaterial() の中で指定できる。

    var mat = new THREE.PointsMaterial({
      size: w * 2,
      map: texTrees[Math.floor(Math.random() * texTrees.length)],
      transparent: true,
      fog: true,
    });

複数のテクスチャ種類の使い分けは、Points を1つ作るたびに、対応する Geometry と PointsMaterial を毎回生成して割り当てて解決した。

試してみたのが以下。

_billboard_test2.html (DEMO)
透過部分・透明部分が、とんでもなくおかしな状態になってる…。また、位置(y座標)の指定も上手くいかない…。どんな座標値を指定すれば地面に設置してくれるのやら…。

通常、パーティクル表現等に THREE.Points() を使う場合は、加算合成などを指定して使うので、透明部分がおかしくなっても問題にならないのだろうけど。この手のビルボードとして使うとなると、なかなか難しいということだろうか…。

THREE.Sprite() を使うことでも、2D的なポリゴン描画ができるらしい。これも光源は反映されない。フォグは反映させることができる。

位置とサイズは、THREE.Sprite の position と scale を使って指定できる。

    var tree = new THREE.Sprite(mat);
    tree.position.set(x, y, z); // 位置指定
    tree.scale.set(w, w, 1); // サイズ(スケール)指定

複数のテクスチャ種類の使い分けは、Sprite を1つ作るたびに、対応する THREE.SpriteMaterial() を毎回生成して割り当てて解決した。

試してみたのが以下。

_billboard_test3.html (DEMO)
これなら大丈夫そう。光源が反映されない点がちょっと気になるけど。

_three.js webgl - particles - sprites
_three.js webgl - sprites
_javascript - Three.js - billboard effect, maintain orientation after camera pans - Stack Overflow
_Edit fiddle - JSFiddle
_optimization - three.js: how to control rendering order - Stack Overflow
_three.js - Transparent objects in Threejs - Stack Overflow
_transparency - Transparent textures behaviour in WebGL - Stack Overflow
_render - using renderOrder in three.js - Stack Overflow

同じ「セーラームーンR」の、アイキャッチの映像が気になった。画面5分割＋それぞれの背景が高速スクロール(←なんていうのコレ？)＋キャラがスクロールして入ってくる(←コレも呼び方が分からない)＋各ウインドウが変形して消滅、てな感じの映像で。…文章で書いてもどんな映像なのか想像できないだろうけど。

デジタル撮影が使える今ならマスク作って云々で作れそうだけど、フィルム撮影時代にコレをどうやって作ったのかなと。いや、フィルム時代もマスク作って撮影して多重露光して、とかやれば作れるだろうけど、5回も重ねたら画質荒れたり画面がブレたりしそうだし。実は全部作画でやってるのかな…。だけど作画だったらもっとブレそうだよな…。

なんだか、ファミコンの1枚しかないBG面を使って多重スクロールをやってます、みたいな何かを感じたり。昔のアニメは、こういうところが不自由というか、なんだか大変だなと。アイデアというか、頓智を要求されるというか…。もちろん、成功した時は嬉しいのだろうけど。

キャプチャしてアニメGIF画像にでもしてアップすれば一発でこういう映像と分かるんだろうけど。商業アニメをキャプチャしてネットにアップしたらそれだけで犯罪者扱いされるから文章で説明するしかないよなと…。そもそも、HDDレコーダに録画したソレをキャプチャする手段自体が、建前としては存在しないことになってるけれど。最初からアレを使ってソレしないと取り出せない…。

なんだか、電電公社が存在していた頃は電話回線使ってコンピュータを接続するだけで犯罪でした、てな話を思い出したり。日本の大学の教授さんが「この国では犯罪だけど、研究の為にはこうするしか…」と、アメリカからこっそり音響カプラを持ち込んで実験してたというエピソードがあったりしたわけで。

今現在、映像作品の各種技法について、blog等でキャプチャ画像を見せながら解説してる方々は、大体そんな感じの状況だよなと…。まあ、引用の条件を満たしてれば犯罪にはならないんだろうけど、不正利用かそうでないかの区別を誰がどこでつけるのか、等々の問題もあるし。何がクールジャパンだよ。プンスカ。「このカットの作画スゲーよな」みたいな会話は犯罪者になるか外国人にでもならないとできない、みたいなところがちょっとあるよなと思うわけで。

「3秒未満、かつ、音声無しのキャプチャならアップしてもOK」とか「解説blog等で使う場合は自動受付ページで申請すればOK」的なルールでもあればいいのだけど。もっとも、そういうルールを作ると、ソレを悪用して凄いことをしちゃう人が出てくるのだろうけど。

ELECOM WDC-433DU2HBK と交換する作業は、以下の手順で行った。

1. いきなり無線LAN子機をUSB端子に差したりはしない。まずはドライバをインストールする必要がある。
2. ELECOMのサイトから、WDC-433DU2HBK のドライバをダウンロード。
3. 今まで使っていた無線LAN子機のドライバ・ユーティリティをアンインストール。
4. OS再起動。
5. WDC-433DU2HBK のドライバをインストール。
6. OS再起動。
7. WDC-433DU2HBK のMACアドレスを無線LANルータに登録。(ウチはMACアドレスを登録して接続できる子機を制限してるので。)
8. ここでようやく、WDC-433DU2HBK をUSB端子に差す。ドライバが認識される。
9. OS再起動。
10. 無線LANルータと接続。リストアップされたSSIDを選んで、暗号キーを入力。

これで接続できた。

WDC-433DU2HBK のMACアドレスは、USB接続端子の金属部分に小さく印刷されていた。

_Q．【Wi-Fiアダプタ】無線（Wi-Fi）子機のMacアドレスが知りたい／Macアドレス確認方法