简介看了一个使用WebGL的库的源码后，开始找WebGL的资料。找了很多相关的知识点，按照自己的理解习惯整理记录下来。OriginMyGitHub简介WebGL是一个跨平台、免费和开放的网络标准，用于基于OpenGLES的初级3D图形API。无需使用插件即可在任何兼容的Web浏览器中渲染高性能交互式3D和2D图形。通过HTML5Canvas元素在JavaScript中可用。WebGL1.0基于OpenGLES2.0，WebGL2.0基于OpenGLES3.0。对于当前的浏览器支持，请参阅我可以使用WebGL吗？WebGL官方相关指南资源在这里。感觉浏览加载有点慢，所以单独下载了一份到Github：WebGL1.0、WebGL2.0。OpenGLES是一个跨平台的免费API，用于在嵌入式和移动系统（包括游戏机、手机、电器和车辆）上渲染高级2D和3D图形。它是OpenGL的一个子集。OpenGL是业界采用最广泛的2D和3D图形API，支持各种计算机平台的数千种应用程序。它独立于窗口系统和操作系统。OpenGL公开了最新图形硬件的所有功能。OpenGL规范严格规定了每个函数应该如何执行，以及它们的输出值应该是什么。至于各个功能在内部是如何实现的，将由OpenGL库的开发者决定，所以同一个API在不同的系统中可能会有不一致的行为。OpenGLES对应的编程语言是OpenGLESShadingLanguage(GLSLES)，它是基于OpenGLShadingLanguage(GLSL)。GLSL是OpenGL的主要着色语言。其风格类似于C语言。它是为图形计算量身定做的。它包括一些对向量和矩阵运算有用的特性。以下大部分概念都是关于OpenGL的。由于WebGL的核心还是基于OpenGL，所以也有助于理解。状态机状态机(FSM)是一种计算数学模型，它是一种抽象机器，可以在任何给定时间处于有限状态之一。FSM可以根据某些输入从一种状态变为另一种状态。OpenGL本身就是一个巨大的状态机：一系列描述OpenGL此刻应该如何表现的变量。在OpenGL相关程序中可以看到很多全局变量，有的是输出变量，有的是输入变量。图形渲染管线在OpenGL中，一切都在3D空间中，但屏幕和窗口是2D像素，这导致OpenGL的大部分工作都是将3D坐标转换为适合屏幕的2D像素。将3D坐标转换为2D坐标的过程由OpenGL的图形管道管理。图形渲染管线可以分为几个阶段，每个阶段都会将上一阶段的输出作为输入。所有这些阶段都是高度专业化的，并且很容易并行执行。由于它们的并行执行特性，如今的大多数显卡都有数千个小型处理核心，它们在GPU上为每个（渲染管线）阶段运行自己的小程序，从而允许在图形渲染管线中进行快速处理。数据处理。这些小程序被称为着色器（Shader）。下面是图形渲染管道每个阶段的抽象表示。注意，蓝色部分表示可以注入自定义着色器，即可编程。输入到图形渲染管线的数据称为顶点数据（VertexData）。顶点数据是顶点的集合。一个顶点（Vertex）是3D坐标数据的集合。顶点数据由顶点属性（VertexAttribute）表示，它可以包含我们想要使用的任何数据。输入数据将进入图形渲染管线的第一个处理阶段：顶点着色器。VertexShader顶点着色器（VertexShader）是可编程的，主要目的是将3D坐标转换成标准化的设备坐标。它还在GPU上创建内存来存储顶点数据，配置OpenGL如何解释此内存，并指定如何将其发送到显卡。顶点着色器允许我们对顶点属性进行一些基本操作。顶点相关信息存储在顶点缓冲对象（VertexBufferObjects，VBO）中，它在GPU内存（通常称为显存）中存储了大量的顶点。使用这些缓冲区对象的好处是可以一次性向显卡发送大量数据，而不是每个顶点发送一次。顶点着色器几乎可以在数据发送到显卡内存后立即访问顶点，这是一个非常快速的过程。然后进入图形元素组装阶段。图元组装（PrimitiveAssembly）将顶点着色器输出的所有顶点作为输入，将所有的点组装成指定图元的形状。Primitive原始形状有：虚线三角形primitive组装阶段的输出被传递到几何着色器阶段。GeometryShader几何着色器（GeometryShader）是可编程的，以图元形式的顶点集合作为输入，它可以通过生成新的顶点构造新的（或其他）图元来生成其他形状。几何着色器的输出被传递到光栅化阶段。RasterizationRasterization将图元映射到最终屏幕上的相应像素，生成片段（Fragment）供片段着色器使用。剪辑在片段着色器运行之前执行。裁剪丢弃视图外的所有像素以提高执行效率。FragmentShader片段着色器（FragmentShader）是可编程的，主要目的是计算一个像素的最终颜色，这是OpenGL所有高级效果产生的地方。通常，片段着色器包含有关3D场景的数据（例如照明、阴影、灯光颜色等），这些数据可用于计算最终像素颜色。所有对应的颜色值都确定后，最终的对象就会进入最后的阶段：测试混合。TestsAndBlending阶段检查片段相应的深度（和模板）值，并使用它们来确定这个像素是在其他对象的前面还是后面，以及是否应该丢弃它。这个阶段还会检查alpha值（alpha值定义了物体的透明度）并对物体进行混合（Blend）。所以，即使在片段着色器中计算了一个像素的输出颜色，最终渲染的像素颜色也可能完全不同。WebGL中的着色器WebGL中编写的主要着色器是顶点着色器和片段着色器。具体实现见JavaScriptWebGL画直线。参考WebGL教程WebGL基础绘图一：画一个点你好，三角形WebGLMDNKhronosMDNWebGL画一个正方形
