WebGL ALIASED_POINT_SIZE_RANGE

by Ludovic Bailly

HTML

<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
<script src="https://webglfundamentals.org/webgl/resources/webgl-lessons-helper.js"></script>
<script src="https://webglfundamentals.org/webgl/lessons/resources/3d-math.js"></script>
<!-- vertex shader -->
<script id="2d-vertex-shader" type="x-shader/x-vertex">
precision highp float;

attribute vec3 a_position;
attribute float a_pointSize;
attribute vec3 a_color;

varying vec3 color;

void main() {
	 color = a_color;
   
	 gl_PointSize = a_pointSize;
   gl_Position = vec4(a_position, 1.0);
}
</script>
<!-- fragment shader -->
<script id="2d-fragment-shader" type="x-shader/x-fragment">
precision highp float;

varying vec3 color;

void main() {
   gl_FragColor = vec4(color, 1.0);
}
</script>
<canvas id="c"></canvas>

CSS

body {
  margin: 0;
}

canvas {
  width: 100vw;
  height: 100vh;
  display: block
}

JavaScript

"use strict";

function main() {
  // Creating WebGL context
  var canvas = document.getElementById("c");
  var gl = canvas.getContext("webgl");
  if (!gl) {
    alert("no webgl");
    return;
  }

  // Getting maximum available pointSize
  var maxPointSize = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE)[1];

  // Creating data arrays
  var cubeVertices = [
    0.0, 0.0, 0.0,
    0.0, 0.0, 0.0
  ];
  var pointSizes = [
    maxPointSize + 100.0,
    maxPointSize
  ];
  var colors = [
    1.0, 0.0, 0.0,
    0.0, 1.0, 0.0
  ]

  // Creating program
  var program = webglUtils.createProgramFromScripts(
    gl, ["2d-vertex-shader", "2d-fragment-shader"]);
  gl.useProgram(program);

  // Getting attributes / uniforms locations
  var positionLoc = gl.getAttribLocation(program, "a_position");
  var pointSizeLoc = gl.getAttribLocation(program, "a_pointSize");
  var colorLoc = gl.getAttribLocation(program, "a_color");

  // Creating, filling and associating position buffer
  var positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(cubeVertices), gl.STATIC_DRAW);
  gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 0, 0);
  // Enabling attribute for rendering
  gl.enableVertexAttribArray(positionLoc);

  // Creating, filling and associating point size buffer
  var pointSizeBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, pointSizeBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(pointSizes), gl.STATIC_DRAW);
  gl.vertexAttribPointer(pointSizeLoc, 1, gl.FLOAT, false, 0, 0);
  // Enabling attribute for rendering
  gl.enableVertexAttribArray(pointSizeLoc);

  // Creating, filling and associating color buffer
  var colorBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
  gl.vertexAttribPointer(colorLoc, 3, gl.FLOAT, false, 0, 0);
  // Enabling attribute for rendering
 ...