webgl - webgl中的顶点和片段着色器值

Question

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

Answer 1

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

[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 课

Answer 2

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

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

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