庖丁解牛

电子屏幕，已经成了陪伴我们最长久的朋友。我们每天和手机，电脑相处的时间，已经超越了家人和朋友，那么，你有多了解我们这个特殊的朋友呢？

这是我参与8月更文挑战的第13天，活动详情查看：8月更文挑战 友情提示 这篇文章是WebGL课程专栏的第27篇，强烈建议从前面开始看起。因为花了大量的工夫来讲解向量的概念和矩阵运算。这些基础知识会影响

在 canvas 上 画点，画线，画三角形。 进而模拟出丰富多彩的2D 和 3D 世界。 运行在 GPU 上，使用者需要自己提供可以运行的代码传到 GPU。 vertex shader 和 fragment shader ， 这两个成对出现，合起来称之为 program。Web…

在屏幕中间，画一个半径是1的圆。 关于这个问题，我们这节课就来完成这个小目标。 如果给我一支真实的笔，我能立即马上顷刻间完成这个小目标，太简单了。因为我们人类都能听懂这个目标：屏幕中间，半径为1，圆。 但是 WebGL 这家伙可听不懂这种描述，我们要更加数学化一点。WebGL …

目标：在屏幕中间，画一个半径是1的圆。 上面的代码就是一个简单的网页，关于网页的基本知识不属于本课程的范畴，请大家自行研究啊。 一个 canvas 标签，就好像，我们在桌面上铺好了一张纸。 pen 这个变量就是笔的抽象。此时，这个 pen 就可以在 pointCanvas 这张…

本文是接着上文来讲的，如果没有看过上一篇，还是请先看完前一篇为好。 我们的目标是在纸(canvas)的中间画一个半径是1的圆，颜色是黑的。根据前面几课的介绍，我们知道，一个圆就是一堆离散的点组成的一个模拟图形而已。所以，我们要将这一堆点的坐标计算出来，点的个数越多，我们的结果呈…

在前面的文章里，我们成功地把一个圆的坐标数据传到了 gl 里，那么这次课，我们就要真正做到绘制出来。 节奏必须慢，因为我们还有没解决的事情，现在不能贸然地将 shader 祭出来。如果你着急，直接翻到后面将代码一考，运行即可。 首先，gl 的 api调用可不是没有消耗的，要尽量…