three.jsで遊んでみる（40）

　前回、
レンダリング結果を画像としてダウンロードできる
（そして背景の透明化も可能な）
機能の追加をしたりしたわけですが、
ふと、また思いついてしまいました。

　半透明なシルエットとかにすれば、
サウンドノベル風な画像として使えるかも、と(^_^;)
以下のような感じに。

　ところで、
スーファミ版『かまいたちの夜』のとある画面を縦読みすると、
「ここで理せっとしろ」と読めて、
それをやらないと入れないシナリオがあったりするのは、
なんか凄いよね(^_^;)

　さて、
GIMPとかの画像処理ソフトとか使えば、
こちらにあるようにシルエット化するのは可能なようですが、
それなりに手間がかかりそうです。

　処理的には、
単一な色で塗りつぶせばよいので、
それほど手間はかからなそう。
ということで、やってみたらアッサリと出来ました(^_^;)

　色も指定できたりしたら良いかなと思い、
半透明化もできるようにアルファ値を設定可能な、
color picker なJSライブラリを探してみたら、
これが見つかりました。

　割と良さげに見えたので、
さっそく組み込んでみました。
がしかし、微妙に期待したような感じにならない。
普通に使うぶんには問題無さそうなのですが、
画面全体をcanvasで覆うような
「MMD Viewer 改」とは相性がいまいちっぽい。
ソースを改造したりもしてみたのですが、
どうも十分にはしっくりこない感じ。

　しかたないので別なのを探してみることに。
そしてこちらを発見。
themeとか指定できたり等、
カスタマイズできる項目が色々あって良さげな感じ。
とういうことで組み込んでみました。
改造すること無くライブラリをそのまま導入でうまく行きました。
少しCSSの調整が必要な程度でした。

　なお、
トップ画面の「Viewer背景の透明化」にチェックを入れた場合に限り、
シルエット色のアルファ値が設定可能になります。
また、輪郭線の色は強制的にシルエット色と成りますのでご注意ください。

　表示設定の「シルエット」にチェックを入れると以下のようになります。

　そして、
そのすぐ右にある色のついた四角い所をクリックすると、
以下のようなダイアログが出るので、
それを操作すると色を変更できます。

　ちなみに、
シルエットのアルファ値を有効にしても、
「床」との間で半透明な感じにはなりません。
単一な色で一様に塗るために、
blendingは無効にせざるを得ないためです。
有効にするとポリゴン間で半透明が重なって処理されてしまうのです。
ただアルファ値はちゃんと書き込むようになっているので、
canvasの背景色との間では半透明な感じになります。
いったん別なバッファに書き込んで、
後で合成すれば「床」との間での半透明をやれるかもなのですが、
ちょっとややこしいことになってしまいそうなので断念(^_^;)
何にしても期待したようなシルエット画像は得られるので問題なし。

　ということで、
機能を追加した「MMD Viewer 改」を試すにはこちらからどうぞ。
他の機能の説明とかも書いてあります。

　実際に半透明なシルエット画像を、
有名な浮世絵と合成してみた結果は以下の通りです(^_^;)