方法论

要开发一款基于 WebGL 的图形引擎，您需要学习以下技术和知识

WebGL：首先，您需要熟悉 WebGL 技术本身。WebGL 是一种用于在浏览器中进行 3D 图形渲染的标准。它是基于 OpenGL ES 2.0 的，通过 JavaScript API 将图形渲染功能暴露给浏览器。

JavaScript：对 JavaScript 编程语言的熟练掌握是必不可少的。因为 WebGL 是通过 JavaScript API 来进行操作的，您需要编写与浏览器交互的代码。

3D 图形学：了解基本的 3D 图形学原理对于开发图形引擎至关重要。这包括了 3D 坐标系统、矩阵变换、投影、视角、光照、阴影、雾化、渲染管线、着色器、着色器编程语言等内容。

OpenGL 或 OpenGL ES：虽然 WebGL 是基于 OpenGL ES 2.0 的，但对 OpenGL 或 OpenGL ES 的了解可以帮助您更好地理解 WebGL 的工作原理。

着色器语言：WebGL 使用 GLSL（OpenGL Shading Language）来编写着色器程序。了解 GLSL 语言和如何编写顶点着色器和片段着色器对于渲染图形至关重要。

Canvas API：WebGL 上下文是通过 Canvas API 来创建的，所以您需要了解 Canvas API 的基本用法。

网页设计和前端技术：开发基于 WebGL 的图形引擎需要将图形渲染整合到网页中。因此，熟悉 HTML、CSS 和其他前端技术对于构建用户界面和交互是必要的。

性能优化：图形引擎通常需要处理复杂的渲染任务，所以对于性能优化有一定的了解是必要的，以确保您的引擎能够在各种设备上高效运行。

数据结构和算法：对于优化渲染和处理 3D 场景，熟悉数据结构和算法是很有帮助的，例如空间分区算法、光照计算等。

WebGL 框架和库：您可以考虑使用一些已有的 WebGL 框架和库，如 Three.js、Babylon.js 等，它们可以简化开发流程并提供许多有用的功能。

以上是开发基于 WebGL 的图形引擎所需的一些主要技术和知识。请注意，这是一个复杂的项目，需要较高的数学、编程和计算机图形学知识。因此，您可能需要耐心和时间来学习和实践，同时参考相关文档和教程将对您有所帮助。

要点罗列

在GLSL ES中只能指定float类型的atrribute变量，但是可以指定任意类型的uniform变量。

缓冲区对象buffer object，它可以一次性地向着色器传入多个顶点数据。我们不能向缓冲区直接写入数据，只能向缓冲区绑定的目标上写入数据。

类型化数组是指为了处理大量相同类型的数据，例如顶点的坐标和颜色数据。为了优化性能，引入了类型化数组。比如Float32Array。

webgl只能绘制三种形状，分别是点、线、三角形。

观察者在Z轴正半轴某处向Z轴负方向看去，看到物体的旋转就是逆时针旋转，这种情况称之为正旋转。这也叫做右手旋转法则。这是WebGL默认设定。

着色器内置了常用矢量和矩阵运算功能，这种特征是专门为三维计算机图形学而设计的。

webgl和opengl一样，矩阵元素是按列主序存储在数组中的。

先平移后旋转构造模型矩阵的顺序是：<旋转矩阵>*<平移矩阵>。

webgl允许我们把顶点的坐标和尺寸数据交错组织到同一个缓冲区对象中，并通过某种机制分别抽取出缓冲区对象中不同种类的数据。

varying变量只能是float以及相关的vec2、vec3、vec4、mat2、mat3和mat4类型的。

为了将纹理坐标与广泛使用的xy坐标系区分webgl称之为st坐标系或者uv坐标系。

webgl纹理坐标系统的T轴方向和png格式图片的坐标系统的Y轴方向是相反的。

webgl映射纹理的过程比较复杂，首先需要加载纹理图像、然后需要纹理对象、纹理单元、纹理类型以及绑定采样。

片元着色器中的float类型没有默认的数据精度，所以在使用时必须指定精度类型，否则会报错。

GLSL

结构体的构造函数可以传递参数，参数的顺序与结构体成员定义的顺序一致。

当且仅当两个结构体变量所对应的所有成员都相等时，==运算符才返回true。

GLSL ES只支持一维数组，而且不支持 push和 pop方法。

GLSL ES内置的采样器类型为sampler，有两种类型的采样器类型sampler2D和samplerCube。

坐标变换

坐标变换

术语表

• A
• α混合(alpha blending)：使用α值混合两个以上物体的颜色的过程。
• α值(alpha value)：用来表示物体透明度的值(0.0表示完全透明，1.0表示完全不透明)。α混合需要使用α值。
• 环境光(ambient light)：无方向的光，以相同的强度从所有的方向照射在物体上。
• 连接(attach)：在两个已经存在的对象间建立联系的过程，注意与绑定比较。
• attribute变量(attribute variable)：向顶点着色器传入数据的变量。
• B
• 绑定(bind)：创建一个新对象，并将该对象联系(绑定)到渲染上下文的过程，注意与连接比较。
• 缓冲区(buffer)：为了专门存储某种特定数据(如颜色和深度值)而划分出的内存区域。
• 缓冲区对象(buffer object)：webgl中用于存储多条顶点信息的对象。
• C
• 画布(canvas)：html5元素，用以在网页上绘制图形。
• 裁剪(clipping)：在三维场景中确定将被绘制出来的区域的过程。不在裁剪区域中的物体不会被绘制出来。
• 颜色缓冲区(color buffer)：webgl绘制操作的目标内存区域。一旦绘制完成，其中的内容就会被显示在屏幕上。
• 列主序(column major)：矩阵存储在数组中的一种惯例形式，即矩阵的元素按列依次存储在数组中。
• 完整性(completeness)：在帧缓冲区上下文中使用，表示帧缓冲区是否满足所有条件以供绘图。
• 上下文(context)：实现了在canvas绘图方法的javascript对象。
• D
• 深度值(depth value)：从视点沿视线观察时，片元与视点的距离。(Z值)。
• 深度缓冲区(depth buffer)：存储所有片元深度的内存区域，用于隐藏面消除功能。
• 平行光(directional light)：具有方向、平行入射的光线。
• F
• 远裁剪面(far clipping plane)：组成可视空间的，距离视点较远的裁剪面。
• 雾化(fog)：根据物体与观察者的距离将颜色向背景色消退的效果。雾化通常可以提供深度感。
• 片元(fragment)：光栅化过程产生的像素，具有颜色、深度值、纹理坐标等。
• 片元着色器(fragment shader)：处理片元信息的着色器。
• 帧缓冲区(framebuffer object)：离屏绘制用到的webgl对象。
• G
• GLSL ES：OpenGL ES着色器语言，ES表示嵌入式系统(Embedded System)。
• H
• 隐藏面消除(hidden surface removal)：从特定视点、隐藏(放弃绘制)被遮挡的表面或表面的一部分的过程。
• I
• 图像(image)：由像素组成的矩形数组。
• 索引(index)：参考顶点索引(vertex index)。
• L
• 本地坐标(local coordinates)：定义在本地坐标系(对应与当前物体的坐标系)中的顶点坐标，参见世界坐标(world coordinates)。
• M
• 模型矩阵(model matrix)：用以平移、旋转和缩放物体的矩阵，也称建模矩阵(modeling matrix)。
• 模型视图矩阵(model view matrix)：视图矩阵乘以模型矩阵得到的矩阵。
• 模型视图投影矩阵(model view projection matrix)：投影矩阵乘以模型视图矩阵得到的矩阵。
• N
• 近裁剪面(near clipping plane)：组成可视空间的，距离视点较近的裁剪面。
• 法线(normal)：垂直于多边形平面的假想的线，用三维矢量表示，也称法向量(normal vector)。
• O
• 正射投影矩阵(orthographic projection matrix)：定义盒状可视空间的矩阵。盒状可视空间由左、右、上、下、远、近六个裁剪面确定，盒状可视空间中物体的尺寸不会因物体与视点远近而变化。
• P
• 透视投影矩阵(perspective projection matrix)：定义金字塔状可视空间的矩阵。金字塔状可视空间中的物体尺寸会根据与视点的距离进行缩放，以产生透视效果。
• 像素(pixel)：图像单元，具有RGB值或RGBA值。
• 点光源(point light)：由一个点向各个方向发出的光。
• 程序对象(program object)：管理着色器对象的webgl对象。
• 投影矩阵(projection matrix)：正射投影矩阵和透视投影矩阵的统称。
• R
• 光栅化过程(rasterization process)：将矢量格式的图形转化为片元(像素点，供屏幕显示)的过程。
• 渲染缓冲区对象(renderbuffer object)：提供二维绘图区的webgl对象。
• RGBA：一种颜色格式，R为红色分量，G为绿色分量，B为蓝色分量，A为透明度分量。
• S
• 取样器(sampler)：在片元着色器中，用来访问纹理图像的数据类型。
• 着色器(shader)：实现基本绘图功能的计算机程序。webgl支持顶点着色器和片元着色器。
• 着色(shading)：为物体的每个表面确定最终显示出的颜色的过程。
• 产生阴影(shadowing)：确定并绘制物体投下的影子的过程。
• 纹素(texel)：组成纹理的基本单元，即纹理元素，具有RGB值或RGBA值。
• 纹理坐标(texture coordinates)：用来访问纹理图像并取色的二维坐标。
• 纹理图像(texture image)：用以纹理映射的图像，也可以简称为纹理(texture)。
• 纹理映射(texture mapping)：将纹理图像贴(映射)到物体表面上的过程。
• 纹理对象(texture object)：用来管理纹理图像的webgl对象。
• 纹理单元(texture unit)：管理读个纹理对象的机制。
• 变换(transformation)：将物体的顶点坐标转化为物体变换(平移、缩放、旋转)的新坐标的过程。
• U
• uniform变量(uniform variable)：向顶点着色器或片元着色器传入数据的变量。
• V
• varying变量(varying variable)：用以从顶点着色器向片元着色器传递数据的变量。
• 顶点索引(vertex index)：顶点数据元素储存在缓冲区中的位置，第一个顶点的索引是0，后一个顶点的索引在前一个之上增加1。
• 顶点着色器(vertex shader)：处理顶点信息的着色器程序。
• 视图坐标系(view coordinate system)：以视点为原点，视线为Z轴负半轴，上方向为Y轴正半轴的坐标系。
• 视图矩阵(view matrix)：将顶点在世界坐标系中的坐标转换为在视图坐标系下坐标的矩阵。
• 视图投影矩阵(view projection matrix)：投影矩阵乘以视图矩阵获得的矩阵。
• 可视空间(viewing volume)：三维空间中能被显示到屏幕上的子空间。在可视空间外的物体不会被显示。
• W
• 世界坐标系(world coordinates)：模型矩阵乘以三维模型顶点的本地坐标获得的坐标。