The avatar for @sdevkota007
Sudarshan Devkota
Public
Computer Graphics Rasterization
Edited
Sep 14, 2023
Fork of Camera + Model transformation
1
Insert cell
Insert cell
Insert cell
gl = {
const myCanvas = DOM.canvas(800, 600);

const gl = myCanvas.getContext("webgl2");

//gl.enable(gl.DEPTH_TEST);
//gl.clearColor(0.2, 0.2, 0.2, 1);
//gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
return gl;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
modelExtents = computeModelExtent(modelObject)
Insert cell
Insert cell
modelMatrix = {
return m4.identity();
}

Insert cell
## Camera Matrices
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
const uniforms = {
aspect: sceneParameters.useAspectRatio? gl.canvas.width / gl.canvas.height : 1,
modelMatrix: modelMatrix,
viewMatrix: viewMatrix,
projMatrix: projMatrix
};

const bufferInfoArray = vertexAttributes.map((d)=>twgl.createBufferInfoFromArrays(gl, d));
gl.useProgram(programInfo.program);

gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.clearColor(...hex2rgb(sceneParameters.color),1.0);
twgl.setUniforms(programInfo, uniforms);
bufferInfoArray.forEach((bufferInfo)=> {
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
twgl.drawBufferInfo(gl, bufferInfo, gl.TRIANGLES);
}
);
return gl.canvas;
}
Insert cell
Insert cell
toRadian = glMatrix.glMatrix.toRadian
Insert cell
Insert cell
twgl = require("twgl.js")
Insert cell
m4 = twgl.m4
Insert cell
v3 = twgl.v3
Insert cell
require.resolve("twgl.js")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more