1

I can render a single 2d particle using sdf like this:

void renderShape(out vec3 col, vec2 p) {
  vec2 translation = vec2(0.0, 0.5);
  // some math
  col = // some color.
}

translation variable controls where to render this particle.

Now I calculate particle positions on the cpu, and need to pass these positions to the shaders and render each particle on different positions. How do I do that?

Currently only data I pass is the vertices of a quad like this:

  let positions = [
    -1, 1,
    -1, -1,
    1, -1,
    -1, 1,
    1,-1,
    1, 1
  ];

  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

// on render

gl.bindVertexArray(vao);
gl.drawArrays(gl.TRIANGLES, 0, 6);

vertex shader:

#version 300 es

precision mediump float;

in vec2 a_position;

uniform vec2 u_resolution;

void main() {
  gl_Position = vec4(a_position, 0, 1);
}

I want particles to combine with each other (using union operation) so I can't render them individually like with gl.POINTS

gman
  • 100,619
  • 31
  • 269
  • 393
eguneys
  • 6,028
  • 7
  • 31
  • 63
  • here's an example to work with: https://jsfiddle.net/eguneys/h15cef0g/29/ – eguneys Aug 20 '19 at 10:03
  • I think somewhat related to this https://stackoverflow.com/questions/7954927/passing-a-list-of-values-to-fragment-shader – eguneys Aug 20 '19 at 10:23
  • 1
    It sounds like you're asking for an entire tutorial on WebGL. Maybe go read [some tutorials](https://webglfundamentals.org). Rendering generic particles in SDFs in a quad will be extremely slow. – gman Aug 20 '19 at 12:28
  • if i understand well the question - you should move vertex position to fragment shader with `varying` variable, and then in fragment shader use it and apply some functions that will manipulate color of frag in the vertex position along with its surroundings. – mtx Aug 23 '19 at 17:50

0 Answers0