How to detect collision in webgl?

Question

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

Answer 1

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.