2a:null 2b:["$","title",null,{"children":"Hello @thi.ng/webgl | Zihou Ng | Observable"}] 30:T4cf,render = { gl.clearColor(0.3, 0.3, 0.3, 1); gl.viewport(0, 0, 256, 256); fbos.heightMap.bind(); modelHeightMap.uniforms.time = now % 1e6 * 5e-6; webgl.draw(modelHeightMap); fbos.heightMap.unbind(); gl.viewport(0, 0, 1024, 512); fbos.gColor.bind(); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); Object.assign(modelSphere.uniforms, omit(uniforms, ['invProj'])); webgl.draw(modelSphere); fbos.gColor.unbind(); fbos.gNormal.bind(); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); Object.assign(modelNormal.uniforms, pick(uniforms, ['proj', 'view'])); webgl.draw(modelNormal); fbos.gNormal.unbind(); fbos.ssao.bind(); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); Object.assign(modelSSAO.uniforms, pick(uniforms, ["proj","invProj"])); webgl.draw(modelSSAO); fbos.ssao.unbind(); fbos.blur.bind(); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); webgl.draw(modelBlur); fbos.ssao.unbind(); gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); webgl.draw(modelFinal); // webgl.draw(modelDepth); // modelTex.textures = [textures.blur]; // webgl.draw(modelTex); }31:T4f5,textures = ({ heightMap: webgl.defTexture(gl, { width: 256, height: 256, format: gl.RGBA, filter: gl.LINEAR, wrap: gl.REPEAT, image: null }), gColor: webgl.defTexture(gl, { width: 1024, height: 512, format: gl.RGBA, type: gl.UNSIGNED_BYTE, filter: gl.NEAREST, wrap: gl.CLAMP_TO_EDGE, image: null }), gDepth: webgl.defTexture(gl, { width: 1024, height: 512, format: gl.DEPTH_COMPONENT, type: gl.UNSIGNED_SHORT, filter: gl.NEAREST, image: null }), gNormal: webgl.defTexture(gl, { width: 1024, height: 512, format: gl.RGBA, filter: gl.NEAREST, wrap: gl.CLAMP_TO_EDGE, image: null }), ssao: webgl.defTexture(gl, { width: 1024, height: 512, format: gl.RGBA, type: gl.UNSIGNED_BYTE, filter: gl.NEAREST, wrap: gl.CLAMP_TO_EDGE, image: null }), blur: webgl.defTexture(gl, { width: 1024, height: 512, format: gl.RGBA, type: gl.UNSIGNED_BYTE, filter: gl.NEAREST, wrap: gl.CLAMP_TO_EDGE, image: null }), noise: webgl.defTexture(gl, { width: 4, height: 4, format: gl.RGB, filter: gl.NEAREST, wrap: gl.REPEAT, image: new Float32Array(Array.from({ length: 4 * 4 * 3 }, rand11)), type: gl.FLOAT }) })32:T5c4,camera = Generators.observe(next => { const radius = Math.min(size[0], size[1]); const center = v.mulN([], size, 0.5); const spherePos = (out, pos) => { v.divN(null, v.setC3(out, pos[0] - center[0], -(pos[1] - center[1]), 0), radius); const mag = v.magSq(out); return mag > 1.0 ? v.normalize(null, out) : (out[2] = Math.sqrt(1.0 - mag), out); } const elm = d3.select(gl.canvas); const target = [], camUp = [], viewDir = []; const down = [], delta = []; const side = [], axis = []; const pos = [], up = [], vd = []; const rot = []; let camera = { pos: [0, 0, 4], target: v.ZERO3, up: v.Y3 }; next(camera); const dragStart = () => { spherePos(down, [d3.event.x, d3.event.y]); v.set(target, camera.target); v.set(camUp, camera.up); v.sub(viewDir, camera.pos, target); d3.event.on('drag', () => { v.sub(null, spherePos(delta, [d3.event.x, d3.event.y]), down); v.mulN(null, v.normalize(null, v.cross3(side, camUp, viewDir)), delta[0]); v.normalize(null, v.cross3(null, v.add(null, v.mulN(axis, camUp, delta[1]), side), viewDir)); m.rotationAroundAxis33(rot, axis, v.magSq(delta) * 5); m.mulV(up, rot, camUp); v.add(pos, target, m.mulV(vd, rot, viewDir)); next(camera = { up, pos, target }); }); } elm.call( d3.drag() .subject(() => [d3.event.x, d3.event.y]) .on('start', dragStart) ); return () => elm.on('drag', null); });33:T91b,modelHeightMap = webgl.compileModel(gl, { ...webgl.defQuadModel(), shader: webgl.defShader(gl, { ...webgl.FX_SHADER_SPEC_UV, fs: ` float magSq2(in vec2 _s14) { return dot(_s14, _s14); } vec3 permute3(in vec3 _s26) { return mod((_s26 * ((_s26 * 34.0) + 1.0)), 289.0); } float snoise2(in vec2 _s41) { vec4 _s42 = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439); vec2 _s43 = floor((_s41 + dot(_s41, _s42.yy))); vec2 _s44 = ((_s41 - _s43) + dot(_s43, _s42.xx)); vec2 _s45 = ((_s44.x > _s44.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0)); vec4 _s46 = ((_s44.xyxy + _s42.xxzz) - vec4(_s45, 0.0, 0.0)); _s43 = mod(_s43, 289.0); vec3 _s47 = permute3((permute3((vec3(0.0, _s45.y, 1.0) + _s43.y)) + (vec3(0.0, _s45.x, 1.0) + _s43.x))); vec3 _s48 = max((0.5 - vec3(magSq2(_s44), magSq2(_s46.xy), magSq2(_s46.zw))), vec3(0.0)); _s48 = (_s48 * _s48); _s48 = (_s48 * _s48); vec3 _s49 = ((2.0 * fract((_s47 * _s42.www))) - 1.0); vec3 _s4a = (abs(_s49) - 0.5); vec3 _s4b = floor((_s49 + 0.5)); vec3 _s4c = (_s49 - _s4b); _s48 = (_s48 * (1.79284291400159 - (0.85373472095314 * ((_s4c * _s4c) + (_s4a * _s4a))))); vec3 _s4d = vec3(((_s4c.x * _s44.x) + (_s4a.x * _s44.y))); _s4d.yz = ((_s4c.yz * _s46.xz) + (_s4a.yz * _s46.yw)); return (130.0 * dot(_s48, _s4d)); } float additive(in vec2 _s7j, in vec2 _s7k, in float _s7l) { float _s7m = 0.0; float _s7n = 0.5; for(float _s7o = 0.0; (_s7o < 4.0); (_s7o++)) { _s7m = (_s7m + (_s7n * snoise2((_s7j + (_s7o * _s7k))))); _s7n = (_s7n * _s7l); _s7j = (_s7j * 2.0); } return _s7m; } void main() { float _s0 = additive(((v_uv + time) * float(scale)), vec2(shift), float(decay)); fragColor = vec4(vec3(((_s0 * 0.5) + 0.5)), 1.0); } `, // fs: (gl, unis, ins, outs) => [ // ast.defMain(() => { // let v; // return [ // (v = ast.sym( // astLib.additive("vec2", astLib.snoise2, 4)( // ast.mul(ast.add(ins.v_uv, unis.time), ast.float(unis.scale)), // ast.vec2(unis.shift), // ast.float(unis.decay)) // )), // ast.assign(outs.fragColor, ast.vec4(ast.vec3(astLib.fit1101(v)),1)) // ]; // }) // ], uniforms: { time: 'float', scale: ["float", 20], shift: ["float", 0], decay: ["float", 1.5], } }) })34:T8fd,modelSphere = webgl.compileModel(gl, { ...geometry, shader: webgl.defShader(gl, { vs: ` void main() { float v = texture2D(heightMap, uv).x; vec4 pos = view * model * vec4(position * (v * 0.8 + 0.5), 1.0); v_color = mix(albedo, vec3(0.792, 0.149, 0.149), v); v_uv = uv; v_normal = normalize((normalMat * vec4(normal, 0.0)).xyz); v_light = (view * vec4(lightPos, 1.0) - pos).xyz; v_eye = -pos.xyz; gl_Position = (proj * pos); } `, fs: ` vec3 fresnelSchlick(vec3 f0, float u) { return f0 + (1.0 - f0) * pow(1.0 - u, 5.0); } float blinnPhong(vec3 n, vec3 h, float roughness) { float m = 2.0 / (roughness * roughness) - 2.0; return (m + 2.0) * pow(max(dot(n, h), 0.0), m) / 2.0; } void main() { vec3 normal = normalize(v_normal); vec3 light = normalize(v_light); vec3 viewDir = normalize(v_eye); vec3 halfVec = normalize(light + viewDir); float NdotL = clamp(dot(normal, light), 0.0, 1.0); float NdotV = clamp(dot(normal, viewDir), 0.0, 1.0); float LdotH = clamp(dot(light, halfVec), 0.0, 1.0); vec3 diff = v_color; vec3 F = fresnelSchlick(mix(f0, diff, metalic), LdotH); float D = blinnPhong(normal, halfVec, roughness); vec3 spec = (F * D) / 4.0; vec3 kD = (vec3(1.0) - F) * (1.0 - metalic); vec3 color = NdotL * lightColor * (spec + kD * diff) + ambColor * diff; gl_FragColor = vec4(color, 1.0); }`, declPrefixes: { v: "v_" }, attribs: { position: "vec3", normal: "vec3", uv: "vec2" }, varying: { color: "vec3", normal: "vec3", eye: "vec3", light: "vec3", uv: "vec2" }, uniforms: { model: ["mat4", m.identity44([])], view: "mat4", proj: "mat4", normalMat: ["mat4", webgl.autoNormalMatrix2()], lightPos: ["vec3", [0, 0, 15]], roughness: ["float", 0.5], f0: ["vec3", [0.1, 0.75, 1.0]], albedo: ["vec3", [0.5,0.0,0.35]], metalic: ["float", 0.0], lightColor: ["vec3", v.ONE3], ambColor: ["vec3", [0.5,0.5,0.5]], heightMap: ["sampler2D", 0], }, state: { depth: true, cull: true, blend: true, blendFn: [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA] }, ext: { OES_standard_derivatives: true } }), textures: [ textures.heightMap, ], });35:T9e3,modelSSAO = webgl.compileModel(gl, { ...webgl.defQuadModel(), shader: webgl.defShader(gl, { ...webgl.FX_SHADER_SPEC_UV, pre: '#define KERNEL_SIZE 64', fs: ` float getViewZ(float depth) { return (near * far) / ((far - near) * depth - far); } vec3 getViewPosition(vec2 pos, float depth, float viewZ) { float clipW = proj[2][3] * viewZ + proj[3][3]; vec4 clipPosition = vec4((vec3(pos, depth) - 0.5) * 2.0, 1.0); clipPosition *= clipW; // unprojection return (invProj * clipPosition).xyz; } float viewZToOrthographicDepth(float viewZ) { return ( viewZ + near ) / ( near - far ); } float getLinearDepth(vec2 screenPosition) { float depth = texture2D(gDepth, screenPosition).x; float viewZ = getViewZ(depth); return viewZToOrthographicDepth(viewZ); } void main() { float depth = texture2D(gDepth, v_uv).x; float viewZ = getViewZ(depth); vec3 viewPos = getViewPosition(v_uv, depth, viewZ); vec3 viewNormal = texture2D(gNormal, v_uv).xyz; vec3 random = texture2D(noise, v_uv * screen / 4.0).xyz; vec3 tangent = normalize(random - viewNormal * dot(random, viewNormal)); vec3 bitangent = cross(viewNormal, tangent); mat3 kernelMatrix = mat3(tangent, bitangent, viewNormal); float occlusion = 0.0; for (int i=0; i < KERNEL_SIZE; i++) { vec3 sampleVector = kernelMatrix * kernel[i]; vec3 samplePoint = viewPos + (sampleVector * kernelRadius); vec4 samplePointNDC = proj * vec4(samplePoint, 1.0); samplePointNDC /= samplePointNDC.w; vec2 samplePointUv = samplePointNDC.xy * 0.5 + 0.5; float realDepth = getLinearDepth(samplePointUv); float sampleDepth = viewZToOrthographicDepth(samplePoint.z); float delta = sampleDepth - realDepth; if (delta > minDist && delta < maxDist) { occlusion += 1.0; } } occlusion = clamp(occlusion / float(KERNEL_SIZE), 0.0, 1.0); gl_FragColor = vec4(vec3(1.0 - occlusion * strength), 1.0); } `, uniforms: { gDepth: ["sampler2D", 0], gNormal: ["sampler2D", 1], noise: ["sampler2D", 2], near: ["float", nearFar[0]], far: ["float", nearFar[1]], screen: ["vec2", size], kernel: ["vec3[]", kernel.length, new Float32Array(kernel.flat(1))], kernelRadius: ["float", 0.07], minDist: ["float", 0], maxDist: ["float", 1], strength: ["float", 0.8], proj: "mat4", invProj: "mat4", }, ext: { OES_standard_derivatives: true } }), textures: [ textures.gDepth, textures.gNormal, textures.noise, ] })36:T4e8,icosphere = iter => { const t = (1 + Math.sqrt(5)) / 2; const positions = [ [-1, t, 0],[1, t, 0],[-1,-t, 0],[ 1,-t, 0], [ 0,-1, t],[0, 1, t],[ 0,-1,-t],[ 0, 1,-t], [ t, 0,-1],[t, 0, 1],[-t, 0,-1],[-t, 0, 1], ]; const faces = [ [0,11, 5],[0, 5, 1],[ 0, 1, 7],[ 0, 7,10],[0,10,11], [1, 5, 9],[5,11, 4],[11,10, 2],[10, 7, 6],[7, 1, 8], [3, 9, 4],[3, 4, 2],[ 3, 2, 6],[ 3, 6, 8],[3, 8, 9], [4, 9, 5],[2, 4,11],[ 6, 2,10],[ 8, 6, 7],[9, 8, 1], ]; const subdivide = () => { const cache = {}; const getMidPoint = (v1, v2) => { const key = v1 < v2 ? `${v1},${v2}` : `${v2},${v1}`; if (!cache[key]) cache[key] = positions.push(v.mixN([], positions[v1], positions[v2], 0.5)) - 1; return cache[key]; } const l = faces.length; for (let i = 0; i < l; i++) { const f = faces[i]; const a = getMidPoint(f[0], f[1]), b = getMidPoint(f[1], f[2]), c = getMidPoint(f[2], f[0]); faces.push([f[1], b, a]); faces.push([f[2], c, b]); faces.push([a, b, c]); f[1] = a; f[2] = c; } } for (let i = 0; i < iter; i++) subdivide(); positions.forEach(p => v.normalize(null, p)); return { faces, positions }; }37:T6d1,generateUv = { const d1 = [], d2 = []; const isSeam = (a, b, c) => { v.sub(d1, b, a); v.sub(d2, c, a); return v.cross2(d1, d2) < 0; } const MIN = 0.25, MAX = 0.75; return ({ positions, faces }) => { const uvs = positions.map(([x, y, z]) => [ 0.5 + Math.atan2(z, x) / (2 * Math.PI), 0.5 - Math.asin(y) / Math.PI ]); const cache = {}; const duplicate = i => { if (!cache[i]) { uvs.push(v.copy(uvs[i])); cache[i] = positions.push(v.copy(positions[i])) - 1; } return cache[i]; } for (const f of faces) { const uv0 = uvs[f[0]], uv1 = uvs[f[1]], uv2 = uvs[f[2]]; if (isSeam(uv0, uv1, uv2)) { if (uv0[0] < MIN) f[0] = duplicate(f[0]); if (uv1[0] < MIN) f[1] = duplicate(f[1]); if (uv2[0] < MIN) f[2] = duplicate(f[2]); } } for (const f of faces) { const uv0 = uvs[f[0]], uv1 = uvs[f[1]], uv2 = uvs[f[2]]; if (Math.max(uv0[0], uv1[0], uv2[0]) > MAX && Math.min(uv0[0], uv1[0], uv2[0]) < MIN) { if (uv0[0] < MIN) uv0[0] += 1 if (uv1[0] < MIN) uv1[0] += 1 if (uv2[0] < MIN) uv2[0] += 1 } } const north = positions.findIndex(p => Math.abs(p[1] - 1) < 1e-6); const south = positions.findIndex(p => Math.abs(p[1] - -1) < 1e-6); if (north || south) { for (const f of faces) { if (f[0] == north || f[0] == south) { const idx = f[0] == north ? north : south; // uvs.push([(uvs[f[1]][0] + uvs[f[2]][0]) * 0.5, uvs[idx][1]]); uvs.push([0.5, uvs[idx][1]]); f[0] = positions.push(v.copy(positions[idx])) - 1; } } } return { faces, positions, uvs } } }38:[] 2e:{"id":"ec632978a8e8a100","slug":"hello-thi-ng-webgl","title":"Hello @thi.ng/webgl","thumbnail":"50954b251b72f85cb35804c0317148de26ad8a143087619823458dbd704a86a2","access_level":"public","create_time":"$D2019-07-09T02:22:57.693Z","update_time":"$D2022-01-29T09:30:16.225Z","view_time":null,"first_public_time":"$D2019-07-20T12:06:22.663Z","has_unpublished_edits":null,"fork":false,"stars":13,"starred":false,"owner":{"type":"team","id":"7fad80bf128915e9","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":"starter_2024"},"version":3650,"publish_version":3650,"role":null,"authored":false,"authors":[{"type":"individual","id":"dbb85afd665c9e5e","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":null}],"members":[{"type":"individual","id":"dbb85afd665c9e5e","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"9bd8b2489631aa82","slug":"webgl","title":"WebGL","owner":{"id":"7fad80bf128915e9","login":"stwind","name":"Zihou Ng"}},"type":"notebook","body":{"titling":"auto","title":"Hello @thi.ng/webgl","cells":[{"id":0,"value":"md`# Hello @thi.ng/webgl`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3234,"value":"md`Having fun with [@thi.ng/webgl](https://github.com/thi-ng/umbrella/tree/master/packages/webgl) and [@thi.ng/shader-ast](https://github.com/thi-ng/umbrella/tree/master/packages/shader-ast). Deforming an icosphere with a generated height map, with SSAO post-processing.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"viewof gl = {\n const canvas = DOM.canvas(width, 500);\n const gl = canvas.value = canvas.getContext('webgl');\n gl.getExtension(\"OES_texture_float\");\n gl.getExtension(\"WEBGL_depth_texture\");\n gl.getExtension(\"WEBGL_draw_buffers\");\n \n // webgl.setLogger(new api.ConsoleLogger(\"webgl\", api.LogLevel.DEBUG));\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3226,"value":"md`## Setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"uniforms = {\n const proj = m.perspective([], 45, gl.drawingBufferWidth / gl.drawingBufferHeight, nearFar[0], nearFar[1]);\n \n return {\n view: m.lookAt([], camera.pos, camera.target, camera.up),\n proj,\n invProj: m.invert([], proj)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"fbos = ({\n heightMap: webgl.defFBO(gl, {\n tex: [textures.heightMap],\n }),\n gColor: webgl.defFBO(gl, {\n tex: [textures.gColor],\n depth: textures.gDepth \n }),\n gNormal: webgl.defFBO(gl, {\n tex: [textures.gNormal],\n depth: webgl.defRBO(gl, { width: 1024, height: 512 })\n }),\n ssao: webgl.defFBO(gl, {\n tex: [textures.ssao]\n }),\n blur: webgl.defFBO(gl, {\n tex: [textures.blur]\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2164,"value":"geometry = toModelSpec(generateUv(icosphere(3)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2397,"value":"kernel = Array.from({ length: 64 }, (_, i) => v.normalize(\n null, \n [rand11(), rand11(), Math.random()],\n 0.1 + (1 - 0.1) * (i / 64) ** 2\n))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1686,"value":"md`### Models`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2144,"value":"modelNormal = webgl.compileModel(gl, {\n ...geometry,\n shader: webgl.defShader(gl, {\n vs: `\nvoid main() {\n v_normal = normalize((normalMat * vec4(normal, 0.0)).xyz);\n float v = texture2D(heightMap, uv).x * 0.8 + 0.5;\n vec4 pos = view * model * vec4(position * v, 1.0);\n gl_Position = proj * pos;\n}`,\n fs: `\nvoid main() {\n gl_FragColor = vec4(normalize(v_normal), 1.0);\n}`,\n declPrefixes: {\n v: 'v_'\n },\n attribs: {\n position: \"vec3\",\n normal: \"vec3\",\n uv: \"vec2\"\n },\n varying: {\n normal: \"vec3\",\n },\n uniforms: {\n model: [\"mat4\", m.identity44([])],\n view: \"mat4\",\n proj: \"mat4\",\n normalMat: [\"mat4\", webgl.autoNormalMatrix2()],\n \n heightMap: [\"sampler2D\", 0],\n },\n state: {\n depth: true,\n cull: true,\n }\n }),\n textures: [\n textures.heightMap,\n ],\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2329,"value":"modelDepth = webgl.compileModel(gl, {\n ...webgl.defQuadModel(),\n shader: webgl.defShader(gl, {\n ...webgl.FX_SHADER_SPEC_UV,\n fs: `\nvoid main() {\n float depth = texture2D(tex, v_uv).x * 2.0 - 1.0;\n float c = (2.0 * near) / (far + near - depth * (far - near));\n gl_FragColor = vec4(vec3(c), 1.0);\n}`,\n uniforms: { \n tex: \"sampler2D\",\n near: [\"float\", nearFar[0]],\n far: [\"float\", nearFar[1]]\n },\n }),\n textures: [textures.gDepth]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2395,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2659,"value":"modelBlur = webgl.compileModel(gl, {\n ...webgl.defQuadModel(),\n shader: webgl.defShader(gl, {\n ...webgl.FX_SHADER_SPEC_UV,\n fs: `\nvoid main() {\n vec2 texelSize = (1.0 / screen);\n float result = 0.0;\n\n for (int i=-2; i<=2; i++) {\n for (int j=-2; j<=2; j++) {\n vec2 offset = vec2(float(i), float(j)) * texelSize;\n result += texture2D(tex, v_uv+offset).r;\n }\n }\n\n gl_FragColor = vec4(vec3(result / (5.0 * 5.0)), 1.0);\n}\n`,\n uniforms: {\n tex: \"sampler2D\",\n screen: [\"vec2\", size]\n }\n }),\n textures: [textures.ssao]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2688,"value":"modelFinal = webgl.compileModel(gl, {\n ...webgl.defQuadModel(),\n shader: webgl.defShader(gl, {\n ...webgl.FX_SHADER_SPEC_UV,\n fs: `\nvoid main() {\n vec4 color = texture2D(gColor, v_uv);\n float occ = pow(texture2D(occlusion, v_uv).x, power);\n gl_FragColor = vec4(mix(vec3(0.0), color.xyz, occ), 1.0);\n}`,\n uniforms: { \n gColor: [\"sampler2D\", 0],\n occlusion: [\"sampler2D\", 1],\n power: [\"float\", 1],\n },\n }),\n textures: [\n textures.gColor,\n textures.blur\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"modelTex = webgl.compileModel(gl, {\n ...webgl.defQuadModel(),\n shader: webgl.defShader(gl, webgl.FX_SHADER_SPEC_UV),\n textures: [textures.height]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"md`### Geometries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"vertexNormals = (faces, positions) => {\n const normals = Array.from({ length: positions.length }, () => [0,0,0]);\n for (const [x, y, z] of faces) {\n const norm = v.orthoNormal3([], positions[x], positions[y], positions[z], false); \n v.add(normals[x], normals[x], norm);\n v.add(normals[y], normals[y], norm);\n v.add(normals[z], normals[z], norm);\n }\n normals.forEach(norm => v.normalize(null, norm));\n return normals;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"toModelSpec = ({ positions, faces, uvs }) => ({\n attribs: {\n position: { data: new Float32Array(positions.flat(1)) },\n normal: { data: new Float32Array(vertexNormals(faces, positions).flat(1)) },\n uv: { data: new Float32Array(uvs.flat(1)), size: 2 }\n },\n indices: { data: new Uint16Array(faces.flat(1)) },\n num: faces.length * 3,\n uniforms: {},\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3577,"value":"rand11 = d3.randomUniform(-1,1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2224,"value":"pick = (obj, keys) => Object.fromEntries(Object.entries(obj).filter(([k]) => keys.includes(k)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2415,"value":"omit = (obj, keys) => Object.fromEntries(Object.entries(obj).filter(([k]) => !keys.includes(k)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2372,"value":"nearFar = [1, 5]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"size = [gl.drawingBufferWidth, gl.drawingBufferHeight]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"webgl = require('https://bundle.run/@thi.ng/webgl@1.0.5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"m = require('https://bundle.run/@thi.ng/matrices@0.6.7')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"v = require('https://bundle.run/@thi.ng/vectors@4.6.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1392,"value":"md`## References`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1395,"value":"md`\n* [UV mapping a sphere triangle mesh - MFT Development](http://mft-dev.dk/uv-mapping-sphere/)\n* [glo-js/primitive-icosphere](https://github.com/glo-js/primitive-icosphere)\n* [スクリーンスペース・アンビエント・オクルージョン（SSAO） - Qiita](https://qiita.com/mebiusbox2/items/2a18994a5caa6d584099)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1"}} 2f:"$2e:body"