WebGL学习

1. 上手 介绍就不多说了，直接看看简单的实例。这里是webgl1不是webgl2、webgpu。 顶点着色器代码 片段着色器代码 效果 这里有几个问题 画出来的点应该是正方形，这里却是长方形 （ca

1. 变量 我们在上一节的基础上增加一些变化： 绘制的点跟随鼠标点击位置移动 绘制的点双击过后改变颜色 1.1 跟随点击移动 由于我们要更换位置，所以修改的就是顶点着色器代码 那么，变量的数据怎么来：

1. 平移 顶点着色器 效果 2. 缩放 和平移一样的原理，只不过是倍数移动坐标 顶点着色器 3.旋转 顶点着色器 4.平移矩阵 上面的平移旋转无非就是一些线性变换，或者说解方程。所以天然和线性代数契

1. varying变量 假设我们现在需要绘制四个点，这四个点在不同的位置而且有不同的颜色，我们需要怎么做？ 使用uniform变量？ 一次就只能给uniform赋一个值，所以要根据位置赋值不同的颜色

1.简介 OpenGL ES着色器语言（GLSL ES），是OpenGL着色器语言的简化版。着色器语言就是编写着色器代码的语言。这里我会略过很多介绍，假设你有编程基础。 2.基础 2.1 执行次序 和

1. 画一个立方体 画一个立方体不仅仅是画出几个面就完了，还要考虑在什么地方 朝哪里看 视野有多宽 能看多远。所以在实现立方体之前需要了解这些概念。 2. 视点、视线、观察目标点、上方向 视点：简单来

1.光影 即使是一个纯白色的立方体，我们也能知道它是立体的。这是因为他有明暗关系。 所以光照是三维图像很重要的组成。 2. 光照类型 这里我们只讨论最简单常见的三种光源。 平行光：就是现实生活中，无穷

1. 复杂模型 之前都是画立方体、三角形这些简单的图形，实际上一个复杂的模型就是由这些简单的图形构成的比如下面这个机械手 如果要考虑关节移动，那就需要考虑更多的相对运动 手臂动的时候，手掌也会跟着移动

1. 选中物体 这里的思路很简单： 用户点击canvas 将物体设置为单一颜色，比如红色 读取点击位置的像素颜色 如果是红色就是点击到了物体，否则就不是 1.1. 点击canvas物体变红 1.2.

1. 介绍 直接看效果 简单的说就是实现一个周围环境有雾气的效果。 2.原理 这里实现最简单的一种线性雾化。 雾化说白了和光照一样，只是按照某种计算改变绘制的颜色。 结合现实，一个物体被笼罩在雾气中，

1. 齐次坐标 参考 在之前的文章中我们直接就使用的齐次坐标(x, y, z, w)但是并没有解释为什么要多一个w分量，为什么要使用齐次坐标 简单来说，齐次坐标的出现是为了能在二维世界中描述三维世界独

1. 原理 默认情况下绘制的点是一个正方形。 每个点在光栅化（绘制到屏幕）的时候，其实是由许多片元组成的： 而要画出圆形（看起来像是圆形），只需要摒弃圆圈外部的片元。 2. 实现 步骤很简单： 计算片

1. 介绍 听起来这个名词很厉害，其实本质就是实现物体的半透明效果 2. 代码实现 直接给颜色设置透明度出来是这样 确实设置成功，颜色也变淡了，但是按理来说前面应该会透出其他面的颜色，就像玻璃窗户一样

1. 概述 之前的学习都是在单个着色器上进行的，如果你要绘制不同的图形，必然需要不同的着色器来处理。好在webgl能够随时切换着色器，还记得useProgram这个方法吗，这个就是切换着色器的关键。

看到很多资料教程一上来就会解释什么是`渲染管线`，说实话云里雾里的，因为里面有很多专业名词。不过经过前面的学习，加上中间遇到的困难查询资料的过程中，或多或少都接触到了一部分。现在回头看会好理解很多。

1.介绍 之前章节学习纹理的时候，我们是将外部现成的图片作为纹理，渲染到图像上。 而这里我们将要使用自己渲染的图像，作为纹理，渲染到另外一个图像上。也就是可以动态生成纹理。 2. 帧缓冲Framebu

1. 简介 之前我们使用光照让物体表面有不同的颜色，看起来更加立体逼真。但是没有影子还是缺了点真实感，这里我们用到上一节的帧缓冲，通过阴影贴图shadow map或称深度贴图depth map技巧，实

1. 概述 之前学习了这么多计算机图形的知识，但是我们使用的图形都只是简单的立方体，如果我们想要画一个复杂的图形那将需要定义非常多的顶点数据，还要微调很多细节曲面。全部手工绘制确实很麻烦，好在现在有现