Parametric curveCAP 4720: Introduction to ObservableUseful Javascript Array functions.Vectors and vector AlgebraExample Use of TWGL Math LibraryPoint In front or back of A PlaneRasterization & InterpolationBarycentric CoordinatesModel Loaders using ThreeJSDiffuse lighting: Lambert Cosine Model.Shade Due to Diffuse LightingOrbit 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
Intro to WebGL Programming using twgl.
gl = {
const canvas = DOM.canvas(578, 256);
// or html`<canvas width="578", height="256"></canvas>`
const gl = canvas.getContext("webgl2");
gl.clearColor(0.25, 0.25, 0.25, 1);
gl.enable(gl.DEPTH_TEST);
return gl;
}
shaders = {
const vs = `#version 300 es
in vec3 position; // Attribute
in vec3 normal; // Attribute
uniform float asp; // Windo aspect ratio: hindow.width/window.height
out vec3 fragNormal; // Variable whose value will be associated with the gl_position.
void main () {
gl_Position = vec4(position.x/asp, position.yz, 1);
// Note: gl_Position is a A predefined vec4 variable. It must be set with a vec4 value.
fragNormal = normalize(normal);
}`;
const fs = `#version 300 es
precision mediump float;
in vec3 fragNormal;
out vec4 outColor; // User-defined output variable for
void main () {
vec3 N = normalize(fragNormal);
//vec3 color = (N+1.0)/2.0;
outColor = vec4(abs(N), 1);
}`;
return [vs, fs];
}
programInfo = {
errorBlock.style.height = "20px";
errorBlock.innerHTML = "Program Shader compilation successful";
return twgl.createProgramInfo(gl, shaders, (message) => { // Combile the shaders and create a shader program.
errorBlock.style.height = "400px";
errorBlock.innerHTML = "Program Shader compilation error\n" + message;
});
}
vertexAttributes = [
{
position: {
numComponents: 3,
data: [1, 0, 0, 0, 1, 0, -1, -1, 0]
}, // Attribute position
normal: {
numComponents: 3,
data: [1, 0, 1, 0, 1, 1, -1, -1, -1]
} // Attribtue normal
}
]
md`### Step 3c: **twgl code here**.
- Create vertex attribute buffers.
Use *twgl.createBufferInfoFromArrays* to create buffers under gl context.`
bufferInfoArray = vertexAttributes.map((d) =>
twgl.createBufferInfoFromArrays(gl, d)
)
{
const uniforms = {
asp: useAspectRatio ? gl.canvas.width / gl.canvas.height : 1
};
//const request = requestAnimationFrame(
// function render(time) {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.useProgram(programInfo.program);
bufferInfoArray.forEach((bufferInfo) => {
twgl.setUniforms(programInfo, uniforms);
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
twgl.drawBufferInfo(gl, bufferInfo);
// });
// requestAnimationFrame(render);
});
//invalidation.then(() => cancelAnimationFrame(request));
return gl.canvas;
}
md`### External Libraries`
m4 = twgl.m4
twgl = require("twgl.js")
require.resolve("twgl.js")
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.
