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 translation9. Webgl 2D Scale10. Webgl 2D MatricesThreeJS Journey - Shader Patterns - P1ThreeJS Journey - Shader Patterns - P2Book of Shaders - Examples p1ThreeJS Journey - Shader Patterns - P3ThreeJS Journey - Shader Patterns - P4
8. Webgl 2D Rotation
{
const canvas = this||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 positionLoc = gl.getAttribLocation(program,'a_position');
const resolutionLoc = gl.getUniformLocation(program,'u_resolution');
const translationLoc = gl.getUniformLocation(program,'u_translation');
const rotationLoc = gl.getUniformLocation(program,'u_rotation');
const colorLoc = gl.getUniformLocation(program,'u_color');
// Create buffer for positions
const posBuffer = gl.createBuffer();
const vao = gl.createVertexArray();
gl.bindVertexArray(vao);
gl.enableVertexAttribArray(positionLoc);
gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
setGeometry(gl)
gl.vertexAttribPointer(positionLoc,2,gl.FLOAT,false,0,0);
drawScene(gl,program,vao,resolutionLoc,colorLoc,translationLoc,rotationLoc);
}
function drawScene(gl,program,vao,resolutionLoc,colorLoc,translationLoc,rotationLoc){
const translation = [150,100];
const rotation = [angleX,angleY];
const color = [Math.random(),Math.random(),Math.random(),1];
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.uniform2f(resolutionLoc,gl.canvas.width,gl.canvas.height);
gl.uniform4fv(colorLoc,color);
gl.uniform2fv(translationLoc,translation);
gl.uniform2fv(rotationLoc,rotation);
gl.drawArrays(gl.TRIANGLES,0,18)
}
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 {createProgram,createShader,glsl,webglUtils} from "@bumbeishvili/webgl-fundamental-utils"
import {slider} from "@jashkenas/inputs";
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.
