javascript - WebGL 中的索引缓冲区?

标签 javascript html graphics opengl-es webgl

我正在尝试学习一些 WebGL(来自本教程 http://learningwebgl.com/blog/?page_id=1217)。我遵循了指南,现在我正在尝试实现自己的演示。我想创建一个图形对象,其中包含要出现在场景中的每个单独对象的缓冲区和数据。目前,我有一个位置顶点缓冲区、一个纹理坐标缓冲区和一个法线缓冲区。在教程中,他使用了另一个缓冲区,一个索引缓冲区,但仅用于多维数据集。索引缓冲区实际上是做什么用的?我应该实现它吗?它对多维数据集以外的任何东西都有用吗?

最佳答案

对象的顶点由 3D 坐标系 (euclidian coordinate system) 中的位置定义。因此,在通过 rasterization process 将 3D 坐标系投影到 2D 光栅(屏幕或某些目标图像)之后,您可以获取每两个后续顶点并将它们与线连接起来.你会得到所谓的wireframe .

cube wireframe

线框的问题在于它不明确。如果您以特定 Angular 观察线框立方体,您无法确定立方体是如何精确旋转的。那是因为你需要使用 visibility algorithms以确定立方体的哪一部分更接近观察者的位置(相机的位置)。

但是线本身不能定义表面,这是确定立方体的哪一侧比其他侧更接近观察者所必需的。如何在计算机图形中定义表面的最佳方式是多边形,确切地说是三 Angular 形(它对计算机图形有很多缺点)。

现在你有了由三 Angular 形定义的立方体(所谓的三 Angular 形网格)。

cube triangle mesh

但是如何定义哪些顶点构成三 Angular 形呢?通过索引缓冲区。它包含顶点缓冲区的索引(列出您的顶点)并告诉光栅化算法三个顶点形成三 Angular 形。有很多方法,如何解释索引缓冲区中的索引以减少相同顶点的重复(一个顶点可能是很多三 Angular 形的一部分),您可以在 article about graphics primitives 找到一些方法。 .

关于javascript - WebGL 中的索引缓冲区?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14009388/

相关文章:

java - 绘制输入的字符串

r - 如何在绘图中使用自定义点样式?

javascript - 使用 this.setState 后 react 不呈现正确的状态值

javascript - backbone.js - 使用输入值过滤集合

javascript - Kendo UI 柱形图在错误的列中对数据进行分组

javascript - 使用 Javascript 将 HTML 元素的属性值设置为等于另一个属性值

html - 我的 HTML/CSS3 做错了什么?

html - 如何让我的 div 居中对齐?

javascript - 在滚动上添加和删除类

c++ - SDL 透明覆盖