More than 1 year has passed since last update.

WebGLの基礎を動画で学ぶ

image

eggheadの動画講座では全10回・48分4秒でWebGLの基礎を学ぶことができます。早速やってみました。 :sunglasses: :sunny:
Create 3D Graphics in JavaScript Using WebGL - Course by @bit101 @eggheadio

オンライン実行環境

実行環境はJS Binというサービスを使います。
JS Bin - Collaborative JavaScript Debugging

1:Setting Up WebGL

Kobito.LWnyRT.png

概要

背景色を塗るだけ。

demo

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

Code

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

概要

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

demo

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

Code


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

Kobito.MPxAz9.png

概要

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

demo

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

4:WebGL Vertex Buffers

概要

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

demo

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

5:Drawing Arrays in WebGL

概要

  • 頂点配列を使って三角形やジグザクを描く

demo

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

6:Loading in WebGL Shaders

概要

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

getShader関数

WebGL コンテキストへの平面コンテンツの追加 - Web API インターフェイス | MDN

demo

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

7:Animating WebGL Vertices

概要

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

参考

demo

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

8:User Interaction in WebGL

Kobito.2ZWH6S.png

概要

  • mouseを動かしてインタラクション

demo

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

9:3D Transformation Matrices in WebGL

概要

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

demo

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

10:Using a Matrix Library for WebGL

Kobito.O56S2m.png

movie

Using a Matrix Library for WebGL - js Video Tutorial #free @eggheadio

概要

demo

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

発展

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

GLSLをもっと書きやすくしたい


glslifyやAtomのプラグインであるlanguage-glsl,autocomplete-glslあたりを調べてみよう。

ES6で書きたい

ES6,livereloadでとりあえず四角だけを書くリポジトリ作りました。
naoyashiga/gl-draw-rectangle: Draw a rectangle by WebGL

便利なパッケージ

パッケージがたくさんあるので、興味のある方は見ると良いかもしれません。
stackgl/packages