0

我是 webgl 的新手。我想知道如何生成顶点和片段着色器值。我看到了一些样本,可以看到这些值的巨大数组。无法弄清楚这些值是如何生成的。是否有任何工具可以生成这些值。我错过了什么吗?没有教程解释如何创建这些着色器值。对此的任何帮助表示赞赏。

4

2 回答 2

3

您最有可能看到的是它们的顶点或索引缓冲区信息。这些通常存储为大型浮点数或整数数组,如下所示:

[1.0, 2.0, 3.0, 0.5, 0.5, 1.0, 0.0, 0.0]

这可以根据顶点布局表示,单个顶点的位置、纹理坐标和法线,如下所示:

位置:(x:1.0,y:2.0,z:3.0) Texcoord:(u:0.5,v:0.5)正常:(x:1.0,y:0.0,z:0.0)

你通常会把一大堆它们拼凑成一个长长的阵列。这些非常难以阅读,但通常由建模工具导出器生成并直接发送到 GPU,因此通常没有太多的人工交互。

不久前我写了一些关于你如何告诉 WebGL 解释这些值的文章,但我不确定你对 3D 几何了解多少,所以这可能有点太高了。一些早期的 WebGL 学习课程更详细地介绍了它:

第 1课,第 2 课

于 2011-11-05T04:31:24.763 回答
0

只需使用一些 3D 建模工具,你知道,比如 Blender、Maya、3D Studio Max、Google Sketch up,真的没关系。

您谈论的这些值是由这些程序在您在其中创建模型时生成的,例如,您想创建一条鱼,然后打开 3D 建模工具,在那里进行工作,然后将其导出到众多文件之一3D 模型的格式,有 .x、.fbx、collada 等。生成的文件将包含您在任何地方渲染这条 3D 鱼所需的所有信息,它将包含顶点位置、纹理坐标、法线(用于照明大部分),也许是颜色和其他一些东西。

所以你只需要选择其中一种文件格式,学习如何从中获取你需要的数据,以一种可以被 javascript 评估的方式(你说的那些数组)并将信息传递给顶点/片段着色器。

于 2011-11-08T08:21:20.953 回答