\#4: port drawParticles to shader preprocessor

src/renderWebGL.ts

@@ -3,8 +3,7 @@ import {Params} from './params';
 import {GPUState} from './state';
 import {memoize} from './util';
 import {mat4} from 'gl-matrix';
-import drawParticlesVert from './drawParticles.vert.glsl';
-import drawParticlesFrag from './drawParticles.frag.glsl';
+import {drawParticlesVs, drawParticlesFs} from './shader/drawParticles';
 
 const getCircleVertexBuffer = memoize(
   (gl: WebGL2RenderingContext, vertexCount: number) =>
@@ -27,11 +26,11 @@ const getCircleVAO = memoize(
 );
 
 const getDrawParticlesVert = memoize((gl: WebGL2RenderingContext) =>
-  createShader(gl, {source: drawParticlesVert, type: gl.VERTEX_SHADER})
+  createShader(gl, {source: drawParticlesVs, type: gl.VERTEX_SHADER})
 );
 
 const getDrawParticlesFrag = memoize((gl: WebGL2RenderingContext) =>
-  createShader(gl, {source: drawParticlesFrag, type: gl.FRAGMENT_SHADER})
+  createShader(gl, {source: drawParticlesFs, type: gl.FRAGMENT_SHADER})
 );
 
 const getDrawParticlesProgram = memoize((gl: WebGL2RenderingContext) =>

src/shader/drawParticles.ts

@@ -0,0 +1,37 @@
+import {compile, glsl} from '../glslpp';
+import {
+  densitySampler,
+  particleRadius,
+  positionSampler,
+  projection,
+  resolution,
+  velocitySampler,
+} from './uniforms';
+
+export const drawParticlesVs = compile(glsl`
+in vec2 circleOffset;
+
+out vec4 color;
+
+void main() {
+  int particleIndex = gl_InstanceID;
+  ivec2 texCoord = ivec2(particleIndex % ${resolution}.x, particleIndex / ${resolution}.x);
+  vec2 pos = texelFetch(${positionSampler}, texCoord, 0).xy;
+  vec2 vel = texelFetch(${velocitySampler}, texCoord, 0).xy;
+  float density = texelFetch(${densitySampler}, texCoord, 0).x;
+
+  vec2 vertexPos = pos + circleOffset * ${particleRadius};
+  gl_Position = ${projection} * vec4(vertexPos, 0., 1.);
+  color = vec4(vel * 2. + 0.5, density, 1.);  
+}
+`);
+
+export const drawParticlesFs = compile(glsl`
+in vec4 color;
+
+out vec4 outColor;
+
+void main() {
+  outColor = color;
+}
+`);

src/shader/uniforms.ts

@@ -33,6 +33,7 @@ export const pointerDown = new GLSLUniform('pointerDown', 'int');
 export const pointerPos = new GLSLUniform('pointerPos', 'vec2');
 export const pointerVel = new GLSLUniform('pointerVel', 'vec2');
 export const positionSampler = new GLSLUniform('positionSampler', 'sampler2D');
+export const projection = new GLSLUniform('projection', 'mat4');
 export const resolution = new GLSLUniform('resolution', 'ivec2');
 export const restDensity = new GLSLUniform('restDensity', 'float');
 export const sigma = new GLSLUniform('sigma', 'float');