34:["$","title",null,{"children":"[Performance Testing Fork] Plotting surfaces in the shader | Anand Thakker | Observable"}] 3c:T876,expressions = { const out = []; const min = -1; const max = 1; const z = '-1.0'; for (let i = 0; i < N; i++) { for (let j = 0; j < N; j++) { const x = Number(min + i/(N - 1) * (max - min)).toFixed(5); const y = Number(min + j/(N - 1) * (max - min)).toFixed(5); const s1 = 60 * (3 + Math.floor(Math.random() * 5)) * (Math.random() > 0.5 ? -1 : 1) const s2 = 60 * (3 + Math.floor(Math.random() * 5)) * (Math.random() > 0.5 ? -1 : 1) out.push({ color: [1, 0, 1], locals: { // For convenience and performance, these get turned into local variables like: // float NAME = EXPR; // before the actual expression is computed F: Math.floor(Math.random() * 30 + 1).toFixed(1), t: `frame / ${s1.toFixed(1)}`, r_wave: 'r * (1.0 + a*sin(F * TAU * (u + t)))', A: 'R + r_wave * cos(TAU * v)', x, y, z }, expr: `(A * sin(TAU * u) + x, r_wave * sin(TAU * v) + y, A * cos(TAU * u) + z)` }, { // disabled: true, color: [.3, 0, 1], locals: { F: Math.floor(Math.random() * 30 + 1).toFixed(1), t: `frame / ${s2.toFixed(1)}`, r_wave: 'r * (1.0 + a*sin(F * TAU * (u + t)))', A: 'R + r_wave * cos(TAU * v)', x, y, z }, expr: `(r_wave * sin(TAU * v) + x, A * cos(TAU * u) + y, A * sin(TAU * u) - R + z)` }) } } return out; } /* [{ color: [1, 0, 1], locals: { // For convenience and performance, these get turned into local variables like: // float NAME = EXPR; // before the actual expression is computed F: '5.0', t: 'frame / 180.0', r_wave: 'r * (1.0 + a*sin(F * TAU * (u + t)))', A: 'R + r_wave * cos(TAU * v)', }, expr: `(A * sin(TAU * u), r_wave * sin(TAU * v), A * cos(TAU * u))` }, { // disabled: true, color: [.3, 0, 1], locals: { F: '10.0', t: 'frame / 300.0', r_wave: 'r * (1.0 + a*sin(F * TAU * (u + t)))', A: 'R + r_wave * cos(TAU * v)' }, expr: `(r_wave * sin(TAU * v), A * cos(TAU * u), A * sin(TAU * u) - R)` }] */3d:T762,function buildGeometry(w, h) { // Just make a flat grid const min = 0; const max = 1; const positions = []; const faces = []; const edges = []; const normalVisualization = { positions: [], faces: [], offsets: [] } const du = (max - min) / (w - 1); const dv = (max - min) / (h - 1); for (let i = 0; i < w; i++) { for (let j = 0; j < h; j++) { // index = i * h + j const p = [min + i * du, min + j * dv]; positions.push(p); const n1 = normalVisualization.positions.length; const [n2, n3, n4] = [n1 + 1, n1 + 2, n1 + 3]; normalVisualization.positions.push(p, p, p, p); /* n1 n3 | | *---------------> | | n2 n4 */ // represents offsets that the vertex shader should compute // in [u, normal] directions normalVisualization.offsets.push([1, 0], [-1, 0], [1, 1], [-1, 1]); normalVisualization.faces.push([n1, n3, n4], [n1, n4, n2]); } } const faceRows = w - 1; const faceCols = h - 1; for (let i = 0; i < faceRows; i++) { for (let j = 0; j < faceCols; j++) { /* C D (i+1)h+j___(i+1)h+j+1 | /| | / | |/ | i*h+j---i*h+j+1 A B */ const iA = i*h+j; // 0, 1, 20, 21 const iB = iA + 1; const iC = (i + 1) * h + j; const iD = iC + 1; if (iD > positions.length) { throw new RangeError(`Index is too large: ${iD}`) } faces.push([iA, iB, iD]); faces.push([iA, iD, iC]); edges.push([iA, iB]); edges.push([iB, iD]); edges.push([iD, iA]); edges.push([iA, iC]); edges.push([iC, iD]); } } return { positions, faces, edges, normalVisualization } }3e:T5d2,normalsSpec = (compiledExpression) => function normalsSpec(regl) { return { attributes: { a_position: buffers.normalPositions, a_offset: buffers.normalOffsets }, uniforms: { // regl.prop says that we'll take these as parameters at draw time u_world: regl.prop('world'), u_projection: regl.prop('projection'), u_lightDirection: [1, 1, 0], u_normalLength: (_, props) => props.controls.normalLength, ...uniformInfo.uniformPropGetters }, elements: buffers.normalFaces, vert: ` precision mediump float; attribute vec2 a_position; attribute vec2 a_offset; uniform mat4 view, projection, u_viewInverseTranspose; uniform float u_normalLength; varying vec3 v_color; ${compiledExpression.glsl} void main() { vec3 pos = evaluate(a_position); vec3 normal = evaluateNormal(a_position, pos); vec3 tangent = evaluateTangent(a_position, pos); float normalFactor = u_normalLength; float tangentFactor = 0.1 * normalFactor; float normalOffset = normalFactor * a_offset[1]; float tangentOffset = normalOffset > 0.0 ? 0.0 : tangentFactor * a_offset[0]; pos += tangentOffset * tangent + normalOffset * normal; // Multiply our transformation matrices to set the vertex's position in screen space. gl_Position = projection * view * vec4(pos, 1.0); v_color = vec3(abs(a_offset), 0.5); } `, frag: ` precision mediump float; varying vec3 v_color; void main() { gl_FragColor = vec4(v_color, 1.0); } ` } }3f:[] 38:{"id":"968fd461ac670ff7","slug":"performance-testing-fork-plotting-surfaces-in-the-shader","title":"[Performance Testing Fork] Plotting surfaces in the shader","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2021-03-21T23:15:53.807Z","update_time":"$D2021-03-22T12:50:38.260Z","view_time":null,"first_public_time":"$D2021-03-22T00:21:24.746Z","has_unpublished_edits":null,"fork":{"id":"6482ffdf969db522","slug":"webgl-surface","title":"Plotting surfaces in the shader","owner":{"id":"4dafab78a0ba3c55","login":"anandthakker","name":"Anand Thakker"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4dafab78a0ba3c55","login":"anandthakker","name":"Anand Thakker","avatar_url":"https://avatars-next.observableusercontent.com/a797ebd766058f350bfa8bfc73d818d72c58831289f057450e42f73243402cdd","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":2400,"publish_version":2400,"role":null,"authored":false,"authors":[{"type":"individual","id":"62e1d83104678cb6","login":"anandthakker","name":"Anand Thakker","avatar_url":"https://avatars-next.observableusercontent.com/a797ebd766058f350bfa8bfc73d818d72c58831289f057450e42f73243402cdd","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"62e1d83104678cb6","login":"anandthakker","name":"Anand Thakker","avatar_url":"https://avatars-next.observableusercontent.com/a797ebd766058f350bfa8bfc73d818d72c58831289f057450e42f73243402cdd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"[Performance Testing Fork] Plotting surfaces in the shader","cells":[{"id":0,"value":"md`# [Performance Testing Fork] Plotting surfaces in the shader\n\nFrame rate: ${drawing.fps}\n\nThe ${N * N * 2} surfaces are each being computed by a separate expression mapping (u, v, time) => (x, y, z).\n\nEach one's being plotted with ${controls.detail ** 2} samples, for a total of ${N * N * 2 * controls.detail ** 2} vertices.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1705,"value":"sliders.view","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1072,"value":"animationCanvas = html`