qq_37987033的博客

想要学好WebGL，良好的数学储备是必不可少的，本节详细地介绍与WebGL相关的数学知识，并总结这些知识在图形学中的应用。

在之前的学习中已经将三维物体添加到了场景中，但是并没有在场景中使用光，照可以使模型更具有立体感，本文主要介绍 webgl 中的光照理论和计算方式，并展示如何在三维场景中添加光照。

webgl的知识储备了这么多，从现在开始将会正式进入立方体的绘制，本文介绍如何在webgl中绘制一个三维立方体。

webgl在渲染三维场景时，按照Z坐标的值决定前后关系，但是在默认状态下它并未开启深度检测，而是将后绘制的物体放在前面；当两个物体Z坐标相差无几时，会产生深度冲突，两个物体颜色互相影响，使得表面看上去斑斑驳驳，需要开启多边形缓冲来避免此类问题。

在webgl中，三维空间中的所有物体不是会都被绘制出来，只有当它在可视范围内时，才会进行绘制。因为不在可视范围中的物体即使绘制也不会在屏幕上显示。除了水平和垂直范围内的限制，WebGL还限制观察者的可视深度，即"能够看多远"。水平视角、垂直视角、可视深度，三者定义了可视空间。由正射投影（orthographic projection）产生的长方体状可视空间由透视投影（perspective projection）产生的锥体状可视空间正射投影矩阵透视投影矩阵。

在前面的学习中，已经得知了webgl是如何绘制二维图形，并进行仿射变换（矩阵变换）、纹理、交互等操作也适用于绘制三维图形。本节将介绍webgl是如何通过视图矩阵进入三维世界的。

gl.drawArrays()作为webgl中常用的函数图形绘制方法，可以在浏览器按照指定的模式绘制图形，与之相对的gl.drawElements()函数也是常用的绘制函数，本文将介绍二者的区别与使用。

本篇接上文继续对着色器语言规范进行讲解，本文的内容包括：分支和循环、着色器内置变量、函数、存储限定字、精度限定字、预处理指令等，接OpenGL ES着色器语言(GLSL ES)规范 ——上篇。

着色器语言通过控制GPU来进行前端图形的渲染，WebGL使用名为GLSL ES的规范进行着色器语言的编写，GLSL ES是在OpenGL的基础上进行一定的精简后形成的，它的语法与C语言有些类似。本文对webgl常用到的GLSL ES知识进行记录。共分为上下两篇，本篇包括OpenGL ES基础：一段基本的着色器代码、大小写和分号、数据值类型、命名规范、类型转换、运算符；矢量和矩阵：矢量和矩阵类型、矢量和访问矩阵构造，矢量和矩阵运算规则；特殊类型：结构体和数组结构体；数组取样器等。

在计算机图形学中，为了模拟更加真实的效果，需要给每个像素赋予不同的颜色值，这种情况下如果手动指定每个像素点的rgb值，将会是一件难以完成的任务。这就需要有一种机制，能够让我们把图片素材渲染到模型的一个或者多个表面上，这种机制叫做纹理贴图，本文将详细介绍在webgl中如何把一张真实图像贴到计算器图形上的。

在webgl中将图形进行平移、旋转、缩放等操作时可以在着色器中使用数学表达式来操作，但是这样并不是最好的方式，当进行的变换比较复杂，如“旋转后平移再缩放”这样的场景，每次都要先重新计算表达式，然后在着色器中去更改它，这样很不方便，因此，出现了另一种数学手段——变换矩阵，变换矩阵非常适合处理计算机图形。本文对变换矩阵的理论进行讲解。矩阵运算、矩阵变换的一般规则变换矩阵进行图形变换实例。

在webgl中将图形进行平移、旋转、缩放的操作称为变换或仿射变换，图形的仿射变换涉及到顶点位置的修改，通过顶点着色器是比较直接的方式。本文通过着色器实现对webgl图形的仿射变换。

在webgl中，所有的图形都是由大量点组成的，为了绘制点，每次都需要调用gl.drawArrays()方法，当需要绘制大量三角形、多边形或者几何体时，轮番绘制各个点是非常麻烦的。为此，webgl提供了缓冲区对象功能，它通过在webgl中开辟一块独立的内存区，将需要绘制的顶点数据全部填充至缓冲区内，供顶点着色器使用。可以在一个缓冲区中传递多组信息，实现效率的优化。

在webgl程序在使用attribute变量向顶点着色器传入位置，使用uniform向片元着色器传入颜色，给画布绑定事件实现动态绘制点。不足：多次调用gl.drawArrays方法，当绘制多组时，管理混乱。

webgl基本环境搭建，webgl上下文canvas填充示例，着色器绘制图形着色器使用流程，绘制图形绘制点示例。

webgl虽然属于web端开发，但实际上已经进入图形学的范畴，因此，想要更高效的开发，不仅仅需要掌握扎实的前端基础，对一些webgl的底层原理也要有个基本的掌握，这样才能更高效的排查问题。文本将自己理解的坐标转换过程记录下来。

webgl渲染管线流程介绍，以提供缓冲区绘制三角形为例加深对这一流程的理解