Vectors and vector AlgebraRotationsNormal MatrixUseful Javascript Array functions.CAP 4720: Introduction to ObservableBarycentric CoordinatesRasterization & InterpolationBasic WebGL Programming Using REGLDiffuse lighting: Lambert Cosine Model.Specular lighting ModelShade Due to Diffuse LightingSpotLight and its effect in Lighting.WebGL Texture in REGLWebGL/twgl Rendering of Multipart Model with TextureNormal mappingBlending ExampleStenciling ExampleModel Loader, ViewerPoint In front or back of A PlaneSilhouette EdgeRotor QuaternionFragment Inside/Outside VolumeSLERP: Spherical Linear InterpolationInstancing in ReglColor from Wavelength, Correlated Temperature and HTML color pickerHSV and HSL Color ModelsParametric curveCAP 4720 Final Project ListRay-Box intersectionRayRay-Sphere (in 2D) intersectionRay-Scene (2D) intersectionUniform Grid AccelerationScaled Objects from OBJ modelsSkybox rendering using Cubemap.WebGL Texturing using twgl.
OBJ Parser: obj2sc
md`# OBJ Parser: obj2sc
Code credit: Mikola Lysenko
Code source: https://github.com/mikolalysenko/obj2sc`
getScDimensions = scObject => {
const extent = reglScExtent(scObject);
const size = [
(extent[0][1]-extent[0][0]),
(extent[1][1]-extent[1][0]),
(extent[2][1]-extent[2][0])
];
return {
box : size,
center : [
0.5*(extent[0][1]+extent[0][0]),
0.5*(extent[1][1]+extent[1][0]),
0.5*(extent[2][1]+extent[2][0])
],
extent: extent,
radius : 0.5*Math.sqrt(size[0]*size[0]+size[1]*size[1]+size[2]*size[2])
};
}
getSCSdimensions = scs =>{
const min = [Number.MAX_VALUE,Number.MAX_VALUE,Number.MAX_VALUE];
const max = [Number.MIN_VALUE,Number.MIN_VALUE,Number.MIN_VALUE];
scs.forEach(d=>{
const sc = d.sc;
const e = reglScExtent(sc);
const M = d.modelMatrix;
const part_min = vec3.transformMat4([],[e[0][0],e[1][0],e[2][0]],M);
const part_max = vec3.transformMat4([],[e[0][1],e[1][1],e[2][1]],M);
[0,1,2].forEach((index) => {
min[index] = Math.min(min[index],part_min[index]);
max[index] = Math.max(max[index],part_max[index]);
})
})
const extent = [];
[0,1,2].forEach((index) => extent[index] = [min[index],max[index]]);
//return extent
const size = [
(extent[0][1]-extent[0][0]),
(extent[1][1]-extent[1][0]),
(extent[2][1]-extent[2][0])
];
return {
center : [
0.5*(extent[0][1]+extent[0][0]),
0.5*(extent[1][1]+extent[1][0]),
0.5*(extent[2][1]+extent[2][0])
],
extent: extent,
radius : 0.5*Math.sqrt(size[0]*size[0]+size[1]*size[1]+size[2]*size[2])
};
}
array2Darray = (A,n)=>Array.from(A).reduce((a, c, i,data) => {
return i % n === 0 ? a.concat([data.slice(i, i + n)]) : a;
}, []);
computeNormals = require('https://bundle.run/angle-normals@1.0.0')
vec3 = glMatrix.vec3
mat4 = glMatrix.mat4
glMatrix = require('https://bundle.run/gl-matrix@3.3.0')
d3 = require("d3")
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.
