• Cesium 源码解析 Model（四）

            接着上一讲，将gltf中各种数据都分离并存储到了model的各个成员中，而对于后续的处理就是使用这些数据创建对应的gpu渲染资源了。

    1. Model.prototype.update = function (frameState) {
    2. 。。。。。。
    3.  
    4. // 如果使用了Draco压缩了数据，需要将数据解码，解码未完成时如下方式处理
    5.       if (!loadResources.finishedDecoding()) {
    6.         // 使用thread+wasm方式解码模型
    7.         DracoLoader.decodeModel(this, context).otherwise(
    8.           ModelUtility.getFailedLoadFunction(this, "model", this.basePath)
    9.         );
    10.       }
    11.  
    12.       // Draco压缩解码完成，资源还没解析完成
    13.       if (loadResources.finishedDecoding() && !loadResources.resourcesParsed) {
    14.         // 计算包围球
    15.         this._boundingSphere = ModelUtility.computeBoundingSphere(this);
    16.         // 包围球半径
    17.         this._initialRadius = this._boundingSphere.radius;
    18.  
    19.         // 如果设置了cacheKey，缓存解码后的数据
    20.         DracoLoader.cacheDataForModel(this);
    21.  
    22.         // 解析完成
    23.         loadResources.resourcesParsed = true;
    24.       }
    25.  
    26.       // 解析完成、外部链接的shader代码下载完成
    27.       if (
    28.         loadResources.resourcesParsed &&
    29.         loadResources.pendingShaderLoads === 0
    30.       ) {
    31.         // 显示外轮廓线
    32.         if (this.showOutline) {
    33.           // 轮廓线是一个扩展选项，是cesium定义的，模型生成的轮廓线的数据？？？
    34.           ModelOutlineLoader.outlinePrimitives(this);
    35.         }
    36.         // 创建gpu资源
    37.         createResources(this, frameState);
    38.       }
    39.     。。。。。。
    40. }

    1、对于使用Draco方式压缩过的数据，cesium会使用thread+wasm的方式进行数据解压缩

    1.       // 如果使用了Draco压缩了数据，需要将数据解码，解码未完成时如下方式处理
    2.       if (!loadResources.finishedDecoding()) {
    3.         // 使用thread+wasm方式解码模型
    4.         DracoLoader.decodeModel(this, context).otherwise(
    5.           ModelUtility.getFailedLoadFunction(this, "model", this.basePath)
    6.         );
    7.       }

    2、数据解压缩完成后要计算模型包围盒，计算过程主要时遍历node，获取模型的祖先点的矩阵乘积，并从gltf的“accessors”中得到模型顶点的最大值、最小值，算出模型的包围盒。

    3、如果定义了model.cacheKey参数，会将解压后的数据缓存到context中。

    DracoLoader.cacheDataForModel(this);

    4、数据都准备好之后就是最后的gpu资源创建过程了createResources(this, frameState);

     这个过程就是将内存中的资源变为显存中的资源，过程代码：

    1. // 创建渲染所需要的所有的gpu资源
    2. function createResources(model, frameState) {
    3.   // 上下文
    4.   var context = frameState.context;
    5.   // 3D模式
    6.   var scene3DOnly = frameState.scene3DOnly;
    7.   // 顶点着色器中解析
    8.   var quantizedVertexShaders = model._quantizedVertexShaders;
    9.   // 所有的techniques的引用
    10.   var techniques = model._sourceTechniques;
    11.   // gltf中着色程序索引
    12.   var programs = model._sourcePrograms;
    13.   // 渲染资源
    14.   var resources = model._rendererResources;
    15.   // glsl代码
    16.   var shaders = resources.sourceShaders;
    17.   // 如果是缓存过的资源（一般不缓存）
    18.   if (model._loadRendererResourcesFromCache) {
    19.     // glsl代码
    20.     shaders = resources.sourceShaders =
    21.       model._cachedRendererResources.sourceShaders;
    22.   }
    23.  
    24.   // Techniques遍历
    25.   for (var techniqueId in techniques) {
    26.     if (techniques.hasOwnProperty(techniqueId)) {
    27.       // 使用的程序索引
    28.       var programId = techniques[techniqueId].program;
    29.       // 程序
    30.       var program = programs[programId];
    31.       // 程序中使用的顶点shader
    32.       var shader = shaders[program.vertexShader];
    33.  
    34.       // 程序中包含webgl扩展
    35.       ModelUtility.checkSupportedGlExtensions(program.glExtensions, context);
    36.  
    37.       // 数据需要在shader中解析
    38.       if (
    39.         model.extensionsUsed.WEB3D_quantized_attributes ||
    40.         model._dequantizeInShader
    41.       ) {
    42.         // 修改着色器
    43.         var quantizedVS = quantizedVertexShaders[programId];
    44.         if (!defined(quantizedVS)) {
    45.           // 修改着色器
    46.           quantizedVS = modifyShaderForQuantizedAttributes(
    47.             shader,
    48.             programId,
    49.             model
    50.           );
    51.           quantizedVertexShaders[programId] = quantizedVS;
    52.         }
    53.         shader = quantizedVS;
    54.       }
    55.  
    56.       // 钩子拦截并修改着色器字符串
    57.       shader = modifyShader(shader, programId, model._vertexShaderLoaded);
    58.     }
    59.   }
    60.  
    61.   // 从缓存中加载的资源，资源已经被解析过了
    62.   if (model._loadRendererResourcesFromCache) {
    63.     var cachedResources = model._cachedRendererResources;
    64.  
    65.     resources.buffers = cachedResources.buffers;
    66.     resources.vertexArrays = cachedResources.vertexArrays;
    67.     resources.programs = cachedResources.programs;
    68.     resources.silhouettePrograms = cachedResources.silhouettePrograms;
    69.     resources.textures = cachedResources.textures;
    70.     resources.samplers = cachedResources.samplers;
    71.     resources.renderStates = cachedResources.renderStates;
    72.  
    73.     // Vertex arrays are unique to this model, create instead of using the cache.
    74.     if (defined(model._precreatedAttributes)) {
    75.       createVertexArrays(model, context);
    76.     }
    77.  
    78.     model._cachedGeometryByteLength += getGeometryByteLength(
    79.       cachedResources.buffers
    80.     );
    81.     model._cachedTexturesByteLength += getTexturesByteLength(
    82.       cachedResources.textures
    83.     );
    84.   } else {
    85.     // 创建资源
    86.  
    87.     // 创建gpu资源，顶点缓存，索引缓存
    88.     createBuffers(model, frameState); // using glTF bufferViews
    89.     // 创建着色程序
    90.     createPrograms(model, frameState);
    91.     // 创建采样器
    92.     createSamplers(model, context);
    93.     // 从BufferViews中加载图像
    94.     loadTexturesFromBufferViews(model);
    95.     // 依据图像创建纹理
    96.     createTextures(model, frameState);
    97.   }
    98.  
    99.   // 创建骨骼动画
    100.   createSkins(model);
    101.   createRuntimeAnimations(model);
    102.  
    103.    // 不是从缓冲中获得的（缓存中是已经处理完成的，不用再处理）
    104.   if (!model._loadRendererResourcesFromCache) {
    105.     
    106.     createVertexArrays(model, context); // using glTF meshes
    107.     createRenderStates(model); // using glTF materials/techniques/states
    108.     // Long-term, we might not cache render states if they could change
    109.     // due to an animation, e.g., a uniform going from opaque to transparent.
    110.     // Could use copy-on-write if it is worth it.  Probably overkill.
    111.   }
    112.  
    113.   // 创建uniform资源
    114.   createUniformMaps(model, context); // using glTF materials/techniques
    115.   // 创建运行时组织结构、以及每一个节点的渲染命令
    116.   createRuntimeNodes(model, context, scene3DOnly); // using glTF scene
    117. }

    4.1、在Batched3DModel3DTileContent.js中设置过vertexShaderLoaded: getVertexShaderCallback(content)这个回调功能，当glsl代码解析完成后，会拦截这个glsl代码用来添加自定义的glsl代码片段。（对应uniform也有同样的过程）

    1. // Techniques遍历
    2.   for (var techniqueId in techniques) {
    3.     if (techniques.hasOwnProperty(techniqueId)) {
    4.       // 使用的程序索引
    5.       var programId = techniques[techniqueId].program;
    6.       // 程序
    7.       var program = programs[programId];
    8.       // 程序中使用的顶点shader
    9.       var shader = shaders[program.vertexShader];
    10.  
    11.       // 程序中包含webgl扩展
    12.       ModelUtility.checkSupportedGlExtensions(program.glExtensions, context);
    13.  
    14.       // 数据需要在shader中解析
    15.       if (
    16.         model.extensionsUsed.WEB3D_quantized_attributes ||
    17.         model._dequantizeInShader
    18.       ) {
    19.         // 修改着色器
    20.         var quantizedVS = quantizedVertexShaders[programId];
    21.         if (!defined(quantizedVS)) {
    22.           // 修改着色器
    23.           quantizedVS = modifyShaderForQuantizedAttributes(
    24.             shader,
    25.             programId,
    26.             model
    27.           );
    28.           quantizedVertexShaders[programId] = quantizedVS;
    29.         }
    30.         shader = quantizedVS;
    31.       }
    32.  
    33.       // 钩子拦截并修改着色器字符串
    34.       shader = modifyShader(shader, programId, model._vertexShaderLoaded);
    35.     }
    36.   }

    4.2、根据是否缓存过资源分情况处理，缓存的则资源代表之前处理完成了，就不在处理了，否则就要创建相应的资源。

    1. // 从缓存中加载的资源，资源已经被解析过了
    2.   if (model._loadRendererResourcesFromCache) {
    3.     var cachedResources = model._cachedRendererResources;
    4.  
    5.     resources.buffers = cachedResources.buffers;
    6.     resources.vertexArrays = cachedResources.vertexArrays;
    7.     resources.programs = cachedResources.programs;
    8.     resources.silhouettePrograms = cachedResources.silhouettePrograms;
    9.     resources.textures = cachedResources.textures;
    10.     resources.samplers = cachedResources.samplers;
    11.     resources.renderStates = cachedResources.renderStates;
    12.  
    13.     // Vertex arrays are unique to this model, create instead of using the cache.
    14.     if (defined(model._precreatedAttributes)) {
    15.       createVertexArrays(model, context);
    16.     }
    17.  
    18.     model._cachedGeometryByteLength += getGeometryByteLength(
    19.       cachedResources.buffers
    20.     );
    21.     model._cachedTexturesByteLength += getTexturesByteLength(
    22.       cachedResources.textures
    23.     );
    24.   } else {
    25.     // 创建资源
    26.  
    27.     // 创建gpu资源，顶点缓存，索引缓存
    28.     createBuffers(model, frameState); // using glTF bufferViews
    29.     // 创建着色程序
    30.     createPrograms(model, frameState);
    31.     // 创建采样器
    32.     createSamplers(model, context);
    33.     // 从BufferViews中加载图像
    34.     loadTexturesFromBufferViews(model);
    35.     // 依据图像创建纹理
    36.     createTextures(model, frameState);
    37.   }

    4.2.1、createBuffers(model, frameState); // using glTF bufferViews

    这个函数主要创建顶点缓存、索引缓存，对应的是webgl的createBuffer。

    1. // 创建顶点、索引缓存（model提供了渲染存放的位置，frameState值提供了gl上下文和任务调度）
    2. function createBuffers(model, frameState) {
    3.   var loadResources = model._loadResources;
    4.  
    5.   // 资源处理完成
    6.   if (loadResources.pendingBufferLoads !== 0) {
    7.     return;
    8.   }
    9.  
    10.   // 上下文
    11.   var context = frameState.context;
    12.   // 顶点缓存，索引缓存
    13.   var vertexBuffersToCreate = loadResources.vertexBuffersToCreate;
    14.   var indexBuffersToCreate = loadResources.indexBuffersToCreate;
    15.   var i;
    16.  
    17.   // 异步
    18.   if (model.asynchronous) {
    19.     // 创建gpu顶点buffer
    20.     while (vertexBuffersToCreate.length > 0) {
    21.       // 处理一个buffer
    22.       scratchVertexBufferJob.set(vertexBuffersToCreate.peek(), model, context);
    23.       // 创建gpu顶点缓存
    24.       if (!frameState.jobScheduler.execute(scratchVertexBufferJob, JobType.BUFFER)) {
    25.         break;
    26.       }
    27.       // 处理完成一个就删除一个
    28.       vertexBuffersToCreate.dequeue();
    29.     }
    30.     // 创建gpu索引buffer
    31.     while (indexBuffersToCreate.length > 0) {
    32.       // 处理一个buffer
    33.       i = indexBuffersToCreate.peek();
    34.       scratchIndexBufferJob.set(i.id, i.componentType, model, context);
    35.       // 创建gpu索引缓存
    36.       if (!frameState.jobScheduler.execute(scratchIndexBufferJob, JobType.BUFFER)) {
    37.         break;
    38.       }
    39.       // 处理完成一个就删除一个
    40.       indexBuffersToCreate.dequeue();
    41.     }
    42.   } else {
    43.     // 同步的方式创建资源
    44.  
    45.     // 创建顶点缓存
    46.     while (vertexBuffersToCreate.length > 0) {
    47.       createVertexBuffer(vertexBuffersToCreate.dequeue(), model, context);
    48.     }
    49.  
    50.     // 遍历队列创建索引缓存
    51.     while (indexBuffersToCreate.length > 0) {
    52.       i = indexBuffersToCreate.dequeue();
    53.       // 创建索引缓存
    54.       createIndexBuffer(i.id, i.componentType, model, context);
    55.     }
    56.   }
    57. }

    从中可以看出，有同步、异步的方式创建资源，单说异步方式，最终创建的gpu的buffer存储在了

    model._rendererResources.buffers[bufferViewId] = vertexBuffer;中

    1. CreateVertexBufferJob.prototype.execute = function () {
    2.   // 创建顶点缓存
    3.   createVertexBuffer(this.id, this.model, this.context);
    4. };
    5. // 创建顶点缓存
    6. function createVertexBuffer(bufferViewId, model, context) {
    7.   // 资源
    8.   var loadResources = model._loadResources;
    9.   // bufferViews
    10.   var bufferViews = model.gltf.bufferViews;
    11.   var bufferView = bufferViews[bufferViewId];
    12.  
    13.   // Use bufferView created at runtime
    14.   if (!defined(bufferView)) {
    15.     bufferView = loadResources.createdBufferViews[bufferViewId];
    16.   }
    17.  
    18.   // 创建缓存
    19.   var vertexBuffer = Buffer.createVertexBuffer({
    20.     context: context,
    21.     typedArray: loadResources.getBuffer(bufferView),
    22.     usage: BufferUsage.STATIC_DRAW,
    23.   });
    24.  
    25.   // 是否可销毁
    26.   vertexBuffer.vertexArrayDestroyable = false;
    27.   // 为什么不合批
    28.   model._rendererResources.buffers[bufferViewId] = vertexBuffer;
    29.  
    30.   // 统计显存信息
    31.   model._geometryByteLength += vertexBuffer.sizeInBytes;
    32. }

    4.2.2、createPrograms(model, frameState);

    这个函数主要创建着色程序，对应的是webgl的createProgram。

    1. // 创建着色程序
    2. function createPrograms(model, frameState) {
    3.   var loadResources = model._loadResources;
    4.   var programsToCreate = loadResources.programsToCreate;
    5.  
    6.   // 处理下载时返回
    7.   if (loadResources.pendingShaderLoads !== 0) {
    8.     return;
    9.   }
    10.  
    11.   // PERFORMANCE_IDEA: this could be more fine-grained by looking
    12.   // at the shader's bufferView's to determine the buffer dependencies.
    13.   // 处理buffer加载时返回
    14.   if (loadResources.pendingBufferLoads !== 0) {
    15.     return;
    16.   }
    17.  
    18.   // 上下文
    19.   var context = frameState.context;
    20.  
    21.   // 异步
    22.   if (model.asynchronous) {
    23.     while (programsToCreate.length > 0) {
    24.       scratchCreateProgramJob.set(programsToCreate.peek(), model, context);
    25.       if (
    26.         // 执行调度
    27.         !frameState.jobScheduler.execute(
    28.           scratchCreateProgramJob,
    29.           JobType.PROGRAM
    30.         )
    31.       ) {
    32.         break;
    33.       }
    34.       programsToCreate.dequeue();
    35.     }
    36.   } else {
    37.     // Create all loaded programs this frame
    38.     // 创建所有的已经加载的着色程序
    39.     while (programsToCreate.length > 0) {
    40.       createProgram(programsToCreate.dequeue(), model, context);
    41.     }
    42.   }
    43. }

    从中可以看出，有同步、异步的方式创建资源，单说异步方式，最终创建的gpu的Program存储在了model._rendererResources.programs;中

    1. // 调度程序执行
    2. CreateProgramJob.prototype.execute = function () {
    3.   // 创建着色程序
    4.   createProgram(this.programToCreate, this.model, this.context);
    5. };
    6.  
    7. // 第一次构建程序时，不要包含用于剪裁平面和颜色的修改器，因为这是将缓存以用于其他模型的程序版本。
    8. function createProgram(programToCreate, model, context) {
    9.   // shaderprogram程序
    10.   var programId = programToCreate.programId;
    11.   var techniqueId = programToCreate.techniqueId;
    12.   // 着色程序id
    13.   var program = model._sourcePrograms[programId];
    14.   // 着色器源代码
    15.   var shaders = model._rendererResources.sourceShaders;
    16.  
    17.   // 根据着色程序id找到对应的源代码
    18.   var vs = shaders[program.vertexShader];
    19.   var fs = shaders[program.fragmentShader];
    20.  
    21.   // 在glsl中解码数据
    22.   var quantizedVertexShaders = model._quantizedVertexShaders;
    23.  
    24.   if (
    25.     model.extensionsUsed.WEB3D_quantized_attributes ||
    26.     model._dequantizeInShader
    27.   ) {
    28.     // 修改着色器？？？
    29.     var quantizedVS = quantizedVertexShaders[programId];
    30.     if (!defined(quantizedVS)) {
    31.       // 量化顶点着色器
    32.       quantizedVS = modifyShaderForQuantizedAttributes(vs, programId, model);
    33.       quantizedVertexShaders[programId] = quantizedVS;
    34.     }
    35.     vs = quantizedVS;
    36.   }
    37.  
    38.   // 修改着色器
    39.   var drawVS = modifyShader(vs, programId, model._vertexShaderLoaded);
    40.   var drawFS = modifyShader(fs, programId, model._fragmentShaderLoaded);
    41.  
    42.   // uniform相关的回调函数，在B3DMContent中在加入某些uniform数据，拼接uniform数据
    43.   if (!defined(model._uniformMapLoaded)) {
    44.     // 拼接拾取相关的着色器代码
    45.     drawFS = "uniform vec4 czm_pickColor;\n" + drawFS;
    46.   }
    47.  
    48.   var useIBL =
    49.     model._imageBasedLightingFactor.x > 0.0 ||
    50.     model._imageBasedLightingFactor.y > 0.0;
    51.   if (useIBL) {
    52.     // 启用IBL
    53.     drawFS = "#define USE_IBL_LIGHTING \n\n" + drawFS;
    54.   }
    55.  
    56.   if (defined(model._lightColor)) {
    57.     // 启用自定义灯光
    58.     drawFS = "#define USE_CUSTOM_LIGHT_COLOR \n\n" + drawFS;
    59.   }
    60.  
    61.   // 老版本gltf，自定义glsl
    62.   if (model._sourceVersion !== "2.0" || model._sourceKHRTechniquesWebGL) {
    63.     // 处理gamma矫正
    64.     drawFS = ShaderSource.replaceMain(drawFS, "non_gamma_corrected_main");
    65.     drawFS =
    66.       drawFS +
    67.       "\n" +
    68.       "void main() { \n" +
    69.       "    non_gamma_corrected_main(); \n" +
    70.       "    gl_FragColor = czm_gammaCorrect(gl_FragColor); \n" +
    71.       "} \n";
    72.   }
    73.  
    74.   // 纹理打包
    75.   if (OctahedralProjectedCubeMap.isSupported(context)) {
    76.     var usesSH =
    77.       defined(model._sphericalHarmonicCoefficients) ||
    78.       model._useDefaultSphericalHarmonics;
    79.     var usesSM =
    80.       (defined(model._specularEnvironmentMapAtlas) &&
    81.         model._specularEnvironmentMapAtlas.ready) ||
    82.       model._useDefaultSpecularMaps;
    83.     var addMatrix = usesSH || usesSM || useIBL;
    84.     if (addMatrix) {
    85.       drawFS = "uniform mat3 gltf_iblReferenceFrameMatrix; \n" + drawFS;
    86.     }
    87.  
    88.     if (defined(model._sphericalHarmonicCoefficients)) {
    89.       drawFS =
    90.         "#define DIFFUSE_IBL \n" +
    91.         "#define CUSTOM_SPHERICAL_HARMONICS \n" +
    92.         "uniform vec3 gltf_sphericalHarmonicCoefficients[9]; \n" +
    93.         drawFS;
    94.     } else if (model._useDefaultSphericalHarmonics) {
    95.       drawFS = "#define DIFFUSE_IBL \n" + drawFS;
    96.     }
    97.  
    98.     if (
    99.       defined(model._specularEnvironmentMapAtlas) &&
    100.       model._specularEnvironmentMapAtlas.ready
    101.     ) {
    102.       drawFS =
    103.         "#define SPECULAR_IBL \n" +
    104.         "#define CUSTOM_SPECULAR_IBL \n" +
    105.         "uniform sampler2D gltf_specularMap; \n" +
    106.         "uniform vec2 gltf_specularMapSize; \n" +
    107.         "uniform float gltf_maxSpecularLOD; \n" +
    108.         drawFS;
    109.     } else if (model._useDefaultSpecularMaps) {
    110.       drawFS = "#define SPECULAR_IBL \n" + drawFS;
    111.     }
    112.   }
    113.  
    114.   // 支持亮度
    115.   if (defined(model._luminanceAtZenith)) {
    116.     drawFS =
    117.       "#define USE_SUN_LUMINANCE \n" +
    118.       "uniform float gltf_luminanceAtZenith;\n" +
    119.       drawFS;
    120.   }
    121.  
    122.   // 创建属性和着色程序
    123.   createAttributesAndProgram(
    124.     programId,
    125.     techniqueId,
    126.     drawFS,
    127.     drawVS,
    128.     model,
    129.     context
    130.   );
    131. }
    132.  
    133. function createAttributesAndProgram(
    134.   programId,
    135.   techniqueId,
    136.   drawFS,
    137.   drawVS,
    138.   model,
    139.   context
    140. ) {
    141.   // 获取原来的着色器相关信息
    142.   var technique = model._sourceTechniques[techniqueId];
    143.   // 创建属性和位置
    144.   var attributeLocations = ModelUtility.createAttributeLocations(
    145.     technique,
    146.     model._precreatedAttributes
    147.   );
    148.  
    149.   // 创建着色程序
    150.   model._rendererResources.programs[programId] = ShaderProgram.fromCache({
    151.     context: context,               // 上下文（包含gl上下文）
    152.     vertexShaderSource: drawVS,     // 创建顶点着色器
    153.     fragmentShaderSource: drawFS,   // 创建像素着色器
    154.     attributeLocations: attributeLocations,   // 属性和位置
    155.   });
    156. }

    4.2.3、createSamplers(model, context);

    主要是创建采样器，结果存在了 var rendererSamplers = model._rendererResources.samplers;中

    1. // 创建采样器
    2. function createSamplers(model) {
    3.   var loadResources = model._loadResources;
    4.   if (loadResources.createSamplers) {
    5.     loadResources.createSamplers = false;
    6.  
    7.     var rendererSamplers = model._rendererResources.samplers;
    8.     ForEach.sampler(model.gltf, function (sampler, samplerId) {
    9.       // 创建采样器
    10.       rendererSamplers[samplerId] = new Sampler({
    11.         wrapS: sampler.wrapS,
    12.         wrapT: sampler.wrapT,
    13.         minificationFilter: sampler.minFilter,
    14.         magnificationFilter: sampler.magFilter,
    15.       });
    16.     });
    17.   }
    18. }

    4.2.4、loadTexturesFromBufferViews(model);

    基于bufferView创建图像，（创建图像的方式有3种，bufferView、uri、base64）

    1. // 基于bufferView创建图像
    2. function loadTexturesFromBufferViews(model) {
    3.   var loadResources = model._loadResources;
    4.  
    5.   if (loadResources.pendingBufferLoads !== 0) {
    6.     return;
    7.   }
    8.  
    9.   // gltf中的纹理索引
    10.   while (loadResources.texturesToCreateFromBufferView.length > 0) {
    11.     // 获取图像索引
    12.     var gltfTexture = loadResources.texturesToCreateFromBufferView.dequeue();
    13.  
    14.     var gltf = model.gltf;
    15.     var bufferView = gltf.bufferViews[gltfTexture.bufferView];   // 找到对应的bufferview
    16.     var imageId = gltf.textures[gltfTexture.id].source;          // 图像id
    17.  
    18.     // 错误处理函数
    19.     var onerror = ModelUtility.getFailedLoadFunction(
    20.       model,
    21.       "image",
    22.       "id: " + gltfTexture.id + ", bufferView: " + gltfTexture.bufferView
    23.     );
    24.     
    25.     if (gltfTexture.mimeType === "image/ktx2") {  // ktx2图像
    26.       // Need to make a copy of the embedded KTX2 buffer otherwise the underlying
    27.       // ArrayBuffer may be accessed on both the worker and the main thread and
    28.       // throw an error like "Cannot perform Construct on a detached ArrayBuffer".
    29.       // Look into SharedArrayBuffer at some point to get around this.
    30.       var ktxBuffer = new Uint8Array(loadResources.getBuffer(bufferView));
    31.       loadKTX2(ktxBuffer)
    32.         .then(imageLoad(model, gltfTexture.id, imageId))
    33.         .otherwise(onerror);
    34.       ++model._loadResources.pendingTextureLoads;
    35.     } else {                                       // 常规（png、jpg）纹理
    36.       // 获取缓存位置，处理完成后的图像会被缓存到这里
    37.       var onload = getOnImageCreatedFromTypedArray(loadResources, gltfTexture);
    38.       // 加载图像
    39.       loadImageFromTypedArray({
    40.         uint8Array: loadResources.getBuffer(bufferView),      // 图像二进制数据
    41.         format: gltfTexture.mimeType,                         // 图像格式
    42.         flipY: false,                                         // 图像反转
    43.         skipColorSpaceConversion: true,                       // 色彩空间转换
    44.       })
    45.         .then(onload)
    46.         .otherwise(onerror);
    47.  
    48.       // 正在处理的图像增加
    49.       ++loadResources.pendingBufferViewToImage;
    50.     }
    51.   }
    52. }
    1. function loadImageFromTypedArray(options) {
    2.   var uint8Array = options.uint8Array;
    3.   var format = options.format;
    4.   var request = options.request;
    5.   var flipY = defaultValue(options.flipY, false);
    6.   var skipColorSpaceConversion = defaultValue(
    7.     options.skipColorSpaceConversion,
    8.     false
    9.   );
    10.   //>>includeStart('debug', pragmas.debug);
    11.   Check.typeOf.object("uint8Array", uint8Array);
    12.   Check.typeOf.string("format", format);
    13.   //>>includeEnd('debug');
    15.   // 封装blob
    16.   var blob = new Blob([uint8Array], {
    17.     type: format,
    18.   });
    19.  
    20.   // blob转base64
    21.   function blobToBase64(blob, callback) { //blob转base64
    22.       let reader = new FileReader();
    23.       reader.onload = function (e) { callback(e.target.result); }
    24.       reader.readAsDataURL(blob);
    25.   }
    26.  
    27.   // blobToBase64(blob, function(base64data){
    28.   //   console.log(base64data);
    29.   // });
    30.  
    31.   var blobUrl;
    32.   // 支持bitmap创建image
    33.   return Resource.supportsImageBitmapOptions()
    34.     .then(function (result) {
    35.       if (result) {
    36.         return when(
    37.           // 依据blob内存块创建bitmap图像
    38.           Resource.createImageBitmapFromBlob(blob, {
    39.             flipY: flipY,             // 反转
    40.             premultiplyAlpha: false,  // 预处理透明度
    41.             skipColorSpaceConversion: skipColorSpaceConversion,   // 跳过颜色空间转换
    42.           })
    43.         );
    44.       }
    45.  
    46.       // 通过url创建
    47.       blobUrl = window.URL.createObjectURL(blob);
    48.       var resource = new Resource({
    49.         url: blobUrl,
    50.         request: request,
    51.       });
    52.  
    53.       return resource.fetchImage({
    54.         flipY: flipY,
    55.         skipColorSpaceConversion: skipColorSpaceConversion,
    56.       });
    57.     })
    58.     .then(function (result) {
    59.       if (defined(blobUrl)) {
    60.         window.URL.revokeObjectURL(blobUrl);
    61.       }
    62.       return result;
    63.     })
    64.     .otherwise(function (error) {
    65.       if (defined(blobUrl)) {
    66.         window.URL.revokeObjectURL(blobUrl);
    67.       }
    68.       return when.reject(error);
    69.     });
    70. }

    4.2.5、createTextures(model, frameState);

    上面一步将获取的是图像，这一步就是根据图像创建gpu纹理资源。

    1. // 创建纹理
    2. function createTextures(model, frameState) {
    3.   var context = frameState.context;
    4.   var texturesToCreate = model._loadResources.texturesToCreate;
    5.  
    6.   // 纹理延迟加载
    7.   // return;
    8.  
    9.   // 如果是异步
    10.   if (model.asynchronous) {
    11.     // 资源长度大于0，存在纹理
    12.     while (texturesToCreate.length > 0) {
    13.       // 调度创建纹理
    14.       scratchCreateTextureJob.set(texturesToCreate.peek(), model, context);
    15.       if (
    16.         !frameState.jobScheduler.execute(
    17.           scratchCreateTextureJob,
    18.           JobType.TEXTURE
    19.         )
    20.       ) {
    21.         break;
    22.       }
    23.       // 删除一个元素
    24.       texturesToCreate.dequeue();
    25.     }
    26.   } else {
    27.     // Create all loaded textures this frame
    28.     // 这一帧创建所有的已经加载的纹理（同步方式）
    29.     while (texturesToCreate.length > 0) {
    30.       // 创建gpu中的纹理显存
    31.       createTexture(texturesToCreate.dequeue(), model, context);
    32.     }
    33.   }
    34. }

    从中可以看出，有同步、异步的方式创建资源，单说异步方式，最终创建的gpu的Texture存储在了model._rendererResources.textures;中，创建纹理时会分别判断图像的长和宽是否为2^n如果不是就会通过canvas的方式重新绘制一遍图像在创建纹理，后续还会创建纹理的mipmap，这个过程可以单独封装成一个类，在这里显得臃肿。

    1. CreateTextureJob.prototype.execute = function () {
    2.   // 创建纹理
    3.   createTexture(this.gltfTexture, this.model, this.context);
    4. };
    5.  
    6. var canvas = document.createElement("canvas");
    7. function createTexture(gltfTexture, model, context) {
    8.   // 纹理
    9.   var textures = model.gltf.textures;
    10.   var texture = textures[gltfTexture.id];
    11.  
    12.   // 采样器
    13.   var rendererSamplers = model._rendererResources.samplers;
    14.   var sampler = rendererSamplers[texture.sampler];
    15.   if (!defined(sampler)) {
    16.     // 创建采样器
    17.     sampler = new Sampler({
    18.       wrapS: TextureWrap.REPEAT,
    19.       wrapT: TextureWrap.REPEAT,
    20.     });
    21.   }
    22.  
    23.   // 使用纹理转换
    24.   var usesTextureTransform = false;
    25.   var materials = model.gltf.materials;
    26.   var materialsLength = materials.length;
    27.   // 遍历材质
    28.   for (var i = 0; i < materialsLength; ++i) {
    29.     var material = materials[i];
    30.     // 材质扩展
    31.     if (
    32.       defined(material.extensions) &&
    33.       defined(material.extensions.KHR_techniques_webgl)
    34.     ) {
    35.  
    36.       // 
    37.       var values = material.extensions.KHR_techniques_webgl.values;
    38.       for (var valueName in values) {
    39.         if (
    40.           values.hasOwnProperty(valueName) &&
    41.           valueName.indexOf("Texture") !== -1     // 不是纹理
    42.         ) {
    43.           // 数据
    44.           var value = values[valueName];
    45.           if (
    46.             value.index === gltfTexture.id &&
    47.             defined(value.extensions) &&
    48.             defined(value.extensions.KHR_texture_transform)   // 纹理转换
    49.           ) {
    50.             //纹理坐标转换
    51.             usesTextureTransform = true;
    52.             break;
    53.           }
    54.         }
    55.       }
    56.     }
    57.     if (usesTextureTransform) {
    58.       break;
    59.     }
    60.   }
    61.  
    62.   // 过滤方式
    63.   var wrapS = sampler.wrapS;
    64.   var wrapT = sampler.wrapT;
    65.   var minFilter = sampler.minificationFilter;
    66.  
    67.   if (
    68.     usesTextureTransform &&
    69.     minFilter !== TextureMinificationFilter.LINEAR &&
    70.     minFilter !== TextureMinificationFilter.NEAREST
    71.   ) {
    72.     if (
    73.       minFilter === TextureMinificationFilter.NEAREST_MIPMAP_NEAREST ||
    74.       minFilter === TextureMinificationFilter.NEAREST_MIPMAP_LINEAR
    75.     ) {
    76.       minFilter = TextureMinificationFilter.NEAREST;
    77.     } else {
    78.       minFilter = TextureMinificationFilter.LINEAR;
    79.     }
    80.  
    81.     // 创建采样器
    82.     sampler = new Sampler({
    83.       wrapS: sampler.wrapS,
    84.       wrapT: sampler.wrapT,
    85.       minificationFilter: minFilter,
    86.       magnificationFilter: sampler.magnificationFilter,
    87.     });
    88.   }
    89.  
    90.   // 纹理内部格式
    91.   var internalFormat = gltfTexture.internalFormat;
    92.  
    93.   // 是否创建mipmap
    94.   var mipmap =
    95.     !(defined(internalFormat) && PixelFormat.isCompressedFormat(internalFormat)) &&
    96.     (minFilter === TextureMinificationFilter.NEAREST_MIPMAP_NEAREST ||
    97.       minFilter === TextureMinificationFilter.NEAREST_MIPMAP_LINEAR ||
    98.       minFilter === TextureMinificationFilter.LINEAR_MIPMAP_NEAREST ||
    99.       minFilter === TextureMinificationFilter.LINEAR_MIPMAP_LINEAR);
    100.  
    101.   var requiresNpot =
    102.     mipmap ||
    103.     wrapS === TextureWrap.REPEAT ||
    104.     wrapS === TextureWrap.MIRRORED_REPEAT ||
    105.     wrapT === TextureWrap.REPEAT ||
    106.     wrapT === TextureWrap.MIRRORED_REPEAT;
    107.   var npot;
    108.   var tx;
    109.   // 图像索引
    110.   var source = gltfTexture.image;
    111.  
    112.   // 如果定义了内部格式
    113.   if (defined(internalFormat)) {
    114.     npot =
    115.       !CesiumMath.isPowerOfTwo(gltfTexture.width) ||
    116.       !CesiumMath.isPowerOfTwo(gltfTexture.height);
    117.  
    118.     // Warning to encourage power of 2 texture dimensions with KHR_texture_basisu
    119.     if (
    120.       !context.webgl2 &&
    121.       PixelFormat.isCompressedFormat(internalFormat) &&
    122.       npot &&
    123.       requiresNpot
    124.     ) {
    125.       console.warn(
    126.         "Compressed texture uses REPEAT or MIRRORED_REPEAT texture wrap mode and dimensions are not powers of two. The texture may be rendered incorrectly. See the Model.js constructor documentation for more information."
    127.       );
    128.     }
    129.  
    130.     var minificationFilter;
    131.     if (
    132.       !defined(gltfTexture.mipLevels) &&
    133.       (minFilter === TextureMinificationFilter.NEAREST_MIPMAP_NEAREST ||
    134.         minFilter === TextureMinificationFilter.NEAREST_MIPMAP_LINEAR)
    135.     ) {
    136.       minificationFilter = TextureMinificationFilter.NEAREST;
    137.     } else if (
    138.       !defined(gltfTexture.mipLevels) &&
    139.       (minFilter === TextureMinificationFilter.LINEAR_MIPMAP_NEAREST ||
    140.         minFilter === TextureMinificationFilter.LINEAR_MIPMAP_LINEAR)
    141.     ) {
    142.       minificationFilter = TextureMinificationFilter.LINEAR;
    143.     }
    144.     // 创建采样器
    145.     sampler = new Sampler({
    146.       wrapS: sampler.wrapS,
    147.       wrapT: sampler.wrapT,
    148.       minificationFilter: minificationFilter,
    149.       magnificationFilter: sampler.magnificationFilter,
    150.     });
    151.  
    152.     // 创建纹理（直接创建gpu纹理缓存）
    153.     tx = new Texture({
    154.       context: context,
    155.       source: {
    156.         arrayBufferView: gltfTexture.bufferView,
    157.         mipLevels: gltfTexture.mipLevels,
    158.       },
    159.       width: gltfTexture.width,   // 纹理宽度
    160.       height: gltfTexture.height, // 纹理高度
    161.       pixelFormat: internalFormat,  // 内部格式
    162.       sampler: sampler,             // 采样器
    163.     });
    164.   } else if (defined(source)) {
    165.     // 查看纹理是否2^n
    166.     npot =
    167.       !CesiumMath.isPowerOfTwo(source.width) ||
    168.       !CesiumMath.isPowerOfTwo(source.height);
    169.     if (requiresNpot && npot) {
    170.       // 要求2^n，需要绘制，需要创建canvas
    171.       // WebGL requires power-of-two texture dimensions for mipmapping and REPEAT/MIRRORED_REPEAT wrap modes.
    172.       //var canvas = document.createElement("canvas");
    173.       // 设置canvas大小
    174.       canvas.width = CesiumMath.nextPowerOfTwo(source.width);
    175.       canvas.height = CesiumMath.nextPowerOfTwo(source.height);
    176.       // 得到上下文
    177.       var canvasContext = canvas.getContext("2d");
    178.       // 绘制
    179.       canvasContext.drawImage(
    180.         source,
    181.         0,
    182.         0,
    183.         source.width,
    184.         source.height,
    185.         0,
    186.         0,
    187.         canvas.width,
    188.         canvas.height
    189.       );
    190.       source = canvas;
    191.     }
    192.  
    193.     // 创建纹理
    194.     tx = new Texture({
    195.       context: context,
    196.       source: source,
    197.       pixelFormat: texture.internalFormat,
    198.       pixelDatatype: texture.type,
    199.       sampler: sampler,
    200.       flipY: false,
    201.       skipColorSpaceConversion: true,
    202.     });
    203.     // GLTF_SPEC: Support TEXTURE_CUBE_MAP.  https://github.com/KhronosGroup/glTF/issues/40
    204.     if (mipmap) {
    205.       // 生成mipmap
    206.       tx.generateMipmap();
    207.     }
    208.   }
    209.   // 将纹理存入到资源中
    210.   if (defined(tx)) {
    211.     // 渲染资源放
    212.     model._rendererResources.textures[gltfTexture.id] = tx;
    213.     // 纹理大小统计
    214.     model._texturesByteLength += tx.sizeInBytes;
    215.   }
    216. }

    4.3、创建骨骼动画

      createSkins(model);

      createRuntimeAnimations(model);

    4.4、createVertexArrays(model, context); // using glTF meshes

    这个函数对应的是webgl的createVertexArray()、vertexAttribPointer()、enableVertexAttribArray函数，用来创建vao的，绑定buffer、设置顶点属性指针、启用顶点数组属性。

    其中“vertexAttribPointer设置顶点属性指针”需要用下面的数据，

    {
                index: attributeLocation,                                        // glsl种的layout
                vertexBuffer: rendererBuffers[a.bufferView],         // vao绑定的buffer
                componentsPerAttribute: numberOfComponentsForType(a.type),  // 顶点属性分量数量
                componentDatatype: a.componentType,               // 顶点属性分量类型
                normalize: normalize,                                             // 是否归一化
                offsetInBytes: a.byteOffset,                                    // 各个属性偏移
                strideInBytes: getAccessorByteStride(gltf, a),        // 步长

    }

    1. // 创建顶点数组
    2. function createVertexArrays(model, context) {
    3.   var loadResources = model._loadResources;
    4.  
    5.   if (
    6.     !loadResources.finishedBuffersCreation() ||
    7.     !loadResources.finishedProgramCreation() ||
    8.     !loadResources.createVertexArrays
    9.   ) {
    10.     // buffer和program没有创建完成,或者VertexArrays已经处理完成
    11.     return;
    12.   }
    13.  
    14.   loadResources.createVertexArrays = false;
    15.  
    16.   // 缓存
    17.   var rendererBuffers = model._rendererResources.buffers;
    18.   // 顶点数组
    19.   var rendererVertexArrays = model._rendererResources.vertexArrays;
    20.   var gltf = model.gltf;
    21.   var accessors = gltf.accessors;
    22.   // 遍历mesh
    23.   ForEach.mesh(gltf, function (mesh, meshId) {
    24.     ForEach.meshPrimitive(mesh, function (primitive, primitiveId) {
    25.       var attributes = [];
    26.       var attributeLocation;
    27.       // 获取属性和位置
    28.       var attributeLocations = getAttributeLocations(model, primitive);
    29.       // 解码的数据
    30.       var decodedData =
    31.         model._decodedData[meshId + ".primitive." + primitiveId];
    32.  
    33.       // 遍历primitive
    34.       ForEach.meshPrimitiveAttribute(primitive, function (
    35.         accessorId,
    36.         attributeName
    37.       ) {
    38.         // Skip if the attribute is not used by the material, e.g., because the asset
    39.         // was exported with an attribute that wasn't used and the asset wasn't optimized.
    40.         // 获取属性的位置
    41.         attributeLocation = attributeLocations[attributeName];
    42.         if (defined(attributeLocation)) {
    43.           // Use attributes of previously decoded draco geometry
    44.           // 解码数据
    45.           if (defined(decodedData)) {
    46.             // 获取属性
    47.             var decodedAttributes = decodedData.attributes;
    48.             if (decodedAttributes.hasOwnProperty(attributeName)) {
    49.               var decodedAttribute = decodedAttributes[attributeName];
    50.               // 添加属性
    51.               attributes.push({
    52.                 index: attributeLocation,
    53.                 vertexBuffer: rendererBuffers[decodedAttribute.bufferView],
    54.                 componentsPerAttribute: decodedAttribute.componentsPerAttribute,
    55.                 componentDatatype: decodedAttribute.componentDatatype,
    56.                 normalize: decodedAttribute.normalized,
    57.                 offsetInBytes: decodedAttribute.byteOffset,
    58.                 strideInBytes: decodedAttribute.byteStride,
    59.               });
    60.  
    61.               return;
    62.             }
    63.           }
    64.  
    65.           // 不是解码的数据，直接是原始数据
    66.           var a = accessors[accessorId];
    67.           var normalize = defined(a.normalized) && a.normalized;
    68.           attributes.push({
    69.             index: attributeLocation,
    70.             vertexBuffer: rendererBuffers[a.bufferView],
    71.             componentsPerAttribute: numberOfComponentsForType(a.type),
    72.             componentDatatype: a.componentType,
    73.             normalize: normalize,
    74.             offsetInBytes: a.byteOffset,
    75.             strideInBytes: getAccessorByteStride(gltf, a),
    76.           });
    77.         }
    78.       });
    79.  
    80.       // Add pre-created attributes
    81.       // 预创建的属性
    82.       var attribute;
    83.       var attributeName;
    84.       var precreatedAttributes = model._precreatedAttributes;
    85.       if (defined(precreatedAttributes)) {
    86.         for (attributeName in precreatedAttributes) {
    87.           if (precreatedAttributes.hasOwnProperty(attributeName)) {
    88.             attributeLocation = attributeLocations[attributeName];
    89.             if (defined(attributeLocation)) {
    90.               attribute = precreatedAttributes[attributeName];
    91.               attribute.index = attributeLocation;
    92.               attributes.push(attribute);
    93.             }
    94.           }
    95.         }
    96.       }
    97.  
    98.       var indexBuffer;
    99.       if (defined(primitive.indices)) {
    100.         var accessor = accessors[primitive.indices];
    101.         var bufferView = accessor.bufferView;
    102.  
    103.         // Use buffer of previously decoded draco geometry
    104.         if (defined(decodedData)) {
    105.           bufferView = decodedData.bufferView;
    106.         }
    107.  
    108.         // 索引数据
    109.         indexBuffer = rendererBuffers[bufferView];
    110.       }
    111.       // 创建顶点数组指针
    112.       rendererVertexArrays[
    113.         meshId + ".primitive." + primitiveId
    114.       ] = new VertexArray({
    115.         context: context,
    116.         attributes: attributes,
    117.         indexBuffer: indexBuffer,
    118.       });
    119.     });
    120.   });
    121. }

    4.5、createRenderStates(model); // using glTF materials/techniques/states

    用来创建渲染状态，存储在model._rendererResources.renderStates中。

    1. // 创建渲染状态
    2. function createRenderStates(model) {
    3.   var loadResources = model._loadResources;
    4.  
    5.   // 创建渲染状态
    6.   if (loadResources.createRenderStates) {
    7.     loadResources.createRenderStates = false;
    8.  
    9.     // 遍历材质
    10.     ForEach.material(model.gltf, function (material, materialId) {
    11.       createRenderStateForMaterial(model, material, materialId);
    12.     });
    13.   }
    14. }
    15.  
    16. // 创建渲染状态
    17. function createRenderStateForMaterial(model, material, materialId) {
    18.   var rendererRenderStates = model._rendererResources.renderStates;
    19.  
    20.   // 混合计算
    21.   var blendEquationSeparate = [
    22.     WebGLConstants.FUNC_ADD,
    23.     WebGLConstants.FUNC_ADD,
    24.   ];
    25.  
    26.   // 混合比例
    27.   var blendFuncSeparate = [
    28.     WebGLConstants.ONE,
    29.     WebGLConstants.ONE_MINUS_SRC_ALPHA,
    30.     WebGLConstants.ONE,
    31.     WebGLConstants.ONE_MINUS_SRC_ALPHA,
    32.   ];
    33.  
    34.   if (defined(material.extensions) && defined(material.extensions.KHR_blend)) {
    35.     blendEquationSeparate = material.extensions.KHR_blend.blendEquation;
    36.     blendFuncSeparate = material.extensions.KHR_blend.blendFactors;
    37.   }
    38.  
    39.   var enableCulling = !material.doubleSided;
    40.   var blendingEnabled = material.alphaMode === "BLEND";
    41.   // 创建渲染状态
    42.   rendererRenderStates[materialId] = RenderState.fromCache({
    43.     cull: {
    44.       enabled: enableCulling,     // 背面剔除
    45.     },
    46.     depthTest: {                  // 深度测试
    47.       enabled: true,              // 启用深度测试
    48.       func: DepthFunction.LESS_OR_EQUAL,  // 深度测试方法
    49.     },
    50.     depthMask: !blendingEnabled,  // 启用混合
    51.     blending: {                   // 混合方法
    52.       enabled: blendingEnabled,
    53.       equationRgb: blendEquationSeparate[0],
    54.       equationAlpha: blendEquationSeparate[1],
    55.       functionSourceRgb: blendFuncSeparate[0],
    56.       functionDestinationRgb: blendFuncSeparate[1],
    57.       functionSourceAlpha: blendFuncSeparate[2],
    58.       functionDestinationAlpha: blendFuncSeparate[3],
    59.     },
    60.   });
    61. }

    4.5、createUniformMaps(model, context); // using glTF materials/techniques

    用来收集所有渲染时用到的uniform数据

    1. // 创建uniform映射
    2. function createUniformMaps(model, context) {
    3.   var loadResources = model._loadResources;
    4.  
    5.   // 资源处理完成之后才能创建uniform等
    6.   if (!loadResources.finishedProgramCreation()) {
    7.     return;
    8.   }
    9.  
    10.   if (!loadResources.createUniformMaps) {
    11.     // uniforms已经创建完成了
    12.     return;
    13.   }
    14.   // 下次就不在创建了
    15.   loadResources.createUniformMaps = false;
    16.  
    17.   var gltf = model.gltf;
    18.   var techniques = model._sourceTechniques;
    19.   var uniformMaps = model._uniformMaps;
    20.  
    21.   // 渲染过程中使用的纹理
    22.   var textures = model._rendererResources.textures;
    23.   // 纹理还没有解析完成之前使用默认纹理（很小）
    24.   var defaultTexture = model._defaultTexture;
    25.  
    26.   // 遍历材质
    27.   ForEach.material(gltf, function (material, materialId) {
    28.     // 找到材质ModelMaterial封装类
    29.     var modelMaterial = model._runtime.materialsById[materialId];
    30.     // 找到材质对应的technique
    31.     var technique = techniques[modelMaterial._technique];
    32.     // 找到uniform具体的数据，例如漫反射率、环境光反射率、自发光等
    33.     var instanceValues = modelMaterial._values;
    34.  
    35.     // 创建uniform数据
    36.     var uniforms = createUniformsForMaterial(
    37.       model,
    38.       material,
    39.       technique,
    40.       instanceValues,
    41.       context,
    42.       textures,
    43.       defaultTexture
    44.     );
    45.  
    46.     // 修改 压平功能 start
    47.     uniforms.map['u_model'] = ModelUtility.getGltfSemanticUniforms()["MODEL"](context.uniformState, model);
    48.     uniforms.map['u_r_model'] = ModelUtility.getGltfSemanticUniforms()["MODELINVERSE"](context.uniformState, model);
    49.     // 修改 压平功能 end
    50.  
    51.     // 将材质中的uniform数据存储到model._uniformMaps中
    52.     var u = uniformMaps[materialId];
    53.     u.uniformMap = uniforms.map; // uniform name -> function for the renderer    uniform名称
    54.     u.values = uniforms.values; // material parameter name -> ModelMaterial for modifying the parameter at runtime  uniform值
    55.     u.jointMatrixUniformName = uniforms.jointMatrixUniformName;
    56.     u.morphWeightsUniformName = uniforms.morphWeightsUniformName;
    57.  
    58.     // 轮廓线纹理
    59.     if (defined(technique.attributes.a_outlineCoordinates)) {
    60.       var outlineTexture = ModelOutlineLoader.createTexture(model, context);
    61.       u.uniformMap.u_outlineTexture = function () {
    62.         return outlineTexture;
    63.       };
    64.     }
    65.   });
    66. }
    1. // 基于材质创建uniform数据
    2. function createUniformsForMaterial(
    3.   model,
    4.   material,
    5.   technique,
    6.   instanceValues,
    7.   context,
    8.   textures,
    9.   defaultTexture
    10. ) {
    11.   var uniformMap = {};
    12.   var uniformValues = {};
    13.   var jointMatrixUniformName;
    14.   var morphWeightsUniformName;
    15.  
    16.   // 遍历其中所有的uniform值
    17.   ForEach.techniqueUniform(technique, function (uniform, uniformName) {
    18.     // GLTF_SPEC: This does not take into account uniform arrays,
    19.     // indicated by uniforms with a count property.
    20.     //
    21.     // https://github.com/KhronosGroup/glTF/issues/258
    22.  
    23.     // GLTF_SPEC: In this implementation, material parameters with a
    24.     // semantic or targeted via a source (for animation) are not
    25.     // targetable for material animations.  Is this too strict?
    26.     //
    27.     // https://github.com/KhronosGroup/glTF/issues/142
    28.  
    29.     var uv;
    30.     if (defined(instanceValues) && defined(instanceValues[uniformName])) {
    31.       // Parameter overrides by the instance technique
    32.       // 创建数据
    33.       uv = ModelUtility.createUniformFunction(
    34.         uniform.type,
    35.         instanceValues[uniformName],  // 值
    36.         textures,                     // 所有的纹理，绑定对应的uniform数据
    37.         defaultTexture
    38.       );
    39.       // 设置数据
    40.       uniformMap[uniformName] = uv.func;
    41.       uniformValues[uniformName] = uv;
    42.     } else if (defined(uniform.node)) {
    43.       // 从源码得到uniform函数
    44.       uniformMap[uniformName] = getUniformFunctionFromSource(
    45.         uniform.node,
    46.         model,
    47.         uniform.semantic,
    48.         context.uniformState
    49.       );
    50.     } else if (defined(uniform.semantic)) {
    51.       if (uniform.semantic === "JOINTMATRIX") {
    52.         jointMatrixUniformName = uniformName;
    53.       } else if (uniform.semantic === "MORPHWEIGHTS") {
    54.         morphWeightsUniformName = uniformName;
    55.       } else if (uniform.semantic === "ALPHACUTOFF") {
    56.         // The material's alphaCutoff value uses a uniform with semantic ALPHACUTOFF.
    57.         // A uniform with this semantic will ignore the instance or default values.
    58.         var alphaMode = material.alphaMode;
    59.         if (defined(alphaMode) && alphaMode === "MASK") {
    60.           var alphaCutoffValue = defaultValue(material.alphaCutoff, 0.5);
    61.           uv = ModelUtility.createUniformFunction(
    62.             uniform.type,
    63.             alphaCutoffValue,
    64.             textures,
    65.             defaultTexture
    66.           );
    67.           uniformMap[uniformName] = uv.func;
    68.           uniformValues[uniformName] = uv;
    69.         }
    70.       } else {
    71.         // Map glTF semantic to Cesium automatic uniform
    72.         // 获取uniform中的自动uniform
    73.         uniformMap[uniformName] = ModelUtility.getGltfSemanticUniforms()[
    74.           uniform.semantic
    75.         ](context.uniformState, model);
    76.       }
    77.     } else if (defined(uniform.value)) {
    78.       // Technique value that isn't overridden by a material
    79.       var uv2 = ModelUtility.createUniformFunction(
    80.         uniform.type,
    81.         uniform.value,
    82.         textures,
    83.         defaultTexture
    84.       );
    85.       uniformMap[uniformName] = uv2.func;
    86.       uniformValues[uniformName] = uv2;
    87.     }
    88.   });
    89.  
    90.   //dealFlattenTexture(model, null, uniformMap, uniformValues, context);
    91.  
    92.   // 返回数据
    93.   return {
    94.     map: uniformMap,
    95.     values: uniformValues,
    96.     jointMatrixUniformName: jointMatrixUniformName,
    97.     morphWeightsUniformName: morphWeightsUniformName,
    98.   };
    99. }

    4.5、 createRuntimeNodes(model, context, scene3DOnly); // using glTF scene

    最后这个函数是用来组织场景结构，并创建绘制命令的

    1. // 组织场景树，挂在子节点
    2. function createRuntimeNodes(model, context, scene3DOnly) {
    3.   var loadResources = model._loadResources;
    4.  
    5.   // 数据还没有准备好
    6.   if (!loadResources.finishedEverythingButTextureCreation()) {
    7.     return;
    8.   }
    9.  
    10.   if (!loadResources.createRuntimeNodes) {
    11.     // 节点已经创建完成
    12.     return;
    13.   }
    14.  
    15.   loadResources.createRuntimeNodes = false;
    16.  
    17.   // 深度遍历，循环队列
    18.   var rootNodes = [];
    19.   // 节点
    20.   var runtimeNodes = model._runtime.nodes;
    21.   // gltf
    22.   var gltf = model.gltf;
    23.   // 节点数据
    24.   var nodes = gltf.nodes;
    25.   // 使用哪一个场景
    26.   var scene = gltf.scenes[gltf.scene];
    27.   // 场景下的根节点（可能有很多根节点）
    28.   var sceneNodes = scene.nodes;
    29.   // 节点数量
    30.   var length = sceneNodes.length;
    31.   // 栈
    32.   var stack = [];
    33.   var seen = {};
    34.   // 遍历场景节点
    35.   for (var i = 0; i < length; ++i) {
    36.     // 根节点入栈
    37.     stack.push({
    38.       parentRuntimeNode: undefined,    // 没有父节点
    39.       gltfNode: nodes[sceneNodes[i]],  // 当前处理的节点
    40.       id: sceneNodes[i],               // 节点的id
    41.     });
    42.  
    43.     while (stack.length > 0) {
    44.       // 出栈
    45.       var n = stack.pop();
    46.       // 已经解析过了
    47.       seen[n.id] = true;
    48.       // 父节点
    49.       var parentRuntimeNode = n.parentRuntimeNode;
    50.  
    51.       // 当前处理的节点
    52.       var gltfNode = n.gltfNode;
    53.  
    54.       // Node hierarchy is a DAG so a node can have more than one parent so it may already exist
    55.       var runtimeNode = runtimeNodes[n.id];
    56.       if (runtimeNode.parents.length === 0) {
    57.         // 节点的模型矩阵
    58.         if (defined(gltfNode.matrix)) {
    59.           runtimeNode.matrix = Matrix4.fromColumnMajorArray(gltfNode.matrix);
    60.         } else {
    61.           // TRS converted to Cesium types
    62.           // 旋转、平移、缩放
    63.           var rotation = gltfNode.rotation;
    64.           runtimeNode.translation = Cartesian3.fromArray(gltfNode.translation);
    65.           runtimeNode.rotation = Quaternion.unpack(rotation);
    66.           runtimeNode.scale = Cartesian3.fromArray(gltfNode.scale);
    67.         }
    68.       }
    69.  
    70.       // 存在父节点
    71.       if (defined(parentRuntimeNode)) {
    72.         // 挂接到父节点
    73.         parentRuntimeNode.children.push(runtimeNode);
    74.         // 父子节点双向绑定
    75.         runtimeNode.parents.push(parentRuntimeNode);
    76.       } else {
    77.         // 添加节点
    78.         rootNodes.push(runtimeNode);
    79.       }
    80.  
    81.       // 如果节点中存在网格，创建渲染命令
    82.       if (defined(gltfNode.mesh)) {
    83.         createCommand(model, gltfNode, runtimeNode, context, scene3DOnly);
    84.       }
    85.  
    86.       // 遍历子节点
    87.       var children = gltfNode.children;
    88.       if (defined(children)) {
    89.         var childrenLength = children.length;
    90.         for (var j = 0; j < childrenLength; j++) {
    91.           var childId = children[j];
    92.           if (!seen[childId]) {
    93.             stack.push({
    94.               parentRuntimeNode: runtimeNode,
    95.               gltfNode: nodes[childId],
    96.               id: children[j],
    97.             });
    98.           }
    99.         }
    100.       }
    101.     }
    102.   }
    103.  
    104.   // 根节点
    105.   model._runtime.rootNodes = rootNodes;
    106.   // 运行时节点（所有节点）
    107.   model._runtime.nodes = runtimeNodes;
    108. }
    1. // 创建渲染命令
    2. function createCommand(model, gltfNode, runtimeNode, context, scene3DOnly) {
    3.  
    4.   // 节点命令
    5.   var nodeCommands = model._nodeCommands;
    6.   // 拾取的id
    7.   var pickIds = model._pickIds;
    8.   // 允许拾取
    9.   var allowPicking = model.allowPicking;
    10.   // ModelMesh索引
    11.   var runtimeMeshesByName = model._runtime.meshesByName;
    12.  
    13.   // 所有的gpu渲染资源
    14.   var resources = model._rendererResources;
    15.   // gpu顶点数组对象
    16.   var rendererVertexArrays = resources.vertexArrays;
    17.   // gpu着色程序
    18.   var rendererPrograms = resources.programs;
    19.   // 渲染状态
    20.   var rendererRenderStates = resources.renderStates;
    21.   // uniform
    22.   var uniformMaps = model._uniformMaps;
    23.  
    24.   var gltf = model.gltf;
    25.   var accessors = gltf.accessors;
    26.   var gltfMeshes = gltf.meshes;
    27.  
    28.   // 网格数据
    29.   var id = gltfNode.mesh;
    30.   // mesh信息
    31.   var mesh = gltfMeshes[id];
    32.  
    33.   // 所有的mesh图元
    34.   var primitives = mesh.primitives;
    35.   // 这个mesh可以有多种渲染方式，同时显示模型triangle、网格wireframe
    36.   var length = primitives.length;
    37.  
    38.   // The glTF node hierarchy is a DAG so a node can have more than one
    39.   // parent, so a node may already have commands.  If so, append more
    40.   // since they will have a different model matrix.
    41.  
    42.   // 遍历网格
    43.   for (var i = 0; i < length; ++i) {
    44.     // 网格下的数据看gltf规范
    45.     var primitive = primitives[i];
    46.     // element_array_buffer索引
    47.     var ix = accessors[primitive.indices];
    48.     // 找到材质ModelMaterial封装类
    49.     var material = model._runtime.materialsById[primitive.material];
    50.     // 着色程序
    51.     var programId = material._program;
    52.     // 解码数据
    53.     var decodedData = model._decodedData[id + ".primitive." + i];
    54.  
    55.     var boundingSphere;
    56.     // 顶点数据所在的位置
    57.     var positionAccessor = primitive.attributes.POSITION;
    58.     if (defined(positionAccessor)) {
    59.       // mesh的包围盒
    60.       var minMax = ModelUtility.getAccessorMinMax(gltf, positionAccessor);
    61.       // 找到最大的包围球
    62.       boundingSphere = BoundingSphere.fromCornerPoints(
    63.         Cartesian3.fromArray(minMax.min),
    64.         Cartesian3.fromArray(minMax.max)
    65.       );
    66.     }
    67.  
    68.     // 获取顶点数组
    69.     var vertexArray = rendererVertexArrays[id + ".primitive." + i];
    70.     var offset;
    71.     var count;
    72.  
    73.     // Use indices of the previously decoded Draco geometry.
    74.     // 顶点数量、偏移位置在drawarray中使用
    75.     if (defined(decodedData)) {
    76.       count = decodedData.numberOfIndices;
    77.       offset = 0;
    78.     } else if (defined(ix)) {
    79.       count = ix.count;
    80.       offset = ix.byteOffset / IndexDatatype.getSizeInBytes(ix.componentType); // glTF has offset in bytes.  Cesium has offsets in indices
    81.     } else {
    82.       var positions = accessors[primitive.attributes.POSITION];
    83.       count = positions.count;
    84.       offset = 0;
    85.     }
    86.  
    87.     // Update model triangle count using number of indices
    88.     // 基于索引计算模型三角数量
    89.     model._trianglesLength += triangleCountFromPrimitiveIndices(
    90.       primitive,
    91.       count
    92.     );
    93.  
    94.     // 模型类型（点、线、面）
    95.     if (primitive.mode === PrimitiveType.POINTS) {
    96.       // 模型的总点数
    97.       model._pointsLength += count;
    98.     }
    99.  
    100.     // 获取这个材质对应的uniform
    101.     var um = uniformMaps[primitive.material];
    102.     var uniformMap = um.uniformMap;
    103.     // 定义了关节矩阵（骨骼动画）
    104.     if (defined(um.jointMatrixUniformName)) {
    105.       var jointUniformMap = {};
    106.       // 创建关节矩阵（骨骼动画）
    107.       jointUniformMap[um.jointMatrixUniformName] = createJointMatricesFunction(
    108.         runtimeNode
    109.       );
    110.  
    111.       // 合并uniform
    112.       uniformMap = combine(uniformMap, jointUniformMap);
    113.     }
    114.     // 变形动画
    115.     if (defined(um.morphWeightsUniformName)) {
    116.       var morphWeightsUniformMap = {};
    117.       morphWeightsUniformMap[
    118.         um.morphWeightsUniformName
    119.       ] = createMorphWeightsFunction(runtimeNode);
    120.  
    121.       uniformMap = combine(uniformMap, morphWeightsUniformMap);
    122.     }
    123.  
    124.     // 合并属性
    125.     uniformMap = combine(uniformMap, {
    126.       // 颜色
    127.       gltf_color: createColorFunction(model),
    128.       // 混合
    129.       gltf_colorBlend: createColorBlendFunction(model),
    130.       // 裁切平面
    131.       gltf_clippingPlanes: createClippingPlanesFunction(model),
    132.       // 裁切边缘样式
    133.       gltf_clippingPlanesEdgeStyle: createClippingPlanesEdgeStyleFunction(
    134.         model
    135.       ),
    136.       // 裁切矩阵
    137.       gltf_clippingPlanesMatrix: createClippingPlanesMatrixFunction(model),    
    138.       // ibl矩阵
    139.       gltf_iblReferenceFrameMatrix: createIBLReferenceFrameMatrixFunction(
    140.         model
    141.       ),
    142.       // ibl因子
    143.       gltf_iblFactor: createIBLFactorFunction(model),
    144.       // 灯光
    145.       gltf_lightColor: createLightColorFunction(model),
    146.       // 球系数
    147.       gltf_sphericalHarmonicCoefficients: createSphericalHarmonicCoefficientsFunction(
    148.         model
    149.       ),
    150.       // 高光图
    151.       gltf_specularMap: createSpecularEnvironmentMapFunction(model),
    152.       // 高光图大小
    153.       gltf_specularMapSize: createSpecularEnvironmentMapSizeFunction(model),
    154.       // 
    155.       gltf_maxSpecularLOD: createSpecularEnvironmentMapLOD(model),
    156.       // 亮度
    157.       gltf_luminanceAtZenith: createLuminanceAtZenithFunction(model),
    158.     });
    159.  
    160.     // Allow callback to modify the uniformMap
    161.     // 允许回调修改uniformmap
    162.     if (defined(model._uniformMapLoaded)) {
    163.       uniformMap = model._uniformMapLoaded(uniformMap, programId, runtimeNode);
    164.     }
    165.  
    166.     // Add uniforms for decoding quantized attributes if used
    167.     // glsl中解码数据使用
    168.     var quantizedUniformMap = {};
    169.     if (model.extensionsUsed.WEB3D_quantized_attributes) {
    170.       quantizedUniformMap = createUniformsForQuantizedAttributes(
    171.         model,
    172.         primitive
    173.       );
    174.     } else if (model._dequantizeInShader && defined(decodedData)) {
    175.       quantizedUniformMap = createUniformsForDracoQuantizedAttributes(
    176.         decodedData
    177.       );
    178.     }
    179.     // 合并uniform
    180.     uniformMap = combine(uniformMap, quantizedUniformMap);
    181.  
    182.     // 渲染状态
    183.     var rs = rendererRenderStates[primitive.material];
    184.     // 启用透明了
    185.     var isTranslucent = rs.blending.enabled;
    186.  
    187.     // mesh所属的宿主？？？
    188.     var owner = model._pickObject;
    189.     if (!defined(owner)) {
    190.       owner = {
    191.         primitive: model,
    192.         id: model.id,
    193.         node: runtimeNode.publicNode,
    194.         mesh: runtimeMeshesByName[mesh.name],
    195.       };
    196.     }
    197.  
    198.     // 阴影
    199.     var castShadows = ShadowMode.castShadows(model._shadows);
    200.     var receiveShadows = ShadowMode.receiveShadows(model._shadows);
    201.  
    202.     // 拾取的uniform
    203.     var pickId;
    204.     if (allowPicking && !defined(model._uniformMapLoaded)) {
    205.       pickId = context.createPickId(owner);
    206.       pickIds.push(pickId);
    207.       var pickUniforms = {
    208.         czm_pickColor: createPickColorFunction(pickId.color),
    209.       };
    210.       uniformMap = combine(uniformMap, pickUniforms);
    211.     }
    212.  
    213.     // 使用拾取功能
    214.     if (allowPicking) {
    215.       if (defined(model._pickIdLoaded) && defined(model._uniformMapLoaded)) {
    216.         pickId = model._pickIdLoaded();
    217.       } else {
    218.         pickId = "czm_pickColor";
    219.       }
    220.     }
    221.  
    222.     // 修改 压平功能 start
    223.     if (defined(model.flatUniformMap)) {
    224.       uniformMap = combine(uniformMap, model.flatUniformMap);
    225.     }
    226.     // 修改 压平功能 end
    227.  
    228.     // 创建绘制命令
    229.     var command = new DrawCommand({
    230.       boundingVolume: new BoundingSphere(), // updated in update()  // 包围球
    231.       cull: model.cull,                                             // 背面剔除
    232.       modelMatrix: new Matrix4(), // computed in update()           // 模型矩阵
    233.       primitiveType: primitive.mode,                                // 点、线、三角形
    234.       vertexArray: vertexArray,                                     // 顶点数组
    235.       count: count,                                                 // 顶点数量
    236.       offset: offset,                                               // 偏移量
    237.       shaderProgram: rendererPrograms[programId],                   // 着色程序
    238.       castShadows: castShadows,                                     // 发射阴影
    239.       receiveShadows: receiveShadows,                               // 接收阴影
    240.       uniformMap: uniformMap,                                       // uniform
    241.       renderState: rs,                                              // 渲染状态
    242.       owner: owner,                                                 // model的主人
    243.       pass: isTranslucent ? Pass.TRANSLUCENT : model.opaquePass,    // 是否透明pass
    244.       pickId: pickId,                                               // 拾取模型的id
    245.     });
    246.  
    247.     // 创建2D模式的绘制命令
    248.     var command2D;
    249.     if (!scene3DOnly) {
    250.       command2D = DrawCommand.shallowClone(command);
    251.       command2D.boundingVolume = new BoundingSphere(); // updated in update()
    252.       command2D.modelMatrix = new Matrix4(); // updated in update()
    253.     }
    254.  
    255.     // 节点模型
    256.     var nodeCommand = {
    257.       show: true,
    258.       boundingSphere: boundingSphere,
    259.       command: command,         // 渲染命令
    260.       command2D: command2D,     // 2D渲染命令
    261.       // Generated on demand when silhouette size is greater than 0.0 and silhouette alpha is greater than 0.0
    262.       // 轮廓线命令，按照需要创建，懒加载
    263.       silhouetteModelCommand: undefined,
    264.       silhouetteModelCommand2D: undefined,
    265.       silhouetteColorCommand: undefined,
    266.       silhouetteColorCommand2D: undefined,
    267.       // Generated on demand when color alpha is less than 1.0
    268.       // 透明命令，按照需要创建，懒加载
    269.       translucentCommand: undefined,
    270.       translucentCommand2D: undefined,
    271.       // Generated on demand when back face culling is false
    272.       // 背面剔除命令，按照需要创建，懒加载
    273.       disableCullingCommand: undefined,
    274.       disableCullingCommand2D: undefined,
    275.       // For updating node commands on shader reconstruction
    276.       programId: programId,      // 着色程序
    277.     };
    278.     // 运行时使用的节点命令
    279.     runtimeNode.commands.push(nodeCommand);
    280.     // 所有的节点命令
    281.     nodeCommands.push(nodeCommand);
    282.   }
    283. }

  • 相关阅读:
    SlicerPro超级切片家具建模插件使用教程
    clickhouse的日期处理
    最新AIGC创作系统ChatGPT网站源码，Midjourney绘画系统，支持最新GPT-4-Turbo模型，支持DALL-E3文生图
    ComText让机器人有了情节记忆
    Hadoop运行环境搭建（开发重点三）、在hadoop102安装JDK、配置JDK环境变量、测试JDK是否安装成功
    react 18 createRoot没有渲染出DOM元素
    【AUTOSAR-CanSM】-2.5-参数CanSMBorTxConfirmationPolling详解
    /usr/lib/x86_64-linux-gnu/libQt5Core.so.5: version `Qt_5.15‘ not found
    asp毕业设计——基于asp+access的网页设计辅导系统设计与实现（毕业论文+程序源码）——网页设计辅导系统
    设定并理解随机数种子 && Pytorch在Dataloader类中设置shuffle的随机数种子方式
  • 原文地址：https://blog.csdn.net/tianyapai/article/details/126742778