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

===============>>#1 票数:13 已采纳

如何检测webgl中的冲突

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

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

===============>>#2 票数:3

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

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

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

===============>>#3 票数:1

从星期天开始,我正试图解决同样的问题。 虽然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中,它对我来说要容易得多。

===============>>#4 票数:1

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

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

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

  ask by Danny Fox translate from so

未解决问题?本站智能推荐:

1回复

如何检测WebGL中的浮点精度?

lowp , mediump和highp意味着每台设备的精度不同。 如何检测它们的实际值(每个精度的浮点位长度)? 我的意思是:
5回复

如何在three.js中检测冲突?

我正在使用three.js。 我的场景中有两个网格几何体。 如果这些几何形状相交(或者如果相交则相交),我想将其检测为碰撞。 如何使用three.js执行碰撞检测? 如果three.js没有冲突检测工具,那么是否可以将其他库与Three.js结合使用?
1回复

鼠标坐标到游戏坐标WebGL

我正在尝试将鼠标的x,y坐标转换为webgl画布的3d世界坐标。 我已经使其部分工作,但是当世界在任何轴上旋转时,都会遇到一些麻烦。 我正在使用unproject方法,该方法获取射线的起点/终点,然后对法线为0、1、0且使用的点为0、0、0的平面进行线到面碰撞测试。 您可以通过查看
1回复

在WebGL中渲染到纹理

我正在尝试在纹理上渲染场景(立方体)。 然后,我想用此纹理渲染相同的立方体。 (请参阅最后的编辑 )我是webgl和javascript的新手。 我以这个网页为起点。 我也阅读并使用了它 。 纹理似乎创建正确(没有错误或警告),但结果不是我期望的。 第一张图片是具有“
1回复

WebGL中的findAttribLocation返回-1

我知道如果在我的顶点着色器中找不到该属性,则可能会发生这种情况,但是我确信它存在。 我将尝试提供我的大型代码正文中最相关的摘要: 我的碎片着色器: 属性查找器: 初始化器: 程序创建者: 除了着色器中缺少变量之外,是否还有其他原因可能导致此错误? 我在
2回复

在WebGL中设置制服

任何人都可以向我解释或指出正确设置正确值的正确方法。 在备忘单中,我们得到以下信息: void uniform[1234][fi](uint location, ...) void uniform[1234][fi]v(uint location, Array value) void un
1回复

webGL中的纹理短

我有一个short的质感,我想从一个着色器阅读,WebGL的不支持short纹理,所以我分裂短到两个字节,并将其发送到着色器: 然后将数据上传到图形卡: 在片段着色器中: 但是,与在支持短纹理的普通opengl中上传短数据时相比,我失去了分辨率。 谁能看到我在做什么错?
1回复

在three.js中编写盒装射线碰撞检测的最佳方法是什么?

本实验中的对象随机移动: http : //deeplogic.info/project/webGL/ 使用three.js库为此编写盒装射线碰撞检测的最佳方法是什么?
2回复

WebGL中的索引缓冲区?

我正在尝试学习一些WebGL(来自本教程http://learningwebgl.com/blog/?page_id=1217 )。 我按照指南,现在我正在尝试实现自己的演示。 我想创建一个图形对象,其中包含要在场景中显示的每个单独对象的缓冲区和数据。 目前,我有一个位置顶点缓冲区,一个纹
3回复

WebGL中质量更好的文本

我正在寻找一种在WebGL内绘制质量更好的(任意)文本的方法。 目前,我正在2D画布上使用位图字体渲染并将其涂抹到WebGL上下文中。 此处介绍了此方法, 网址为http://delphic.me.uk/webgltext.html 这是我现在知道的在WebGL内绘制任意unico