绘制一个点（版本1）

在之前的章节，我们学习了如何建立一个WebGL程序，如何使用一些简单的WebGL相关函数。这一节，我们将进一步在一个示例程序中绘制一个最简单的图形：一个点。这个程序将会绘制一个位于原点（0.0，0.0，0.0）处的10个像素大的红色的点。因为WebGL处理的是三维图形，所以我们有必要为这个点指定三维坐标。坐标系统将在稍后介绍，目前可以简单地认为，原点（0.0，0.0，0.0）处的点就出现在＜canvas＞的中心位置。

示例程序HelloPoint1的运行效果如图2.9所示，黑色背景的＜canvas＞中心有一个小红点（矩形）[3]。实际上，你将用矩形而不是圆来绘制一个点，因为绘制矩形比绘制圆更快。（第10章“高级技术”将介绍如何画一个圆点）。

图2.9　HelloPoint1

就像在前一节中我们以RGB的形式指定了WebGL的背景色，此处也需要以同样的方式指定待绘制点的颜色。红色的R值为1.0，G值为0.0，B值为0.0，A值为1.0。你应该还记得，在前一章的DrawRectangle.js中，我们先指定了绘图颜色，然后绘制了一个矩形，如下所示：

你可能会认为，WebGL也差不多，比如：

不幸的是，事情没这么简单。WebGL依赖于一种新的称为着色器（shader）的绘图机制。着色器提供了灵活且强大的绘制二维或三维图形的方法，所有WebGL程序必须使用它。着色器不仅强大，而且更复杂，仅仅通过一条简单的绘图命令是不能操作它的。

着色器是WebGL的一项重要的核心机制，它会贯穿全书。我们将一步一个脚印地去仔细研究和理解它。