should work on mobile now?

package.json

@@ -22,7 +22,7 @@
   "dependencies": {
     "dat.gui": "^0.7.7",
     "file-saver": "^2.0.5",
-    "glcompute": "github:amandaghassaei/glcompute#868aa72",
+    "glcompute": "github:amandaghassaei/glcompute#a754314",
     "micromodal": "^0.4.6",
     "three": "^0.122.0"
   },

src/kernels/AdvectParticlesShader.glsl

@@ -31,27 +31,39 @@ void main() {
 		gl_FragColor = texture2D(u_initialPositions, vUV);
 		return;
 	}
-	vec2 position = texture2D(u_positions, vUV).xy;
-	// // Forward integrate via RK2.
+
 	vec2 canvasSize = 1.0 / u_pxSize;
+
+	// Store small displacements as separate number until they acumulate sufficiently.
+	// Then add them to the absolution position.
+	// This prevents small offsets on large abs positions from being lost in float16 precision.
+	vec4 positionData = texture2D(u_positions, vUV);
+	vec2 absolutePosition = positionData.rg;
+	vec2 previousDisplacement = positionData.ba;
+	if (dot(previousDisplacement, previousDisplacement) > 20.0) {
+		absolutePosition += previousDisplacement;
+		// Check if position is outside bounds.
+		if (absolutePosition.x < 0.0) {
+			absolutePosition.x += canvasSize.x;
+		} else if (absolutePosition.x > canvasSize.x) {
+			absolutePosition.x -= canvasSize.x;
+		}
+		if (absolutePosition.y < 0.0) {
+			absolutePosition.y += canvasSize.y;
+		} else if (absolutePosition.y > canvasSize.y) {
+			absolutePosition.y -= canvasSize.y;
+		}
+		previousDisplacement = vec2(0.0);
+	}
+	vec2 position = absolutePosition + previousDisplacement;
+
+	// Forward integrate via RK2.
 	vec2 particleUV1 = getWrappedUV(position * u_pxSize);
 	vec2 velocity1 = texture2D(u_velocity, particleUV1).xy;
 	vec2 halfStep = position + velocity1 * 0.5 * u_dt * canvasSize;
 	vec2 particleUV2 = getWrappedUV(halfStep * u_pxSize);
 	vec2 velocity2 = texture2D(u_velocity, particleUV2).xy;
-	vec2 nextPosition = position + velocity2 * u_dt * canvasSize;
-
-	// Check if position is outside bounds.
-	if (nextPosition.x < 0.0) {
-		nextPosition.x += canvasSize.x;
-	} else if (nextPosition.x > canvasSize.x) {
-		nextPosition.x -= canvasSize.x;
-	}
-	if (nextPosition.y < 0.0) {
-		nextPosition.y += canvasSize.y;
-	} else if (nextPosition.y > canvasSize.y) {
-		nextPosition.y -= canvasSize.y;
-	}
+	vec2 displacement = previousDisplacement + velocity2 * u_dt * canvasSize;
 
-	gl_FragColor = vec4(nextPosition, 0, 0);
+	gl_FragColor = vec4(absolutePosition, displacement);
 }

src/particles.ts

@@ -1,5 +1,5 @@
 import { glcompute, canvas } from './gl';
-import { PointsVertexShader, PassThroughFragmentShader } from 'glcompute';
+import { PassThroughFragmentShader, PointsVertexShaderWithDisplacement } from 'glcompute';
 import { PARTICLE_DENSITY, MAX_NUM_PARTICLES, DT, PARTICLE_LIFETIME, TRAIL_LIFETIME, NUM_RENDER_STEPS } from './constants';
 import { velocityState } from './fluid';
 const particleFragmentSource = require('./kernels/ParticleFragmentShader.glsl');
@@ -14,20 +14,20 @@ function calcNumParticles(width: number, height: number) {
 let NUM_PARTICLES = calcNumParticles(canvas.clientWidth, canvas.clientHeight);
 
 // Init particles.
-let positions = initRandomPositions(new Float32Array(NUM_PARTICLES * 2), canvas.clientWidth, canvas.clientHeight);
+let positions = initRandomPositions(new Float32Array(NUM_PARTICLES * 4), canvas.clientWidth, canvas.clientHeight);
 const particlePositionState = glcompute.initDataLayer('position', {
 	dimensions: NUM_PARTICLES,
 	type: 'float32',
-	numComponents: 2,
+	numComponents: 4, // We are storing abs position (2 components) and displacements (2 components) in this buffer.
 	data: positions,
 }, true, 2);
 // We can use the initial state to reset particles after they've died.
 const particleInitialState = glcompute.initDataLayer('initialPosition', {
 	dimensions: NUM_PARTICLES,
 	type: 'float32',
-	numComponents: 2,
+	numComponents: 4,
 	data: positions,
-}, true, 1);
+}, false, 1);
 const particleAgeState = glcompute.initDataLayer('age', {
 	dimensions: NUM_PARTICLES,
 	type: 'float32', // Init this as a float32 array, bc I'm still trying to figure out how to get int textures working.
@@ -48,9 +48,9 @@ function initRandomAges(_ages: Float32Array) {
 	return _ages;
 }
 export function initRandomPositions(_positions: Float32Array, width: number, height: number) {
-	for (let i = 0; i < _positions.length / 2; i++) {
-		_positions[2 * i] = Math.random() * width;
-		_positions[2 * i + 1] = Math.random() * height;
+	for (let i = 0; i < _positions.length / 4; i++) {
+		_positions[4 * i] = Math.random() * width;
+		_positions[4 * i + 1] = Math.random() * height;
 	}
 	return _positions;
 }
@@ -77,7 +77,7 @@ const renderParticles = glcompute.initProgram('renderParticles', particleFragmen
 		value: PARTICLE_LIFETIME,
 		dataType: 'INT',
 	},
-], PointsVertexShader);
+], PointsVertexShaderWithDisplacement);
 const ageParticles = glcompute.initProgram('ageParticles', ageParticlesSource, [
 	{
 		name: 'u_ages',
@@ -144,7 +144,7 @@ const fadeTrails = glcompute.initProgram('fadeTrails', incrementOpacitySource, [
 
 export function particlesOnResize(width: number, height: number) {
 	NUM_PARTICLES = calcNumParticles(width, height);
-	positions = initRandomPositions(new Float32Array(NUM_PARTICLES * 2), width, height);
+	positions = initRandomPositions(new Float32Array(NUM_PARTICLES * 4), width, height);
 	particlePositionState.resize(NUM_PARTICLES, positions);
 	particleInitialState.resize(NUM_PARTICLES, positions);
 	advectParticles.setUniform('u_pxSize', [1 / width, 1 / height], 'FLOAT');