How to detect collision in webgl?

Question

How to detect collision in webgl, without using any library like three.js?

Answer 1

I would recommend the following webpage (unfortunately only available in German) http://www.peter-strohm.de/webgl/webgltutorial8.php

We were able to implement collision detection and could even perform API calls on a server using id mapping (e.g. show tooltips with additional information for a certain object in the scene).

I hope this helps a bit.

Answer 2

Since sunday I'm trying to solve the same problem. Although there is much information in the www, I wasn't able to get it working on my example-program. As soon as I solve it, I'll post my example in here.

My last try was to use the glu-unProject port for webGL. This one needs the following parameters:

function(winX, winY, winZ, model, proj, view, objPos)

I've tried to call this function directly from my scene-drawing function for testing purposes.

var pMatrix  = new mat4.ortho(iL, iR, iB, iT, fNearZ, farZ);
var mvMatrix = new mat4.create();

mat4.identity(mvMatrix);
mat4.translate(mvMatrix,[0,0,-40]);

var oMouseMatrix = mat4.create();
mat4.identity(oMouseMatrix);

//Rotate eye :-S
mat4.rotate(oMouseMatrix,((this.fAnimationXAngle/10) * Math.PI) / 360.0,[0,1,0]);
mat4.rotate(oMouseMatrix,((this.fAnimationYAngle/10) * Math.PI) / 360.0,[1,0,0]);

mat4.multiply(oMouseMatrix, mvMatrix, mvMatrix);

//Rotate model
mat4.rotateX(mvMatrix,this.fRotX * Math.PI / 180.0);
mat4.rotateY(mvMatrix,this.fRotY * Math.PI / 180.0);
mat4.rotateZ(mvMatrix,this.fRotZ * Math.PI / 180.0);



var aTest = this.unProject(
    this.pLastMouse.x,
    this.pLastMouse.y,
    0,
    mvMatrix,
    pMatrix,
    [0,0,this.iWidth,this.iHeight]
);

this.iWidth & this.iHeight are the canvas and viewport width/height - this.pLastMouse.x & .y are the mouse-coordinates inside the canvas

zI.debug(aTest);

But the result is totally crap. I guess there are several errors in my code. I've started playing around with WebGL just last friday. I didn't want to give up that early, but I've solved many problems since then, but this one is making me crazy.

In openGL it was much easier to me.

Answer 3

How to detect collision in webgl

You don't. WebGL, like OpenGL is only for drawing stuff. It doesn't manage a scene, it has no notion of "objects" or such high level things like collisions. It's all about points, lines, triangles and shaders.

Anything related to scene management or collisions lies outside the scope of WebGL (and OpenGL).

Answer 4

A simple approach it to do ray collision detection on the GPU. Checkout the following blogpost about the topic.

http://blog.xeolabs.com/ray-picking-in-scenejs

The main idea is to render the scene to a texture (using a FBO) using a shader that saves object ids instead of color. Then you can very fast do a lookup in this texture to see what a ray collides with.