WebGL

1-多渲染目标简介 多渲染目标（Multiple Render Targets, MRT）指的是在图形渲染过程中，同时将渲染结果写入多个不同的目标缓冲区（通常是纹理）。这种技术允许一个渲染操作产生多个

课程目标 理解Stencil Buffer 的概念 掌握Stencil Buffer 的用法 1-stencil buffer简介 Stencil的本意是模板，即有镂空图案的板子。 stencil b

这是一个五彩缤纷的世界，彩色的玻璃让窗外的风景绚丽夺目。 我们可以把世界想象成一张画布，这个世界里存在着两种风景： source：即将落笔的风景，比如彩色的玻璃。 destination：已经落笔的风

源码：https://github.com/buglas/webgl-lesson 前言 我当前的WebGl案例因为各种原因，没有使用任何前端框架，直接干写的。 这也就导致了着色器写起来没有提示。 前

源码：https://github.com/buglas/webgl-lesson 按理来说，线条是一条没有宽度的线，它是显示不出来的。 然而，在实际生活中，我们也会将一些类似线条、有一定宽度的东西理

源码：https://github.com/buglas/webgl-lesson VR(Virtual Reality) 的意思就是虚拟现实，可以通过VR 眼镜给人环境沉浸感。 VR 的制作需要考虑

源码：https://github.com/buglas/webgl-lesson 1-概念 之前我们画过一个球体： 然后我还从基维百科上找了一张地球的等距圆柱投影贴图： 接下来我便可以利用等距投影规

源码：https://github.com/buglas/webgl-lesson 当生活有了光的时候，也会有投影的存在。 投影可以更好的衬托光明，让生活变得立体，有节奏。 接下来，就让我们一起探索投

其实，我接下来想说投影的，然而投影的计算还需要帧缓冲区，所以咱们得先解释一下帧缓冲区的概念。 1-帧缓冲区的概念 webgl 绘图过程是：顶点着色器定形，片元着色器逐片元填颜色，然后绘制到canvas

源码：https://github.com/buglas/webgl-lesson 我们可以基于着色点到光线的距离做一个正弦波衰减。 1.片元着色器中的算法如下： 2.调整一下相机和灯光 我上面的例子

源码：https://github.com/buglas/webgl-lesson 1-锥形灯概念 锥形灯可以理解为对点光源的限制，从侧面看，其打出的光线成锥形。 锥形灯的照射效果如下： 定义锥形灯的

源码：https://github.com/buglas/webgl-lesson 1-筒灯概念 对平行光的照射范围做限制后，其灯光打出的效果便可以如下图一样： 筒灯的照射方式如下： 通过上面的两个图

源码：https://github.com/buglas/webgl-lesson 着色频率与法线是息息相关的，所以咱们得先从法线说起。 法线就是垂直于着色点的一个单位向量，如下图： 然而，我们在we

源码：https://github.com/buglas/webgl-lesson 通俗而言，着色(shading)是绘画时，用线条或色块表示物体明暗或颜色的方式。 线条着色 色块着色 在计算机图形学

光是由光源发出的，光有方向、亮度和颜色。 我们可以想象手电筒打出的一道白色的光。 手电筒是光源，其亮度会受电池的影响，颜色为白色，方向可以由你来控制。 因为光的存在，我们可以看到世界的多姿多彩。 接下

源码：https://github.com/buglas/webgl-lesson 接下来，我们要做一栋别墅室内布局图的空间展示。 此案例会每隔一段时间，依次对楼层进行特写。 楼层的特写要通过两个矩阵

最近有同学想刷webgl 方向的面试题，图形选择就是面试中出现频率最高的问题。 在上一个案例里，咱们通过图片的变换说了鼠标选择二维图形和顶点的方法。 在接下来这个案例里，咱们就说一下鼠标选择三维图形的

自2000年后，随着Direct3D 的日益壮大，OpenGL 已经逐渐失去了曾经的辉煌，虽然 2009 年后，OpenGL 陆续从3.1发布到了现在的4.5。 2011年，基于OpenGL 标准发布

如果大家学到现在，理解了我们以前所说的知识。那我们就可以做很多很多好玩的东西了，虽然我们还没有说到灯光。 以前大家在做项目的时候，经常会遇到基于某个基点对图形进行变换的问题。 接下来，咱们就借这个问题

源码：https://github.com/buglas/webgl-lesson 之前咱们简单架构过一个Poly.js，然而随着我们知识量和需求的增加，Poly已经无法满足我们的基本需求，所以我们需