如何检测webgl中的冲突？

Question

如何在不使用像three.js这样的库的情况下检测webgl中的冲突？

Answer 1

如何检测webgl中的冲突

你没有。 像OpenGL一样，WebGL仅用于绘制内容。 它不管理一个场景，它没有“对象”的概念或像碰撞这样的高级别的东西。 这些都是关于点，线，三角形和着色器的。

与场景管理或冲突相关的任何内容都不在WebGL（和OpenGL）的范围之内。

Answer 2

一种简单的方法是在GPU上进行射线碰撞检测。 查看以下有关该主题的博文。

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

主要思想是使用着色器将场景渲染到纹理（使用FBO），该着色器可以保存对象ID而不是颜色。 然后，您可以非常快速地在此纹理中查找以查看光线与之碰撞的内容。

Answer 3

从星期天开始，我正试图解决同样的问题。 虽然www中有很多信息，但我无法让它在我的示例程序上运行。 一旦我解决了，我就会在这里发布我的例子。

我的最后一次尝试是使用glu-unProject端口进行webGL。 这个需要以下参数：

功能（winX，winY，winZ，model，proj，view，objPos）

我试图直接从我的场景绘图功能调用此函数进行测试。

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是画布和视口宽度/高度 - this.pLastMouse.x和.y是画布内的鼠标坐标

zI.debug(aTest);

但结果完全是废话 。 我想我的代码中有几个错误。 我上周五开始玩WebGL。 我不想早点放弃，但从那时起我就解决了许多问题，但是这个问题让我发疯了。

在openGL中，它对我来说要容易得多。

Answer 4

我推荐以下网页（不幸的是只提供德语版） http://www.peter-strohm.de/webgl/webgltutorial8.php

我们能够实现冲突检测，甚至可以使用id映射在服务器上执行API调用（例如，显示工具提示，其中包含场景中某个对象的附加信息）。

我希望这个能有一点帮助。