25:["$","title",null,{"children":"Plotting surfaces in the shader | Anand Thakker | Observable"}] 4b: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 } }4c: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); } ` } }4d:[] 47:{"id":"6482ffdf969db522","slug":"webgl-surface","title":"Plotting surfaces in the shader","thumbnail":"c9bcc87dff8ce2fc138ef759736a6b6f306625c221f9bf4412d16985c0161ab1","access_level":"public","create_time":"$D2021-03-19T18:10:43.700Z","update_time":"$D2021-03-23T15:19:21.400Z","view_time":null,"first_public_time":"$D2021-03-19T18:53:42.437Z","has_unpublished_edits":null,"fork":{"id":"311085c3e28cd2bf","slug":"simple-webgl-example","title":"Simple WebGL example","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":2442,"publish_version":2442,"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":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Plotting surfaces in the shader","cells":[{"id":0,"value":"md`# Plotting surfaces in the shader\n\nWe set up a uniform grid over [0,1]x[0,1] (see \"geometry\") as attribute data. Then for each expression in the \"expressions\" list below, we compile a vertex shader that transforms that grid into a surface using that expression.\n\nThe expressions depend on slider values and the current frame, which are passed in, very cheaply, as uniforms to each draw call.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2047,"value":"toc({ headers: 'h2', hideStartingFrom: 'Notebook plumbing', title: 'Contents'})","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":2377,"value":"md`(Note: these sliders are generated based on the ${linkToHeading(\"uniforms\")} definitions below.)`","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`