WebGL

向量在直角坐标系中，到底怎么画，是根据向量的坐标，画成点； 还是根据头尾，画成矢量箭头呢。 其实都可以，就看你这个向量怎么使用。

向量就是一堆数放在一块。 矩阵就是一堆向量放在一块。 矩阵的操作, 就是其中向量的相应的操作。 向量的操作, 就是其中数的操作。

对于某一个新知识点，如何快速掌握呢，那是不可能的，必须要不断的加强记忆。 本文就来通过几个练习题，加强大家对向量的掌握。 为什么小学生也能看懂，因为运算只有加减乘除。 练习一 向量减法 小明有5个糖果

一切都是向量的线性组合，向量的线性组合可以变换出新的好玩的有实际意义的新的向量，都来看一看线性组合吧。

明明白白将向量呈现给你看。 就两个基本操作，加法和数乘。 内积，叉乘，后面用到的时候再讲，不迟。 快来了解一下向量吧。

旋转的公式不在这里推导。我们也无需记住这个公式。我们只需要在需要的时候，会用就行了。依然强调一下顺序： 1. 拉伸 2. 旋转 3. 平移

拉伸和平移，我们即将在vertex shader里来实现这两个操作。 注意顺序，先拉伸 ， 再平移。

vertex shader 和 slider 控制 uniform 变量。进而，通过滑动滑竿，来控制 sin 函数的周期。

vertex shader 几个实例，sin 直线等等，通过这些可以更加熟悉vertex shader 的编写。

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

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

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

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

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

答：在电脑或者手机显示屏的某一块地方，决定哪个像素点在什么时间是什么颜色。无他尔。 确实是这样，所有上面说的那些大目标，都是在屏幕上决定像素点的颜色而已。说实在的，这与绘画者拿一只笔在纸上画画，没什么区别。绘画者可不就是在决定纸上的什么位置是什么颜色吗，就这么简单。 当然，我要…