canvas = html`<canvas></canvas>`
gl = canvas.getContext('webgl2')
vertexShader2d = `#version 300 es
in vec2 a_position;
uniform vec2 u_resolution;
// all shaders have a main function
void main() {
// convert the position from pixels to 0.0 to 1.0
vec2 zeroToOne = a_position / u_resolution;
// convert from 0->1 to 0->2
vec2 zeroToTwo = zeroToOne * 2.0;
// convert from 0->2 to -1->+1 (clip space)
vec2 clipSpace = zeroToTwo - 1.0;
//gl_Position = vec4(clipSpace, 0, 1);
//Flip gl_position to make it more like traditional
gl_Position = vec4(clipSpace* vec2(1,-1),0,1);
}
`
function createShader(gl, type, source){
var shader = gl.createShader(type);
gl.shaderSource(shader,source);
gl.compileShader(shader);
var success = gl.getShaderParameter(shader,gl.COMPILE_STATUS);
if(success){
return shader;
}
console.log(gl.getShaderInfoLog(shader));
gl.deleteShader();
}
vertexShader = createShader(gl,gl.VERTEX_SHADER,vertexShader2d)
fragmentShader = createShader(gl,gl.FRAGMENT_SHADER,fragmentShader2d)
function createProgram(gl, vertexShader, fragmentShader){
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
var success = gl.getProgramParameter(program, gl.LINK_STATUS);
if(success){
return program;
}
console.log(gl.getProgramInfoLog(program));
gl.deleteProgram(program);
}
program = createProgram(gl, vertexShader, fragmentShader)
positionAttributeLocation = gl.getAttribLocation(program, "a_position");
colorUniformLocation = gl.getUniformLocation(program,'u_color')
positionBuffer = gl.createBuffer();
bufferBind = {
gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);
var positions = [
10, 20,
80, 20,
10, 30,
10, 32,
80, 20,
80, 30,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions),gl.STATIC_DRAW)
}
webglUtils = requireScript('https://webglfundamentals.org/webgl/resources/webgl-utils.js')
{
draw;
yield html`${canvas}`
}
draw = {
bufferBind;
// Resize canvas
webglUtils.resizeCanvasToDisplaySize(gl.canvas);
// -1 +1 space maps to width and height
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
// Clear canvas, make transparent
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
// Execute shader program
gl.useProgram(program)
// set the resolution
gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height)
// Turn attribute on
gl.enableVertexAttribArray(positionAttributeLocation);
//Bind position buffer
gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);
// Tell attribute how to get data from positionBuffer (ARRAY_BUFFER)
var size = 2; // 2 components per iteration
var type = gl.FLOAT; // data is 32 but floats
var normalize = false; // don't normalize data
var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position
var offset = 0; // start at the beginning of the buffer
gl.vertexAttribPointer(positionAttributeLocation,size,type,normalize,stride,offset)
for (var ii = 0; ii < 50; ++ii){
// Buffer data for rectangle
setRectangle(gl,
randomInt(300),
randomInt(300),
randomInt(300),
randomInt(300),
)
// Set a random color
gl.uniform4f(colorUniformLocation, Math.random(),Math.random(),Math.random(), 1)
var offset = 0;
var count = 6;
gl.drawArrays(gl.TRIANGLES, offset, count)
}
}
resolutionUniformLocation = gl.getUniformLocation(program, "u_resolution")
positions = [
10,20,
80,20,
10,30,
10,30,
80,20,
80, 0
]
function randomInt(range){
return Math.floor(Math.random() * range)
}
function setRectangle(gl, x, y, width, height){
var x1 = x;
var x2 = x+ width;
var y1 = y;
var y2 = y + height;
// // NOTE: gl.bufferData(gl.ARRAY_BUFFER, ...) will affect
// whatever buffer is bound to the `ARRAY_BUFFER` bind point
// but so far we only have one buffer. If we had more than one
// buffer we'd want to bind that buffer to `ARRAY_BUFFER` first.
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
x1, y1,
x2, y1,
x1, y2,
x1, y2,
x2, y1,
x2, y2]), gl.STATIC_DRAW);
}
import {requireScript} from "@bumbeishvili/fetcher"
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.