はじめに
こんにちは。ワロタロです。
去年の続きです（爆）ほんとに一つ前の投稿が去年…
去年は自作のベクターお絵描きツールで「途中で滑らかに太さの変わる曲線の描画」をやるために試しに作ってみたものを紹介しました。
その後、何も発信してませんがツールの開発は続けていて、そこそこ使えるようになってきています。自分しか使いませんが。
※現状、実装途中のため色々と挙動がおかしいです。
今年の成果報告
・パレット機能を実装
・簡易アニメーション機能を実装
・消しゴムツールを実装
・ora形式での保存を実装
・「下のレイヤーでマスク」ができるようになった
・WebGLによる線の描画を実装した（おととい）
WebGLだけでツールを作る必要はなかった
このツールを作っていて最近感じるのは、こういったツールを作るにはHTMLやCSSは非常に便利だということです。UIを作るのが本当にラクです。
WebGLでゲームを作っていたときは、ボタン類は全てWebGLで描画したり、当たり判定を取ったり、マウスオーバーでふわっと色を変えるのも全部コーディングしました。今思うとあれはすごい苦行でした。
CSSならマウスオーバーなんぞは２、３行でできてしまいますぜ。
そして、WebGLなら3D描画した結果を画像データとして簡単に再利用できます。また、HTLM要素として画面に組み込むことができます。
今作っているお絵描きツールでは、次のような要素で画面を構成しています。
この話の流れからいうとUIがもっとHTML要素を駆使して実現されてると良かったんですが、かなりCanavsで描画してますね…
言い訳すると、今年に入ってから仕事でAngularを使い始めて、UIはHTMLで作ればもっと楽できたなぁと気づいたんです。最初作った時はそういう発想が無かったんですね。
今ならボタン類はHTML要素にしてSVGアイコンにします。しようかな！時間あれば！
線のWebGL描画とcanvasによる合成
去年のアドベントカレンダーのネタだった線の太さの変わる線の描画をツール内で実装するとともに、バッファリングを実装したりもしました。
左がcanvasで2D描画したもので、右がWebGLで描画したうえ下のレイヤーの描画結果バッファでマスクしたものです。バッファもcanvasです。
WebGLで描画した結果はそのまま画像としてcanvasの2D描画で利用できるので、CanvasContext2DのglobalCompositeOperationに'source-atop'を設定してからdrawImageの第一引数にWebGLのcanvasを渡して描画すれば簡単にマスク処理ができます。
「おお、これはWebGLならではだなぁ～。OpenGLだけでもcanvasだけでもこれは簡単にはちょっとできないよニヤリ」
と思いました。とにかく今回はこれが言いたかった。
ちなみに線のWebGL描画は遅延描画の形を取っています。ユーザが操作していないときバックグラウンドで少しずつ描画して、完成したら画面に表示する仕組みです。利点は、いくら時間がかかってもいいのでWebGLバッファの再構築などを効率的にできるように作らなくても許される（かもしれない）ことです。
おわりに
WebGLを主眼においたサイトやツールでも、HTMLとCSSを使えばUI構築が非常に楽にできる場合があります。グラフィック系のアプリケーションなどで3D描画を使用するツールを作りたい場合にはWebGLとcanvasの組み合わせは非常に便利です。
WebGLはウェブ技術と組み合わせることで本領を発揮するというのが個人的な持論です。ウェブ技術はスマートフォンのアプリ開発でもどんどん利用が広がっていますし、端末のスペックも十分なものになってきています。将来的にはUIはHTMLで3DはWebGLなんていうゲームエンジンも出てくるかも？（もうあるかも）
自分はたとえばAngularのようなフレームワークを今作っているツールで使ってみようかな～などと思っているこの頃です。
うまくまとまらず申し訳ないですが、ともかく最後まで読んでいただいてありがとうございました。
皆さまよいお年を！