Three.jsを使わずにWebGLの基礎を48分で学ぶ

#WebGLの基礎を動画で学ぶ
[![image](https://qiita-image-store.s3.amazonaws.com/0/26043/42a44eba-8ccb-6529-af2e-40e4787a7c7f.png)]
(https://egghead.io/courses/create-3d-graphics-in-javascript-using-webgl)

eggheadの動画講座では全10回・**48分4秒**でWebGLの基礎を学ぶことができます。早速やってみました。 :sunglasses: :sunny: 
[Create 3D Graphics in JavaScript Using WebGL - Course by @bit101 @eggheadio](https://egghead.io/courses/create-3d-graphics-in-javascript-using-webgl)

##オンライン実行環境
実行環境はJS Binというサービスを使います。
[JS Bin - Collaborative JavaScript Debugging](http://jsbin.com/?js,output)

#1:[Setting Up WebGL](https://egghead.io/lessons/javascript-setting-up-webgl)
![Kobito.LWnyRT.png](https://qiita-image-store.s3.amazonaws.com/0/26043/97135488-86f4-61b1-476a-b8b0ea40d292.png "Kobito.LWnyRT.png")

##概要
背景色を塗るだけ。

##demo
http://jsbin.com/lasucudazi/edit?js,output

##Code

```js
var gl;

initGL();

draw();

function initGL() {
  var canvas = document.getElementById("canvas");
  gl = canvas.getContext("webgl");
  
  gl.viewport(0, 0, canvas.width, canvas.height);
  
  gl.clearColor(1, 0, 0, 1);
}

function draw() {
  gl.clear(gl.COLOR_BUFFER_BIT);
}
```
#2:[Introduction to WebGL Shaders](https://egghead.io/lessons/javascript-introduction-to-webgl-shaders)

##概要
vertexShaderとfragmentShaderを使って黒い正方形を描画。

##demo
http://jsbin.com/vocuki/2/edit?js,output

##Code

```js

var gl,
    shaderProgram;

initGL();
createShaders();
draw();

function initGL() {
  var canvas = document.getElementById("canvas");
  gl = canvas.getContext("webgl");
  
  gl.viewport(0, 0, canvas.width, canvas.height);
  
  gl.clearColor(1, 1, 1, 1);
}

function createShaders() {
    var vs = "";
  vs += "void main(void) {";
  vs += " gl_Position = vec4(0, 0.0, 0.0, 1.0);";
  vs += " gl_PointSize = 100.0;"
  vs += "}";
  
  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, vs);
  gl.compileShader(vertexShader);
  
  var fs = "";
  fs += "void main(void) {";
  fs += " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);";
  fs += "}";
  
  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, fs);
  gl.compileShader(fragmentShader);
  
  shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);
  gl.linkProgram(shaderProgram);
  gl.useProgram(shaderProgram);
}

function draw() {
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.POINTS, 0, 1);
}
```

#3:[Passing Data to WebGL Shaders](https://egghead.io/lessons/javascript-passing-data-to-webgl-shaders)

![Kobito.MPxAz9.png](https://qiita-image-store.s3.amazonaws.com/0/26043/c6235749-b59d-d0c6-d781-480488464625.png "Kobito.MPxAz9.png")

##概要
- GLSLの変数をjsで定義する
	- glslfiyを使えばいらないと思ったw

##demo
http://jsbin.com/vocuki/3/edit?js,output

#4:[WebGL Vertex Buffers](https://egghead.io/lessons/javascript-webgl-vertex-buffers)

##概要
- 頂点を3つ使い三角形を描く
- bufferをbindして複数の頂点データをjsで渡す

##demo
http://jsbin.com/vocuki/4/edit?js,output

#5:[Drawing Arrays in WebGL](https://egghead.io/lessons/javascript-drawing-arrays-in-webgl)

##概要
- 頂点配列を使って三角形やジグザクを描く

##demo
http://jsbin.com/vocuki/5/edit?js,output

#6:[Loading in WebGL Shaders](https://egghead.io/lessons/javascript-loading-in-webgl-shaders)

##概要
- getShader関数を使い、GLSLをhtmlに書く
	- stringで書かなくて良いので少し楽

###getShader関数
[WebGL コンテキストへの平面コンテンツの追加 - Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context)

##demo
http://jsbin.com/vocuki/6/edit?html,js,output

#7:[Animating WebGL Vertices](https://egghead.io/lessons/javascript-animating-webgl-vertices)

##概要
- draw関数を繰り返してアニメーション
	- 5000個の点を動かす

###参考
- [バッファオブジェクト · sapphire-al2o3/webgl-reference-jp Wiki](https://github.com/sapphire-al2o3/webgl-reference-jp/wiki/%E3%83%90%E3%83%83%E3%83%95%E3%82%A1%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88)

##demo
http://jsbin.com/vocuki/7/edit?js,output

#8:[User Interaction in WebGL](https://egghead.io/lessons/javascript-user-interaction-in-webgl)
![Kobito.2ZWH6S.png](https://qiita-image-store.s3.amazonaws.com/0/26043/459b54cd-0469-e355-bb62-ad877f009cb6.png "Kobito.2ZWH6S.png")

##概要
- mouseを動かしてインタラクション

##demo
http://jsbin.com/vocuki/8/edit?html,js,output

#9:[3D Transformation Matrices in WebGL](https://egghead.io/lessons/javascript-3d-transformation-matrices-in-webgl)

##概要
- 回転行列を使って、点を回転させる
	- 動画では三角形を用いていていたが、5000個の点を回転させてみた

##demo
http://jsbin.com/vocuki/9/edit?html,js,output

#10:[Using a Matrix Library for WebGL](https://egghead.io/lessons/javascript-using-a-matrix-library-for-webgl)
![Kobito.O56S2m.png](https://qiita-image-store.s3.amazonaws.com/0/26043/0fc080a3-f8a7-4bc9-c620-5f5efca0cc62.png "Kobito.O56S2m.png")

##movie
[Using a Matrix Library for WebGL - js Video Tutorial #free @eggheadio](https://egghead.io/lessons/javascript-using-a-matrix-library-for-webgl)

##概要
- 行列ライブラリを使う
	- [glMatrix](http://glmatrix.net/)
	- [gl-matrix - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!](https://cdnjs.com/libraries/gl-matrix)
- 三角形を、XYZ軸それぞれを軸に回転させる

##demo
http://jsbin.com/vocuki/10/edit?html,js,output

#発展
モダンなフロントエンド環境を構築すれば、さらに簡単にWebGL、GLSLのコードが書けます。

##GLSLをもっと書きやすくしたい
![](https://pbs.twimg.com/media/Cqi07zWUMAAShoD.jpg)
glslifyやAtomのプラグインであるlanguage-glsl,autocomplete-glslあたりを調べてみよう。

- [stackgl/glslify: A node.js-style module system for GLSL!](https://github.com/stackgl/glslify)
- [language-glsl](https://atom.io/packages/language-glsl)
- [autocomplete-glsl](https://atom.io/packages/autocomplete-glsl)


##ES6で書きたい
ES6,livereloadでとりあえず四角だけを書くリポジトリ作りました。
[naoyashiga/gl-draw-rectangle: Draw a rectangle by WebGL](https://github.com/naoyashiga/gl-draw-rectangle)

##便利なパッケージ
パッケージがたくさんあるので、興味のある方は見ると良いかもしれません。
[stackgl/packages](http://stack.gl/packages/)