The avatar for @sdevkota007
Sudarshan Devkota
Public
Computer Graphics Rasterization
Edited
Oct 5, 2023
Fork of PBR (Physically Based Rendering) Materials: Microfacet model
•
1 fork
2
Computer Graphics Rasterization
Webgl TriangleRender a modelModel TransformationCamera TransformationCamera + Model transformationLighting Computation (Diffuse + Specular + Ambient)Lighting Computation (Diffuse + Specular + Ambient) with InstancingPBR (Physically Based Rendering) Materials: Microfacet model
Textures with Microfacet model
Texture and Environment mapping
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
Insert cell
Insert cell
Insert cell
## Camera Matrices
Insert cell
Insert cell
Insert cell
Insert cell
## Buffers
Insert cell
bufferInfoArray = vertexAttributes.map((d)=>twgl.createBufferInfoFromArrays(gl, d));
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
Insert cell
{
gl.useProgram(programInfo.program);

gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.clearColor(...hex2rgb(sceneParameters.color),1.0);

render(modelMatrix);
return gl.canvas;
}
Insert cell
function render(modelMatrix){
const uniforms = {
tex2D: texture2D,
modelMatrix: modelMatrix,
viewMatrix: viewMatrix,
projMatrix: projMatrix,
lightPosOrDir: lightParameters.lightType == "point"? [...lightPosition, 1] : [...lightDirection, 0],
//lightPosOrDir: [1,1,1,0],
eyePosition: m4.inverse(viewMatrix).slice(12, 15),

ambientIntensity: misc.ambient,
K_s: misc.K_s,
material: materialProperty.material,
roughness: materialProperty.roughness,
};
twgl.setUniforms(programInfo, uniforms);
bufferInfoArray.forEach((bufferInfo)=> {
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
twgl.drawBufferInfo(gl, bufferInfo, gl.TRIANGLES, bufferInfo.numElements);
}
);

}
Insert cell
Insert cell
toRadian = glMatrix.glMatrix.toRadian
Insert cell
image_from_URL = (url) =>{
return new Promise(resolve => {
const im = new Image();
im.crossOrigin = "anonymous";
im.src = url;
im.onload = () => resolve(im);
})
}
Insert cell
## Images
Insert cell
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