The avatar for @sdevkota007
Sudarshan Devkota
Public
Computer Graphics Rasterization
Edited
Oct 12, 2023
Fork of Textures with Microfacet model
8
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 modelTextures 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
## Camera Matrices
Insert cell
Insert cell
Insert cell
Insert cell
invViewProjMatrix_withoutTranslation = {
const view = viewMatrix.slice();
const viewD = m4.setTranslation(view, [0, 0, 0]);
const viewDirectionProjection = m4.multiply(projMatrix, viewD);
return m4.inverse(viewDirectionProjection);
}
Insert cell
## Buffers
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
skyboxshaders = {
const vs = `#version 300 es
in vec2 position; // Attribute
out vec2 fragPosition;

void main(){
fragPosition = position;
gl_Position = vec4(position, 1 , 1);
}`;
const fs = `#version 300 es
precision mediump float;
uniform samplerCube cubemap;
uniform mat4 invViewProjMatrix;
in vec2 fragPosition;
out vec4 outColor;

void main(){
vec4 direction = invViewProjMatrix * vec4(fragPosition, 1, 1);
outColor = texture(cubemap, direction.xyz/direction.w);
}`;
return [vs, fs];
}
Insert cell
Insert cell
Insert cell
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.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.clearColor(...hex2rgb(sceneParameters.color),1.0);

renderObj();
renderSkybox();
return gl.canvas;
}
Insert cell
Insert cell
function renderObj(){
gl.useProgram(objShaderProgramInfo.program);
const uniforms = {
tex2D: texture2D,
modelMatrix: modelMatrix,
viewMatrix: viewMatrix,
projMatrix: projMatrix,

eyePosition: m4.inverse(viewMatrix).slice(12, 15),

cubemap: textureParameters.cubemap,
enableCubeMap: textureParameters.enableCubeMap
};

twgl.setUniforms(objShaderProgramInfo, uniforms);
objBufferInfoArray.forEach((bufferInfo)=> {
twgl.setBuffersAndAttributes(gl, objShaderProgramInfo, 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
texture2D = {
let texture = twgl.createTexture(gl, {
// see more info on options from: https://twgljs.org/docs/module-twgl.html#.TextureOptions
// Also see https://twgljs.org/docs/
src: img,
flipY: true,
min: gl.LINEAR_MIPMAP_LINEAR,
max: gl.LINEAR
});
return texture;
}
Insert cell
Insert cell
Insert cell
nx = getImageData(await FileAttachment("negx.jpg").blob())
Insert cell
ny = getImageData(await FileAttachment("negy.jpg").blob())
Insert cell
nz = getImageData(await FileAttachment("negz.jpg").blob())
Insert cell
px = getImageData(await FileAttachment("posx.jpg").blob())
Insert cell
py = getImageData(await FileAttachment("posy.jpg").blob())
Insert cell
pz = getImageData(await FileAttachment("posz.jpg").blob())
Insert cell
cubemap1 = twgl.createTexture(gl, {
target: gl.TEXTURE_CUBE_MAP,
flipY: false,
src: [px, nx, py, ny, pz, nz],
min: gl.LINEAR_MIPMAP_LINEAR
})
Insert cell
Insert cell
imageURLs = [
"niagarafalls2s/posx.jpg",
"niagarafalls2s/negx.jpg",
"niagarafalls2s/posy.jpg",
"niagarafalls2s/negy.jpg",
"niagarafalls2s/posz.jpg",
"niagarafalls2s/negz.jpg"
].map((url) => "https://twgljs.org/examples/images/" + url)
Insert cell
cubemap2 = twgl.createTexture(gl, {
target: gl.TEXTURE_CUBE_MAP,
src: imageURLs,
flipY: false,
min: gl.LINEAR_MIPMAP_LINEAR
}) // Image Data from twgl website.
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
import {getImageData} from "@ehouais/utils"
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