dataviz engineer w/ passion for algorithms, maps & music
Published
Edited
Jul 19, 2021
20 stars
{
const programInfo = twgl.createProgramInfo(gl, [vertexShader, fragmentShader]);
const arrays = {
position: { numComponents: 3, data: sphere.vertices },
texcoord: { numComponents: 2, data: sphere.uv },
normal: { numComponents: 3, data: sphere.vertices },
indices: { numComponents: 3, data: sphere.triangles },
}
const bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);
const texture = twgl.createTexture(gl, { src: image });
const uniforms = {
u_lightWorldPos: [10, -20, -10],
u_lightColor: [0.8, 0.8, 0.9, 1],
u_ambient: [0, 0, 0, 1],
u_specular: [1, 1, 1, 1],
u_shininess: 2,
u_specularFactor: 0.2,
u_diffuse: texture,
};
function render(time = 0) {
time *= 0.0001;
twgl.resizeCanvasToDisplaySize(gl.canvas);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
const fov = 45 * Math.PI / 180;
const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
const zNear = 0.5;
const zFar = 100;
const projection = m4.perspective(fov, aspect, zNear, zFar);
const eye = [0, -2, -3];
const target = [0, 0, 0];
const up = [0, -1, 0];
const camera = m4.lookAt(eye, target, up);
const view = m4.inverse(camera);
const viewProjection = m4.multiply(projection, view);
const world = m4.rotationY(time);
uniforms.u_viewInverse = camera;
uniforms.u_world = world;
uniforms.u_worldInverseTranspose = m4.transpose(m4.inverse(world));
uniforms.u_worldViewProjection = m4.multiply(viewProjection, world);
gl.useProgram(programInfo.program);
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
twgl.setUniforms(programInfo, uniforms);
gl.drawElements(gl.TRIANGLES, bufferInfo.numElements, gl.UNSIGNED_SHORT, 0);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
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.
