Wen

Goodboy Digital

( Pixi.js )

@yiwen_lin

Sketches

!Three.js

alfrid

JojoGL

MCGL

(PIXI.js ?!)

http://jojo.ninja/gl/curly/

night eye

WebGL

Vectors, Matrices, Quaternions, Linear Algebra ... Maths basically.

WebGL Fundamentals

Learning WebGL

Learn OpenGL

Shaders

GLSL

(OpenGL Shading language)

Vertex
Fragment

// Vertex Shader

precision highp float;
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;
attribute vec3 aNormal;

uniform mat4 uModelMatrix;
uniform mat4 uViewMatrix;
uniform mat4 uProjectionMatrix;

varying vec2 vTextureCoord;
varying vec3 vNormal;

void main(void) {
    gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4(aVertexPosition, 1.0);
    vTextureCoord = aTextureCoord;
    vNormal = aNormal;
}

Shaders - Vertex Shader

// Fragment Shader

precision highp float;

uniform sampler2D texture;

varying vec2 vTextureCoord;

void main(void) {
    gl_FragColor = texture2D(texture, vTextureCoord);
}

Shaders - Fragment Shader

const positions = [
	-1, -1, 0,        //    point 1
	 1, -1, 0,        //    point 2
	 0, 1, 0          //    point 3
];

Buffers

Attributes

const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, attrObj.dataArray, attrObj.drawType);

const attrPosition = getAttribLoc(gl, mShaderProgram, attrObj.name);
gl.enableVertexAttribArray(attrPosition); 
gl.vertexAttribPointer(attrPosition, attrObj.itemSize, gl.FLOAT, false, 0, 0);

Uniforms

Varying

WebGL 2