2b:null 2c:["$","title",null,{"children":"Procedural (stateless, declarative) particles on GPU using geometry instancing | x | Observable"}] 31:T865,particleSystemChunk = ` ${myRandChunk} ${easingChunk} ${zoneChunk} ${transformChunk} mat4 emitterTransform(float timeSec) { ${emitterTransform} } // Calculates a transform of a single particle at a given time of its lifespan // given the myRand is procedurally seeded per particle // @ particleTimeSec - time in [0, lifeSec) // @ t - phase in [0, 1), // @ iteration - an integer iteration of particle instance (each iteration seeds another particle) mat4 particleTransform(in float particleTimeSec, in float t, in float iteration) { vec3 initialVelocity = (vec3(randDir3()) + vec3(0.0, randInRange(2.0, 4.0), 0.0)) * 5.0; vec3 gravity = vec3(0.0, ${toGlslFloatLiteral(gravity)}, 0.0); vec3 displacementInTime = initialVelocity * particleTimeSec + gravity * particleTimeSec * particleTimeSec; return identity * translate(randInBoxZone(vec3(-2.0, 0.0, -2.0), vec3(2.0, 0.0, 2.0))) // initial position in a (flat) box // * translate(randInBallZone() * 2.0) // initial position in a ball * translate(displacementInTime) * scale(mix(vec3(0.0), vec3(randInRange(3.0, 6.0)), easeInQuad(t))) // scale in * scale(mix(vec3(1.0), vec3(0.0), easeInQuad(t))) // scale out * rotate(randDir3(), myRand()) // initial rotation * rotate(randDir3(), myRand() * particleTimeSec); // additional rotation through time } // Prepares particle iteration variables, seeds the random, returns particle transform mat4 particleMain(in float timeSec, in float seed, bool debug) { if (debug) { return emitterTransform(timeSec); } myRandSeed = seed; float lifeSec = randInRange(2.0, 5.0); float initialLifeOffsetSec = randInRange(-lifeSec, 0.0); float iterationWithPhase = (timeSec + initialLifeOffsetSec) / lifeSec; float iteration = floor(iterationWithPhase); float t = fract(iterationWithPhase); float particleTimeSec = t * lifeSec; float emissionTimeSec = timeSec - particleTimeSec; float iterationSeed = fract(iteration * 1e-10); myRandSeed = fract(myRandSeed + iterationSeed); // reseed rand for every iteration return emitterTransform(emissionTimeSec) * particleTransform(particleTimeSec, t, iteration); } `32:T1b61,instancedMesh = { const geometry = geomtryType === "suzanne" ? suzanneGeometry : new THREE.BoxGeometry(); const materialConfig = { ...THREE.ShaderLib[materialType], lights: "ambientLightColor" in THREE.ShaderLib[materialType].uniforms, fog: true }; const selectedParticleSystemChunk = particlesSysytemType === "demo" ? particleSystemChunk : ` ${transformChunk} mat4 particleMain(in float timeSec, in float seed, bool debug) { return translate(vec3(timeSec + seed * 100.0)); } `; const create = { stateless: () => { const material = new StatelessParticlesMaterial({ particleSystemChunk: selectedParticleSystemChunk, ...materialConfig }); return { material, update: (timeSec) => (material.timeSec = timeSec), dispose: () => material.dispose() }; }, statelessBuffered: () => { const buffer = createTextureBuffer(count, 4); const writerMaterial = new StatelessParticlesBufferWriterMaterial({ dataSize: { width: 4, height: count }, textureSize: buffer.texture.source.data, particleSystemChunk: selectedParticleSystemChunk }); const material = new InstanceMatrixBufferReaderMaterial({ dataSize: { width: 4, height: count }, textureSize: buffer.texture.source.data, ...materialConfig }); return { material, update: (timeSec) => { writerMaterial.timeSec = timeSec; renderFsQuad(renderer, writerMaterial, buffer); material.tState = buffer.texture; }, dispose: () => { writerMaterial.dispose(); material.dispose(); buffer.dispose(); } }; }, statelessFourBuffered: () => { const buffer = [ createTextureBuffer(count, 1), createTextureBuffer(count, 1), createTextureBuffer(count, 1), createTextureBuffer(count, 1) ]; const writerMaterial = [0, 1, 2, 3].map( (i) => new StatelessParticlesFourBufferWriterMaterial({ textureSize: buffer[0].texture.source.data, particleSystemChunk: selectedParticleSystemChunk, index: i }) ); const material = new InstanceMatrixFourBufferReaderMaterial({ textureSize: buffer[0].texture.source.data, ...materialConfig }); return { material, update: (timeSec) => { writerMaterial[0].timeSec = timeSec; writerMaterial[1].timeSec = timeSec; writerMaterial[2].timeSec = timeSec; writerMaterial[3].timeSec = timeSec; renderFsQuad(renderer, writerMaterial[0], buffer[0]); renderFsQuad(renderer, writerMaterial[1], buffer[1]); renderFsQuad(renderer, writerMaterial[2], buffer[2]); renderFsQuad(renderer, writerMaterial[3], buffer[3]); material.tState0 = buffer[0].texture; material.tState1 = buffer[1].texture; material.tState2 = buffer[2].texture; material.tState3 = buffer[3].texture; }, dispose: () => { for (const d of buffer) { d.dispose(); } for (const d of writerMaterial) { d.dispose(); } material.dispose(); } }; }, stateful: () => { // wip const stateCount = 8; let buffer1 = Array.from({ length: stateCount }, (_, i) => createTextureBuffer(count, 1) ); let buffer2 = Array.from({ length: stateCount }, (_, i) => createTextureBuffer(count, 1) ); const swapBuffers = () => { const tmp = buffer2; buffer2 = buffer1; buffer1 = tmp; }; const writerMaterial = Array.from( { length: stateCount }, (_, i) => new StatefullParticlesBufferWriterMaterial({ textureSize: buffer1[0].texture.source.data, particleSystemChunk: statefulParticleSystemChunk, index: i }) ); const material = new InstanceMatrixFourBufferReaderMaterial({ textureSize: buffer1[0].texture.source.data, ...materialConfig }); const pointerPosition = new THREE.Vector2(); const onPointerMove = (ev) => { const rect = domElement.getBoundingClientRect(); pointerPosition.x = ((ev.clientX - rect.left) / rect.width) * 2 - 1; pointerPosition.y = -(((ev.clientY - rect.top) / rect.height) * 2 - 1); }; const domElement = renderer.domElement; domElement.addEventListener("pointermove", onPointerMove); const rayCaster = new THREE.Raycaster(); return { material, update: (timeSec) => { rayCaster.setFromCamera(pointerPosition, scene.camera); // console.log(pointerPosition, rayCaster.ray.origin); for (let i = 0; i < writerMaterial.length; i++) { writerMaterial[i].deltaTimeSec = 0.016; // retrieve deltaTimeSec somewhere writerMaterial[i].tState0 = buffer1[0].texture; writerMaterial[i].tState1 = buffer1[1].texture; writerMaterial[i].tState2 = buffer1[2].texture; writerMaterial[i].tState3 = buffer1[3].texture; writerMaterial[i].tState4 = buffer1[4].texture; writerMaterial[i].tState5 = buffer1[5].texture; writerMaterial[i].tState6 = buffer1[6].texture; writerMaterial[i].tState7 = buffer1[7].texture; writerMaterial[i].forceFieldLinePoint = rayCaster.ray.origin; writerMaterial[i].forceFieldLineDirection = rayCaster.ray.direction; renderFsQuad(renderer, writerMaterial[i], buffer2[i]); writerMaterial[i].isInitialized = true; } material.tState0 = buffer2[0].texture; material.tState1 = buffer2[1].texture; material.tState2 = buffer2[2].texture; material.tState3 = buffer2[3].texture; swapBuffers(); }, dispose: () => { material.dispose(); for (const d of buffer1) { d.dispose(); } for (const d of buffer2) { d.dispose(); } for (const d of writerMaterial) { d.dispose(); } domElement.removeEventListener("pointermove", onPointerMove); } }; } }; const { material, update, dispose } = create[ useStatefulParticleSystem ? "stateful" : { none: "stateless", buffer: "statelessBuffered", "four buffer": "statelessFourBuffered" }[bufferType] ](); const obj = new THREE.InstancedMesh(geometry, material, count); const startTimeSec = performance.now() * 0.001; scene.add(obj); invalidation.then(() => { scene.remove(obj); dispose(); obj.dispose(); }); obj.update = (timeSec) => update(timeSpeed * (timeSec - startTimeSec)); return obj; }33:T498,class StatelessParticlesBufferWriterMaterial extends THREE.ShaderMaterial { constructor({ dataSize, textureSize, particleSystemChunk }) { super({ uniforms: { timeSec: { value: 0.0 } }, vertexShader: /* glsl */ ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`, fragmentShader: /* glsl */ ` #include ${randomAccessTextureChunk} ${particleSystemChunk} const vec2 textureSize = ${toGlslVecLiteral( textureSize.width, textureSize.height )}; varying vec2 vUv; uniform float timeSec; const float instanceDataSize = ${toGlslFloatLiteral(dataSize.width)}; void main() { vec2 dataCoords = uvToDataCoords(vUv, textureSize, instanceDataSize); int instanceId = int(dataCoords.y); mat4 instanceMatrix = particleMain(timeSec, (1.0 + float(instanceId)) / ${toGlslFloatLiteral( dataSize.height )}, instanceId == 0); gl_FragColor = instanceMatrix[int(dataCoords.x)]; }` }); } set timeSec(value) { this.uniforms.timeSec.value = value; this.uniformsNeedUpdate = true; } }34:T450,class StatelessParticlesFourBufferWriterMaterial extends THREE.ShaderMaterial { constructor({ textureSize, particleSystemChunk, index }) { super({ uniforms: { timeSec: { value: 0.0 }, index: { value: index } }, vertexShader: /* glsl */ ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`, fragmentShader: /* glsl */ ` #include ${particleSystemChunk} const vec2 textureSize = ${toGlslVecLiteral( textureSize.width, textureSize.height )}; varying vec2 vUv; uniform float timeSec; uniform int index; void main() { vec2 texelCoords = vUv * textureSize - 0.5; int instanceId = int(texelCoords.y * textureSize.x + texelCoords.x); mat4 instanceMatrix = particleMain(timeSec, (1.0 + float(instanceId)) / ${toGlslFloatLiteral( count )}, instanceId == 0); gl_FragColor = instanceMatrix[index]; }` }); } set timeSec(value) { this.uniforms.timeSec.value = value; this.uniformsNeedUpdate = true; } }35:T738,class InstanceMatrixFourBufferReaderMaterial extends THREE.ShaderMaterial { constructor({ textureSize, ...hostMaterialConfig }) { super({ ...hostMaterialConfig, uniforms: THREE.UniformsUtils.merge([ hostMaterialConfig.uniforms, { tState0: { value: null } }, { tState1: { value: null } }, { tState2: { value: null } }, { tState3: { value: null } } ]), vertexShader: resolveIncludes(hostMaterialConfig.vertexShader) .replaceAll("instanceMatrix", "instanceMatrix2") .replace( "void main() {", ` const vec2 textureSize = ${toGlslVecLiteral( textureSize.width, textureSize.height )}; uniform sampler2D tState0; uniform sampler2D tState1; uniform sampler2D tState2; uniform sampler2D tState3; void main() { float fractinalIndex = float(gl_InstanceID) / textureSize.x; vec2 uv1 = vec2(fract(fractinalIndex), fractinalIndex / textureSize.y); mat4 instanceMatrix2 = mat4( texture2D(tState0, uv1), texture2D(tState1, uv1), texture2D(tState2, uv1), texture2D(tState3, uv1) ); ` ) }); } set tState0(value) { if (this.uniforms.tState0.value === value) { return; } this.uniforms.tState0.value = value; this.uniformsNeedUpdate = true; } set tState1(value) { if (this.uniforms.tState1.value === value) { return; } this.uniforms.tState1.value = value; this.uniformsNeedUpdate = true; } set tState2(value) { if (this.uniforms.tState2.value === value) { return; } this.uniforms.tState2.value = value; this.uniformsNeedUpdate = true; } set tState3(value) { if (this.uniforms.tState3.value === value) { return; } this.uniforms.tState3.value = value; this.uniformsNeedUpdate = true; } }36:T1911,class StatefullParticlesBufferWriterMaterial extends THREE.ShaderMaterial { constructor({ textureSize, particleSystemChunk, index }) { super({ uniforms: { deltaTimeSec: { value: 0.0 }, tState0: { value: null }, tState1: { value: null }, tState2: { value: null }, tState3: { value: null }, tState4: { value: null }, tState5: { value: null }, tState6: { value: null }, tState7: { value: null }, isInitialized: { value: false }, index: { value: index }, forceFieldLinePoint: { value: null }, forceFieldLineDirection: { value: null } }, vertexShader: /* glsl */ ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`, fragmentShader: /* glsl */ ` #include ${randomAccessTextureChunk} ${particleSystemChunk} uniform sampler2D tState0; uniform sampler2D tState1; uniform sampler2D tState2; uniform sampler2D tState3; uniform sampler2D tState4; uniform sampler2D tState5; uniform sampler2D tState6; uniform sampler2D tState7; uniform bool isInitialized; varying vec2 vUv; uniform float deltaTimeSec; uniform vec3 forceFieldLinePoint; uniform vec3 forceFieldLineDirection; const vec2 textureSize = ${toGlslVecLiteral( textureSize.width, textureSize.height )}; const vec2 texelSize = ${toGlslVecLiteral( 1 / textureSize.width, 1 / textureSize.height )}; vec3 projectOnVector(vec3 v, vec3 target) { return (dot(target, target) != 0.0) ? (target * dot(v, target) / dot(target, target)) : vec3(0.0); } uniform int index; vec3 gravity = vec3(0.0, ${toGlslFloatLiteral(gravity)}, 0.0); void main() { vec2 texelCoords = vUv * textureSize - 0.5; int instanceId = int(texelCoords.y * textureSize.x + texelCoords.x); float fractinalIndex = float(instanceId) / textureSize.x; vec2 uv1 = vec2(fract(fractinalIndex), fractinalIndex / textureSize.y); mat4 prevInstanceMatrix = mat4( texture2D(tState0, uv1), texture2D(tState1, uv1), texture2D(tState2, uv1), texture2D(tState3, uv1) ); vec4 _4_1_vec4 = texture2D(tState4, uv1); vec4 _5_1_vec4 = texture2D(tState5, uv1); float prevParticleTimeSec = _4_1_vec4.x; float particleLifeSec = _4_1_vec4.y; vec3 prevVelocity = _5_1_vec4.xyz; float mass = _5_1_vec4.w; if (!isInitialized || prevParticleTimeSec <= 0.0 || prevParticleTimeSec > particleLifeSec) { float seed = (1.0 + float(instanceId) / ${toGlslFloatLiteral(count)}); myRandSeed = seed; float mass = randInRange(0.1, 10.0); vec3 velocity = (vec3(randDir3()) + vec3(0.0, randInRange(2.0, 4.0), 0.0)) * 5.0; mat4 instanceMatrix = identity * translate(randInBallZone() * 3.0) * scale(vec3(pow(mass, 0.3333))) * rotate(randDir3(), randInRange(0.0, PI2)); switch (index) { case 0: { gl_FragColor = instanceMatrix[0]; break; } case 1: { gl_FragColor = instanceMatrix[1]; break; } case 2: { gl_FragColor = instanceMatrix[2]; break; } case 3: { gl_FragColor = instanceMatrix[3]; break; } case 4: { gl_FragColor = vec4(deltaTimeSec, randInRange(3.0, 5.0), 0.0, 0.0); break; } case 5: { gl_FragColor = vec4(randDir3() * 5.0, mass); break; } } } else { float particleTimeSec = prevParticleTimeSec + deltaTimeSec; mat4 instanceMatrix = translate(prevVelocity * deltaTimeSec) * scale(vec3(1.0 - deltaTimeSec)) * prevInstanceMatrix; vec3 velocity = prevVelocity + deltaTimeSec * gravity; vec3 pos = vec3(instanceMatrix[3][0], instanceMatrix[3][1], instanceMatrix[3][2]); vec3 dist = pos - forceFieldLinePoint; vec3 proj = projectOnVector(dist, forceFieldLineDirection); vec3 dist2 = pos - (forceFieldLinePoint + proj); vec3 force = normalize(dist2) / length(dist2) * 100.0; velocity += deltaTimeSec * force * mass; switch (index) { case 0: { gl_FragColor = instanceMatrix[0]; break; } case 1: { gl_FragColor = instanceMatrix[1]; break; } case 2: { gl_FragColor = instanceMatrix[2]; break; } case 3: { gl_FragColor = instanceMatrix[3]; break; } case 4: { gl_FragColor = vec4(particleTimeSec, particleLifeSec, 0.0, 0.0); break; } case 5: { gl_FragColor = vec4(velocity, mass); break; } } } }` }); } set isInitialized(value) { this.uniforms.isInitialized.value = value; this.uniformsNeedUpdate = true; } set deltaTimeSec(value) { this.uniforms.deltaTimeSec.value = value; this.uniformsNeedUpdate = true; } set tState0(value) { this.uniforms.tState0.value = value; this.uniformsNeedUpdate = true; } set tState1(value) { this.uniforms.tState1.value = value; this.uniformsNeedUpdate = true; } set tState2(value) { this.uniforms.tState2.value = value; this.uniformsNeedUpdate = true; } set tState3(value) { this.uniforms.tState3.value = value; this.uniformsNeedUpdate = true; } set tState4(value) { this.uniforms.tState4.value = value; this.uniformsNeedUpdate = true; } set tState5(value) { this.uniforms.tState5.value = value; this.uniformsNeedUpdate = true; } set tState6(value) { this.uniforms.tState6.value = value; this.uniformsNeedUpdate = true; } set tState7(value) { this.uniforms.tState7.value = value; this.uniformsNeedUpdate = true; } set forceFieldLinePoint(value) { this.uniforms.forceFieldLinePoint.value = value; this.uniformsNeedUpdate = true; } set forceFieldLineDirection(value) { this.uniforms.forceFieldLineDirection.value = value; this.uniformsNeedUpdate = true; } }37:T434,md` ### The knowns drawbacks are - **cannot easily move emitter** of the live particle system, as the movement generates additional state, not known to the particle system, **but this can be overcome** by generating a new particle system instance per act of emission combined with particles emitted retroactively - check out **demo on [@ndry/interpolated-trail](https://observablehq.com/@ndry/interpolated-trail)** - check out 'retroactive on line' emitter [above ↑](#emitterBehavior) - additional particle systems cause low to no overhead as they are still just one (instanced) mesh per act of emission (compared to particle systems having each particle as a separate mesh) - particles **cannot interact** as interactions generate state - can be countered by using texture buffer - check out **demo using [Use Stateful Particle System](#useStatefulParticleSystem) toggle** - instance matrices are calculated per vertex instead of per instance - can be countered by precalculating instance matrices onto texture, check out "Use buffered material" toggle `38:T669,randomBySpatialChunk = ` // source: https://stackoverflow.com/a/17479300/2224730 /* static.frag by Spatial 05 July 2013 */ // A single iteration of Bob Jenkins' One-At-A-Time hashing algorithm. uint hash( uint x ) { x += ( x << 10u ); x ^= ( x >> 6u ); x += ( x << 3u ); x ^= ( x >> 11u ); x += ( x << 15u ); return x; } // Compound versions of the hashing algorithm I whipped together. uint hash( uvec2 v ) { return hash( v.x ^ hash(v.y) ); } uint hash( uvec3 v ) { return hash( v.x ^ hash(v.y) ^ hash(v.z) ); } uint hash( uvec4 v ) { return hash( v.x ^ hash(v.y) ^ hash(v.z) ^ hash(v.w) ); } // Construct a float with half-open range [0:1] using low 23 bits. // All zeroes yields 0.0, all ones yields the next smallest representable value below 1.0. float floatConstruct( uint m ) { const uint ieeeMantissa = 0x007FFFFFu; // binary32 mantissa bitmask const uint ieeeOne = 0x3F800000u; // 1.0 in IEEE binary32 m &= ieeeMantissa; // Keep only mantissa bits (fractional part) m |= ieeeOne; // Add fractional part to 1.0 float f = uintBitsToFloat( m ); // Range [1:2] return f - 1.0; // Range [0:1] } // Pseudo-random value in half-open range [0:1]. float random( float x ) { return floatConstruct(hash(floatBitsToUint(x))); } float random( vec2 v ) { return floatConstruct(hash(floatBitsToUint(v))); } float random( vec3 v ) { return floatConstruct(hash(floatBitsToUint(v))); } float random( vec4 v ) { return floatConstruct(hash(floatBitsToUint(v))); } `39:T449,transformChunk = ` const mat4 identity = mat4(1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0); const mat4 scaleZero = mat4(0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0); mat4 translate(vec3 d) { return mat4(1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, d.x, d.y, d.z, 1.0); } mat4 scale(vec3 s) { return mat4(s.x, 0.0, 0.0, 0.0, 0.0, s.y, 0.0, 0.0, 0.0, 0.0, s.z, 0.0, 0.0, 0.0, 0.0, 1.0); } mat4 rotate(vec3 axis, float angle) { axis = normalize(axis); float s = sin(angle); float c = cos(angle); float oc = 1.0 - c; return mat4( oc * axis.x * axis.x + c, oc * axis.x * axis.y - axis.z * s, oc * axis.z * axis.x + axis.y * s, 0.0, oc * axis.x * axis.y + axis.z * s, oc * axis.y * axis.y + c, oc * axis.y * axis.z - axis.x * s, 0.0, oc * axis.z * axis.x - axis.y * s, oc * axis.y * axis.z + axis.x * s, oc * axis.z * axis.z + c, 0.0, 0.0, 0.0, 0.0, 1.0 ); } `3a:[] 2f:{"id":"5125f99462349a32","slug":"procedural-particles-on-gpu","title":"Procedural (stateless, declarative) particles on GPU using geometry instancing","thumbnail":"6a986c97a9071eb28fb560295a747013dd2e308c5e17b48218b78c5399943368","access_level":"public","create_time":"$D2023-02-15T19:00:41.821Z","update_time":"$D2023-02-26T19:49:30.233Z","view_time":null,"first_public_time":"$D2023-02-15T19:00:41.821Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0769ff99b3875329","login":"ndry","name":"x","avatar_url":"https://avatars-next.observableusercontent.com/c755f3e157b7a2713dd9b99ae6d708461888bf021a63291ec0082c0be57acf53","tier":"starter_2024"},"version":2479,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"45218b3eb975ae76","login":"gb1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c755f3e157b7a2713dd9b99ae6d708461888bf021a63291ec0082c0be57acf53","tier":null}],"members":[{"type":"individual","id":"45218b3eb975ae76","login":"gb1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c755f3e157b7a2713dd9b99ae6d708461888bf021a63291ec0082c0be57acf53","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"0b7a438605508cba","slug":"index","title":"Index","owner":{"id":"0769ff99b3875329","login":"ndry","name":"x"}},"type":"notebook","body":{"title":"Procedural (stateless, declarative) particles on GPU using geometry instancing","cells":[{"id":0,"value":"# Procedural (stateless, declarative) particles on GPU using geometry instancing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1187,"value":"md`\nThe below particle system is implemented on top of THREE.InstancedMesh with default materials tweaked in a generalized way by substituting original CPU-sent instance matrix \\`mat4 instanceMatrix\\` with GPU-calculated instance matrix \\`mat4 instanceMatrix2 = particleMain();\\`.\n\n\\`instanceMatrix2\\` is deterministically pseudorandomly derived from an id of a current instance \\`gl_InstanceID\\` and current time updated per frame.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"renderer.domElement","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":361,"value":"fps(timeSec)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":346,"value":"viewof countPow = Object.assign(\n Inputs.range([1, 20], {\n label: \"Particle Count Power\",\n step: 0.01,\n value: 8,\n width\n }),\n {\n // kind of debounce: https://github.com/observablehq/inputs/issues/151\n oninput: (event) => event.isTrusted && event.stopImmediatePropagation(),\n onchange: (event) => event.currentTarget.dispatchEvent(new Event(\"input\"))\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":364,"value":"count = Math.floor(Math.pow(2, countPow))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":575,"value":"viewof gravity = Inputs.range([-20, 20], {\n label: \"Gravity\",\n step: 0.01,\n value: -10,\n width\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2467,"value":"md`An interesting perk is the performance does not degrade with higher playback speed, and the playback speed can be negative`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2453,"value":"viewof timeSpeed = Inputs.range([-20, 20], {\n label: \"Speed of time (can be negative)\",\n step: 0.01,\n width,\n value: 1,\n disabled: useStatefulParticleSystem\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":887,"value":"viewof materialType = Inputs.radio(\n [\"basic\", \"lambert\", \"phong\", \"standard\", \"toon\", \"normal\", \"physical\"],\n {\n label: \"Material\",\n value: \"phong\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":977,"value":"viewof geomtryType = Inputs.radio([\"box\", \"suzanne\"], {\n label: \"Geometry\",\n value: \"suzanne\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1612,"value":"viewof emitterBehavior = Inputs.radio(\n useStatefulParticleSystem\n ? [\"static eternal\"]\n : [\n \"static eternal\",\n \"static 3sec\",\n \"moves along circle\",\n \"moves along circle eternal\",\n \"retroactive on line\"\n ],\n {\n label: \"Emitter behavior\",\n value: useStatefulParticleSystem\n ? \"static eternal\"\n : \"moves along circle eternal\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2232,"value":"viewof bufferType = Inputs.radio(\n useStatefulParticleSystem ? [\"-\"] : [\"none\", \"buffer\", \"four buffer\"],\n {\n label: \"Buffer type\",\n value: useStatefulParticleSystem ? \"-\" : \"none\",\n disabled: useStatefulParticleSystem\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2071,"value":"viewof useStatefulParticleSystem = Inputs.toggle({\n label:\n \"Use stateful particle system (work in progress) (use your pointer to interact with particles)\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2062,"value":"viewof run = Inputs.toggle({\n label: \"Run\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":995,"value":"md`## Configuration of particle system`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1627,"value":"emitterTransform = ({\n \"static eternal\": `return identity;`,\n \"static 3sec\": `return (timeSec < 0.0 || timeSec > 3.0) ? scaleZero : identity;`,\n \"moves along circle\": `return (timeSec < 0.0) ? scaleZero : translate(10.0 * vec3(sin(timeSec), 0.0, -cos(timeSec)));`,\n \"moves along circle eternal\": `return translate(10.0 * vec3(sin(timeSec), 0.0, -cos(timeSec)));`,\n \"retroactive on line\": `return (timeSec >= 0.0) ? scaleZero : translate(vec3(30.0 * timeSec, 0.0, 0.0));`\n}[emitterBehavior] ?? `return identity;`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":461,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1725,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1844,"value":"class StatelessParticlesMaterial extends THREE.ShaderMaterial {\n constructor({ particleSystemChunk, ...hostMaterialConfig }) {\n super({\n ...hostMaterialConfig,\n uniforms: THREE.UniformsUtils.merge([\n hostMaterialConfig.uniforms,\n { timeSec: { value: 0.0 } }\n ]),\n vertexShader: resolveIncludes(hostMaterialConfig.vertexShader)\n .replaceAll(\"instanceMatrix\", \"instanceMatrix2\")\n .replace(\n \"void main() {\",\n `\n${particleSystemChunk} \nuniform float timeSec;\nvoid main() { \n mat4 instanceMatrix2 = particleMain(\n timeSec, \n (1.0 + float(gl_InstanceID)) / ${toGlslFloatLiteral(count)}, \n gl_InstanceID == 0);\n`\n )\n });\n }\n set timeSec(value) {\n this.uniforms.timeSec.value = value;\n this.uniformsNeedUpdate = true;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1920,"value":"createTextureBuffer = (instanceCount, instanceDataSize) => {\n const textureArea = instanceCount * instanceDataSize;\n const width = THREE.MathUtils.ceilPowerOfTwo(Math.sqrt(textureArea));\n if (width > renderer.capabilities.maxTextureSize) {\n // todo: handle, try 3d texture?\n throw Error(\"particles buffer cannot fit into maxTextureSize\");\n }\n const height = THREE.MathUtils.ceilPowerOfTwo(textureArea / width);\n return new THREE.WebGLRenderTarget(width, height, {\n magFilter: THREE.NearestFilter,\n minFilter: THREE.NearestFilter,\n format: THREE.RGBAFormat,\n type: THREE.FloatType\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1981,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2010,"value":"class InstanceMatrixBufferReaderMaterial extends THREE.ShaderMaterial {\n constructor({ textureSize, dataSize, ...hostMaterialConfig }) {\n super({\n ...hostMaterialConfig,\n uniforms: THREE.UniformsUtils.merge([\n hostMaterialConfig.uniforms,\n { tState: { value: null } }\n ]),\n vertexShader: resolveIncludes(hostMaterialConfig.vertexShader)\n .replaceAll(\"instanceMatrix\", \"instanceMatrix2\")\n .replace(\n \"void main() {\",\n `\n${randomAccessTextureChunk}\nuniform sampler2D tState;\nvoid main() { \n mat4 instanceMatrix2 = readMat4(tState, \n vec2(0.0, float(gl_InstanceID)), \n 1.0 / ${toGlslVecLiteral(textureSize.width, textureSize.height)}, \n ${toGlslFloatLiteral(dataSize.width)}\n );\n`\n )\n });\n }\n set tState(value) {\n if (this.uniforms.tState.value === value) {\n return;\n }\n this.uniforms.tState.value = value;\n this.uniformsNeedUpdate = true;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2218,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2223,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2100,"value":"md`## Stateful (work in progress)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2270,"value":"viewof particlesSysytemType = Inputs.radio(\n useStatefulParticleSystem ? [\"-\"] : [\"demo\", \"reduced\"],\n {\n label: \"Partcile system\",\n value: useStatefulParticleSystem ? \"-\" : \"demo\",\n disabled: useStatefulParticleSystem\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2105,"value":"statefulParticleSystemChunk = `\n${myRandChunk}\n${easingChunk}\n${zoneChunk}\n${transformChunk}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2069,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1201,"value":"md`## Details`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1035,"value":"md`\n### The benefits of the method provided are\n\n- it **calculates** instance matrices **on GPU** instead of CPU (Note: CPU is sequential in case of js)\n\n- it **does not transfer** potentially large amounts of instance matrices **data to GPU**\n\n- it's **stateless**: the full state of the particle system at any given moment of time is a **pure function of time**\n\n- it **emits retroactively** (preemits) with zero overhead: as particle state is just a function of time, particles can easily be calculated for negative time, as if system was seemlessly emitting even before it was created *(check out \"static endless\" and \"retroactive on line\" emitters)*\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1172,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1162,"value":"md`## Further work`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1686,"value":"md`\n### ✓ demo pseudocontinious discrete emission\n\n[@ndry/interpolated-trail](https://observablehq.com/@ndry/interpolated-trail)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1684,"value":"md`\n### State accumulation\n\n✓ investigate state accumulation by using texture / UPD: doable\n\nok, demo state accumulation then\n - ✓ with env: make generated particles avoid mouse pointer (apply force)\n - done, check out [Use Stateful Particle System](#useStatefulParticleSystem) toggle\n - [ ] with peers: ?? (is N^2 time complexity ok?)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1680,"value":"md`\n### Instance matrix precalculation\n\n✓ investigate ways to calculate instance matrix once per instance, not once per vertex\n\n- \"WebGL doesn't support geometry shaders, won't any time soon, but you can emulate them with texture samplers. A texture image is just a big typed array, and you have random access unlike vertex attributes.\" https://acko.net/blog/yak-shading/ (September 27, 2015))\n\n- UPD: \"Use buffered material\" toggle precalculates instance matrices onto texture\n\n[ ] can I render texture right into instancing buffer?\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1818,"value":"md`### Other\n\n[ ] InstancedMesh still uploads initial (empty) matrix array -- can I make it not to?\n\n[ ] Make material change not reset particles\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":489,"value":"md`## Rendering setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"timeSec = {\n if (!run) {\n return;\n }\n while (true) {\n yield performance.now() * 0.001;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1732,"value":"{\n instancedMesh.update(timeSec);\n scene.update(timeSec);\n renderer.render(scene, scene.camera);\n return \"update & render\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"scene = {\n const scene = new THREE.Scene();\n scene.add(new THREE.AmbientLight(0xffffff, 0.2));\n scene.add(new THREE.GridHelper());\n\n const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);\n directionalLight.add(\n new THREE.Mesh(new THREE.SphereGeometry(), new THREE.MeshBasicMaterial())\n );\n scene.add(directionalLight);\n\n const camera = new THREE.PerspectiveCamera();\n camera.position.set(0, 10, 30);\n camera.aspect = renderer.domElement.width / renderer.domElement.height;\n camera.updateProjectionMatrix();\n const orbitControls = new THREE.OrbitControls(camera, renderer.domElement);\n orbitControls.target = new THREE.Vector3(0, 5, 0);\n\n scene.update = (timeSec) => {\n orbitControls.update();\n directionalLight.position\n .set(\n Math.sin(timeSec / 2),\n 0.5 * Math.cos(timeSec / 5),\n Math.cos(timeSec / 2)\n )\n .multiplyScalar(40);\n directionalLight.lookAt(0, 0, 0);\n };\n scene.camera = camera;\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"renderer = {\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setPixelRatio(window.devicePixelRatio);\n renderer.setSize(width, width / 2);\n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":492,"value":"md`## Shader chunks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":724,"value":"easingChunk = `\nfloat easeInQuad(float t) { return t * t; }\nfloat easeOutQuad(float t) { return t * (2.0 - t); }\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":844,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":528,"value":"myRandChunk = `\n${randomBySpatialChunk}\nfloat myRandSeed = 0.0;\nfloat myRand() { return myRandSeed = random(myRandSeed); }\nfloat randInRange(float a, float b) {\n return mix(a, b, myRand());\n}\nvec3 randDir3() {\n // based on https://github.com/mrdoob/three.js/blob/b4b756539e0e8c3e49d13cee062c77156a1cdd5d/src/math/Vector3.js#L686\n float u = randInRange(-1.0, 1.0);\n float t = randInRange(0.0, PI2);\n float f = sqrt(1.0 - u*u);\n return vec3(f * cos(t), f * sin(t), u);\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":781,"value":"zoneChunk = `\nvec3 randInBoxZone(vec3 a, vec3 b) {\n return vec3(\n randInRange(a.x, b.x),\n randInRange(a.y, b.y),\n randInRange(a.z, b.z)\n );\n}\nvec3 randInBallZone() {\n // based on https://stackoverflow.com/a/54544972/2224730\n return randDir3() * pow(myRand(), 1.0 / 3.0);\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":484,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1825,"value":"randomAccessTextureChunk = `\nvec2 uvToDataCoords(vec2 uv, vec2 textureSize, float sizeOfData) { \n vec2 texelCoords = uv * textureSize - 0.5;\n float fractionalIndex = (texelCoords.y * textureSize.x + texelCoords.x) / sizeOfData;\n return vec2(fract(fractionalIndex) * sizeOfData, floor(fractionalIndex));\n}\nvec2 dataCoordsToUv(vec2 dataCoords, vec2 texelSize, float sizeOfData) {\n float fractionalIndex = (dataCoords.y * sizeOfData + dataCoords.x) * texelSize.x;\n return vec2(fract(fractionalIndex), floor(fractionalIndex) * texelSize.y) + 0.5 * texelSize;\n}\n\nmat4 readMat4(sampler2D s, vec2 dataCoords, vec2 texelSize, float sizeOfData) {\n return mat4(\n texture2D(s, dataCoordsToUv(dataCoords + vec2(0.0, 0.0), texelSize, sizeOfData)),\n texture2D(s, dataCoordsToUv(dataCoords + vec2(1.0, 0.0), texelSize, sizeOfData)),\n texture2D(s, dataCoordsToUv(dataCoords + vec2(2.0, 0.0), texelSize, sizeOfData)),\n texture2D(s, dataCoordsToUv(dataCoords + vec2(3.0, 0.0), texelSize, sizeOfData))\n );\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1003,"value":"md`## Imports & utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1933,"value":"renderFsQuad = {\n const fsQuad = new THREE.FullScreenQuad();\n invalidation.then(() => fsQuad.dispose());\n return (renderer, material, buffer) => {\n fsQuad.material = material;\n const originalRenderTarget = renderer.getRenderTarget();\n if (buffer) {\n renderer.setRenderTarget(buffer);\n }\n fsQuad.render(renderer);\n renderer.setRenderTarget(originalRenderTarget);\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":870,"value":"suzanneGeometry = {\n const suzanne = await new Promise((resolve) => {\n new THREE.BufferGeometryLoader().load(\n \"https://threejs.org/examples/models/json/suzanne_buffergeometry.json\",\n resolve\n );\n });\n suzanne.computeVertexNormals();\n return suzanne;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":446,"value":"toGlslFloatLiteral = (x) => (x % 1 ? x.toString() : x.toFixed(1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1855,"value":"toGlslVecLiteral = (...vec) =>\n `vec${vec.length}(${vec.map(toGlslFloatLiteral).join(\", \")})`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":499,"value":"resolveIncludes = {\n // based on https://github.com/mrdoob/three.js/blob/b9bc47ab1978022ab0947a9bce1b1209769b8d91/src/renderers/webgl/WebGLProgram.js#L204\n function resolveIncludes(string) {\n return string.replace(\n /^[ \\t]*#include +<([\\w\\d./]+)>/gm,\n (match, include) => resolveIncludes(THREE.ShaderChunk[include])\n );\n }\n return resolveIncludes;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"THREE = {\n const version = `0.147.0`;\n const THREE = (window.THREE =\n await require(`three@${version}/build/three.min.js`));\n await require(`three@${version}/examples/js/controls/OrbitControls.js`).catch(\n () => {}\n );\n await require(`three@${version}/examples/js/shaders/CopyShader.js`).catch(\n () => {}\n );\n await require(`three@${version}/examples/js/postprocessing/Pass.js`).catch(\n () => {}\n );\n await require(`three@${version}/examples/js/postprocessing/ShaderPass.js`).catch(\n () => {}\n );\n await require(`three@${version}/examples/js/postprocessing/EffectComposer.js`).catch(\n () => {}\n );\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":355,"value":"import { fps } from \"@zzzev/fps-counter\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 30:"$2f:body"