WebGL
webgl 系列 —— 三角形
其他章节请看： webgl 系列 三角形 有人说三维模型的基本单元是三角形。比如复杂的游戏角色，也只是用许多三角形画出来的。 不管上述说法是否属实，本篇先把三角形画出来。 如何绘制一个三角形 鼠标点击绘点示例我们写了这样的代码： points.forEach(item => { gl.vertexA ......
webgl 系列 —— 变换矩阵和动画
其他章节请看： webgl 系列 变换矩阵和动画 动画就是不停地将某个东西变换（transform）。例如将三角形不停地旋转就是一个动画 和 CSS transform 类似，变换有三种形式：平移、缩放和旋转。 简单的变换用普通表达式容易实现，如果事情复杂，比如旋转后平移，这时就可以使用变换矩阵。 ......
webgl 系列 —— 渐变三角形
其他章节请看： webgl 系列 渐变三角形 本文通过一个渐变三角形的示例逐步分析：varying变量、合并缓冲区、图形装配、光栅化、varying 内插 绘制三个点v1 需求：绘制三个相同颜色的点，效果如下： 通过三角形的学习，这个需求非常容易实现。代码如下： const VSHADER_SOUR ......
webgl 系列 —— 绘制一个点（版本2、版本3、版本4、版本5）
其他章节请看： webgl 系列 绘制一个点 我们初步认识了 webgl，本篇主要围绕绘制一个点的示例，逐步实现下面功能： 点的位置从 js 传入着色器 点的大小由 js 传入着色器 通过鼠标点击绘点 通过鼠标点击绘点，并改变点的颜色 绘制一个点（版本2） 需求 在上篇中我们在canvas中心绘制了 ......
webgl 系列 —— 初识 WebGL
其他章节请看： webgl 系列 初识 WebGL 什么是 WebGL webgl 在支持 canvas 的浏览器中进行 2d 或 3d 渲染。 webgl 程序除了有 Html、javascript，还需要加入着色器语言（GLSL ES）。 WebGL 使得网页在支持 HTML <canvas> ......