2011-12-11 19 views
5

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

+1

Esto puede ser difícil de hacer. De todos modos, ¿por qué no quieres una biblioteca para él? –

+0

También soy anti-biblioteca – ajax333221

+1

@ ajax333221 Las bibliotecas hacen nuestra vida mucho más fácil.:) –

Respuesta

13

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).

+0

¿cómo puedo calcularlo en js? –

+3

@DannyFox: de la misma manera que lo calcularía en cualquier otro idioma: resolviendo las diversas ecuaciones de las pruebas de intersección geométrica y extrayendo las colisiones del resultado. Hay un excelente libro sobre el tema: http://realtimecollisiondetection.net/ – datenwolf

+0

Definitivamente puede resolver la colisión con OpenGL (y probablemente WebGL) mediante el uso de sombreadores. Dale a los objetos diferentes colores y luego combina los dos usando la mezcla. Si hay uno o más píxeles en la imagen resultante que es un color diferente de los dos objetos (por ejemplo, algunos píxeles del objeto se mezclaron con los píxeles de los otros objetos), hay una colisión. – Willem

3

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.

+0

Esto solo funciona para probar rayos provenientes del punto de vista o con geometría no ocluida. – datenwolf

+0

Sí, la solución solo funciona con colisión de rayos, pero la pregunta no indicaba qué tipo de detección de colisión se necesitaba. Mi punto es que algunas pruebas de colisión pueden funcionar perfectamente bien en la GPU (pero no es una solución general) – Mortennobel

+0

gracias, pero está en scene.js. Quiero hacerlo sin ninguna biblioteca –

1

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í.

+0

gracias, lo intentaré –

1

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.