Webgl 使用不同的点大小绘制点

我必须画一些东西，我需要使用两个或更多的尺寸点。我不知道如何得到它，我的顶点着色器只有一个点大小

<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>

#版本300 es
在vec3中；
在vec4中，顶点颜色；
输出vec4着色；
均匀浮点大小；
void main（）{
着色=顶点颜色；
gl_位置=vec4（1.0）；
gl_PointSize=10.0；
}

回答：您设置了

gl\u PointSize

示例：

使用常数

 gl_PointSize = 20.0;

穿制服

 uniform float pointSize;
 gl_PointSize = pointSize;

使用一些任意公式

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

使用属性

 attrbute float VertexSize;
  ...
 gl_PointSize = VertexSize;

上述各项的任意组合（例如：

PS：上面的公式是胡说八道。重点是你设置的

gl\u PointSize

。如何设置取决于你自己

注意

gl.积分存在问题

WebGL实现有一个最大点大小。该最大大小不是必需的>1.0。因此，如果要绘制任何大小的点，则不能使用
gl.points

WebGL不保证是否会绘制中心位于视口外的大点。因此，如果要绘制大于1.0的尺寸，并且希望它们在设备上的行为相同，则不能使用
gl.points

看

 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;