从零开始实现3D软光栅渲染器 (2) 绘制点

canvas简介

是HTML5新增的2D绘图标签，并为用户提供了一系列绘图命令，类似于windows中的GDI接口。我们的软渲染器就是要把图形绘制到canvas上，大家可以通过这个来了解下canvas的基本用法。在本教程中，我们仅使用canvas很少的几个接口，用到的时候我们再介绍。

框架搭建

我们首先在VS Code中建立如下目录结构：

• Device.js 用来封装在canvas的一些操作，负责渲染的显示。
• math 目录中存放一堆数学工具的实现，比如3D矢量，矩阵的实现。
• model 目录中存放一些实体对象的实现，比如相机对象，Mesh对象，我们用到的时候再说。
• app.js 就是脚本的入口文件。
• index.html 项目的入口文件

canvas绘图原理

除了使用canvas提供的诸如：fillRect(x, y, width, height)这样的绘图函数绘制图形外，我们还可以使用最原始的填充像素的办法进行图形的绘制。出于学习的目的，我们使用后者。

我们可以把canans看成一张画布，绘制的过程，就是给画布中的像素值填充颜色的过程。我们可以通过this.context.getImageData(0, 0, this.width, this.height);得到canvas画布对应的颜色数（RGBA）。该函数返回一个一维数组，数组的长度: canvas宽度*canvas高度*4，为什么乘以4？因为每个像素的颜色是由RGBA（红、绿、蓝、透明度）4个字节表示的。每种颜色分量的取值范围都是[0,255]，这样，红色可以表示为（255，0，0，255），绿色（0，255，0，255）。

因为绘图也是需要时间的，如果我们直接在canvas中绘制的画，那么我们可能在屏幕上看到绘制过程，而这不是我们希望的。试想你看喜羊羊的时候，屏幕先绘制一个喜羊羊的头，再绘制2个手，最后绘制2个脚…这样的动画片你看的着急不。所以，OpenGL中使用了双缓冲的机制，屏幕上显示的图像存储在前台缓冲区（这里，缓冲区就是指存储canvas颜色数据的数组），而绘制的过程是在后台缓冲区中进行的。这样，用户永远看的是前台缓冲区的东西。当后台缓存区绘制结束时，要么把后台缓冲区的内容拷贝到前台缓冲区，要么将后台缓冲区和前台缓冲区交换一下，这样都能将绘制完成的图像呈现到屏幕上。

接着在入口函数中，开启帧循环，执行渲染过程。

单纯画点也每啥意思，我在网上找了个画心形图案的方程：

在render函数中实现：

为了在本地就能预览我们的项目，我们需要给VS Code安装一个轻量级的Web服务器来托管我们的项目，然后直接在index.html页面右键Open With Live Server就可以在浏览器中打开我们的项目了。

最终效果如下图：

ok，本节绘制点结束。下节我们来绘制直线。

源码下载地址

欢迎大家关注我的公众号【OpenGL编程】，定期分享OpenGL相关的3D编程教程、算法、小项目。欢迎大家一起交流。