対決!WEBGL!(THREE編)
Effekseer を活用したくてWEBGLを今月調べていました
しかし、WEBGL苦手だなあ・・・。
CANVAS2Dめちゃくちゃ楽だったので・・。
THREEでまずは静止画を出す
こちらが良いです。すぐ動きました。
画面いっぱいに出すのが難しかった。
camera.position.set(0, 0, 10); と plane.scale.set(w, h, 1); あたりが、
調整パラメータっぽい。とりあえず、
camera.position.set(0, 0, 50); と plane.scale.set(50, 50, 1);
くらいに設定したらうまくいった気がする。勉強が必要。。。
THREEでEffekseer をつかってみる
ここまでならいけるっすよ。
以下のファイルだけ何とか調達ください。(Effekseer公式とMZ素材)
effects["Laser02"] = xxx.loadEffect("Resource_/Laser01.efk");
effects["Watter02"] = xxx.loadEffect("effects/WaterAll2.efkefc");
このあと、
CANVASの上にこのWEBGLを重ねよう。
よし、WEBGLの背景を透過にしよう!!
としたら黒くなった。
(これが仕様っぽいと気が付くのに2週間弱かかる・・)
なんとなく、オブジェクトは加算。
全く描画しないところは0で透過維持で良いけど、
1でも差分画素があれば、背景に足すっぽい。
なので、透過属性が消えて黒くなる。と理解した。
そういうドキュメントがあるわけではないので、体験談として。
これはWEBGLのCANVAS内で閉じるので、
2DのCANVASと重ねても、黒になってから。
背景変えていろいろ試した結果
renderer.setClearColor(0x0000FF, 1); まあ水に見える
renderer.setClearColor(0xCCCCFF, 1); ほぼ白
renderer.setClearColor(0xF8F8F8, 1); ギリギリ見える???
背景をちゃんとすれば、まあエフェクト見えるかーと思った。
黒になる事件を受けて、
ツクールはちゃんとできているんだからPIXIの方がいいのかな
ということで、PIXI編も行ってみます。
(オチを先に。PIXIでも同じ結果でした・・・。)