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

zI.debug(aTest);

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

在openGL中，对我来说更容易。

Answer 4

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

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

我希望这有点帮助。

如何检测webgl中的冲突？

4 个答案: