webgl developer @ Superhero Cheesecake in Amsterdam
renderer = getGL(canvas);
draw = {
const gl = renderer.gl;
const program = createProgram(gl, vertShaderSrc, fragShaderSrc);
const unit = 1;
const vertices = new Float32Array([
-unit, -unit, 0.0,
unit, -unit, 0.0,
unit, unit, 0.0,
-unit, unit, 0.0
]);
const uv = new Float32Array([
0, 0,
1, 0,
1, 1,
0, 1
]);
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
const vertexLocation = gl.getAttribLocation(program, 'position');
const uvBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);
gl.bufferData(gl.ARRAY_BUFFER, uv, gl.STATIC_DRAW);
const uvLocation = gl.getAttribLocation(program, 'uv');
const indices = new Uint16Array([ 0, 1, 2, 0, 2, 3 ]);
const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
const uTextureUniformLocation = gl.getUniformLocation(program, 'uTexture')
function draw(texture){
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer( vertexLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vertexLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);
gl.vertexAttribPointer(uvLocation, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(uvLocation);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.uniform1i(uTextureUniformLocation, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
}
return draw;
}
image = {
const image = new Image();
image.crossOrigin = "anonymous";
image.onload = ()=>{
onLoadHandler(renderer.gl, image);
}
image.src = 'https://raw.githubusercontent.com/kenjiSpecial/archive-works/gh-pages/images/weave.jpg'
return image;
}
function onLoadHandler(gl, image){
const texture = createTexture(gl, image);
draw(texture);
}
function createTexture(gl, image){
const texture = gl.createTexture();
{
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
}
return texture;
}
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.
