1. Webgl Fundamentals2. Webgl Fundamentals - how it works3. Webgl Fundamentals - shaders and GLSL4. Webgl Fundamentals - Image processing5. Webgl Fundamentals - img processing continued6. Webgl Fundamentals - Using 2 or more textures7. Webgl 2D translation8. Webgl 2D Rotation9. Webgl 2D ScaleThreeJS Journey - Shader Patterns - P1ThreeJS Journey - Shader Patterns - P2Book of Shaders - Examples p1ThreeJS Journey - Shader Patterns - P3ThreeJS Journey - Shader Patterns - P4
10. Webgl 2D Matrices
{
const canvas = html`<canvas width=${width} height=300 ></canvas>`;
yield canvas;
const gl = canvas.getContext('webgl2');
const vertexShader = createShader(gl,gl.VERTEX_SHADER,vertexShaderCode);
const fragmentShader = createShader(gl,gl.FRAGMENT_SHADER,fragmentShaderCode);
const program = createProgram(gl,vertexShader,fragmentShader);
const posLoc = gl.getAttribLocation(program,'a_position');
const posBuffer = gl.createBuffer();
const vao = gl.createVertexArray();
gl.bindVertexArray(vao);
gl.enableVertexAttribArray(posLoc);
gl.bindBuffer(gl.ARRAY_BUFFER,posBuffer);
setGeometry(gl);
gl.vertexAttribPointer(posLoc,2,gl.FLOAT,false,0,0);
drawScene(gl,program,vao);
}
function drawScene(gl,program,vao){
const translation = [100,100];
const radianRotation = 0;
const scale = [1,1];
const color = [Math.random(), Math.random(), Math.random(),1]
const colorLoc = gl.getUniformLocation(program,'u_color');
const matrixLoc = gl.getUniformLocation(program,'u_matrix');
webglUtils.resizeCanvasToDisplaySize(gl.canvas);
gl.viewport(0,0, gl.canvas.width,gl.canvas.height);
gl.clearColor(0,0,0,0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.useProgram(program);
gl.bindVertexArray(vao);
gl.uniform4fv(colorLoc,color);
let matrix = m3.projection(gl.canvas.clientWidth,gl.canvas.clientHeight);
matrix = m3.translate(matrix, translation[0],translation[1]);
matrix = m3.rotate(matrix, radianRotation);
matrix = m3.scale(matrix, scale[0],scale[1])
gl.uniformMatrix3fv(matrixLoc, false, matrix);
gl.drawArrays(gl.TRIANGLES, 0, 18);
}
m3 = {
function projection(width, height) {
// Note: This matrix flips the Y axis so that 0 is at the top.
return [
2 / width, 0, 0,
0, -2 / height, 0,
-1, 1, 1,
];
}
function translation(tx, ty) {
return [
1, 0, 0,
0, 1, 0,
tx, ty, 1,
];
}
function rotation(angleInRadians) {
var c = Math.cos(angleInRadians);
var s = Math.sin(angleInRadians);
return [
c, -s, 0,
s, c, 0,
0, 0, 1,
];
}
function scaling(sx, sy) {
return [
sx, 0, 0,
0, sy, 0,
0, 0, 1,
];
}
function multiply(a, b) {
var a00 = a[0 * 3 + 0];
var a01 = a[0 * 3 + 1];
var a02 = a[0 * 3 + 2];
var a10 = a[1 * 3 + 0];
var a11 = a[1 * 3 + 1];
var a12 = a[1 * 3 + 2];
var a20 = a[2 * 3 + 0];
var a21 = a[2 * 3 + 1];
var a22 = a[2 * 3 + 2];
var b00 = b[0 * 3 + 0];
var b01 = b[0 * 3 + 1];
var b02 = b[0 * 3 + 2];
var b10 = b[1 * 3 + 0];
var b11 = b[1 * 3 + 1];
var b12 = b[1 * 3 + 2];
var b20 = b[2 * 3 + 0];
var b21 = b[2 * 3 + 1];
var b22 = b[2 * 3 + 2];
return [
b00 * a00 + b01 * a10 + b02 * a20,
b00 * a01 + b01 * a11 + b02 * a21,
b00 * a02 + b01 * a12 + b02 * a22,
b10 * a00 + b11 * a10 + b12 * a20,
b10 * a01 + b11 * a11 + b12 * a21,
b10 * a02 + b11 * a12 + b12 * a22,
b20 * a00 + b21 * a10 + b22 * a20,
b20 * a01 + b21 * a11 + b22 * a21,
b20 * a02 + b21 * a12 + b22 * a22,
];
}
function translate(m, tx, ty) {
return multiply(m, translation(tx, ty));
}
function rotate(m, angleInRadians) {
return multiply(m, rotation(angleInRadians));
}
function scale(m, sx, sy) {
return multiply(m, scaling(sx, sy));
}
return {
projection,
translation,
rotation,
scaling,
multiply,
translate,
rotate,
scale
}
}
function setGeometry(gl){
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array([
// left column
0, 0,
30, 0,
0, 150,
0, 150,
30, 0,
30, 150,
// top rung
30, 0,
100, 0,
30, 30,
30, 30,
100, 0,
100, 30,
// middle rung
30, 60,
67, 60,
30, 90,
30, 90,
67, 60,
67, 90,
]),
gl.STATIC_DRAW);
}
import {createShader, createProgram, glsl, webglUtils} from "@bumbeishvili/webgl-fundamental-utils"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
