拙作の「MMD Viewer 改」では、
WindowsのChromeで動作確認できたら、
基本的にOKとしてしまっています。
なので、
他のブラウザでの挙動とか基本的に考慮してなかったりするのですが、
気になったことがあったので書いてみます。
WebGLのレンダリングはcanvasなDOMエレメントに対して行われます。
そのcanvasの上で右クリックすると、
(再生停止中はShift＋右クリックで出るようにしてあります）
以下のようなコンテキストメニューが現れます。
そして、
「名前を付けて画像を保存」を選ぶと、
canvasにレンダリングされた結果をPNG形式で得ることが出来ます。
ふと、そういえば
他のブラウザのコンテキストメニューってどうなっているのだろうか、
と気になった次第です。
Firefoxでやってみると、以下のようになりました。
どうやらブラウザによって、メニュー項目が異なるようです。
同じでは無いんですね。知りませんでした(^_^;)
何にしても画像に保存できる項目はあるので、
Chromeの時と同様にやってみました。
が、なぜか結果は真っ黒な画像・・・。
ん～・・・なんでや。謎すぎる。
よく分からないけど、とりあえず保留。
次にEdgeでやってみると、以下のようになりました。
なんと！ 画像保存の項目がない！
canvasを右クリックで画像を保存できるのは
当然のように思っていたのですが、
ブラウザによっては、そうでは無かったようです・・・(^_^;)
ということで、
明示的に画像を保存できる機能を追加することにしました。
さらに背景を透明化できると良さげかなと思いついたので、
それもやれるようにすることにしました。
canvasの内容を画像化するには、
canvas.toDataURL()を使うのが簡便です。
ただ、画像データをBase64化したURLになるので、
画像サイズが大きい場合はやたらと長いURLになってしまう恐れがあります。
なので、canvas.toBlob()が使える場合はそっちを使うようにしました。
得られたBlobはURL.createObjectURL()すればURL化することが出来ます。
この場合のURLはそれほど長くはならないはずです。
さて、
これでバッチリうまく行くはずと、
やってみたのですが結果は真っ黒な画像・・・。
Chromeで動作させたのですが、Firefoxの時と同じような結果に・・・。
なんでや！ 謎！！
で、
色々調べてみた所、こちらを発見！
canvasからWebGLのコンテキストを得る際に、
preserveDrawingBufferなる属性をtrueにしないと行けないようです。
そういえば属性とか指定できたな。すっかり忘れてました(^_^;)
Chromeのコンテキストメニューからの画像保存では、
この属性が無効でもうまく行っていたことになるわけですが、
何故なのかは不明。なんかうまいこと考慮してくれてたのかも？
こちらによると、
他にも色々と属性があるようですね。
alphaなる属性をtrueにすると、
canvasのアルファチャンネルが有効になるようなので、
背景の透明化もやれそうですね。
そんなわけで、
属性を指定するようにしたら、
バッチリ期待したように画像を保存できるようになりました。
ただ、背景の透明化については、
もしかしたら多少のオーバーヘッドがあるかもしれないので、
on/off出来るようにしてみました。
WebGLのコンテキスト生成時にしか指定できないため、
トップ画面でのみ設定できるようになっています。
ご了承ください。
ということで、
機能を追加した「MMD Viewer 改」を試すにはこちらからどうぞ。
他の機能の説明とかも書いてあります。
実際に背景を透明化して、
有名な浮世絵と合成してみた結果は以下の通りです(^_^;)
