2d:null 2e:["$","title",null,{"children":"3D WebGL Particles Over an SVG Path | Corey Guastini | Observable"}] 33:T470,md`This notebook renders particles in 3D with initial positions generated over a path defined in an SVG file. The particle positions are calculated on the CPU but rendering happens on the GPU using WebGL. Initial inspiration came from a 2D [JavaScript particle simulation](https://github.com/VincentGarreau/particles.js/) that uses canvas. As with anything WebGL I have created, I owe a lot to the articles on WebGLFundamentals, specifically an article on [image processing and framebuffers](https://webglfundamentals.org/webgl/lessons/webgl-image-processing-continued.html) for this project. The particles in this notebook are rendered using a [billboard technique](http://www.opengl-tutorial.org/intermediate-tutorials/billboards-particles/billboards/) where a plane is rotated to always be facing the camera. The billboard texture is a Signed Distance Field created using the [TinySDF library](https://github.com/mapbox/tiny-sdf). Inspiration for the rendering style of the points as they intersect the surface came from this [cool visualization](https://github.com/fogleman/density) of taxi pickups in New York by Michael Fogleman.`34:Tb67,TinySDF = { function TinySDF(size, buffer, value, radius, cutoff) { this.fontSize = size; this.buffer = buffer === undefined ? 3 : buffer; this.cutoff = cutoff || 0.25; this.radius = radius || 20; var size = this.size = this.fontSize + this.buffer * 2; this.canvas = document.createElement('canvas'); this.canvas.width = this.canvas.height = size; this.circleWidth = this.canvas.width-10; this.ctx = this.canvas.getContext('2d'); this.ctx.fillStyle = 'black'; // temporary arrays for the distance transform this.gridOuter = new Float64Array(size * size); this.gridInner = new Float64Array(size * size); this.f = new Float64Array(size); this.z = new Float64Array(size + 1); this.v = new Uint16Array(size); // hack around https://bugzilla.mozilla.org/show_bug.cgi?id=737852 this.middle = Math.round((size / 2) * (navigator.userAgent.indexOf('Gecko/') >= 0 ? 1.2 : 1)); } TinySDF.prototype.draw = function (char) { this.ctx.arc(this.circleWidth/2, this.circleWidth/2, this.circleWidth/8, 0, 2 * Math.PI); this.ctx.fill(); var imgData = this.ctx.getImageData(0, 0, this.size, this.size); var alphaChannel = new Uint8ClampedArray(this.size * this.size); for (var i = 0; i < this.size * this.size; i++) { var a = imgData.data[i * 4 + 3] / 255; // alpha value this.gridOuter[i] = a === 1 ? 0 : a === 0 ? INF : Math.pow(Math.max(0, 0.5 - a), 2); this.gridInner[i] = a === 1 ? INF : a === 0 ? 0 : Math.pow(Math.max(0, a - 0.5), 2); } this.edt(this.gridOuter, this.size, this.size, this.f, this.v, this.z); this.edt(this.gridInner, this.size, this.size, this.f, this.v, this.z); for (i = 0; i < this.size * this.size; i++) { var d = Math.sqrt(this.gridOuter[i]) - Math.sqrt(this.gridInner[i]); alphaChannel[i] = Math.round(255 - 255 * (d / this.radius + this.cutoff)); } this.alphaChannel = alphaChannel; return alphaChannel; } TinySDF.prototype.edt = function (data, width, height, f, v, z) { for (var x = 0; x < width; x++) this.edt1d(data, x, width, height, f, v, z); for (var y = 0; y < height; y++) this.edt1d(data, y * width, 1, width, f, v, z); } TinySDF.prototype.edt1d = function (grid, offset, stride, length, f, v, z) { var q, k, s, r; v[0] = 0; z[0] = -INF; z[1] = INF; for (q = 0; q < length; q++) f[q] = grid[offset + q * stride]; for (q = 1, k = 0, s = 0; q < length; q++) { do { r = v[k]; s = (f[q] - f[r] + q * q - r * r) / (q - r) / 2; } while (s <= z[k] && --k > -1); k++; v[k] = q; z[k] = s; z[k + 1] = INF; } for (q = 0, k = 0; q < length; q++) { while (z[k + 1] < q) k++; r = v[k]; grid[offset + q * stride] = f[r] + (q - r) * (q - r); } } return TinySDF; }35:T614,points = { //store data about points and their locations let points = []; //location of particle center const tData = new Float32Array(numElements*18); //texture quad coordinates for billboards relative to particle center const vData = new Float32Array(numElements*18); for (let i=0; i cancelAnimationFrame(frame)); }37:Tfcf,tallyTextures = { //all textures the programs will need const existingTexture = canvas.gl.createTexture(); canvas.gl.bindTexture(canvas.gl.TEXTURE_2D, existingTexture); const level = 0; let internalFormat = canvas.gl.RGBA; const width = imageWidth; const height = imageHeight; const border = 0; let format = canvas.gl.RGBA; let type = canvas.gl.UNSIGNED_BYTE; const zeros = new Uint8Array(4*imageWidth*imageHeight); canvas.gl.texImage2D(canvas.gl.TEXTURE_2D, level, internalFormat, imageWidth, imageHeight, border, format, type, zeros); canvas.gl.texParameteri(canvas.gl.TEXTURE_2D, canvas.gl.TEXTURE_MIN_FILTER, canvas.gl.LINEAR); canvas.gl.texParameteri(canvas.gl.TEXTURE_2D, canvas.gl.TEXTURE_MAG_FILTER, canvas.gl.LINEAR); canvas.gl.texParameteri(canvas.gl.TEXTURE_2D, canvas.gl.TEXTURE_WRAP_S, canvas.gl.CLAMP_TO_EDGE); canvas.gl.texParameteri(canvas.gl.TEXTURE_2D, canvas.gl.TEXTURE_WRAP_T, canvas.gl.CLAMP_TO_EDGE); canvas.gl.bindTexture(canvas.gl.TEXTURE_2D, null); const particleTexture = canvas.gl.createTexture(); canvas.gl.bindTexture(canvas.gl.TEXTURE_2D, particleTexture); internalFormat = canvas.gl.RGBA; format = canvas.gl.RGBA; type = canvas.gl.UNSIGNED_BYTE; canvas.gl.texImage2D(canvas.gl.TEXTURE_2D, level, internalFormat, imageWidth, imageHeight, border, format, type, zeros); // set the filtering so we don't need mips canvas.gl.texParameteri(canvas.gl.TEXTURE_2D, canvas.gl.TEXTURE_MIN_FILTER, canvas.gl.LINEAR); canvas.gl.texParameteri(canvas.gl.TEXTURE_2D, canvas.gl.TEXTURE_MAG_FILTER, canvas.gl.LINEAR); canvas.gl.texParameteri(canvas.gl.TEXTURE_2D, canvas.gl.TEXTURE_WRAP_S, canvas.gl.CLAMP_TO_EDGE); canvas.gl.texParameteri(canvas.gl.TEXTURE_2D, canvas.gl.TEXTURE_WRAP_T, canvas.gl.CLAMP_TO_EDGE); canvas.gl.bindTexture(canvas.gl.TEXTURE_2D, null); //black plane const combinedTexture = canvas.gl.createTexture(); canvas.gl.bindTexture(canvas.gl.TEXTURE_2D, combinedTexture); canvas.gl.texImage2D(canvas.gl.TEXTURE_2D, level, internalFormat, imageWidth, imageHeight, border, format, type, zeros); canvas.gl.texParameteri(canvas.gl.TEXTURE_2D, canvas.gl.TEXTURE_MIN_FILTER, canvas.gl.NEAREST); canvas.gl.texParameteri(canvas.gl.TEXTURE_2D, canvas.gl.TEXTURE_MAG_FILTER, canvas.gl.NEAREST); canvas.gl.texParameteri(canvas.gl.TEXTURE_2D, canvas.gl.TEXTURE_WRAP_S, canvas.gl.CLAMP_TO_EDGE); canvas.gl.texParameteri(canvas.gl.TEXTURE_2D, canvas.gl.TEXTURE_WRAP_T, canvas.gl.CLAMP_TO_EDGE); //colors for plane image const colorbarTexture = canvas.gl.createTexture(); canvas.gl.bindTexture(canvas.gl.TEXTURE_2D, colorbarTexture); canvas.gl.texImage2D(canvas.gl.TEXTURE_2D, 0, canvas.gl.RGBA, canvas.gl.RGBA, canvas.gl.UNSIGNED_BYTE, colorBar); canvas.gl.texParameteri(canvas.gl.TEXTURE_2D, canvas.gl.TEXTURE_MIN_FILTER, canvas.gl.LINEAR); canvas.gl.texParameteri(canvas.gl.TEXTURE_2D, canvas.gl.TEXTURE_MAG_FILTER, canvas.gl.LINEAR); canvas.gl.texParameteri(canvas.gl.TEXTURE_2D, canvas.gl.TEXTURE_WRAP_S, canvas.gl.CLAMP_TO_EDGE); canvas.gl.texParameteri(canvas.gl.TEXTURE_2D, canvas.gl.TEXTURE_WRAP_T, canvas.gl.CLAMP_TO_EDGE); //texture for particle billboards const circleTexture = canvas.gl.createTexture(); canvas.gl.bindTexture(canvas.gl.TEXTURE_2D, circleTexture); canvas.gl.texImage2D(canvas.gl.TEXTURE_2D, 0, canvas.gl.RGBA, canvas.gl.RGBA, canvas.gl.UNSIGNED_BYTE, particleCanvas); canvas.gl.texParameteri(canvas.gl.TEXTURE_2D, canvas.gl.TEXTURE_MIN_FILTER, canvas.gl.LINEAR); canvas.gl.texParameteri(canvas.gl.TEXTURE_2D, canvas.gl.TEXTURE_MAG_FILTER, canvas.gl.LINEAR); canvas.gl.texParameteri(canvas.gl.TEXTURE_2D, canvas.gl.TEXTURE_WRAP_S, canvas.gl.CLAMP_TO_EDGE); canvas.gl.texParameteri(canvas.gl.TEXTURE_2D, canvas.gl.TEXTURE_WRAP_T, canvas.gl.CLAMP_TO_EDGE); return { existingTexture, particleTexture, combinedTexture, colorbarTexture, circleTexture } }38:Ta64,function smooth(viewProjectionMatrix) { canvas.gl.useProgram(programSmooth); //rendering to framebuffer canvas.gl.bindFramebuffer(canvas.gl.FRAMEBUFFER, frameBuffers.fb1); // attach the texture as the first color attachment const attachmentPoint = canvas.gl.COLOR_ATTACHMENT0; canvas.gl.framebufferTexture2D( canvas.gl.FRAMEBUFFER, attachmentPoint, canvas.gl.TEXTURE_2D, tallyTextures.existingTexture, 0); // Tell WebGL how to convert from clip space to pixels canvas.gl.viewport(0, 0, imageWidth, imageHeight); let type = canvas.gl.FLOAT; // the data is 32bit floats const normalize = false; // don't normalize the data const stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position let offset = 0; canvas.gl.bindBuffer(canvas.gl.ARRAY_BUFFER, buffers.planePosition); const vertices = new Float32Array([ -1, -1, -1, 1, 1, -1, 1, -1, -1, 1, 1, 1, ]); canvas.gl.bufferData(canvas.gl.ARRAY_BUFFER, vertices, canvas.gl.STATIC_DRAW); //rendering over entire clipspace canvas.gl.enableVertexAttribArray(locations.smoothPlanePosLocation); canvas.gl.vertexAttribPointer(locations.smoothPlanePosLocation, 2, type, normalize, stride, offset); //handle texture for plane canvas.gl.bindBuffer(canvas.gl.ARRAY_BUFFER, buffers.texCoord); canvas.gl.bufferData(canvas.gl.ARRAY_BUFFER, new Float32Array([ 0, 0, 0, 1, 1, 0, 1, 0, 0,1, 1, 1, ]), canvas.gl.STATIC_DRAW); //rendering entire texture corresponding to entire cipspace canvas.gl.enableVertexAttribArray(locations.smoothTexCoordLocation); canvas.gl.vertexAttribPointer(locations.smoothTexCoordLocation, 2, type, normalize, stride, offset); //active texture is hitgrid to start canvas.gl.activeTexture(canvas.gl.TEXTURE3); const internalFormat = canvas.gl.RGBA; const border = 0; const format = canvas.gl.RGBA; type = canvas.gl.UNSIGNED_BYTE; //need to attach hitGrid.values to particle texture canvas.gl.bindTexture(canvas.gl.TEXTURE_2D, tallyTextures.particleTexture); canvas.gl.uniform1i(locations.smoothPlaneUniformLocation, 3); // set the kernel and its weight canvas.gl.uniform1fv(locations.smoothKernelUniformLocation, gaussianBlur); canvas.gl.uniform1f(locations.smoothKernelWeightUniformLocation, weight); // set the size of the image canvas.gl.uniform2f(locations.smoothTextureSizeUniformLocation, imageWidth, imageHeight); var primitiveType = canvas.gl.TRIANGLES; offset = 0; var count = 3; canvas.gl.drawArrays(primitiveType, offset, 2*count); }39:T883,function drawPlane(viewProjectionMatrix, texture, vertices) { canvas.gl.useProgram(programPlane); canvas.gl.bindBuffer(canvas.gl.ARRAY_BUFFER, buffers.planePosition); canvas.gl.bufferData(canvas.gl.ARRAY_BUFFER, vertices, canvas.gl.STATIC_DRAW); canvas.gl.enableVertexAttribArray(locations.posPlane); let type = canvas.gl.FLOAT; // the data is 32bit floats const normalize = false; // don't normalize the data const stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position let offset = 0; canvas.gl.vertexAttribPointer(locations.posPlane, 3, type, normalize, stride, offset); // Set the matrix. canvas.gl.uniformMatrix4fv(locations.matrixPlane, false, viewProjectionMatrix); //handle texture for plane canvas.gl.bindBuffer(canvas.gl.ARRAY_BUFFER, buffers.texCoord); canvas.gl.bufferData(canvas.gl.ARRAY_BUFFER, new Float32Array([ 0, 0, 0, 1, 1, 0, 1, 0, 0,1, 1, 1, ]), canvas.gl.STATIC_DRAW); canvas.gl.enableVertexAttribArray(locations.texCoord); canvas.gl.vertexAttribPointer(locations.texCoord, 2, type, normalize, stride, offset); canvas.gl.activeTexture(canvas.gl.TEXTURE3); const internalFormat = canvas.gl.RGBA; const border = 0; const format = canvas.gl.RGBA; type = canvas.gl.UNSIGNED_BYTE; canvas.gl.bindTexture(canvas.gl.TEXTURE_2D, texture); canvas.gl.uniform1i(locations.planeUniformLocation, 3); canvas.gl.activeTexture(canvas.gl.TEXTURE4); canvas.gl.bindTexture(canvas.gl.TEXTURE_2D, tallyTextures.colorbarTexture); canvas.gl.uniform1i(locations.colorbarUniformLocation, 4); // set the kernel and its weight canvas.gl.uniform1fv(locations.kernelUniformLocation, gaussianBlur); canvas.gl.uniform1f(locations.kernelWeightUniformLocation, weight); // set the size of the image canvas.gl.uniform2f(locations.textureSizeUniformLocation, imageWidth, imageHeight); //define viewport size canvas.gl.viewport(0, 0, canvas.width, canvas.height); var primitiveType = canvas.gl.TRIANGLES; offset = 0; var count = 3; canvas.gl.drawArrays(primitiveType, offset, 2*count); }3a:T96a,locations = { //need to get attribute locations const translate = canvas.gl.getAttribLocation(program, "a_trans"); const matrixLocation = canvas.gl.getUniformLocation(program, "u_matrix"); const planeMatrixLocation = canvas.gl.getUniformLocation(programPlane, "u_matrix"); const planePosLocation = canvas.gl.getAttribLocation(programPlane, "a_pos"); const texCoordLocation = canvas.gl.getAttribLocation(programPlane, "a_texcoord"); const planeUniformLocation = canvas.gl.getUniformLocation(programPlane, "u_texture"); const colorbarUniformLocation = canvas.gl.getUniformLocation(programPlane, "u_colorbar"); const textureSizeUniformLocation = canvas.gl.getUniformLocation(programPlane, "u_textureSize"); const kernelUniformLocation = canvas.gl.getUniformLocation(programPlane, "u_kernel"); const kernelWeightUniformLocation = canvas.gl.getUniformLocation(programPlane, "u_kernelWeight"); const smoothPlanePosLocation = canvas.gl.getAttribLocation(programSmooth, "a_pos"); const smoothTexCoordLocation = canvas.gl.getAttribLocation(programSmooth, "a_texcoord"); const smoothPlaneUniformLocation = canvas.gl.getUniformLocation(programSmooth, "u_texture"); const smoothTextureSizeUniformLocation = canvas.gl.getUniformLocation(programSmooth, "u_textureSize"); const smoothKernelUniformLocation = canvas.gl.getUniformLocation(programSmooth, "u_kernel"); const smoothKernelWeightUniformLocation = canvas.gl.getUniformLocation(programSmooth, "u_kernelWeight"); const squareLocation = canvas.gl.getAttribLocation(program, "a_square"); const rightLocation = canvas.gl.getUniformLocation(program, "u_right"); const upLocation = canvas.gl.getUniformLocation(program, "u_up"); const circleUniformLocation = canvas.gl.getUniformLocation(program, "u_texture"); return { matrix: matrixLocation, trans: translate, matrixPlane: planeMatrixLocation, posPlane: planePosLocation, texCoord: texCoordLocation, planeUniformLocation, colorbarUniformLocation, textureSizeUniformLocation, kernelUniformLocation, kernelWeightUniformLocation, smoothPlanePosLocation, smoothTexCoordLocation, smoothPlaneUniformLocation, smoothTextureSizeUniformLocation, smoothKernelUniformLocation, smoothKernelWeightUniformLocation, square:squareLocation, right:rightLocation, up:upLocation, circle:circleUniformLocation } }3b:T4fd,fsSourcePlane = ` precision mediump float; varying vec2 v_texcoord; uniform sampler2D u_texture; uniform sampler2D u_colorbar; uniform vec2 u_textureSize; uniform float u_kernel[9]; uniform float u_kernelWeight; void main() { vec2 onePixel = vec2(1.0, 1.0) / u_textureSize; float colorSum = texture2D(u_texture, v_texcoord + onePixel * vec2(-1, -1)).x * u_kernel[0] + texture2D(u_texture, v_texcoord + onePixel * vec2( 0, -1)).x * u_kernel[1] + texture2D(u_texture, v_texcoord + onePixel * vec2( 1, -1)).x * u_kernel[2] + texture2D(u_texture, v_texcoord + onePixel * vec2(-1, 0)).x * u_kernel[3] + texture2D(u_texture, v_texcoord + onePixel * vec2( 0, 0)).x * u_kernel[4] + texture2D(u_texture, v_texcoord + onePixel * vec2( 1, 0)).x * u_kernel[5] + texture2D(u_texture, v_texcoord + onePixel * vec2(-1, 1)).x * u_kernel[6] + texture2D(u_texture, v_texcoord + onePixel * vec2( 0, 1)).x * u_kernel[7] + texture2D(u_texture, v_texcoord + onePixel * vec2( 1, 1)).x * u_kernel[8] ; if (colorSum == 0.0) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); } else { gl_FragColor = vec4(texture2D(u_colorbar, vec2(colorSum/u_kernelWeight,0.0)).xyz, pow(colorSum/u_kernelWeight,0.25)*1.0); } } `3c:T4cb,fsSourceSmooth=` precision mediump float; varying vec2 v_texcoord; uniform sampler2D u_texture; uniform sampler2D u_colorbar; uniform vec2 u_textureSize; uniform float u_kernel[9]; uniform float u_kernelWeight; void main() { vec2 onePixel = vec2(1.0, 1.0) / u_textureSize; float colorSum = texture2D(u_texture, v_texcoord + onePixel * vec2(-1, -1)).x * u_kernel[0] + texture2D(u_texture, v_texcoord + onePixel * vec2( 0, -1)).x * u_kernel[1] + texture2D(u_texture, v_texcoord + onePixel * vec2( 1, -1)).x * u_kernel[2] + texture2D(u_texture, v_texcoord + onePixel * vec2(-1, 0)).x * u_kernel[3] + texture2D(u_texture, v_texcoord + onePixel * vec2( 0, 0)).x * u_kernel[4] + texture2D(u_texture, v_texcoord + onePixel * vec2( 1, 0)).x * u_kernel[5] + texture2D(u_texture, v_texcoord + onePixel * vec2(-1, 1)).x * u_kernel[6] + texture2D(u_texture, v_texcoord + onePixel * vec2( 0, 1)).x * u_kernel[7] + texture2D(u_texture, v_texcoord + onePixel * vec2( 1, 1)).x * u_kernel[8] ; if (colorSum == 0.0) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); } else { gl_FragColor = vec4(min(1.0,colorSum/u_kernelWeight), 0.0, 0.0, 1.0); } } `3d:Td08,m4 = { return { perspective: function(fieldOfViewInRadians, aspect, near, far) { var f = Math.tan(Math.PI * 0.5 - 0.5 * fieldOfViewInRadians); var rangeInv = 1.0 / (near - far); return [ f / aspect, 0, 0, 0, 0, f, 0, 0, 0, 0, (near + far) * rangeInv, -1, 0, 0, near * far * rangeInv * 2, 0 ]; }, projection: function(width, height, depth) { // Note: This matrix flips the Y axis so 0 is at the top. return [ 2 / width, 0, 0, 0, 0, -2 / height, 0, 0, 0, 0, 2 / depth, 0, -1, 1, 0, 1, ]; }, multiply: function(a, b) { var a00 = a[0 * 4 + 0]; var a01 = a[0 * 4 + 1]; var a02 = a[0 * 4 + 2]; var a03 = a[0 * 4 + 3]; var a10 = a[1 * 4 + 0]; var a11 = a[1 * 4 + 1]; var a12 = a[1 * 4 + 2]; var a13 = a[1 * 4 + 3]; var a20 = a[2 * 4 + 0]; var a21 = a[2 * 4 + 1]; var a22 = a[2 * 4 + 2]; var a23 = a[2 * 4 + 3]; var a30 = a[3 * 4 + 0]; var a31 = a[3 * 4 + 1]; var a32 = a[3 * 4 + 2]; var a33 = a[3 * 4 + 3]; var b00 = b[0 * 4 + 0]; var b01 = b[0 * 4 + 1]; var b02 = b[0 * 4 + 2]; var b03 = b[0 * 4 + 3]; var b10 = b[1 * 4 + 0]; var b11 = b[1 * 4 + 1]; var b12 = b[1 * 4 + 2]; var b13 = b[1 * 4 + 3]; var b20 = b[2 * 4 + 0]; var b21 = b[2 * 4 + 1]; var b22 = b[2 * 4 + 2]; var b23 = b[2 * 4 + 3]; var b30 = b[3 * 4 + 0]; var b31 = b[3 * 4 + 1]; var b32 = b[3 * 4 + 2]; var b33 = b[3 * 4 + 3]; return [ b00 * a00 + b01 * a10 + b02 * a20 + b03 * a30, b00 * a01 + b01 * a11 + b02 * a21 + b03 * a31, b00 * a02 + b01 * a12 + b02 * a22 + b03 * a32, b00 * a03 + b01 * a13 + b02 * a23 + b03 * a33, b10 * a00 + b11 * a10 + b12 * a20 + b13 * a30, b10 * a01 + b11 * a11 + b12 * a21 + b13 * a31, b10 * a02 + b11 * a12 + b12 * a22 + b13 * a32, b10 * a03 + b11 * a13 + b12 * a23 + b13 * a33, b20 * a00 + b21 * a10 + b22 * a20 + b23 * a30, b20 * a01 + b21 * a11 + b22 * a21 + b23 * a31, b20 * a02 + b21 * a12 + b22 * a22 + b23 * a32, b20 * a03 + b21 * a13 + b22 * a23 + b23 * a33, b30 * a00 + b31 * a10 + b32 * a20 + b33 * a30, b30 * a01 + b31 * a11 + b32 * a21 + b33 * a31, b30 * a02 + b31 * a12 + b32 * a22 + b33 * a32, b30 * a03 + b31 * a13 + b32 * a23 + b33 * a33, ]; }, translation: function(tx, ty, tz) { return [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, tx, ty, tz, 1, ]; }, xRotation: function(angleInRadians) { var c = Math.cos(angleInRadians); var s = Math.sin(angleInRadians); return [ 1, 0, 0, 0, 0, c, s, 0, 0, -s, c, 0, 0, 0, 0, 1, ]; }, yRotation: function(angleInRadians) { var c = Math.cos(angleInRadians); var s = Math.sin(angleInRadians); return [ c, 0, -s, 0, 0, 1, 0, 0, s, 0, c, 0, 0, 0, 0, 1, ]; }, zRotation: function(angleInRadians) { var c = Math.cos(angleInRadians); var s = Math.sin(angleInRadians); return [ c, s, 0, 0, -s, c, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, ]; }, scaling: function(sx, sy, sz) { return [ sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1, ]; }, } };3e:[{"id":"8d873efe69e44534d6150af3a119c699d4767a1e972b640542b26b66f88cda9642b4fa72e19d634bf87f9be513868b6bddb1ef806084f16a2e6a188beb0ff4df","href":"https://static.observableusercontent.com/files/8d873efe69e44534d6150af3a119c699d4767a1e972b640542b26b66f88cda9642b4fa72e19d634bf87f9be513868b6bddb1ef806084f16a2e6a188beb0ff4df","name":"SnowFlake04.svg","type":"image/svg+xml","lastModified":1624682430065.31,"size":265556}] 31:{"id":"70e203eabdd7d53c","slug":"3d-webgl-particles-over-an-svg-path","title":"3D WebGL Particles Over an SVG Path","thumbnail":"40d01ceeacb7af616c25717e7f32c14e8669e7a2d79ba42b4ff4838282efc9e8","access_level":"public","create_time":"$D2021-06-12T21:17:49.918Z","update_time":"$D2021-12-11T20:23:57.565Z","view_time":null,"first_public_time":"$D2021-06-29T03:08:42.229Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"da36068e9c88f131","login":"cguastini","name":"Corey Guastini","avatar_url":"https://avatars-next.observableusercontent.com/7c6d91c2a664c9f78ab78b1e0bf2b539441aaa1d9430ae24e9886ce825f3c1b0","tier":"starter_2024"},"version":1686,"publish_version":1686,"role":null,"authored":false,"authors":[{"type":"individual","id":"56bb3b86bffb2836","login":"cguastini","name":"Corey Guastini","avatar_url":"https://avatars-next.observableusercontent.com/7c6d91c2a664c9f78ab78b1e0bf2b539441aaa1d9430ae24e9886ce825f3c1b0","tier":null}],"members":[{"type":"individual","id":"56bb3b86bffb2836","login":"cguastini","name":"Corey Guastini","avatar_url":"https://avatars-next.observableusercontent.com/7c6d91c2a664c9f78ab78b1e0bf2b539441aaa1d9430ae24e9886ce825f3c1b0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"3D WebGL Particles Over an SVG Path","cells":[{"id":0,"value":"md`# 3D WebGL Particles Over an SVG Path`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1476,"value":"md`As the particles fall, they fill a shape from an attached SVG file.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"viewof replay = Inputs.button(\"Restart Surface Accumulation\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"canvas = {\n const canvas = DOM.canvas();\n const gl = canvas.gl = canvas.getContext('webgl',{\n premultipliedAlpha: false , // Ask for non-premultiplied alpha\n alpha:false\n});\n const ext = gl.getExtension('OES_element_index_uint');\n gl.enable(gl.DEPTH_TEST);\n gl.enable(gl.BLEND);\n // gl.enable(gl.CULL_FACE);\n //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);\n gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);\n const scale = window.devicePixelRatio || 1;\n canvas.style.width = width+\"px\";\n canvas.style.height = height+\"px\";\n canvas.width = width*scale;\n canvas.height = height*scale;\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"viewof cameraZ = Inputs.range([-500,500], {step: 1, value:-80, label:\"z position\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"viewof cameraAngleRadians = Inputs.range([-Math.PI*2, Math.PI*2], {step: .001, value:degToRad(190), label:\"y rotation\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"viewof cameraAngleRadiansX = Inputs.range([-Math.PI*2, Math.PI*2], {step: .001, value:degToRad(28.5), label:\"x rotation\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"viewof fieldOfViewRadians = Inputs.range([-Math.PI*2, Math.PI*2], {step: .1, value:degToRad(60), label:\"field of view\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1463,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1526,"value":"md`## Code Cells`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1630,"value":"f = await FileAttachment(\"SnowFlake04.svg\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1521,"value":"svgImage = {\n const text = await f.text();\n const document = (new DOMParser).parseFromString(text, \"image/svg+xml\");\n \n const svg = d3.select(document.documentElement).remove();\n const viewBox = svg.node().getAttribute(\"viewBox\").split(\" \");\n const svgWidth = viewBox[2];\n const svgHeight = viewBox[3];\n const path = svg.selectAll(\"path\");\n const pathNode = path.node();\n \n const d = pathNode.getAttribute('d');\n \n const svgOut = d3.create(\"svg\").attr(\"width\", svgWidth).attr(\"height\", svgHeight);\n svgOut.selectAll(\"path\").data(path).enter().append(\"path\")\n .attr(\"d\", d=>{\n return d.getAttribute('d');\n })\n \n return svgOut.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"numElements = 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"imageWidth = svgImage.clientWidth;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"imageHeight = svgImage.clientHeight","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1022,"value":"colorBar = {\n const ctx = DOM.context2d(256, 10);\n ctx.canvas.width = 256;\n ctx.canvas.height = 10;\n \n \n // Create gradient\n var grd = ctx.createLinearGradient(0, 0, 256, 0);\n grd.addColorStop(0, \"rgba(0,106,255,255)\");\n grd.addColorStop(0.66, \"rgba(124,178,255,255)\");\n grd.addColorStop(1, \"white\");\n\n // Fill with gradient\n ctx.fillStyle = grd;\n ctx.fillRect(0, 0, 256, 10);\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"ctx = {\n const ctx = DOM.context2d(imageWidth, imageHeight);\n ctx.canvas.width = imageWidth;\n ctx.canvas.height = imageHeight;\n const text = await f.text();\n const document = (new DOMParser).parseFromString(text, \"image/svg+xml\");\n const svg = d3.select(document.documentElement).remove();\n \n const path = d3.select(svgImage).selectAll(\"path\");\n \n path.each(d=>{\n const pathData = new Path2D(d.getAttribute('d'));\n ctx.fill(pathData);\n })\n //fill SVG path on canvas \n \n \n const data = ctx.getImageData(0,0,imageWidth,imageHeight).data;\n \n let coords = [];\n //get all pixels with non-zero opacity\n for (let i=0; i 0) {\n let y = Math.floor(i/(imageWidth*4));\n let x = (i%(imageWidth*4))/4;\n coords.push({\n x,\n y})\n }\n }\n \n return coords;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1291,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1305,"value":"exampleSDF = new TinySDF(64,0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1316,"value":"particleCanvas = {\n const alpha = exampleSDF.draw();\n const ctx = DOM.context2d(exampleSDF.size, exampleSDF.size);\n ctx.canvas.height = exampleSDF.size;\n ctx.canvas.width = exampleSDF.size;\n const u = new Uint8ClampedArray(exampleSDF.size*exampleSDF.size*4);\n for (let i=0; i this.spaceWidth || x < 0 || y > this.spaceHeight || y < 0) {\n return;\n }\n const fracX = Math.floor(x/this.spaceWidth * this.width);\n const fracY = Math.floor(y/this.spaceHeight * this.height);\n \n const idx = fracY*this.width + fracX;\n \n this.values[idx*4]=Math.min(255,this.values[idx*4]+255);\n this.values[idx*4+1]=Math.min(255,this.values[idx*4+1]+255);\n this.values[idx*4+2]=Math.min(255,this.values[idx*4+2]+255);\n \n }\n \n return Grid\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"hitGrid = {\n return new Grid();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"Point = {\n function Point() {\n //x,y,z positions\n this.y = 30;\n const randomPoint = ctx[Math.floor(Math.random()*ctx.length)];\n this.x = randomPoint.x/10;\n this.z = randomPoint.y/10;\n\n //x,y,z velocities\n this.vy = Math.random()*-0.15 - 0.05;\n this.vx = (Math.random() - 0.5)/150;\n this.vz = (Math.random() - 0.5)/150;\n }\n \n Point.prototype.propagate = function(delta) {\n this.y = this.y + delta*this.vy*100;\n this.x = this.x + delta*this.vx*100;\n this.z = this.z + delta*this.vz*100;\n }\n \n Point.prototype.resetY = function() {\n //point has intersected surface\n if (this.y < -1) {\n hitGrid.add(this.x, this.z);\n\n this.y = 30;\n const randomPoint = ctx[Math.floor(Math.random()*ctx.length)];\n this.x = randomPoint.x/10;\n this.z = randomPoint.y/10;\n }\n }\n \n return Point;\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1088,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"planeVertices = {\n const data = new Float32Array([\n 0, -1, 0, \n 0, -1, hitGrid.spaceHeight,\n hitGrid.spaceWidth, -1, 0,\n hitGrid.spaceWidth, -1, 0,\n 0, -1, hitGrid.spaceHeight,\n hitGrid.spaceWidth, -1, hitGrid.spaceHeight,\n ])\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1142,"value":"planeVertices2 = {\n const data = new Float32Array([\n 0, -1.01, 0, \n 0, -1.01, hitGrid.spaceHeight,\n hitGrid.spaceWidth, -1.01, 0,\n hitGrid.spaceWidth, -1.01, 0,\n 0, -1.01, hitGrid.spaceHeight,\n hitGrid.spaceWidth, -1.01, hitGrid.spaceHeight,\n \n ])\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1046,"value":"gaussianBlur= [\n 0.045, 0.122, 0.045,\n 0.122, 0.332, 0.122,\n 0.045, 0.122, 0.045\n ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1049,"value":"function computeKernelWeight(kernel) {\n var weight = kernel.reduce(function(prev, curr) {\n return prev + curr;\n });\n return weight <= 0 ? 1 : weight;\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1051,"value":"weight = computeKernelWeight(gaussianBlur)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"vsSource = `\nattribute vec3 a_trans;\nattribute vec3 a_square;\n\nuniform mat4 u_matrix;\nuniform vec3 u_right;\nuniform vec3 u_up;\n\nvarying vec2 v_texcoord;\n\nvoid main() {\n vec3 vertexPosition_worldspace = a_trans+ u_right * a_square.x * 0.9+ u_up * a_square.y * 0.9;\n\n gl_Position = u_matrix * vec4(vertexPosition_worldspace, 1.0);\n\n v_texcoord = a_square.xy + vec2(0.5,0.5);\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"fsSource = `\nprecision mediump float;\nvarying vec2 v_texcoord;\nuniform sampler2D u_texture;\n\nvoid main() {\n \n vec4 u_color = vec4(0.0,106./255.,1.0,1.0);\n vec4 baseColor = u_color;\n float dist = texture2D(u_texture, v_texcoord).a;\n\n float oFactor = smoothstep(0.3, 1.0, dist);\n baseColor = mix(u_color, vec4(1.0,1.0,1.0,1.0), oFactor);\n baseColor.a *= smoothstep(0.0, 0.8, dist);\n gl_FragColor = baseColor;\n\n if(gl_FragColor.a < 0.5)\n discard;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"vsSourcePlane = `\nattribute vec3 a_pos;\nattribute vec2 a_texcoord;\n\nuniform mat4 u_matrix;\n\nvarying vec2 v_texcoord;\n\nvoid main() {\n gl_Position = u_matrix*vec4(a_pos, 1.0);\n\n v_texcoord = a_texcoord;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1095,"value":"vsSourceSmooth=`\nattribute vec3 a_pos;\nattribute vec2 a_texcoord;\n\nvarying vec2 v_texcoord;\n\nvoid main() {\n gl_Position = vec4(a_pos, 1.0);\n v_texcoord = a_texcoord;\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1081,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"program = initShaderProgram(canvas.gl, vsSource, fsSource)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"programPlane = initShaderProgram(canvas.gl, vsSourcePlane, fsSourcePlane)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1083,"value":"programSmooth = initShaderProgram(canvas.gl, vsSourceSmooth, fsSourceSmooth);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"//compiles program\nfunction initShaderProgram(gl, vsSource, fsSource) {\n //compile shaders\n const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);\n const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);\n \n const shaderProgram = gl.createProgram();\n gl.attachShader(shaderProgram, vertexShader);\n gl.attachShader(shaderProgram, fragmentShader);\n gl.linkProgram(shaderProgram);\n \n const success = gl.getProgramParameter(shaderProgram, gl.LINK_STATUS);\n if (!success) {\n \n throw new Error(`Couldn't link shader`);\n gl.deleteProgram(shaderProgram);\n }\n \n return shaderProgram;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"//compiles shaders\nfunction loadShader(gl, type, source) {\n const shader = gl.createShader(type);\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n \n const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS)\n if (!success) {\n console.log(gl.getShaderInfoLog(shader));\n gl.deleteShader(shader);\n throw new Error(`Couldn't compile shader`);\n }\n return shader;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"frameBuffers = {\n const fb1 = canvas.gl.createFramebuffer();\n \n return {\n fb1\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"buffers = {\n //creating buffers for programs\n const transBuffer = canvas.gl.createBuffer();\n const planePositionBuffer = canvas.gl.createBuffer();\n const texCoordBuffer = canvas.gl.createBuffer();\n const square = canvas.gl.createBuffer();\n \n return {\n trans:transBuffer,\n planePosition: planePositionBuffer,\n texCoord: texCoordBuffer,\n square:square\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"width = Math.min(600, window.innerWidth);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"height = width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"{\n replay;\n hitGrid.reset();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"twgl = require('twgl.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1","titling":"auto"}} 32:"$31:body"