More than 5 years have passed since last update.

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

Last updated at 2016-08-28Posted at 2016-08-27

WebGLの基礎を動画で学ぶ

[]
(https://egghead.io/courses/create-3d-graphics-in-javascript-using-webgl)

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

オンライン実行環境

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

1:Setting Up WebGL

概要

背景色を塗るだけ。

demo

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

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);
}