The avatar for @bumbeishvili
David B.
Data viz engineer | twitter.com/dbumbeishvili
Published
Webgl
Edited
Apr 27, 2020
Webgl
1. Webgl Fundamentals
2. Webgl Fundamentals - how it works
3. 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 Scale10. Webgl 2D MatricesThreeJS Journey - Shader Patterns - P1ThreeJS Journey - Shader Patterns - P2Book of Shaders - Examples p1ThreeJS Journey - Shader Patterns - P3ThreeJS Journey - Shader Patterns - P4
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
const canvas = this||html`<canvas width=${width} height=400></canvas>`;
yield canvas;
const gl = canvas.getContext('webgl');
const vertexShader = createShader(gl,gl.VERTEX_SHADER,vertexShaderRectCode.code);
const fragmentShader = createShader(gl,gl.FRAGMENT_SHADER,fragmentShaderRectCode.code);

// setup GLSL program
const program = createProgram(gl,vertexShader, fragmentShader);
// Create a buffer
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

// Set Geometry
setRectGeometry(gl);
// Create color buffer
var colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,colorBuffer);
// Set the colors
setColorsGrad(gl)
// Transforms
var translation = [r2.x, r2.y];
var angleInRadians = r2.angle;
var scale = [r2.scaleX, r2.scaleY];
drawSceneRectColor(gl, program,positionBuffer, translation, angleInRadians,scale, colorBuffer )

invalidation.then(d=>{
gl.deleteProgram(program);
gl.deleteShader(vertexShader);
gl.deleteShader(fragmentShader);
})

}
Insert cell
Insert cell
import {slider} from "@jashkenas/inputs"
Insert cell
import {inputsGroup} from "@bumbeishvili/utils"
Insert cell
import {requireScript} from "@bumbeishvili/fetcher"
Insert cell
webglUtils = requireScript('https://webglfundamentals.org/webgl/resources/webgl-utils.js')
Insert cell
m3 = requireScript('https://webglfundamentals.org/webgl/resources/m3.js')
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more