¿Cómo detectar colisión en webgl?

Question

¿Cómo detectar colisión en webgl, sin utilizar ninguna biblioteca como three.js?

Answer 1

la forma de detectar la colisión en webgl

Usted no lo hace. WebGL, como OpenGL, es solo para dibujar cosas. No maneja una escena, no tiene noción de "objetos" o cosas de alto nivel como colisiones. Se trata de puntos, líneas, triángulos y sombreadores.

Cualquier cosa relacionada con la gestión de escena o las colisiones está fuera del alcance de WebGL (y OpenGL).

Answer 2

Un enfoque simple para hacer la detección de colisión de rayos en la GPU. Consulte el siguiente blog sobre el tema.

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

La idea principal es hacer que la escena para una textura (usando una OBF) usando un shader que salva identificadores de los objetos en lugar de color. Entonces puedes hacer una búsqueda muy rápida en esta textura para ver con qué choca un rayo.

Answer 3

Desde el domingo estoy tratando de resolver el mismo problema. Aunque hay mucha información en www, no pude hacerlo funcionar en mi programa de ejemplo. Tan pronto como lo resuelva, publicaré mi ejemplo aquí.

Mi último intento fue utilizar el puerto glu-unProject para webGL. Éste necesita los siguientes parámetros:

función (Winx, vinoso, winz, modelo, proj, mira, objPos)

He tratado de llamar a esta función directamente de mi función de escena de dibujo para propósitos de prueba.

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 son el lienzo y vista anchura/altura - this.pLastMouse.x & .y son las coordenadas del ratón dentro de la tela

zI.debug(aTest); 

pero el resultado es totalmente basura. Supongo que hay varios errores en mi código. Empecé a jugar con WebGL el viernes pasado. No quería darme por vencido tan temprano, pero he resuelto muchos problemas desde entonces, pero este me está volviendo loco.

En OpenGL fue mucho más fácil para mí.

Answer 4

Yo recomendaría la siguiente página web (por desgracia sólo está disponible en alemán) http://www.peter-strohm.de/webgl/webgltutorial8.php

Hemos sido capaces de poner en práctica la detección de colisiones e incluso podía realizar llamadas a la API en el servidor a través de cartografía Identificación (por ejemplo, muestran información sobre herramientas con información adicional para una cierto objeto en la escena).

Espero que esto ayude un poco.