CODEWITHSUNDEEP
webgl
Sergio
Sergio

Reputation: 1

Draw points with different point size

I have to draw something and I need to use two or more size points. I don't know how to get it, I only have one point size from my vertex shader.

<script id="myVertexShader" 
          type="x-shader/x-vertex">#version 300 es

      in  vec3 VertexPosition;
      in  vec4 VertexColor;

      out vec4 colorOut;

      uniform float pointSize;

      void main()  {

        colorOut    = VertexColor;
        gl_Position = vec4(VertexPosition, 1.0);
        gl_PointSize = 10.0;

      }

    </script>

Upvotes: 0

Views: 3619

Answers (1)

user128511
user128511

Reputation:

Answer: You set gl_PointSize

Examples:

Using a constant

 gl_PointSize = 20.0;

Using a uniform

 uniform float pointSize;
 gl_PointSize = pointSize;

Using some arbitrary formula

 // base the size on the red and blue colors
 gl_PointSize = abs(VertexColor.r * VertexColor.b) * 20.0;

Using a an attribute

 attrbute float VertexSize;
  ...
 gl_PointSize = VertexSize;

Any combination of the above (eg:

 attrbute float VertexSize;
 uniform float baseSize;

 // use a uniform, an atribute, some random formula, and a constant
 gl_PointSize = baseSize + VertexSize + abs(VertexColor.r * VertexColor.b) * 10.0;

PS: the forumla above is nonsense. The point is you set gl_PointSize. How you set it is up to you.

Note there are issues with gl.POINTS

  1. WebGL implementations have a maximum point size. That maximum size is not required > 1.0. So if you want to draw points of any size you can not use gl.POINTS

  2. WebGL doesn't guarantee whether or not large points who's center is outside the viewport will be drawn. So if you want to draw sizes larger than 1.0 and you want them to behave the same across devices you can't use gl.POINTS

See this

Upvotes: 3

Related Questions