WebGL从入门到实战

接上节，在上节中，我们学习了IBL中漫反射的部分，但是要展现PBR材质的威力，还得加上最重要的一环，就是IBL的镜面反射。 理论 我们还是将渲染方程先搬出来。

今天我们继续讲解PBR相关的内容，不过你会发现，咦，怎么标题变了，怎么叫做IBL之漫反射。IBL的全称是 “Image Based Lighting”基于图像的光照，这跟PBR又有什么关系呢？

今天的话题是PBR材质，PBR材质的全称是 Physical Based Rendering 基于物理的渲染。之前正是看到了PBR材质在电脑上令人惊叹的表现才引起了我对于渲染的浓厚兴趣

今天，我们来探索Three.js中的如何实现镜面效果。事实上，THREEJS官方已经给出了实现镜面效果的例子。详细可以参见three.js examples (threejs.org)

今天我们要学习的是深度图相关的知识。深度图是渲染中相当重要的一个手段，我们可以利用深度做出各种各样的效果。今天这篇文章将会介绍使用深度图的一些关键细节，以及我们会利用深度图做一个岸边泡沫的效果

前言 Hello，又与大家再次见面了，今天我们要学习的内容是“渲染目标”。学习这一技术后，我们可以利用它做出一些常见的效果，比如“反射”，“折射”效果等等。废话不多说，让我们开始今天的学习吧！

今天我们学习的内容是法线贴图，法线贴图也是贴图的一种。在法线贴图中，储存了每个像素点的法线方向。（法线方向用 x,y,z 表示，贴图中的 r,g,b 三个通道正好可以表示）。

很久没有更文了，让我们继续我们的图形学学习之旅，经过前面的学习，我们已经学习了一些关于图形学的基础知识，如 MVP 变换、贴图、图像处理技术等，尤其是我们手撸了一些纯原生的 WebGL代码

在进行下一步的学习之前，我们需要整理一下我们之前写的代码。我们回顾一下我们之前编写的 WebGL 代码，我们发现，大部分的代码都是极其重复的。

之前介绍的平行光作为照亮整个场景的全局光源来说是非常棒的选择，但是除了平行光之外我们也需要一些分散在场景中的其他光源，想想一下在洞穴中墙壁上的火把或者是城市夜晚中的路灯，都是很典型的点光源。除了点光源

光照是渲染技术中非常重要的一部分内容。“渲染”简单的讲就是解决这样的一个问题：“当前屏幕上的这个像素点应该是什么颜色？”。决定该像素点的颜色过程，我们称之为“着色(Shading)”。

什么是相机？相机是在 3D 开发中非常常见也是非常重要的一个概念。相机其实指的是 观察者空间 + 投影变换这两件事。

本文不会涉及到具体的代码。 CPU 和 GPU 都属于处理单元，但是结构不同。形象点来说，CPU 就像个大的工业管道，等待处理的任务只能依次的通过这跟管道，所以CPU处理这些任务的速度完全取决于处理单个任务的时间。 CPU管道虽然只能让任务一个一个依次执行，但是CPU处理单个任…

之前我们讲过了WebGL的相关原理，我们了解到WebGL绘图的方式是“连接式”的，WebGL就像是一个巨大的电路图，我们修改电路中的电路的连接方式或者是增加其中的电气元件，当我们按下开关时，这个电路就会自动运行。今天，我们就进入实战阶段，一切从0开始，手把手的带你使用原生的We…

接上一节的内容，上一节我们讲述了使用WebGL如何绘制点和三角形，我们通过WebGLBuffer往WebGL中传入顶点数据。我们留下两个问题： 今天我们就通过实战来化解掉这两个疑问。 之前我们绘制了纯色的三角形，现在我们来绘制一个渐变色的三角形，我们把三个顶点的颜色分别设置为红…

节上一节的内容，上一节我们给我们绘制的三角形增加了一些趣味的内容，我们绘制了一个具有渐变色的三角形。这实际上就是给三角形的顶点的赋予了除开位置信息的颜色信息。这节内容我们继续为三角形的顶点增加一些别的信息，本节中我们会给三角形增加纹理坐标信息，利用这一点让我们来一起完成一个显示…

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

世界四大邪术之一的 —— 中国的PS和美颜相机占据一席之地，而这就要归功于图像处理的功劳了。今天我们就来简单的看看如何对一幅图像进行图形处理。常见的一些效果有： 考虑到有的朋友是从这一节开始阅读本文的，那么今天我们将会从使用Canvas2D和WebGL两个方面来讲述如何进行图像…