The avatar for @spattana
Sumant Pattanaik
Published
Edited
Sep 29, 2021
1 fork
Importers
6 stars
CAP 4720 2021
Parametric curveCAP 4720: Introduction to ObservableUseful Javascript Array functions.Vectors and vector AlgebraExample Use of TWGL Math LibraryIntro to WebGL Programming using twgl.Point In front or back of A PlaneRasterization & InterpolationBarycentric CoordinatesModel Loaders using ThreeJSDiffuse lighting: Lambert Cosine Model.
Shade Due to Diffuse Lighting
Orbit CameraSpotLight and its effect in Lighting.Normal MatrixSpecular lighting ModelDiffuse + Specular + Ambient LightingWebGL Texturing using twgl.WebGL/twgl Rendering of Multipart Model with TextureSkybox rendering using Cubemap.Stenciling ExampleSilhouette EdgeShadow Projection of 3D ObjectsFragment Inside/Outside VolumeInbeweening using Tween.js: 1RotationsRay-Scene (2D) intersectionRotor QuaternionSLERP: Spherical Linear Interpolation
Also listed in…
Computer Graphics Fundamentals
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
gl = {
const myCanvas = DOM.canvas(width, 600);

const gl = myCanvas.getContext("webgl2");
gl.enable(gl.DEPTH_TEST);
gl.clearColor(0.3, 0.4, 0.5, 1);
return gl;
}
Insert cell
renderObject = () => {
const uniforms = {
// All the Uniform constants used in Shader program must be set here before making a render call.
materialColor: hex2rgb(materialColor),
light:
lightParameters.lightType == "point"
? [...lightPosition, 1]
: [...lightDirection, 0],
viewMatrix: viewMatrix,
projectionMatrix: perspectiveMatrix
};

gl.useProgram(modelProgramInfo.program);
twgl.setUniforms(modelProgramInfo, uniforms);
bufferInfoArray.forEach((bufferInfo) => {
twgl.setBuffersAndAttributes(gl, modelProgramInfo, bufferInfo);
twgl.drawBufferInfo(gl, bufferInfo, gl.TRIANGLES);
});
}
Insert cell
renderLight = () => {
const uniforms = {
// All the Uniform constants used in Shader program must be set here before making a render call.
viewMatrix: viewMatrix,
projectionMatrix: perspectiveMatrix,
modelMatrix: lightModelMatrix
};
gl.useProgram(lightProgramInfo.program);
twgl.setUniforms(lightProgramInfo, uniforms);

twgl.setBuffersAndAttributes(gl, lightProgramInfo, lightBufferInfo);
twgl.drawBufferInfo(gl, lightBufferInfo, gl.TRIANGLES);
}
Insert cell
md`### Shaders and Programs`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
objectDimensions
Insert cell
md `## Rendered Object`
Insert cell
bufferInfoArray = object
.map((d) => ({
position: { numComponents: 3, data: d.sc.positions },
normal: { numComponents: 3, data: d.sc.normals }
}))
.map((vertexAttributes) =>
twgl.createBufferInfoFromArrays(gl, vertexAttributes)
)
Insert cell
lightBufferInfo = {
const sphereVertices = twgl.primitives.createSphereVertices(1, 10, 10);
return twgl.createBufferInfoFromArrays(gl, sphereVertices);
}
Insert cell
Insert cell
objectDimensions = computeModelExtent(object)
Insert cell
md `## Camera Matrices`
Insert cell
Insert cell
objectDimensions
Insert cell
Insert cell
yRotationMatrix = m4.rotationY(toRadian(viewParameters.yAngle))
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
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