WebGL - 绘图点
-
简述
我们之前(在第 5 章)讨论了如何按照逐步过程来绘制图元。我们已经分五个步骤解释了这个过程。每次绘制新形状时都需要重复这些步骤。本章介绍如何在 WebGL 中使用 3D 坐标绘制点。在进一步讨论之前,让我们重新审视一下这五个步骤。 -
所需步骤
创建 WebGL 应用程序以绘制点需要执行以下步骤。第 1 步 - 准备画布并获取 WebGL 渲染上下文在这一步中,我们使用方法getContext() 获取 WebGL 渲染上下文对象。第 2 步 - 定义几何并将其存储在缓冲区对象中由于我们正在绘制三个点,因此我们定义了三个具有 3D 坐标的顶点并将它们存储在缓冲区中。第 3 步 - 创建和编译着色器程序在这一步中,您需要编写顶点着色器和片段着色器程序,编译它们,并通过链接这两个程序来创建组合程序。-
Vertex Shader - 在给定示例的顶点着色器中,我们定义了一个矢量属性来存储 3D 坐标,并将其分配给gl_position变量。
-
gl_pointsize是用于为点分配大小的变量。我们将点大小指定为 10。
-
片段着色器- 在片段着色器中,我们只需将片段颜色分配给gl_FragColor变量
第 4 步 - 将着色器程序关联到缓冲区对象在这一步中,我们将缓冲区对象与着色器程序相关联。第 5 步 - 绘制所需对象我们使用方法drawArrays()来绘制点。因为我们要画的点数是3,所以计数值为3。 -
-
示例——使用 WebGL 绘制三点
这是绘制三点的完整 WebGL 程序 -它将产生以下结果 -