Getting size of point for collision detection - webgl

Question

Forgive me if my terminology is wrong, but I'm just trying to do some simple point collision detection in WebGL. I have a bunch of gl.POINTS floating around a canvas (640x480, set as HTML attributes), I've set gl_PointSize = 10.0 in my vertex shader, and am trying to convert this to the correct coordinate system.
I just want to do some basic collision detection based on the four corners of each rendered point (just to have the points bounce off each other, given I've increased their size to represent a square).
The issue I'm having is that I can't seem to wrap my head around how to calculate their exact size. I have their vertex location and thought I could simply do a normalization between the canvas size, point size, and the WebGL coordinates of [-1, 1].
Basically, is there a 'simple' way to calculate the precise size of a point?

Answer 1

The size of a point is its center +/- half its size
+-[canvas]-----------------------+
| |
| |
| |
| +---+ |
| | + | |
| +---+ |
| |
+--------------------------------+
In the example above the canvas 32x7
The center of the point is at 4x2 in pixels. Its gl_PointSize is 3. Its clip space position would be
cx = px / canvasWidth * 2 - 1
cx = 4 / 32 * 2 - 1 = -0.75
cy = py / canvasHeight * 2 - 1
cy = 2 / 7 * 2 - 1 = -0.43
Its clip space width and height are
clipWidth = gl_PointSize / canvasWidth
clipHeight = gl_PointSize / canvasHeight
Also remember that +Y is up in WebGL
const gl = document.querySelector('canvas').getContext('webgl');
const vs =`
attribute vec4 position;
attribute float pointSize;
attribute vec4 color;
varying vec4 v_color;
void main() {
gl_Position = position;
gl_PointSize = pointSize;
v_color = color;
}
`;
const fs = `
precision mediump float;
varying vec4 v_color;
void main() {
gl_FragColor = v_color;
}
`;
const prg = twgl.createProgram(gl, [vs, fs]);
const posLoc = gl.getAttribLocation(prg, 'position');
const sizeLoc = gl.getAttribLocation(prg, 'pointSize');
const colorLoc = gl.getAttribLocation(prg, 'color');
const numPoints = 12;
const points = [];
for (let i = 0; i < numPoints; ++i) {
points.push({
x: r(-1, 1),
y: r(-1, 1),
color: [0, r(0, 1), r(0, 1), 1],
size: r(15, 55),
});
}
function r(min, max) {
return Math.random() * (max - min) + min;
}
let px = -10;
let py = -10;
function render() {
gl.useProgram(prg);
// convert mouse to clipspace
const cx = px / gl.canvas.width * 2 - 1;
const cy = py / gl.canvas.height * -2 + 1;
for (const point of points) {
const {x, y, color, size} = point;
// size to clip size
const halfClipWidth = size / gl.canvas.width;
const halfClipHeight = size / gl.canvas.height;
const left = x - halfClipWidth;
const right = x + halfClipWidth;
const top = y + halfClipHeight;
const bottom = y - halfClipHeight;
const hit = cx >= left && cx <= right &&
cy >= bottom && cy <= top;
gl.vertexAttrib2f(posLoc, x, y);
gl.vertexAttrib1f(sizeLoc, size);
gl.vertexAttrib4fv(colorLoc, hit ? [1, 0, 0, 1] : color);
gl.drawArrays(gl.POINTS, 0, 1);
}
}
render();
gl.canvas.addEventListener('mousemove', (e) => {
const rect = gl.canvas.getBoundingClientRect();
px = (e.clientX - rect.left) * gl.canvas.width / gl.canvas.clientWidth;
py = (e.clientY - rect.top) * gl.canvas.height / gl.canvas.clientHeight;
render();
});
body { margin: 40px; }
canvas { border: 1px solid black; }
<canvas></canvas>
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
Also remember that positions in WebGL are edges not pixels. If you have a 2x2 canvas the center of the bottom left pixel in clip space is -0.5, -0.5
-1 0 1
| | |
+---+---+-- 1
| | |
| | |
| | |
+---+---+-- 0
| | |
| + | | <--- you can see the center of that pixel is at -0.5, -0.5
| | |
+---+---+-- -1
In pixel space the same canvas would be
0 1 2
| | |
+---+---+-- 2
| | |
| | |
| | |
+---+---+-- 1
| | |
| + | | <--- you can see the center of that pixel is at 0.5, 0.5
| | |
+---+---+-- 0
gl.POINTS takes the center of the point in pixel space, adds +/- gl_PointSize / 2 to make a rectangle. Any pixel who's center is inside that rectangle will be rendered (or rather considered for rendering given all the other tests depth/stencil/discard, etc...)