29:null 2a:["$","title",null,{"children":"CG HW 03: Golden Tree | Bairui Su | Observable"}] 2f:T1834,{ function matrix(init = M.identity()) { let _ = {}; let m = [init]; let top = m.length - 1; _.push = () => ((m[top + 1] = m[top].slice()), top++); _.add = (m1) => (m[top] = M.mxm(m[top], m1)); _.get = () => m[top]; _.pop = () => top > 0 && top--; return _; } function pencil(rad, len, matrix) { let s = 0.5; let m = M.mxm(matrix, M.scale(len, rad, rad)); return [ M.qxm(M.qxm(Shape.paraboloidX, M.turnZ(Math.PI)), m), M.qxm(Shape.tubeX, m), M.qxm(M.qxm(Shape.slabX, M.scale(1.62, 1, 1)), m) ]; } function branch(rad, len, rotateX, rotateZ, options) { let { links = [], dl, dr, angle, push, add, pop, get } = options; options.links = links; if (len < 0.2) return; push(); add(M.turnY(rotateX)); add(M.turnZ(rotateZ)); links.push(pencil(rad, len, get())); add(M.move(len + len * (dl + 0.0), 0, 0)); branch(rad * dr, len * dl, -angle, angle, options); const a2 = Math.acos(Math.cos(angle) ** 2); branch(rad * dr, len * dl, a2, -0, options); branch(rad * dr, len * dl, -angle, -angle, options); pop(); return options.links; } function tree(m, dr = 0.8, angle = Math.PI / 6) { return branch(0.12, 1, 0, Math.PI / 2, { dl: 0.66, dr, angle, ...matrix(m) }); } let links = tree(M.mxm(M.move(0, -0.7, 0), M.scale(0.4))); let NS = links.length; let startTime = Date.now() / 1000; let nor = (v) => { let s = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]); return [v[0] / s, v[1] / s, v[2] / s]; }; function update(gl, viewPoint = [0, 0, 7]) { let time = Date.now() / 1000 - startTime; let t = time * 5; let dy = Math.sin(t) * 0.05; let dr = 0.8 + 0.05 * Math.cos(t); let angle = 0.6 + 0.1 * Math.cos(t); let m = M.mxm(M.move(0, -0.7 + dy, 0), M.scale(0.4)); let links = tree(M.mxm(M.turnY(time), m), dr, angle); setUniform(gl, "1f", "uTime", time); setUniform(gl, "3fv", "uViewPoint", viewPoint); setUniform(gl, "Matrix4fv", "uQ", false, links.flat(Infinity)); setUniform(gl, "3fv", "uAmbient", [0.1, 0.05, 0]); setUniform(gl, "3fv", "uDiffuse", [1, 0.5, 0]); setUniform(gl, "4fv", "uSpecular", [1, 0.5, 0, 10]); setUniform(gl, "3fv", "uL", [nor([-0.35, 0.35, 0.35]), nor([1, -1, -0.5]) ].flat()); // prettier-ignore setUniform(gl, "3fv", "uLC", [0.5, 0.7, 1, 0.2, 0.15, 0.1]); } let NL = 2; let vertexShader = `\ #version 300 es in vec3 aPos; out vec3 vPos; void main() { gl_Position = vec4(aPos, 1.); vPos = aPos; }`; let fragmentShader = `\ #version 300 es precision highp float; uniform float uTime; uniform vec3 uViewPoint; uniform mat4 uQ[${NS * 3}]; uniform vec3 uC[1], uAmbient[1], uDiffuse[1], uL[${NL}], uLC[${NL}]; uniform vec4 uSpecular[1]; in vec3 vPos; out vec4 fragColor; vec3 rayEq(vec3 V, vec3 W, mat4 Q) { float A = Q[0].x, B = Q[1].x+Q[0].y, C = Q[2].x+Q[0].z, D = Q[3].x+Q[0].w, E = Q[1].y , F = Q[2].y+Q[1].z, G = Q[3].y+Q[1].w, H = Q[2].z , I = Q[3].z+Q[2].w, J = Q[3].w ; float a = A * W.x * W.x + B * W.x * W.y + C * W.z * W.x + E * W.y * W.y + F * W.y * W.z + H * W.z * W.z ; float b = 2. * A * V.x * W.x + B * (W.x * V.y + V.y * W.x) + C * (V.z * W.x + V.x * W.z) + D * W.x + 2. * E * V.y * W.y + F * (V.y * W.z + V.z * W.y) + G * W.y + 2. * H * V.z * W.z + I * W.z; float c = A * V.x * V.x + B * V.x * V.y + C * V.z * V.x + D * V.x + E * V.y * V.y + F * V.y * V.z + G * V.y + H * V.z * V.z + I * V.z + J; return vec3(a,b,c); } vec2 findRoots(vec3 eq) { float a = eq.x, b = eq.y, c = eq.z; vec2 t = vec2(-1.); float discr = b * b - 4. * a * c; if (discr >= 0.) t = vec2(-b - sqrt(discr), -b + sqrt(discr)) / (2. * a); return t; } vec3 normalQ(mat4 Q, vec3 P) { float A = Q[0].x, B = Q[1].x+Q[0].y, C = Q[2].x+Q[0].z, D = Q[3].x+Q[0].w, E = Q[1].y , F = Q[2].y+Q[1].z, G = Q[3].y+Q[1].w, H = Q[2].z , I = Q[3].z+Q[2].w, J = Q[3].w ; return normalize(vec3(2. * A * P.x + C * P.z + B * P.y + D, 2. * E * P.y + F * P.z + B * P.x + G, 2. * H * P.z + F * P.y + C * P.x + I)); } vec3 phong(vec3 N, vec3 L, vec3 W, vec3 diffuse, vec4 specular) { vec3 R = 2. * N * dot(N, L) - L; float highlight_dir = max(0.,-dot(R, W)); vec3 specular_cmp = specular.xyz * pow(highlight_dir, specular.w); vec3 diffuse_cmp = diffuse * max(0., dot(N, L)); return specular_cmp + diffuse_cmp; } void main() { fragColor = vec4(0.); vec3 V = uViewPoint; vec3 W = normalize(vPos-V); vec2 tN = vec2(1000., 1000.); for (int i = 0; i < ${NS}; i++) { vec2 tI = vec2(-1., 1000.); vec3 color = vec3(.0); for (int j = 0; j < 3; j++) { int m = i * 3 + j; vec2 tQ = findRoots(rayEq(V, W, uQ[m])); if (tQ.x > tI.x) { vec3 P = V + tQ.x * W; vec3 N = normalQ(uQ[m], P); vec3 shade = uAmbient[0]; vec3 diffuse = uDiffuse[0]; vec4 specular = uSpecular[0]; for (int l = 0 ; l < ${NL} ; l++) { shade += uLC[l] * phong(N, uL[l], W, diffuse, specular); } color = vec3(shade); tI.x = tQ.x; } if (tQ.y < tI.y) tI.y= tQ.y; } if (tI.x > 0. && tI.x < tI.y && tI.x < tN.x) { fragColor = vec4(sqrt(color), 1.); tN.x = tI.x; } } }`; let canvas = glStart({ vertexShader, fragmentShader, update, invalidation, style: { padding: 0 } }); return canvas; }30:T719,function glStart(scene) { const canvas = scene.canvas ?? document.createElement("canvas"); canvas.width = scene.width ?? 640; canvas.height = scene.height ?? 640; const gl = canvas.getContext("webgl2"); canvas.setShaders = function (vertexShader, fragmentShader) { gl.program = gl.createProgram(); function addshader(type, src) { let shader = gl.createShader(type); gl.shaderSource(shader, src); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) console.log("Cannot compile shader:", gl.getShaderInfoLog(shader)); gl.attachShader(gl.program, shader); } addshader(gl.VERTEX_SHADER, vertexShader); addshader(gl.FRAGMENT_SHADER, fragmentShader); gl.linkProgram(gl.program); if (!gl.getProgramParameter(gl.program, gl.LINK_STATUS)) console.log("Could not link the shader program!"); gl.useProgram(gl.program); gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([ -1, 1, 0, 1, 1, 0, -1, -1, 0, 1, -1, 0, -1, -1, 0, 1, 1, 0 ]), gl.STATIC_DRAW ); let aPos = gl.getAttribLocation(gl.program, "aPos"); gl.enableVertexAttribArray(aPos); gl.vertexAttribPointer(aPos, 3, gl.FLOAT, false, 0, 0); }; canvas.setShaders(scene.vertexShader.trim(), scene.fragmentShader.trim()); const timer = setInterval(function () { if (scene.update) scene.update(gl); gl.drawArrays(gl.TRIANGLES, 0, 6); }, 30); if (scene.invalidation) scene.invalidation.then(() => clearInterval(timer)); canvas.gl = gl; const style = scene.style ?? {}; style.background ??= "black"; style.padding ??= "30px"; for (const [key, value] of Object.entries(style)) { canvas.style[key] = value; } return canvas; }31:T788,M = { const m = {}; let c = (t) => Math.cos(t); let s = (t) => Math.sin(t); m.identity = () => [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1]; // prettier-ignore m.move = (x,y,z) => [1,0,0,0, 0,1,0,0, 0,0,1,0, x,y,z,1]; // prettier-ignore m.turnX = t => [1,0,0,0, 0,c(t),s(t),0, 0,-s(t),c(t),0, 0,0,0,1]; // prettier-ignore m.turnY = t => [c(t),0,-s(t),0, 0,1,0,0, s(t),0,c(t),0, 0,0,0,1]; // prettier-ignore m.turnZ = t => [c(t),s(t),0,0, -s(t),c(t),0,0, 0,0,1,0, 0,0,0,1]; // prettier-ignore m.scale = (x,y,z) => [x,0,0,0, 0,y??x,0,0, 0,0,z??x,0, 0,0,0,1]; // prettier-ignore m.perspective = (x,y,z) => [1,0,0,x, 0,1,0,y??x, 0,0,1,z??x, 0,0,0,1]; // prettier-ignore // Multiply two matrices. m.mxm = (a, b) => { let m = []; for (let c = 0; c < 16; c += 4) { for (let r = 0 ; r < 4 ; r++) m.push( a[r]*b[c] + a[r+4]*b[c+1] + a[r+8]*b[c+2] + a[r+12]*b[c+3] ); // prettier-ignore } return m; }; // Invert a matrix. m.inverse = (src) => { let dst = [], det = 0, cofactor = (c, r) => { let s = (i, j) => src[((c + i) & 3) | (((r + j) & 3) << 2)]; // prettier-ignore return (c+r & 1 ? -1 : 1) * ( (s(1,1)*(s(2,2)*s(3,3)-s(3,2)*s(2,3))) - (s(2,1)*(s(1,2)*s(3,3)-s(3,2)*s(1,3))) + (s(3,1)*(s(1,2)*s(2,3)-s(2,2)*s(1,3))) ); }; for (let n = 0 ; n < 16 ; n++) dst.push(cofactor(n >> 2, n & 3)); // prettier-ignore for (let n = 0 ; n < 4 ; n++) det += src[n] * dst[n << 2]; // prettier-ignore for (let n = 0 ; n < 16 ; n++) dst[n] /= det; // prettier-ignore return dst; }; m.qxm = (Q, M) => { let MI = m.inverse(M); return m.mxm(m.transpose(MI), m.mxm(Q, MI)); }; // prettier-ignore m.transpose = m => [ m[0],m[4],m[ 8],m[12], m[1],m[5],m[ 9],m[13], m[2],m[6],m[10],m[14], m[3],m[7],m[11],m[15] ]; return m; }32:T63b,/********************************** Sphere x*x + y*y + z*z - 1 <= 0 Paraboloid X x + y*y + z*z <= 0 Paraboloid Y x*x + y + z*z <= 0 Paraboloid Z x*x + y*y + z <= 0 Slab X x*x - 1 <= 0 Slab Y y*y - 1 <= 0 Slab Z z*z - 1 <= 0 Tube X y*y + z*z - 1 <= 0 Tube Y x*x + z*z - 1 <= 0 Tube Z x*x + y*y - 1 <= 0 All space -1 <= 0 **********************************/ Shape = ({ // prettier-ignore sphere: [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1 ], // prettier-ignore paraboloidX: [ 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, ], // prettier-ignore paraboloidY: [ 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, ], // prettier-ignore paraboloidZ: [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, ], // prettier-ignore slabX: [ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, -1 ], // prettier-ignore slabY: [ 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, -1 ], // prettier-ignore slabZ: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1 ], // prettier-ignore tubeX: [ 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1 ], // prettier-ignore tubeY: [ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1 ], // prettier-ignore tubeZ: [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, -1 ], // prettier-ignore space: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, -1 ] })33:[] 2d:{"id":"ab8b35832fd405ec","slug":null,"title":"CG HW 03: Golden Tree","thumbnail":"4499a94f8ea43d7212fa0c7427aa4c2eec510d16fbffdc0e995c8a18b85b93e6","access_level":"public","create_time":"$D2025-11-03T19:15:37.024Z","update_time":"$D2025-11-04T04:43:28.828Z","view_time":null,"first_public_time":"$D2025-11-04T04:34:05.275Z","fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"3e931206c18366b5","login":"pearmini","name":"Bairui Su","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":"starter_2024"},"version":883,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"76ec39dbb0bd8e40","login":"pearmini","name":"Bairui SU","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":null}],"members":[{"type":"team","id":"3e931206c18366b5","login":"pearmini","name":"Bairui Su","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":"starter_2024","role":"editor"},{"type":"individual","id":"76ec39dbb0bd8e40","login":"pearmini","name":"Bairui SU","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"CG HW 03: Golden Tree","cells":[{"id":0,"value":"# CG HW 03: Golden Tree\n\n- Raytrace to Quadrics\n- Phong Reflectance\n- Transformations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":322,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"setUniform = (gl, type, name, a, b, c) =>\n gl[\"uniform\" + type](gl.getUniformLocation(gl.program, name), a, b, c)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":287,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":238,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"