Prototype utility for 3D silhouettes.
It features:
- Combination of sharp edges and contour for the outline.
- Subdivision for more accurate depth sorting.
- Merging simple transformed primitives into complex shapes.
- Optimized to deal with non-trivial scenes. (Further optimization needed - starting with the subdivision.)
- Precomputes the scene once to improve GIF export times.
The principle is: a sphere looks like a disc from all angles, but a cylinder or cube has "inner outlines". The outer and inner outlines are calculated separately and combined to achieve this look.
Log in to post a comment.
// LL 2021 const turtle = new Turtle(); const detail = 0.5; // min=0 max=1 step=0.1 const perspective = 1.6; // min=1 max=3 step=0.1 const camera_theta = 0.3; // min=-1 max=1 step=0.01 const camera_phi = 0.3; // min=-0.99 max=1 step=0.01 const camera_r = 20; // min=0.1 max=40 step=0.1 const look_at_z = 0; // min=-100 max=100 step=0.1 const inside_lines = 0.33; // min=0 max=1 step=0.01 const style = 2; // min=0 max=3 step=1 (Preview,All outlines,Silhouette,Hatched) const seed = 0; // min=0 max=100 step=1 Canvas.setpenopacity((style==0) ? 0.25 : 1); const detail_max_length = Math.max(0.9, 0.9 + 5 * (1 - detail)); var silhouette = new Silhouette(); function walk(i, t) { if (i==0) { timer_start('total'); if (t == 0 || t == 1) initOnce(); initFrame(t); } if (silhouette.faceCount() < 1) { timer_end('total'); return false; } silhouette.nextFace().draw(); return true; } function initFrame(t) { const cameraOffset = [ camera_r * perspective ** 3 * Math.cos((camera_theta+t*2) * Math.PI) * Math.sin((camera_phi/2+0.5) * Math.PI), camera_r * perspective ** 3 * Math.sin((camera_theta+t*2) * Math.PI) * Math.sin((camera_phi/2+0.5) * Math.PI), -camera_r * perspective ** 3 * Math.cos((camera_phi/2+0.5) * Math.PI) ]; const cameraLookAt = [0, 0, look_at_z]; viewProjectionMatrix = setupCamera(add3(cameraOffset, cameraLookAt), cameraLookAt); polygons = new Polygons(); silhouette.processFrameModels(); silhouette.sortFaces(); console.log(`Models :${silhouette.modelCount()}. Faces: ${silhouette.faceCount()}.`); } function initOnce(t) { seed_t = (t < 1 && seed == 0) ? (Math.random() * 100 | 0) : seed; rng = undefined; initScene(); timer_start('processOnce'); silhouette.processOnceModels(); timer_end('processOnce'); } function initScene() { timer_start('initScene'); const count = 20; const r = 0.5; for (var vz = -1; vz <= 1; vz++) { for (var vx = -1; vx <= 1; vx++) { const model = silhouette.newModel(); switch (((vx+1) + (vz+1) * 3) % 9) { case 0: case 1: case 2: { const mdl = makeVoxelCube(r, count); var matrix = new Matrix(); matrix.translate(0, count * r / 2, 0); mdl.transform(matrix); model.merge(mdl); } break; case 3: { const mdl = makeTower(count * r * 2, count * r * 0.25); model.merge(mdl); } break; case 4: { const mdl = makeCylinder(count * r * 1.3, 0, count * r * 0.75, 50); var matrix = new Matrix(); matrix.translate(0, count * r * 1.3 / 2, 0); mdl.transform(matrix); model.merge(mdl); } break; case 5: { { const mdl = makeBox(2 * r, count * r, 2 * r); var matrix = new Matrix(); matrix.translate(0, count * r / 2, 0); mdl.transform(matrix); model.merge(mdl); } { const mdl = makeBox(count * r, 2 * r, 2 * r); var matrix = new Matrix(); matrix.translate(0, count * r / 2, 0); mdl.transform(matrix); model.merge(mdl); } } break; case 6: { const radius = count * r * (0.5 + 0.25 * random()); const mdl = makeSphere(radius, 7); var matrix = new Matrix(); matrix.translate(0, radius, 0); mdl.transform(matrix); model.merge(mdl); } break; case 7: { const mdl = makeCylinder(count * r, count * r * 0.5, count * r * 0.5, 50); var matrix = new Matrix(); matrix.translate(0, count * r / 2, 0); mdl.transform(matrix); model.merge(mdl); } break; case 8: { const mdl = makeBox(count * r, count * r, count * r); var matrix = new Matrix(); matrix.translate(0, count * r / 2, 0); mdl.transform(matrix); model.merge(mdl); } break; } { var matrix = new Matrix(); matrix.multiply(matrix.rotateY(random() * Math.PI / 2)); matrix.translate(vx * count * r * 2, 0, vz * count * r * 2); model.transform(matrix); } silhouette.addModel(model); } } { var matrix = new Matrix(); matrix.translate(0, -1.51, 0); const mdl = makeBox(60, 1, 60); mdl.transform(matrix); silhouette.addModel(mdl); } timer_end('initScene'); } ///////////////////////////////////////////////////////////////////// // Prototype Silhouette utility code - Created by Lionel Lemarie 2021 // https://turtletoy.net/turtle/334500a2c5 function Silhouette() { const models = []; const all_faces = []; class Model { constructor() { this.faces = []; this.edges = []; } transform(matrix) { this.faces.forEach(face => { face.transform(matrix); }); } processOnce() { if (detail && style) this.subdivideDetail(detail_max_length); this.updateEdgeList(); } processFrame() { this.faces.forEach(face => { face.projectAndAdd(); }); this.findStaticOutlines(); this.findProjectedOutlines(); this.updateOutlineMasks(); } updateOutlineMasks() { this.edges.forEach(edge => { edge.faces.forEach(face => { const pc = face.points.length; if (pc > 1) { for (var i=0; i<pc; i++) { const hash0 = getPointHash(face.points[i]); const hash1 = getPointHash(face.points[(i+1)%pc]); if (edge.hash == hash0 + hash1 || edge.hash == hash1 + hash0) { if (edge.state) { face.outline_mask |= 1 << i; } else { face.outline_mask &= ~(1 << i); } } } } }); }); } addFace(points) { const face = new Face(points); this.faces.push(face); } merge(model) { model.faces.forEach(face => { this.faces.push(face); }) } subdivideDetail(max_length) { var nfaces = this.faces.length; var loop = true; while (loop) { const old_faces = this.faces; this.faces = []; old_faces.forEach(face => { const new_faces = face.getSubdivided(max_length); this.faces = [...this.faces, ...new_faces]; }); loop = this.faces.length != nfaces; nfaces = this.faces.length; } } subdivideCount(count) { while (count-- > 0) { const old_faces = this.faces; this.faces = []; old_faces.forEach(face => { const new_faces = face.getSubdivided(0); this.faces = [...this.faces, ...new_faces]; }); } } updateEdgeList() { this.edges = []; const edge_lookup = {}; this.faces.forEach(face => { const pc = face.points.length; if (pc > 1) { for (var i=0; i<pc; i++) { const hash0 = getPointHash(face.points[i]); const hash1 = getPointHash(face.points[(i+1)%pc]); if ((hash0 + hash1) in edge_lookup) { const edge_id = edge_lookup[hash0 + hash1]; this.addFaceToEdge(edge_id, face); } else if ((hash1 + hash0) in edge_lookup) { const edge_id = edge_lookup[hash1 + hash0]; this.addFaceToEdge(edge_id, face); } else { const edge_id = this.edges.length; edge_lookup[hash0 + hash1] = edge_id; this.edges.push({ faces: [face], hash: hash0 + hash1, state: 1 }); } } } }); } addFaceToEdge(edge_id, new_face) { var good = true; this.edges[edge_id].faces.forEach(face => { if (face.matches(new_face)) { good = false; face.overlap = true; new_face.overlap = true; } }); if (good) this.edges[edge_id].faces.push(new_face); } findStaticOutlines() { this.edges.forEach(edge => { edge.state = 1; for (var i=0, fl=edge.faces.length; i<fl && edge.state; i++) { if (edge.faces[i].overlap) continue; const nfi = edge.faces[i].getStaticNormal(); for (var j=i+1; j<fl && edge.state; j++) { if (edge.faces[j].overlap) continue; const nfj = edge.faces[j].getStaticNormal(); const d = len3(sub3(nfi, nfj)); if (d < inside_lines * 2) { edge.state = 0; } } } }); } findProjectedOutlines() { this.edges.forEach(edge => { var found_pos = false, found_neg = false; edge.faces.forEach(face => { if (!face.overlap) { const nf = face.getProjectedNormal(); if (nf[2] < 0) found_neg = true; if (nf[2] >= 0) found_pos = true; } }); if (found_pos && found_neg) edge.state = 1; }); } } function getPointHash(point) { const mult = 100; const x0 = Math.round(point[0] * mult), y0 = Math.round(point[1] * mult), z0 = Math.round(point[2] * mult); return `${x0},${y0},${z0}`; } class Face { constructor(points) { this.points = [...points]; this.z = 0; this.projected_points = []; this.outline_mask = -1; this.overlap = false; } draw() { if (this.projected_points.length < 2 || this.overlap) return; var good = true; this.projected_points.forEach(p => good &= Math.min(Math.abs(p[0]), Math.abs(p[1])) < 100 ); if (!good) return; if (style == 0) { // turtle.jump(this.projected_points[this.projected_points.length-1]); // this.projected_points.forEach(p=>turtle.goto(p)); for (var i=0; i<this.projected_points.length; i++) { if (this.outline_mask & (1 << i)) { turtle.jump(this.projected_points[i]); turtle.goto(this.projected_points[(i+1) % this.projected_points.length]); } } } else { const p1 = polygons.create(); p1.addPoints(...this.projected_points); if (style == 1) { p1.addOutline(); } else if (style > 1) { for (var i=0; i<this.projected_points.length; i++) { if (this.outline_mask & (1 << i)) { p1.addSegments(p1.cp[i], p1.cp[(i+1) % this.projected_points.length]); } } if (style > 2) { const hmin = 0.15, hmax = 0.9; const hatching = hmin + (hmax - hmin) * this.getLight(); p1.addHatching(-Math.PI/4, hatching); } } polygons.draw(turtle, p1, true); } } getStaticNormal() { if (this.cached_static_normal === undefined) { if (this.points.length < 3) this.cached_static_normal = [0, 1, 0]; else this.cached_static_normal = normalize3(cross3(sub3(this.points[1], this.points[0]), sub3(this.points[2], this.points[0]))); } return this.cached_static_normal; } getProjectedNormal() { if (this.projected_points.length < 3) return [0, 1, 0]; return normalize3(cross3(sub3(this.projected_points[1], this.projected_points[0]), sub3(this.projected_points[2], this.projected_points[0]))); } getLight() { const n = this.getProjectedNormal(); return n[0] * 0.5 + 0.5; } transform(matrix) { for (var i=0, c=this.points.length; i<c; i++) { this.points[i] = matrix.transform(this.points[i]); } } projectAndAdd() { if (this.overlap) return; this.projected_points = []; this.z = 0; this.points.forEach(point => { const pp = project(point); if (pp === undefined) return; this.projected_points.push(pp); this.z += pp[2]; }) if (this.projected_points.length > 0) this.z /= this.projected_points.length; silhouette.addFace(this); } getSubdivided(max_length) { var long_index = -1; const pc = this.points.length; for (var i=0; i<pc; i++) { const len = len3(sub3(this.points[(i+1)%pc],this.points[i])); if (len > max_length) { max_length = len; long_index = i; } } if (long_index >= 0) { if (pc == 4) { const new_faces = []; new_faces.push(new Face([this.points[0], this.points[1], this.points[2]])); new_faces.push(new Face([this.points[2], this.points[3], this.points[0]])); return new_faces; } else { const new_faces = []; const point = mulf(add3(this.points[(long_index+1)%pc],this.points[long_index]), 0.5); for (var i=0; i<pc; i++) { if (i != long_index) { new_faces.push(new Face([this.points[i], this.points[(i+1)%pc], point])); } } return new_faces; } } return [ this ]; } matches(face) { const fl = face.points.length; if (fl != this.points.length) return false; if (fl < 1) return true; var first_id = undefined; { const hash0 = getPointHash(this.points[0]); for (var i=0; i<fl; i++) { const hash1 = getPointHash(face.points[i]); if (hash0 == hash1) { first_id = i; break; } } } if (first_id === undefined) return false; for (var i=1; i<fl; i++) { const j = (first_id - i + fl) % fl; const hash0 = getPointHash(this.points[i]); const hash1 = getPointHash(face.points[j]); if (hash0 != hash1) { for (var i2=1; i2<fl; i2++) { const j2 = (first_id + i2) % fl; const hash0 = getPointHash(this.points[i2]); const hash1 = getPointHash(face.points[j2]); if (hash0 != hash1) return false; } return true; } } return true; } } return { addModel: (model) => { models.push(model); }, newModel: () => { return new Model(); }, processFrameModels: () => { models.forEach(model => { model.processFrame(); }); }, processOnceModels: () => { models.forEach(model => { model.processOnce(); }); }, modelCount: () => { return models.length; }, sortFaces: () => { all_faces.sort(function(a, b) { return a.z - b.z; }); }, nextFace: () => { return all_faces.shift(); }, faceCount: () => { return all_faces.length; }, addFace: (face) => { all_faces.push(face); }, }; } class Matrix { constructor() { this.identity(); } identity() { this.matrix = [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ]; return this; } translate(tx, ty, tz) { const m2 = new Matrix(); m2.matrix[12] = tx; m2.matrix[13] = ty; m2.matrix[14] = tz; return this.multiply(m2); } scale(sx, sy, sz) { this.matrix[0] *= sx; this.matrix[5] *= sy; this.matrix[10] *= sz; return this; } rotateX(a) { const m2 = new Matrix(); m2.matrix[5] = Math.cos(a); m2.matrix[9] = Math.sin(a); m2.matrix[6] = -Math.sin(a); m2.matrix[10] = Math.cos(a); return this.multiply(m2); } rotateY(a) { const m2 = new Matrix(); m2.matrix[0] = Math.cos(a); m2.matrix[8] = -Math.sin(a); m2.matrix[2] = Math.sin(a); m2.matrix[10] = Math.cos(a); return this.multiply(m2); } rotateZ(a) { const m2 = new Matrix(); m2.matrix[0] = Math.cos(a); m2.matrix[1] = -Math.sin(a); m2.matrix[4] = Math.sin(a); m2.matrix[5] = Math.cos(a); return this.multiply(m2); } multiply(rhs) { const m1 = [...this.matrix]; const m2 = [...rhs.matrix]; this.matrix = []; for(let n=0; 16>n; n+=4) { for(let o=0; 4>o; o++) { this.matrix[n+o] = m1[n+0] * m2[0+o] + m1[n+1] * m2[4+o] + m1[n+2] * m2[8+o] + m1[n+3] * m2[12+o]; } } return this; } transform(point) { const p = [...point]; for (let i=0; i<3; i++) { p[i] = this.matrix[i] * point[0] + this.matrix[i+4] * point[1] + this.matrix[i+8] * point[2] + this.matrix[i+12]; } return p; } } const cube_points = []; for (var z=-1; z<=1; z+=2) { for (var y=-1; y<=1; y+=2) { for (var x=-1; x<=1; x+=2) { cube_points.push([x, y, z]); } } } const cube_faces = [ [0, 1, 2, 3], [7, 3, 5, 1], [6, 2, 7, 3], [0, 4, 1, 5], [4, 0, 6, 2], [6, 7, 4, 5] ]; function makeBox(w, h, d) { const model = silhouette.newModel(); cube_faces.forEach(f => { const quad = [ [...cube_points[f[0]]], [...cube_points[f[1]]], [...cube_points[f[3]]], [...cube_points[f[2]]] ]; quad.forEach(point => { point[0] *= w/2; point[1] *= h/2; point[2] *= d/2; }); model.addFace(quad); }); return model; } function makeCylinder(height, radius_top, radius_bottom, sides) { const model = silhouette.newModel(); const y = height / 2; const astep = Math.PI * 2 / sides; for (var i=0; i<sides; i++) { const a0 = i * astep, a1 = a0 + astep; const xt0 = radius_top * Math.cos(a0), zt0 = radius_top * Math.sin(a0); const xt1 = radius_top * Math.cos(a1), zt1 = radius_top * Math.sin(a1); const xb0 = radius_bottom * Math.cos(a0), zb0 = radius_bottom * Math.sin(a0); const xb1 = radius_bottom * Math.cos(a1), zb1 = radius_bottom * Math.sin(a1); if (radius_bottom > 0) model.addFace([ [xb1, -y, zb1], [xt0, y, zt0], [xb0, -y, zb0] ]); if (radius_top > 0) model.addFace([ [xt1, y, zt1], [xt0, y, zt0], [xb1, -y, zb1] ]); if (radius_top > 0) model.addFace([ [xt0, y, zt0], [xt1, y, zt1], [0, y, 0] ]); if (radius_bottom > 0) model.addFace([ [xb1, -y, zb1], [xb0, -y, zb0], [0, -y, 0] ]); } return model; } function makeSphere(radius, subdiv) { const model = makeBox(1, 1, 1); model.subdivideCount(subdiv); model.faces.forEach(face => { for (var i=0; i<face.points.length; i++) face.points[i] = mulf(normalize3(face.points[i]), radius); }); return model; } function makeTower(height, radius) { const model = silhouette.newModel(); var oy = 0; const steps = 5; for (var j=0; j<steps*2+1; j++) { var matrix = new Matrix(); const h = ((j&1) ? 1/steps/1.1 : 0.03) * height; const r = ((j&1) ? 1 : 1.1) * radius; matrix.translate(0, oy+h/2, 0); oy += h; const mdl = makeCylinder(h, r, r, 12); mdl.transform(matrix); model.merge(mdl); } { var matrix = new Matrix(); const h = height / 5; matrix.translate(0, oy + h / 2, 0); const mdl = makeCylinder(h, 0, radius, 12); mdl.transform(matrix); model.merge(mdl); } { var matrix = new Matrix(); matrix.translate(0, oy + radius * 1.5, 0); const mdl = makeSphere(radius * 0.5, 4); mdl.transform(matrix); model.merge(mdl); } { var matrix = new Matrix(); const h = height / 2 matrix.translate(0, oy + h / 2, 0); const mdl = makeCylinder(h, 0, radius * 0.25, 12); mdl.transform(matrix); model.merge(mdl); } return model; } function makeVoxelCube(r, count) { const model = silhouette.newModel(); const grid = {}; const o = (-(count-1)/2) * r; for (var c=0; c<count * 20; c++) { const size = random() * count / 4 | 0; const xo = random() * count | 0; const yo = random() * count | 0; const zo = random() * count | 0; for (var z=0; z<size; z++) { for (var y=0; y<size; y++) { for (var x=0; x<size; x++) { const key = (x+xo) + (y+yo) * count + (z+zo) * count * count; grid[key] = true; } } } } Object.keys(grid).forEach(key => { if (grid[key]) { const x = key % count; const y = (key / count | 0) % count; const z = key / count / count| 0; var matrix = new Matrix(); matrix.translate(x * r + o, y * r + o, z * r + o); const rs = 1; const mdl = makeBox(r * rs, r * rs, r * rs); mdl.transform(matrix); model.merge(mdl); } }); return model; } function project(op) { const p = transform4([op[0], op[2], op[1], 1], viewProjectionMatrix); const s = 5 * perspective **3; if (p[2] < 0) return undefined; return [ p[0]/p[3]*s, -p[1]/p[3]*s, p[2] ]; } //////////////////////////////////////////////////////////////// // Polygon Clipping utility code - Created by Reinder Nijhoff 2019 // (Polygon binning by Lionel Lemarie 2021) // https://turtletoy.net/turtle/a5befa1f8d //////////////////////////////////////////////////////////////// function Polygons(){const t=[],s=50,e=Array.from({length:s**2},t=>[]),n=class{constructor(){this.cp=[],this.dp=[],this.aabb=[]}addPoints(...t){let s=1e5,e=-1e5,n=1e5,h=-1e5;(this.cp=[...this.cp,...t]).forEach(t=>{s=Math.min(s,t[0]),e=Math.max(e,t[0]),n=Math.min(n,t[1]),h=Math.max(h,t[1])}),this.aabb=[s,n,e,h]}addSegments(...t){t.forEach(t=>this.dp.push(t))}addOutline(){for(let t=0,s=this.cp.length;t<s;t++)this.dp.push(this.cp[t],this.cp[(t+1)%s])}draw(t){for(let s=0,e=this.dp.length;s<e;s+=2)t.jump(this.dp[s]),t.goto(this.dp[s+1])}addHatching(t,s){const e=new n;e.cp.push([-1e5,-1e5],[1e5,-1e5],[1e5,1e5],[-1e5,1e5]);const h=Math.sin(t)*s,o=Math.cos(t)*s,a=200*Math.sin(t),i=200*Math.cos(t);for(let t=.5;t<150/s;t++)e.dp.push([h*t+i,o*t-a],[h*t-i,o*t+a]),e.dp.push([-h*t+i,-o*t-a],[-h*t-i,-o*t+a]);e.boolean(this,!1),this.dp=[...this.dp,...e.dp]}inside(t){let s=0;for(let e=0,n=this.cp.length;e<n;e++)this.segment_intersect(t,[.1,-1e3],this.cp[e],this.cp[(e+1)%n])&&s++;return 1&s}boolean(t,s=!0){const e=[];for(let n=0,h=this.dp.length;n<h;n+=2){const h=this.dp[n],o=this.dp[n+1],a=[];for(let s=0,e=t.cp.length;s<e;s++){const n=this.segment_intersect(h,o,t.cp[s],t.cp[(s+1)%e]);!1!==n&&a.push(n)}if(0===a.length)s===!t.inside(h)&&e.push(h,o);else{a.push(h,o);const n=o[0]-h[0],i=o[1]-h[1];a.sort((t,s)=>(t[0]-h[0])*n+(t[1]-h[1])*i-(s[0]-h[0])*n-(s[1]-h[1])*i);for(let n=0;n<a.length-1;n++)(a[n][0]-a[n+1][0])**2+(a[n][1]-a[n+1][1])**2>=.001&&s===!t.inside([(a[n][0]+a[n+1][0])/2,(a[n][1]+a[n+1][1])/2])&&e.push(a[n],a[n+1])}}return(this.dp=e).length>0}segment_intersect(t,s,e,n){const h=(n[1]-e[1])*(s[0]-t[0])-(n[0]-e[0])*(s[1]-t[1]);if(0===h)return!1;const o=((n[0]-e[0])*(t[1]-e[1])-(n[1]-e[1])*(t[0]-e[0]))/h,a=((s[0]-t[0])*(t[1]-e[1])-(s[1]-t[1])*(t[0]-e[0]))/h;return o>=0&&o<=1&&a>=0&&a<=1&&[t[0]+o*(s[0]-t[0]),t[1]+o*(s[1]-t[1])]}};return{list:()=>t,create:()=>new n,draw:(n,h,o=!0)=>{reducedPolygonList=function(n){const h={},o=200/s;for(var a=0;a<s;a++){const c=a*o-100,r=[0,c,200,c+o];if(!(n[3]<r[1]||n[1]>r[3]))for(var i=0;i<s;i++){const c=i*o-100;r[0]=c,r[2]=c+o,n[0]>r[2]||n[2]<r[0]||e[i+a*s].forEach(s=>{const e=t[s];n[3]<e.aabb[1]||n[1]>e.aabb[3]||n[0]>e.aabb[2]||n[2]<e.aabb[0]||(h[s]=1)})}}return Array.from(Object.keys(h),s=>t[s])}(h.aabb);for(let t=0;t<reducedPolygonList.length&&h.boolean(reducedPolygonList[t]);t++);h.draw(n),o&&function(n){t.push(n);const h=t.length-1,o=200/s;e.forEach((t,e)=>{const a=e%s*o-100,i=(e/s|0)*o-100,c=[a,i,a+o,i+o];c[3]<n.aabb[1]||c[1]>n.aabb[3]||c[0]>n.aabb[2]||c[2]<n.aabb[0]||t.push(h)})}(h)}}} // Random with seed var rng; function random() { if (rng === undefined) rng = new RNG(seed_t); return rng.nextFloat(); } function RNG(t){return new class{constructor(t){this.m=2147483648,this.a=1103515245,this.c=12345,this.state=t||Math.floor(Math.random()*(this.m-1))}nextFloat(){return this.state=(this.a*this.state+this.c)%this.m,this.state/(this.m-1)}}(t)} //////////////////////////////////////////////////////////////// // Projection from reinder's https://turtletoy.net/turtle/b3acf08303 let viewProjectionMatrix; function setupCamera(t,e){const m=lookAt4m(t,e,[0,0,1]),n=perspective4m(.25,1);return multiply4m(n,m)} function lookAt4m(o,n,r){const s=new Float32Array(16);n=normalize3(sub3(o,n)),r=normalize3(cross3(r,n));const t=normalize3(cross3(n,r));return s[0]=r[0],s[1]=t[0],s[2]=n[0],s[3]=0,s[4]=r[1],s[5]=t[1],s[6]=n[1],s[7]=0,s[8]=r[2],s[9]=t[2],s[10]=n[2],s[11]=0,s[12]=-(r[0]*o[0]+r[1]*o[1]+r[2]*o[2]),s[13]=-(t[0]*o[0]+t[1]*o[1]+t[2]*o[2]),s[14]=-(n[0]*o[0]+n[1]*o[1]+n[2]*o[2]),s[15]=1,s} function perspective4m(t,n){const e=new Float32Array(16).fill(0,0);return e[5]=1/Math.tan(t/2),e[0]=e[5]/n,e[10]=e[11]=-1,e} function multiply4m(t,r){const l=new Float32Array(16);for(let n=0;16>n;n+=4)for(let o=0;4>o;o++)l[n+o]=r[n+0]*t[0+o]+r[n+1]*t[4+o]+r[n+2]*t[8+o]+r[n+3]*t[12+o];return l} function transform4(r,n){const t=new Float32Array(4);for(let o=0;4>o;o++)t[o]=n[o]*r[0]+n[o+4]*r[1]+n[o+8]*r[2]+n[o+12];return t} function normalize3(a) { const len = len3(a); return scale3(a,len3<0.0001?1:1/len); } function scale3(a,b) { return [a[0]*b,a[1]*b,a[2]*b]; } function len3(a) { return Math.sqrt(dot3(a,a)); } function add3(a,b) { return [a[0]+b[0],a[1]+b[1],a[2]+b[2]]; } function sub3(a,b) { return [a[0]-b[0],a[1]-b[1],a[2]-b[2]]; } function dot3(a,b) { return a[0]*b[0]+a[1]*b[1]+a[2]*b[2]; } function cross3(a,b) { return [a[1]*b[2]-a[2]*b[1],a[2]*b[0]-a[0]*b[2],a[0]*b[1]-a[1]*b[0]]; } function mulf(v, f) { return [v[0]*f,v[1]*f,v[2]*f]; } // Timer const timers = {}; function timer_start(label) { timers[label] = Date.now(); } function timer_end(label) { var elapsed = (Date.now() - timers[label]) / 1000; console.log(`${label}: ${elapsed.toFixed(1)} s`); }