WebGL

源码：https://github.com/buglas/webgl-lesson 对图形的平移就是对图形所有顶点的平移。 1-举个例子 已知： 顶点p(x,y,z) 在x、y、z 三个方向上，分别将

1-webgl三种面的适应场景 之前咱们说过，webgl 可以绘制三种面： TRIANGLES 单独三角形 TRIANGLE_STRIP 三角带 TRIANGLE_FAN 三角扇 在实际的引擎开发中，

源码：https://github.com/buglas/webgl-lesson 接下来，我要在下图中绘制狮子座。 效果如下 1-产品需求 1-1-基本绘图需求 鼠标第1次点击画布时： 创建多边形

源码：https://github.com/buglas/webgl-lesson 在项目实战的时候，用户交互事件是必不可少的。因为事件是异步的，所以我们在绘图的时候，必须要考虑异步绘图。 接下来我通

源码：https://github.com/buglas/webgl-lesson 在数学中，我们知道，三个点可以确定一个唯一的三角面。接下来咱们画一下。 1-绘制三角面 我们在之前绘制多点的基础上做

源码：https://github.com/buglas/webgl-lesson 在webgl 里所有的图形都是由顶点连接而成的，咱们就先画三个可以构成三角形的点。 这里大家还要注意一下，我现在要画

源码：https://github.com/buglas/webgl-lesson 我们先看一下webgl是怎么画图的。 1.绘制多点 2.如果是线，就连点成线 3.如果是面，那就在图形内部，逐片元填

源码：https://github.com/buglas/webgl-lesson 1-用鼠标绘制圆形的顶点 星星的形状是圆形的，所以，我们需要绘制一个圆形的顶点。 distance(p1,p2) 计

首先我们要知道，限定颜色变量的限定符叫uniform。 uniform 翻译过来是一致、统一的意思。 接下来咱们说一下用js 控制顶点颜色的步骤。 1-用js 控制顶点颜色的步骤 1.在片元着色器里把

我们要用鼠标控制一个点的位置，首先要知道鼠标点在webgl 坐标系中的位置，这样才能让一个点出现在我们鼠标点击的位置。 接下来咱们就说一下如何获取鼠标点在webgl 坐标系中的位置。 1-获取鼠标点在

课件地址：https://github.com/buglas/webgl-lesson 1-attribute 变量的概念。 回顾一下我们上一篇中点的定位： 这是一种将数据写死了的硬编码，缺乏可扩展性

课件地址 https://github.com/buglas/webgl-lesson 课前准备 安装webstorm 或vscode 开发工具。 安装live-server，用于启服务，安装方法 n