web初心者がWebGLを学んでみた件

おはこんばんにちわ、クソザコ開発者のなおぽんです。
最近Webと3Dが熱盛なので、その辺り組み合わせられるWebGLとWebComponentsについて学び始めました。
そもそもフロントの言語自体を業務では使ってこなかったので、そこも含めて学んだ事を自分なりの理解で記していきます。
間違ってたらコメントでマサカリくださると喜びます。

#そもそもWebGLってなんじゃらほい
まずwikiから引用
WebGL（ウェブジーエル）は、ウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様。非営利団体のKhronos Groupで管理されている。WebGL 1.0は、ブラウザ上で利用できるOpenGL ES 2.0の派生規格であるが、細部に違いがある[1]。WebGL 2.0は、ブラウザ上で利用できるOpenGL ES 3.0の派生規格であるが、細部に違いがある[2]。WebGLはHTML5のcanvas要素に描画する。
https://ja.wikipedia.org/wiki/WebGL

なんか難しい事書いてありますが、要は
ブラウザ上で３Dモデリングとか表示できるようになるよ！
な技術ですね。
大事なのはcanvas属性を使って書くというところです。

画面に表示させる事自体は例えばJPGとかPNGとかありますが
canvas属性を使用することによってプログラムを使って表示をさせることができます。
イメージ的にはブラウザの画面上にwidth属性とheight属性で指定した
canvas（正にキャンバス）を作り、そこにJavaScriptで絵を描く感じです。
（canvasについて詳しくは下記）
http://www.htmq.com/html5/canvas.shtml
svgでの描画にちょっと似てるかなーって思いました。

ちゃんと理解するとマイクラをwebで表示できたりするらしい！！
すごい！意味わかんない！！

WebGLにHello World

なにはともあれ、はろわーですね
webGLにこんにちわしましょう、挨拶大事。
ちょっと古い記事ですが今回はこの記事を参考に（というかそのまんま）やりました。
やりました、、、というかGitHubから落とすと動きます。そりゃそうだ
http://www.shibuya24.info/entry/2015/07/28/200310

ちなみに僕はクソザコ開発者なのでコードで覚えると秒速で忘れます。
なのでサンプルに書いてあるコメントの章ごとに日本語訳をしていきます、ちなみに中学の国語の成績は3です。
（この辺私の感覚なので意味わかんなかったら飛ばしてくだしあ）

今回のコードを日本語訳すると

###（準備編）Start 1.CanvasDOM取得 & WebGLコンテキストを取得とセットアップ

まずはブラウザという倉庫からcanvasという道具箱を取り出します。
次にcanvasからwebgl絵画用の道具を取り出します。
んでcanvasのサイズを決めます。

###頂点シェーダの描画・・・の前にシェーダって何？
用語わからんと途端に迷子になります、なおぽんです。
シェーダー、英語でいうとshader、unityとかでも使われる用語らしい。
色々調べたけど「へー感」が上がるだけで正直あんまり要領得ないと思ったらこのサイトがわかりやすかった、ありがたやありがたや。
http://www.shibuya24.info/entry/2016/06/04/234031
曰く「3Dオブジェクトをディスプレイに映し出すためのプログラム」とのこと。

頂点シェーダ (バーテックスシェーダとも言われる)
フラグメントシェーダ (ピクセルシェーダとも言われる)
頂点シェーダはその名も通り、3Dオブジェクトの頂点に関わる処理を行います。 フラグメントシェーダは、ディスプレイの1ピクセル毎に処理するシェーダです。
概念的には受け取った3Dオブジェクトの頂点データを頂点シェーダで座標変換などを行い、その結果をフラグメントシェーダに渡し、各ピクセルの色を決め、ディスプレイに映し出されます。

idで使ってるvsとかfsはバーテックスシェーダとフラグメントシェーダの略ですね。（ﾃﾃﾃﾃｯﾃｯﾃｰ）

###Start 2.頂点シェーダコンパイル、フラグメントシェーダコンパイル

####〜まずはhtml側の話ここから〜

html側でvsとついたスクリプトがありますね、これをscript.js側で取得します
このスクリプトはGLSL（OpenGL Shading Language）というらしいです。
C言語系の言語らしいです。
wikiは読んだけどよくわかりませんでした（）
でも下記で出てくるattributeは現在はinに代替されているらしいです。

attribute vec3 position

【attribute】
頂点ごとに異なるデータを受け取るための修飾子、他にuniformとか色々ある
【vec3】
（多分）3角のという型、他の型もGLSLのwikiに色々書いてある
【position】
変数名
※このサイトがわかりやすい
https://wgld.org/d/webgl/w008.html

をgl_Positionという「元から定義されている」頂点データを受け取る変数に渡してあげています。
ちなみにvec4の４番目の引数の数字を変えると３角形のサイズが変わります。
####〜html側の話ここまで〜

webgl絵画用の道具からVERTEX_SHADERシェーダーを作り出し、先ほどの頂点データを入れます。
そんでコンパイルします。ここまでで頂点シェーダの準備は完了です。

フラグメントシェーダも同様です。こっちはRGBで色の指定をしています。
vec3 (1.0)→vec3 (0.0)
にすると、三角形が黒くなります。
ここまでで、描画するための道具は出揃いました。

###Start 3.WebGLProgramの生成、シェーダのアタッチとリンク、有効化
作成した頂点シェーダー（座標）とフラグメントシェーダー（色）を組み合わせて
有効化します。
ある程度定型文なイメージかなと。

Start 4.三角ポリゴンの頂点バッファ生成

ここが実際の3角形を描画している部分です、bufferという空容器に3角形を作るための座標をセットします。
positionの値を変更すると3角形の形が変わります、自分の好きな形を作ってみましょう。

Start 5.背景描画

背景色を設定します。（Red、Green、Blue、透過度）。
この値を変更すると背景色をグレーから変更できます。

###Start 6.ビューポートの設定
表示領域を設定します。（x、y、w、h）
この値を変更すると3角形の表示される場所が移動します。

Start 7.頂点属性を有効化してデータを注入

これまで作成したデータを有効化します。

###Start 8.描画する
実際の描画をします。
gl.TRIANGLE_STRIP→gl.LINE_LOOPにすると
３角形が面から線になります。
他にもパラメータを変えることで描画方法を変えることができます。
http://d.hatena.ne.jp/nakamura001/20081231/1230719279

現在の理解はこんな感じです。
正直まだわからない部分もあります、なんでscriptタグでmainの関数を定義しなきゃいけないのかとか
これの発展系でどうやってポリゴン（3D）を表現していくのかとか

そのあたりはおいおい調べていきます。
こういったcoolなライブラリがあるみたいなので、使いこなせるように頑張ります！
https://github.com/emadurandal/GLBoost

次回はWebcomponents編です。