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 Rotation10. Webgl 2D MatricesThreeJS Journey - Shader Patterns - P1ThreeJS Journey - Shader Patterns - P2Book of Shaders - Examples p1ThreeJS Journey - Shader Patterns - P3ThreeJS Journey - Shader Patterns - P4
9. Webgl 2D Scale
{
const canvas = html`<canvas width=${width} height=400 ></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);
// Lookup for shader variables
const positLoc = gl.getAttribLocation(program,"a_position");
// Work on positions
const posBuffer = gl.createBuffer();
const vao = gl.createVertexArray();
gl.bindVertexArray(vao);
gl.enableVertexAttribArray(positLoc);
gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
setGeometry(gl);
gl.vertexAttribPointer(positLoc, 2, gl.FLOAT, false,0,0);
drawScene(gl, program, vao);
}
function drawScene(gl,program,vao){
var translation = [150, 100];
var rotation = [0, 1];
var scale = [scaleValue,scaleValue];
var color = [0.5,0.5,0.5, 1];
const transLoc = gl.getUniformLocation(program,"u_translation");
const scaleLoc = gl.getUniformLocation(program,"u_scale");
const rotatLoc = gl.getUniformLocation(program,"u_rotation");
const resolLoc = gl.getUniformLocation(program,"u_resolution");
const colorLoc = gl.getUniformLocation(program,"u_color");
webglUtils.resizeCanvasToDisplaySize(gl.canvas);
// Viewport and clear
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);
// Bind variables
gl.uniform4fv(colorLoc,color);
gl.uniform2fv(rotatLoc, rotation);
gl.uniform2fv(scaleLoc, scale);
gl.uniform2fv(transLoc, translation);
gl.uniform2f (resolLoc, gl.canvas.width, gl.canvas.height);
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 {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.
