本文内容主要包括了解什么是着色器、为什么要使用着色器、GLSL 语言的基本语法规则、理解顶点着色器、片元着色器、掌握Attributes、Varyings、Uniforms的区别，两种着色器材质用法等

前言 因为群里粉丝一直要求我写一篇可视化入门指南，今天他来了。其实说起前端可视化，大家所能想到的就是各种图表，大屏。这种看着贼炫酷，而笔者呢工作也一直从事3D前端开发工作，慢慢对图形产生了兴趣。但是呢

相信大家在入门渲染的时候都写过这样的 demo，将准备好的顶点数据上传至 GPU 进行绘制，就像用笔触在固定画布上面绘制图形。这套没有经过封装的流程对于 2D 引擎来说已经够用，但在 3D 引擎中想要

源码：https://github.com/buglas/webgl-lesson 透视投影矩阵可以将现实世界更真实的投射到裁剪空间中。 我们的肉眼看现实世界时，用的就是透视投影矩阵。 透视投影矩阵包

前言 变换在图形学中有两个： 一种就是上一篇文章说的modeling变换。 还有一种就是接下来说的viewing变换。 Viewing变换也包含两种: 视图/摄像机变换 投影变换 Viewing 视图

OK，我们发现的确变成我们想要的样子了。 Oh，No！怎么又变形了？！！这意味这这不仅仅和顶点数据的长宽比有关系，还和canvas的长宽比有关系了。说到这里相必你的脑子里面应该已经很绕了吧！我们有没有简单一点的方式来解决这个问题呢？ 答案肯定是有的。我们注意到，我们一直都是在使…

上篇文章我们讲解如何利用矩阵来实现 3D 变换，但是每次编写的 WebGL 代码有点复杂，不太好想象出渲染的结果。这篇文章来讲解相机这个概念，我们利用相机这个工具从不同位置去观察一个物体，观察的结果就

上篇文章讲解了矩阵，利用矩阵我们可以轻松实现旋转、缩放等 3D 变换。另外在之前的一篇 CSS3 transform 和 canvas 背后不为人知的秘密 文章中详细讲解了平移、缩放、错切、旋转等 2