Texture driven particles in WebGL / OpenGL using a shader

Question

I'm trying to achieve the following task:

I've a grid (plan) of NxM points
I've a texture which each pixel represents a force field for a position X,Y
I would like to iteratively update the initial grid using the force field texture (and a shader)

I guess we might quite easily do this using a "geometry shader" however those are not present in WebGL. Therefore, how could I use a GLSL driven program in order to update the position of the vertexes in my grid ? As I understood, a regular vertex shader do transform the source to something else in one pass, now is there a way to feed this output back in the shader during the next iteration ?

[edit] A possible way I can see right now could be to use a fragment shader which result could then be stored in a texture that I might reinject in the next step.

Kevin Reid · Accepted Answer · 2013-02-26 16:30:11Z

3

Yes, use a fragment shader. Store your grid's state in a texture (for most convenience, a floating-point texture, though that requires an extension), and use a fragment shader to compute a new texture which is the next iteration. Then when actually drawing, a vertex shader reads the texture to determine the vertex coordinates to display.

I've implemented a particle system using this technique. Here's the fragment shader which does the state updates, so you can get an idea of how it works. For each particle, a pair of adjacent texels (providing 8 floats) store its position and velocity.

#ifdef GL_ES
precision highp float;
#endif

uniform sampler2D uState;
uniform float uResolution;
uniform float uDT;
uniform float uHarmonicAccel;

vec4 lookup(float offset) {
  return texture2D(uState, (gl_FragCoord.xy + vec2(offset, 0.0)) / uResolution);
}

void main(void) {
  bool updatingPosition = mod(gl_FragCoord.x, 2.0) < 1.0;
  vec4 posp, velp;
  if (updatingPosition) {
    posp = lookup(0.0);
    velp = lookup(1.0);
  } else {
    posp = lookup(-1.0);
    velp = lookup(0.0);
  }
  vec3 pos = vec3(posp);
  vec3 vel = vec3(velp);

  // velocity update is applied to position as well
  vel += uHarmonicAccel * uDT * normalize(pos);

  if (updatingPosition) {
    gl_FragColor = vec4(pos + uDT * vel, posp[3]);
  } else {
    gl_FragColor = vec4(vel, velp[3]);
  }
}

answered Feb 26, 2013 at 16:30

Kevin Reid

46k14 gold badges99 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Flavien Volken Over a year ago

Using a N x 2 x Vec4 dimensional texture would even be easier to handle than 2 adjacent texels. Good trick btw :-)

Kevin Reid Over a year ago

@FlavienVolken That's being cautious about using a texture which is extremely large in one dimension. I get the impression such may not be supported sometimes.

Collectives™ on Stack Overflow

Texture driven particles in WebGL / OpenGL using a shader

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related