本文中涉及的所有接口都不在公共文件中。您需要在GitHub上下载源代码以创建一个私人类文档。
当然，本文将不涉及颜色设备算法的解释。
任何追踪中的WebGL 3D库都将封装WebGL本地界面。CESIUMJS已从内部测量，已经有十年了，WebGL自2011年发布以来已有11年。在此期间，不可避免的是小型维修和小补品。
更重要的是，Cesiumjs是JavaScript的地理3D框架。它在源代码的设计中具有两个主要特征：
关于模块化策略，Cesiumjs已从版本1.63.WebGL中切换到本机格式，是使用全局状态的指令样式接口。它必须封装在面向对象的样式上。Threejs是一般Web3D库中WebGL包装的代表性工作。
该包装还具有其他好处，即在这几十年中的基础WebGL接口变化。包装后，可以屏蔽这些更改。高层应用程序调用封装的API方法基本上没有变化。
Cesiumjs封装，WebGL 2.0正式支持（在1.0中扩展）VAO，分别封装在类和类中。
该类相对简单，提供了一个简单的工厂模型的静态创建方法：
当对象实例化时，它将创建并上传类型数组：
除了这两种用于创建的静态方法外，还有一些复制和缓冲对象的方法，这些方法未一个一个一个。
请注意，该对象不能保存原始的顶点类型数组数据。这是因为保存JavaScript内存注意事项。
顶点数组对象，封装是OpenGL系统中的数据模型。在WebGL中，旨在将多个顶点的性能丢失保存到缓冲区到全局状态对象。
剖腹产的顶点数也很简单。只需使用WebGL的顶点属性组装对象以组装对象：
如果您在上面的代码中练习，则必须无法创建一个成功的创建：没有参数传递给或因为对象（type）是基础接口的包装对象，例如WebGL呈现上下文。目的。
因此，它不是孤立的API。它必须与其他包装一起使用。他们两个必须取决于对象。在1.4中，他们将介绍如何使用类包装WebGL的底接口以及如何访问对象。
直接创建并在需要时，使用这两个接口意味着获得的数据与格式一致。其他人类阅读友好数据格式必须转换为VBO格式直接使用这两个类别。如果您需要使用第2节中提到的指令对象，则这两个类别可能会派上用场。
纹理是WebGL中非常复杂的主题。
让我们先谈谈参数。WebGL 1.0没有本机样品API。该界面一直启动到2.0。因此，Cesiumjs封装了一个简单的类：
实际上，将WebGL 1.0中的纹理采样参数放入对象并不难。
纹理是正确的软件包。它不仅封装，而且还封装了数据上传的功能。只需放心地传递地图数据即可。
相同，参数。
您可以在模块中找到用于创建图像纹理的代码：
除了创建纹理外，Cesiumjs还提供纹理复制工具功能，例如从框架缓冲区对象复制纹理：
或创建mipmap：
众所周知，与WebGL颜色设备相关的API是和谐的，并且顶点阴影和色谱颜色设备形成了彩色设备程序对象。在渲染框架中，它由多个通道组成。在触发每个通道之前，通常会切换颜色设备程序以达到不同的计算效果。
Cesiumjs的渲染在Universal Web3D中要复杂得多，这意味着有很多颜色设备程序。如果有很多对象，则必须管理IT.CESIUMJS封装了基础API，但也设计了一种缓存机制。
Cesiumjs使用类来管理颜色设备代码文本，使用类管理，使用类来缓存，然后使用，以帮助处理颜色设备代码文本中的GLSL功能，结构成员和宏定义。
此外，还有一个可以帮助创作的课程。
这堆私人类型不能单独用作正面，通常在第2节中与各种指令对象一起使用。
下面给出了一个示例。它用于创建颜色设备程序对象的静态方法。此方法将创建一个对象并将其缓存到对象中。那些有兴趣的人可以自己查看缓存代码。
完整的示例可以找到我写的有关使用三角形的文章。
WebGL的底接口的包装基本上在类中。核心是渲染上下文（，）对象。此外，还有一些重要的渲染功能和成员变量：
通常，通过对象上的对象，可以访问对象。
WebGL呈现上下文的上下文。有很多常数。Cesiumjs封装了渲染上下文的常数以及可能用于导出对象的可能的常数。
还有另一件事可以指定该通道是WebGL没有通道API，并且在一个框架内将颜色设备切换为多个绘图过程非常常见。每个触发行为称为通道。
Cesiumjs打包了高级别三维对象的渲染行为，并将其封装成三种类型的指令对象，这将在第2节中说；这些说明对象是优先的。Cesiumjs将这些优先级描述为渠道和出口的出口。对于枚举的定义，当前指令中有10个优先级：
成员代表目前有10个优先事项。
在框架状态对象中，还有一个成员：
这五个布尔值控制哪些通道用于渲染。
指令对象的通道状态值，再加上框架状态对象上的通道状态，构成了Cesiumjs巨大抽象模型的“通道”概念。
实际上，我认为这种设计将在场景的单帧渲染时会导致大量IF判断和分类处理。似乎有点多余。它可以提供诸如WebGPU新API之类的频道编码器，例如WebGPU，它可以简化频道的概念。
统一的价值，也就是说，在WebGL中，不熟悉的读者需要首先学习WebGL的概念。
每个帧，大量的状态值与上一个帧不同，也就是说，您需要在任何时候更新到颜色设备中。Cesiumjs为此制作了包装。这种更改更改的频繁统一值封装在对象中。每个成员都是一个实例：
从默认导出对象中，取一个成员：
该统一值是相机的投影矩阵。它的值函数需要一个参数，该参数可实时从统一状态对象（类型）获得。
该对象的读者只读取，指向私人成员。执行帧状态中的指令列表时，调用绘图函数以进一步调用模块中的函数，并且将执行颜色设备的方法程序对象：
此功能可以设置指令对象的自定义化，并将其设置为构建-in，即颜色设备中均匀值的设置。
渲染容器主要是指帧缓冲器对象和渲染缓冲区对象。
渲染缓冲对象，包装成一堂课的剖腹产，是一个非常简单的包装，更不用说了，但是有必要单独提及它。如果启用了MSAA，则将调用相关的绑定功能：
接下来，框架缓冲区的包装。
普通的框架缓冲区，即常规包装成类。它有几个数组成员可以保存深层模板附件使用的颜色附件，容器纹理和渲染缓冲区的容器。
它也非常易于使用，只需在原型链上调用绑定方法。CESIUMJS支持MRT，因此有一个相应的方法：
MSAA使用此类；Cesiumjs还设计了一个类来管理框架缓冲对象，这些对象用于诸如邮政处理，OIT，拾取和场景的框架缓冲区管理等模块中。
Cesiumjs不能直接处理地理三维对象。取而代之的是，在各种更新的进程控制功能中，生成每个三维对象以生成一个称为“指令”的对象，并发送帧状态对象的相关渲染队列。
这些指令对象阻止了各种高级别的“人友善”三维数据对象的差异，这些数据对象可以促进它们携带的数据资源（缓冲，纹理）和行为（颜色设备）均匀处理。
这些指令对象分为三类：
让我们在下面做简要说明。
那是位于模块中的类。
在对象的每个帧更新过程中，绘图指令由各种高级三维对象生成，并添加到框架状态对象中以等待渲染。
我曾经写过这幅画中最简单的三角形文本。如果您单击我用户的文章列表，则可能在本文中找不到盗版:)
简而言之，创建需要数据（，统一图）和行为（）。这些辅助材料中的大多数都需要对象。
其执行过程如下：
有关渲染框架的文章已提及如何执行这些图纸说明。这是原型链上的一种方法。它一直到该函数，最后调用各种指令对象的执行方法。
在上面的简单逻辑过程中，该模块中的功能负责绑定帧缓冲区对象和渲染状态，并绑定到WebGL的全局状态：
此后，该函数将立即设置全局状态设置的统一值（更新）：
然后，它是WebGL的常规绘图过程，绑定，确定是否使用了索引缓冲区，并绘制逻辑以绘制顶点数据：
该代码绑定了各种顶点数据。
屏幕指令与WebGL方法的目的相同，即当前帧缓冲区（或画布）的颜色部分和深度模板部分被清除，并且填充特定值以将其封装成类。
清除指令相对简单。它的执行和绘图指令是一个过程，全部在模块中的函数中：
您可以看到，一旦执行，它将不会继续执行有关绘图指令的代码，而返回为返回。
此后，原型链上的方法还将绑定框架缓冲区并设置渲染状态。最后，该方法被调用以清除后要填充的集合的颜色，深度和模板值。该过程相对简单。没有源代码。
对象上有几个清洁指令成员。在渲染过程中，该函数执行颜色清除指令，模板的屏幕指令和屏幕深度由函数执行：
当然，有些物体不仅是，还有其他地方。您可以在源代码中在全球范围内搜索关键字。
早期的WebGL 1.0支持GPU通用计算（GPGPU）。在顶部，请阅读使用WebGL像素读取像素的接口函数的结果。
WebGL 2.0的计算迟到了。
Cesiumjs最初用于区分渲染任务。
在Cesiumjs源代码中使用计算说明的地方并不多。最经典的是图像层的重新投影方法：
这不是执行其“管家”的班级。
当然，要查看课堂的构造函数，它只是一对包装。使用装饰模式：
实际上，视图的核心执行部分也被使用，并在独立性中引入。
不会引入颜色和纹理编码原理的特定计算。它属于彩色设备的原理。本文（本系列文章）更多地是关于架构的设计细节。
Cesiumjs留下了一些开放的API，使开发人员可以编写自己的着色过程。
在Cesium团队大力开发下一个代理3DTILES和新体系结构之前，该能力的这一部分相对较弱。只有一个材料规范可以编写现有几何对象的材料效应，并且文档较少。
随着下一代3DTILES和新模型类的启动，它带来了更高的自由度，不仅完整的文档，而且还带来了开发人员修改图形渲染的最大自由。
写作时，有这样的领域：
这是班级的子类。除上述两个属性外，您还可以自己传递顶点颜色设备代码。
但是，通常不会直接提供带有顶点和色谱颜色设备的导数，因为外观对象所需的颜色设备具有其他要求。通常，材料GLSL函数是在创建过程中编写的：
然后将遵循材料规范的材料传递给外观对象：
物质规格将不会在此处引入。将来会有机会打开另一篇文章。简而言之，传递由JavaScript对象给出的成员变量。该对象可以自定义材料，该材料可以具有统一图并在GLSL代码中使用函数。将结构作为材料返回。
尽管可以将GLSL结构作为材料创建，但它只能在平板电脑的部分着色过程中作用。
生成的是生成的图形对象。外观对象支持原始的两个主要颜色设备代码，但是有限制。
通过以下代码，您可以输出由对象的最简单对象生成的最简单的对象，这些对象可以自行修改：
Cesiumjs实际上具有大量内置的常见后处理器，常见，FXAA等是常见的。请参阅此类导出的静态字段。
尽管这些后处理是最基本的，但进行了整个FBO，但效果是平均值。
访问后，您可以访问处理器的容器。
在所有邮政处理器之前，必须执行内置的环境灯盖（AO）或Bloom，并且必须在所有邮政处理器后放置FXAA。这些三个阶段也是CesiumJS默认情况下由CesiumJ创建的后处理器。
您可以将单独的帖子处理阶段（）或邮政 - 合成后处理阶段（）作为后处理器创建到容器中。如果您不使用官员提供的其他常见帖子处理算法，则还可以自己编写颜色设备。
官方文件写道：
每个帖子处理阶段的输入纹理是场景呈现的纹理或前处理阶段的输出纹理。
官方文件，该官员还提供了两个例子：
后来的处理还支持选择对象的判断，即示例2，修改挑选对象的颜色：
它是一个支持设置等的JS数组，它具有登录器或等。带有访问者的类是“选定对象”，并在Update Process（）中创建选定的纹理。
有关邮政处理的信息可以专门用于应用程序。
随着此新体系结构的更新（2022年5月，此体系结构正在启动原始类的体系结构的替换），可以随时更新。
当前，仅支持两个类别的支持。彩色设备在每个瓷砖或型号上。
例子：
可以在源代码root目录下的文件中检查相关的规范文档。
您可以在渲染管道中设置统一图，指定两个着色器之间的交换值，并访问两种主要颜色的剖腹产的两个结构。他们为您提供尽可能详细的事物，例如::
顶点属性提供尽可能详细的顶点。常见：连接顶点坐标，方法线，纹理坐标，颜色等，并附加了各种坐标系统下的值。
上面的代码增加了观察坐标的z值10个单元，最后将构建的投影矩阵作为输出模型坐标。
在CustomShader API中支持所有构建的-GLSL函数，常数和由Cesiumj提供的自动变量。
毫无疑问，这为想要修改形状和模型效果的开发人员提供了极大的便利。
就我个人而言，我认为在WebGL包装部分中，本文可以。较高的应用程序包装，例如OIT，GPUPICK，各种对象的颜色设备和指令生成过程，所有这些都基于本文的内容，都发生在本文的内容中，所有这些都发生在本文的内容中在渲染过程中。
最后，有人强调，本文只是架构的介绍，而不是对颜色设备算法的详细说明。彩色装置算法可以描述为剖腹产的头脑风暴区域，无法容忍文章。
借助渲染架构和WebGL包装基金会，接下来要查看最经典型号（GLTF）和3DTILES渲染架构设计。
原始：https：//juejin.cn/post/7097785594062831653