webgl developer @ Superhero Cheesecake in Amsterdam
rot = slider1;
unit = 1
renderer = getGL(canvas);
framebuffer = {
const gl = renderer.gl;
// Create and bind the framebuffer
const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
// attach the texture as the first color attachment
const level = 0;
const attachmentPoint = gl.COLOR_ATTACHMENT0;
gl.framebufferTexture2D(gl.FRAMEBUFFER, attachmentPoint, gl.TEXTURE_2D, targetTexture, level);
// create a depth renderbuffer
const depthBuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer);
// make a depth buffer and the same size as the targetTexture
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, canvas.width, canvas.height);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthBuffer);
return fb
}
function render(){
const gl = renderer.gl;
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
renderCube()
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
renderPlane();
}
function renderPlane(){
const gl = renderer.gl;
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.useProgram(postProgram);
gl.bindBuffer(gl.ARRAY_BUFFER, postVertex.buffer);
gl.vertexAttribPointer( postVertex.location, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(postVertex.location);
gl.bindBuffer(gl.ARRAY_BUFFER, postUv.buffer);
gl.vertexAttribPointer(postUv.location, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(postUv.location);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, targetTexture);
const uTextureUniformLocation = gl.getUniformLocation(postProgram, 'uTexture')
gl.uniform1i(uTextureUniformLocation, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, postIndex.buffer);
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
}
function renderCube(){
const gl = renderer.gl;
const cameraPosition = [2, 3, 5];
const up = [0, 1, 0];
const target = [0, 0, 0];
const modelMatrix = mat4.create();
mat4.rotateY(modelMatrix, modelMatrix, rot/180 * Math.PI);
const viewMatrix = mat4.create();
const projectionMatrix = mat4.create();
const mvMatrix = mat4.create();
const mvpMatrix = mat4.create();
mat4.lookAt(viewMatrix, cameraPosition, target, up);
const fov = 45;
mat4.perspective(
projectionMatrix,
(fov / 180) * Math.PI,
1,
0.01,
100
);
mat4.multiply(
mvMatrix,
viewMatrix,
modelMatrix
);
mat4.multiply(
mvpMatrix,
projectionMatrix,
mvMatrix
);
const matrixUniformLocation = gl.getUniformLocation(program, "uMVPMatrix");
gl.clearColor(0, 0, 0, 1);
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, vertex.buffer);
gl.vertexAttribPointer( vertex.location, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vertex.location);
const uMVPMatrixLocatio = gl.getUniformLocation(program, 'uMVPMatrix');
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index.buffer);
gl.uniformMatrix4fv(matrixUniformLocation, false, mvpMatrix);
gl.drawElements(gl.TRIANGLES, index.size, gl.UNSIGNED_SHORT, 0);
}
render()
function createTargetTexture(gl, targetTextureWidth, targetTextureHeight){
const targetTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, targetTexture);
{
// define size and format of level 0
const level = 0;
const internalFormat = gl.RGBA;
const border = 0;
const format = gl.RGBA;
const type = gl.UNSIGNED_BYTE;
const data = null;
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
targetTextureWidth, targetTextureHeight, border,
format, type, data);
// set the filtering so we don't need mips
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
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);
}
return targetTexture;
}
targetTexture = createTargetTexture(renderer.gl, 500, 500);
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.
