在本教程中: http//learningwebgl.com/blog/?p = 28我们在3d空间中绘制一个三角形和一个正方形,我想在画布上得到顶点的x,y坐标。

所以我想得到这些顶点的2d坐标: http//s11.postimage.org/ig6irk9lf/static.png

抱歉我的英语不好,我希望你能理解。

===============>>#1 票数:5

您必须执行与WebGL相同的计算。 它需要3d点[X,Y,Z]到均匀点[x,y,z,w] via

[x,y,z,w] = pMatrix * mvMatrix * [X,Y,Z,1]

要获得剪辑空间坐标,请通过w除以:

[x/w,y/w,z/w]

x/wy/w在[-1,1]范围内。 要将它们转换为视口坐标,请根据画布大小缩放它们。

[x/w,y/w] -> [(1 + x/w)*canvas.width/2, (1 - y/w)*canvas.height/2]

请注意y坐标的“方向”如何在最后一次转换中发生变化。

有关更多信息,您可以使用Google“图形管道”。 例如http://en.wikipedia.org/wiki/Graphics_pipeline

===============>>#2 票数:0

你必须做数学计算才能手动计算它们。 WebGL仅为了自己的目的计算它们,即:渲染。

桌面GL有办法让这些位置恢复(转换反馈),但WebGL没有。

  ask by Danny Fox translate from so

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

2回复

webgl和2d画布之间的透明度差异

我有一个png,我使用2d canvas加载,并作为webgl纹理。 png有一些透明的部分,在webgl中呈现黑色,在2D canvas中呈现白色。 (请参阅此小提琴以获得实时演示。在Chrome中,您需要使用标志--disable-web-security来绕过跨源限制。) 有没有
3回复

使用WebGL进行2D图像处理

我打算在JS中创建一个简单的照片编辑器。 我的主要问题是,是否可以创建实时渲染的过滤器? 例如,调整亮度和饱和度。 我只需要一个2D图像,我可以使用GPU应用滤镜。 我读过的所有教程都非常复杂,并没有真正解释API的含义。 请指出我正确的方向。 谢谢。
6回复

为什么这表明WebGL是2D API而不是3D API?

根据HTML5 Rocks ,WebGL实际上是一个2D API,而不是3D API。 他们为什么这么说,这是什么意思? 我们可以在WebGL顶点着色器和片段着色器中指定X,Y,Z坐标。 我无法理解2D和3D图形API之间的区别。 你能解释为什么他们说这是一个2D API吗?
2回复

屏幕到javascript webgl中的世界坐标

我试图通过使用以下代码(基于Click to zoom WebGL )在我的数据中找到一个点(屏幕到世界坐标): 为简单起见,我设置了一系列顶点,其中z坐标始终为0:我正在绘制图形的坐标: 然后,我将world1中的值与我的顶点进行比较。 world1中的值与我所单击的位
1回复

如果在画布上调用2d上下文,则Webgl上下文为null

我编写了以下JS代码: 如果我取消注释两条注释行,则webgl上下文为NULL。 这是预期的吗? 在同一画布上不能使用2D上下文和webgl上下文?
1回复

(3d对象到json到webgl)。 我能从webgl / javascript操纵那个3d的皮肤吗?

目前我对webgl没有太多经验,这就是我问这个问题的原因。人们可能会因此而生我的气,我事先向他们道歉。 假设我有一个像汽车或人体一样的三维物体。 然后我将该3d对象转换为json for webgl。 现在,如果我这样做(3d对象到json到webgl)。 我能从webgl / ja
1回复

从画布获取webgl纹理

我正在尝试在另一个webGL画布上绘制一个画布。 这是我的代码。 我正在为具有2个渲染模式的Construct 2进行编码:webgl和canvas。 该代码非常适合画布渲染模式。 我正在尝试将图像着色为给定的颜色并将其绘制。 为此,我将图像绘制在小画布上,乘以我的颜色,然后再增
1回复

使用d3-zoom与WebGL交互

我试图得到一个小例子,它使用d3-zoom为使用WebGL渲染的canvas元素提供简单的交互性。 我想做的就是提供平移/缩放,使用4x4转换矩阵相当简单。 我遇到的问题是缩放(缩放)。 如果您看一些d3变焦示例,您会看到变焦焦点始终位于鼠标的位置。 如果直接使用缩放变换中的k
1回复

使用webgl,html5 canvas中的图像进行3D图形实现

我是HTML5的新手,并且在HTML5画布中有一个项目。 我仍然必须分析需求。 我几乎完成了每个部分的工作,我遇到的问题是: 是否可以从拖放后形成的某些图像中制作3d图像,然后使用webgl或three.js和kinetic.js将它们组合在一起? 例如在以下站点中: http :
1回复

什么是webgl中的VertexIndices?

我正在从这个网站学习WebGL: http : //learningwebgl.com/blog/?p = 370 我不明白,什么是VertexIndices,为什么金字塔没有它们?