単色塗りつぶし

キャンバスを用意し、単色で塗りつぶす

　やってみよう、WebGL.
　まずは手始めに、キャンバスを用意し、単色で塗りつぶしてみます。色はtealです。このように、指定したキャンバスが単色で塗りつぶされます。2DのときはfillStyleで色を決めて、fillRectで指定した範囲を塗りつぶしたと思いますが、WebGLでも似たようなことをします。すなわち、クリアする色を決めて、その色でキャンバスを埋め尽くす命令をします。

コード全文

main.js index.html

　以下、解説をしていきます。

コンテキストの取得

　まず、コンテキストを取得します。取得に使うのはgetContextです。

const gl = cvs.getContext('webgl2');

　コンテキストはwebgl2を指定します。もう対応してないブラウザも無いと思うので...サイズもこっちで決めてしまいます。ほんとはpixel-device-widthなども考慮しないといけないんですが、今回は無視します。ほんとは必要です。

clearColor関数

　コンテキストが手に入ったら、さっそく使ってみましょう。clearColor関数を使います。

gl.clearColor(0, 0.5, 0.5, 1);

　これはclearでキャンバスの色を単色にする際の色を決めるもの、と思っておいて大丈夫です。4つ目は透明度ですがとりあえず1でいいと思います。これで次の命令を繰り出します。

gl.clear(gl.COLOR_BUFFER_BIT);

　するとキャンバスがさっき指定した色で塗りつぶされます。COLOR_BUFFER_BITというのがその命令になっています。キャンバスの色レイヤーを同じ色にする、というような意味合いでとらえておいてください。今回はこれで終わりです。お疲れ様でした。違う色で試してみるといいと思います。
　最後のgl.flush()はおまじないです。自分もよく理解してないんですが、一応付けておいた方がいいと思います。

参考になるサイト

　言わずと知れたwebGLのすごくためになるウェブサイトです。webGLを勉強するならこのサイトで勉強するのが良いと思います。自分はこんな丁寧に説明できないので。ただアトリビュートを正面から扱っていて、それを扱えない限り最初の描画にたどり着けないので若干ハードルは高めです（というかwebGL1の頃はそうだったので...）。加えてカメラも扱っていますし。大変だと思います。FIGHT!

　読んで字のごとく、webGLを基本から取り扱っています。基本的な仕組みについての非常に詳しい解説が載っています。webGLで引っかかったことがあれば、ここを見ればいいと思います。基本的過ぎてハードルが高いかもしれないですが...自分はテクスチャの説明が分かりやすかったので凄く参考になりました。

　習うより慣れろ、というか。まずは色々遊んでみることですね。自分がwebGLを始めたきっかけは双曲タイリングです。こういうのです。明らかに2Dではできないように感じたので、色々調べてたらp5のcreateShaderというのがあって遊び始めました。そんな感じで遊んで、色々調べて、気になったら調べて、ってやっていけば自然と興味が惹かれてくると思います。エンジョイしてください。

　今日はこんなところで。ではまた。

今回登場した関数