Edited at

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

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