我是 webgl 的新手。我想知道顶点和片段着色器值是如何生成的。 我看到了一些样本，可以看到这些值的巨大数组。无法弄清楚这些值是如何生成的。是否有任何工具可以生成这些值。 我错过了什么吗？没有教程解释如何创建这些着色器值。 对此的任何帮助表示赞赏。
【问题讨论】：
标签： webgl fragment-shader vertex-shader
您最有可能看到的是它们的顶点或索引缓冲区信息。这些通常存储为大型浮点数或整数数组，如下所示：
[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，因此通常没有太多的人工交互。
我不久前就write up 做了一点关于您如何告诉 WebGL 解释这些值的问题，但我不确定您对 3D 几何的确切了解程度，所以这可能有点太高了。一些早期的 WebGL 学习课程更详细地介绍了它：
【讨论】：
只要使用一些 3D 建模工具，你知道的，比如 Blender、Maya、3D Studio Max、Google Sketch up，真的没关系。
您谈论的这些值是在您在其中创建模型时由这些程序生成的，例如，您想创建一条鱼，然后打开 3D 建模工具，在那里进行工作，然后将其导出到其中一个3D 模型的许多文件格式，有 .x、.fbx、collada 等。生成的文件将包含在任何地方渲染这条 3D 鱼所需的所有信息，它将包含顶点位置、纹理坐标、法线（主要用于照明），也许是颜色和其他一些东西。
所以你只需要选择其中一种文件格式，学习如何从中获取你需要的数据，以一种可以被 javascript 评估的方式（你所说的那些数组）并将信息传递给顶点/片段着色器。
【讨论】：