The avatar for @sdevkota007
Sudarshan Devkota
Public
Computer Graphics Rasterization
Edited
Aug 15, 2023
Fork of Camera + Model transformation
•
1 fork
1
Insert cell
Insert cell
Insert cell
gl = {
const myCanvas = DOM.canvas(900, 600);
const gl = myCanvas.getContext("webgl2");
return gl;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
modelExtents = computeModelExtent(modelObject)
Insert cell
Insert cell
modelMatrix = {
const translationMatrix = m4.translation(modelExtents.center.map(x=>-1*x));
const scaleMatrix = m4.scaling(Array(3).fill(scale/modelExtents.dia));

const zRotationMatrix = m4.rotationZ(toRadian(rotationParameters.zAngle));
const yRotationMatrix = m4.rotationY(toRadian(rotationParameters.yAngle));
const xRotationMatrix = m4.rotationX(toRadian(rotationParameters.xAngle));

const rotationMatrixYX = m4.multiply(yRotationMatrix, xRotationMatrix);
const rotationMatrix = m4.multiply(zRotationMatrix, rotationMatrixYX);

let modelMat = m4.multiply(scaleMatrix, translationMatrix);
modelMat = m4.multiply(rotationMatrix, modelMat);

return modelMat;
}

Insert cell
## Camera Matrices
Insert cell
Insert cell
Insert cell
Insert cell
## Create Offsets for instancing
Insert cell
offsetArray = {
return [-modelExtents.dia/1.5,0,0,
0,0,0,
modelExtents.dia/1.5,0,0];
}
Insert cell
## Light Computation
Insert cell
lightPosition = {
const D = (lightParameters.distanceFactor) / 2;
return v3.add(target, v3.mulScalar(lightDirection, D));
}
Insert cell
lightDirection = m4.transformDirection(
m4.rotationZ(toRadian(lightParameters.orientation)),
[0, 1, 0]
)
Insert cell
Insert cell
Insert cell
errorBlock = html`<textarea style="height : 20px; width : ${width}px; font-size: 0.8em; display: block"></textarea>`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
const uniforms = {
modelMatrix: modelMatrix,
viewMatrix: viewMatrix,
projMatrix: projMatrix,
offsets: offsetArray,
lightPosOrDir: lightParameters.lightType == "point"? [...lightPosition, 1] : [...lightDirection, 0],
eyePosition: m4.inverse(viewMatrix).slice(12, 15),

materialColor: hex2rgb(misc.materialColor),
ambientIntensity: misc.ambient / 100,
specularColor: hex2rgb(specularProperty.specularColor),
shininess: specularProperty.shininess,
K_s: specularProperty.K_s,
};

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, bufferInfo.numElements, 0, 3);
}
);
return gl.canvas;
}
Insert cell
{
const bufferInfoArray = vertexAttributes.map((d)=>twgl.createBufferInfoFromArrays(gl, d));
return bufferInfoArray[0]
}
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