devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Cesium 源码解析 Model（二）_cesium源码解析

作者：羊村懒王 | 2024-02-17 03:50:45

赞

踩

cesium源码解析

        Cesium 源码解析 Model（一）中主要介绍了数据的前期准备工作，也就是数据下载完成（解析gltf，解析json和二进制数据，查看数据是否完整，如果有使用url的资源就去下载，这个不包括纹理的下载），对于数据的处理过程，需要根据this._state === ModelState.LOADING的状态确定下面的步骤：

        代码如下：

  1. Model.prototype.update = function (frameState) {
  2.  
  3.     ......
  4.  
  5.  
  6. // 正在加载
  7.   if (this._state === ModelState.LOADING) {
  8.     // Transition from LOADING -> LOADED once resources are downloaded and created.
  9.     // Textures may continue to stream in while in the LOADED state.
  10.     // 下载并创建资源后，从加载转换到加载。在加载状态下，纹理可能会继续流入。
  11.  
  12.     // 没有正在下载的外部buffer数据了，数据都已经下载完了
  13.     if (loadResources.pendingBufferLoads === 0) {
  14.       // 没有初始化
  15.       if (!loadResources.initialized) {
  16.         // 生成动态一张纹理brdf的纹理
  17.         frameState.brdfLutGenerator.update(frameState);
  18.         // 检查gltf的扩展cesium中是否都支持（不支持投递异常，日志中体现），虽然cesium支持但是浏览器不一定支持
  19.         ModelUtility.checkSupportedExtensions(
  20.           this.extensionsRequired,
  21.           supportsWebP
  22.         );
  23.         // 更新前向轴
  24.         ModelUtility.updateForwardAxis(this);
  25.  
  26.         // glTF pipeline updates, not needed if loading from cache
  27.         // 是否定义了数据源版本
  28.         if (!defined(this.gltf.extras.sourceVersion)) {
  29.           var gltf = this.gltf;
  30.           // Add the original version so it remains cached
  31.           // 添加原始版本到缓存状态
  32.           gltf.extras.sourceVersion = ModelUtility.getAssetVersion(gltf);
  33.           // 定义了扩展KHR_techniques_webgl(内部包含自定义glsl等)
  34.           gltf.extras.sourceKHRTechniquesWebGL = defined(
  35.             ModelUtility.getUsedExtensions(gltf).KHR_techniques_webgl // 定义了KHR_techniques_webgl扩展
  36.           );
  37.           // 版本
  38.           this._sourceVersion = gltf.extras.sourceVersion;
  39.           // 扩展KHR_techniques_webgl是否定义
  40.           this._sourceKHRTechniquesWebGL = gltf.extras.sourceKHRTechniquesWebGL;
  41.  
  42.           // 应该是将gltf1.0版本的数据改成2.0的数据, 为了支持1.0中的technique在2.0中使用了KHR_techniques_webgl扩展
  43.           updateVersion(gltf);
  44.           // 为gltf中各个属性添加默认值（buffer、material等）
  45.           addDefaults(gltf);
  46.  
  47.           // glsl中是否添加批次表片段
  48.           var options = {
  49.             addBatchIdToGeneratedShaders: this._addBatchIdToGeneratedShaders,
  50.           };
  51.  
  52.           // 处理KHR_materials_common扩展，扩展的所有的材质相信息，扩展的gltf的默认参数设置、shader片段拼接
  53.           processModelMaterialsCommon(gltf, options);
  54.           // 处理pbr材质
  55.           processPbrMaterials(gltf, options);
  56.         }
  57.  
  58.         // gltf版本
  59.         this._sourceVersion = this.gltf.extras.sourceVersion;
  60.         // 原始的glsl、uniform、attribute相关信息，与处理过的gltf.sourceKHRTechniquesWebGL信息不同
  61.         this._sourceKHRTechniquesWebGL = this.gltf.extras.sourceKHRTechniquesWebGL;
  62.  
  63.         // Skip dequantizing in the shader if not encoded
  64.         // 如果未编码，则跳过着色器中的解码
  65.         this._dequantizeInShader =
  66.           this._dequantizeInShader && DracoLoader.hasExtension(this);
  67.  
  68.         // We do this after to make sure that the ids don't change
  69.         // 之后我们会这样做，以确保ID不会更改
  70.  
  71.         // 将buffer添加到gpu资源中, 存入ModelLoadResources
  72.         addBuffersToLoadResources(this);
  73.         // 解析骨骼动画关节
  74.         parseArticulations(this);
  75.         // 将gltf中的Techniques拷贝到model的成员变量中，
  76.         parseTechniques(this);
  77.         // 不是从缓存中加载（缓存中是已经解析过的数据，不用再处理了）
  78.         if (!this._loadRendererResourcesFromCache) {
  79.           // 解析bufferviewid，顶点、索引数据, 存入ModelLoadResources
  80.           parseBufferViews(this);
  81.           // 着色器shaderid, 存入ModelLoadResources
  82.           parseShaders(this);
  83.           // 着色程序programid, 存入ModelLoadResources
  84.           parsePrograms(this);
  85.           // 纹理id, 存入ModelLoadResources
  86.           parseTextures(this, context, supportsWebP); 
  87.         }
  88.         parseMaterials(this);   // 解析材质（包含了真实的运行时数据存储）
  89.         parseMeshes(this);      // 解析网格（包含了真实的运行时数据存储）
  90.         parseNodes(this);       // 解析节点（包含了真实的运行时数据存储）
  91.  
  92.         // Start draco decoding  // 解析draco编码的二进制数据
  93.         DracoLoader.parse(this, context);
  94.  
  95.         // 初始化完成
  96.         loadResources.initialized = true; // 资源部初始化完成
  97.       }
  98.  
  99.       // 解码未完成
  100.       if (!loadResources.finishedDecoding()) {
  101.         // 解码模型
  102.         DracoLoader.decodeModel(this, context).otherwise(
  103.           ModelUtility.getFailedLoadFunction(this, "model", this.basePath)
  104.         );
  105.       }
  106.  
  107.       // 解码完成，资源还没解析完成
  108.       if (loadResources.finishedDecoding() && !loadResources.resourcesParsed) {
  109.         // 计算包围球
  110.         this._boundingSphere = ModelUtility.computeBoundingSphere(this);
  111.         // 包围球半径
  112.         this._initialRadius = this._boundingSphere.radius;
  113.  
  114.         // 如果设置了cacheKey，缓存解码后的数据
  115.         DracoLoader.cacheDataForModel(this);
  116.  
  117.         // 解析完成
  118.         loadResources.resourcesParsed = true;
  119.       }
  120.  
  121.       // 解析完成、外部链接的shader代码下载完成
  122.       if (
  123.         loadResources.resourcesParsed &&
  124.         loadResources.pendingShaderLoads === 0
  125.       ) {
  126.         // 显示外轮廓线
  127.         if (this.showOutline) {
  128.           // 轮廓线是一个扩展选项，是cesium定义的，模型生成的轮廓线的数据？？？
  129.           ModelOutlineLoader.outlinePrimitives(this);
  130.         }
  131.         // 创建gpu资源
  132.         createResources(this, frameState);
  133.       }
  134.     }
  135.  
  136.     if (
  137.       loadResources.finished() ||     // 资源加载完成或者纹理逐渐加载
  138.       (incrementallyLoadTextures &&
  139.         loadResources.finishedEverythingButTextureCreation())   // 除了纹理之外的所有数据都处理完了
  140.     ) {
  141.       // 模型装载完成（之后完成才能渲染）
  142.       this._state = ModelState.LOADED;
  143.       justLoaded = true;
  144.     }
  145.   }
  146.  
  147.     ......
  148. };

        过程步骤如下：

        1、this._state === ModelState.LOADING指明当前的数据除了纹理都已下载完成。

        2、loadResources.pendingBufferLoads === 0 说明二进制数据下载完成。

        3、!loadResources.initialized 说明资源还没有初始化完成，即还没将资源存储到ModelLoadResources结构中。

        4、frameState.brdfLutGenerator.update(frameState); 因为pbr需要brdf的使用的相关纹理。

        5、ModelUtility.checkSupportedExtensions 用来检查cesium是否支持所有模型正在使用的扩展。当前cesium支持的扩展有：

  1. // 所有的gltf扩展内容
  2. ModelUtility.supportedExtensions = {
  3.   AGI_articulations: true,
  4.   CESIUM_RTC: true,               // rtc中心
  5.   EXT_texture_webp: true,         // webp
  6.   KHR_blend: true,                // 混合
  7.   KHR_binary_glTF: true,
  8.   KHR_texture_basisu: true,
  9.   KHR_draco_mesh_compression: true, // 压缩格式
  10.   KHR_materials_common: true,     // 通用材质gltf1.0版本
  11.   KHR_techniques_webgl: true,     // 自定义着色器
  12.   KHR_materials_unlit: true,      // 无灯光材质
  13.   KHR_materials_pbrSpecularGlossiness: true,  光泽度材质模型
  14.   KHR_texture_transform: true,    // 纹理变换
  15.   WEB3D_quantized_attributes: true,
  16. };

6、ModelUtility.updateForwardAxis(this);  主要是gltf1.0、2.0中定义的模型前向轴的方向不同，1.0对应的是model._gltfForwardAxis = Axis.X;

7、下面的代码是将gltf2.0之前的格式转换成一种自定义的格式，目的是能统一处理。

  1. // 是否定义了数据源版本
  2.         if (!defined(this.gltf.extras.sourceVersion)) {
  3.           var gltf = this.gltf;
  4.           // Add the original version so it remains cached
  5.           // 添加原始版本到缓存状态
  6.           gltf.extras.sourceVersion = ModelUtility.getAssetVersion(gltf);
  7.           // 定义了扩展KHR_techniques_webgl(内部包含自定义glsl等)
  8.           gltf.extras.sourceKHRTechniquesWebGL = defined(
  9.             ModelUtility.getUsedExtensions(gltf).KHR_techniques_webgl // 定义了KHR_techniques_webgl扩展
  10.           );
  11.           // 版本
  12.           this._sourceVersion = gltf.extras.sourceVersion;
  13.           // 扩展KHR_techniques_webgl是否定义
  14.           this._sourceKHRTechniquesWebGL = gltf.extras.sourceKHRTechniquesWebGL;
  15.  
  16.           // 应该是将gltf1.0版本的数据改成2.0的数据, 为了支持1.0中的technique在2.0中使用了KHR_techniques_webgl扩展
  17.           updateVersion(gltf);
  18.           // 为gltf中各个属性添加默认值（buffer、material等）
  19.           addDefaults(gltf);
  20.  
  21.           // glsl中是否添加批次表片段
  22.           var options = {
  23.             addBatchIdToGeneratedShaders: this._addBatchIdToGeneratedShaders,
  24.           };
  25.  
  26.           // 处理KHR_materials_common扩展，扩展的所有的材质相信息，扩展的gltf的默认参数设置、shader片段拼接
  27.           processModelMaterialsCommon(gltf, options);
  28.           // 处理pbr材质
  29.           processPbrMaterials(gltf, options);
  30.         }

8、updateVersion(gltf);中将2.0之前的格式转换成一种兼容格式,代码如下：

  1. // 应该是将gltf1.0版本的数据改成2.0的数据
  2. function updateVersion(gltf, options) {
  3.   options = defaultValue(options, defaultValue.EMPTY_OBJECT);
  4.   const targetVersion = options.targetVersion;
  5.   // 版本
  6.   let version = gltf.version;
  7.  
  8.   // 如果asset存在就使用，不存在就设置1.0
  9.   gltf.asset = defaultValue(gltf.asset, {
  10.     version: "1.0",
  11.   });
  12.  
  13.   // 设置版本
  14.   gltf.asset.version = defaultValue(gltf.asset.version, "1.0");
  15.   version = defaultValue(version, gltf.asset.version).toString();
  16.  
  17.   // Invalid version
  18.   if (!Object.prototype.hasOwnProperty.call(updateFunctions, version)) {
  19.     // Try truncating trailing version numbers, could be a number as well if it is 0.8
  20.     if (defined(version)) {
  21.       version = version.substring(0, 3);
  22.     }
  23.     // Default to 1.0 if it cannot be determined
  24.     if (!Object.prototype.hasOwnProperty.call(updateFunctions, version)) {
  25.       version = "1.0";
  26.     }
  27.   }
  28.  
  29.   // 根据gltf的版本获取更新函数（跟新1.0到2.0）
  30.   let updateFunction = updateFunctions[version];
  31.  
  32.   // 需要gltf版本转换，通过函数进行转换
  33.   while (defined(updateFunction)) {
  34.     if (version === targetVersion) {
  35.       break;
  36.     }
  37.     updateFunction(gltf, options);
  38.     version = gltf.asset.version;
  39.     updateFunction = updateFunctions[version];
  40.   }
  41.   return gltf;
  42. }

其中let updateFunction = updateFunctions[version];是查找转换函数：

  1. // gltf的版本处理函数
  2. const updateFunctions = {
  3.   0.8: glTF08to10,   // 0.8转换成1.0的过程
  4.   "1.0": glTF10to20,  // 1.0转换成2.0的过程
  5.   "2.0": undefined,   // 如果默认是2.0就不用在转换了
  6. };

 对于gltf1.0、gltf2.0的规范：

可以看出，1.0是用json对象的方式建立索引，2.0是使用json数组的方式建立索引，json字符串的大小会减少很多。

9、addDefaults(gltf);主要是对于gltf中不完整的数据（某些缺省了）进行完善（填充完整）。

  1. function addDefaults(gltf) {
  2.   // 遍历访问器
  3.   ForEach.accessor(gltf, function (accessor) {
  4.     if (defined(accessor.bufferView)) {
  5.       // 设置默认的访问器偏移量为0
  6.       accessor.byteOffset = defaultValue(accessor.byteOffset, 0);
  7.     }
  8.   });
  9.  
  10.   // 遍历bufferviews
  11.   ForEach.bufferView(gltf, function (bufferView) {
  12.     if (defined(bufferView.buffer)) {
  13.       // 设置默认的偏移量为0
  14.       bufferView.byteOffset = defaultValue(bufferView.byteOffset, 0);
  15.     }
  16.   });
  17.  
  18.   // 遍历mesh
  19.   ForEach.mesh(gltf, function (mesh) {
  20.     // mesh的primitive
  21.     ForEach.meshPrimitive(mesh, function (primitive) {
  22.       // 默认绘制三角形
  23.       primitive.mode = defaultValue(primitive.mode, WebGLConstants.TRIANGLES);
  24.       // 材质未定义
  25.       if (!defined(primitive.material)) {
  26.         // 如果json中没有任何材质，材质为空数组
  27.         if (!defined(gltf.materials)) {
  28.           gltf.materials = [];
  29.         }
  30.         const defaultMaterial = {
  31.           name: "default",
  32.         };
  33.         // 材质未定义，设置mesh的材质索引为“default”
  34.         primitive.material = addToArray(gltf.materials, defaultMaterial);
  35.       }
  36.     });
  37.   });
  38.  
  39.   // 遍历顶点属性数据
  40.   ForEach.accessorContainingVertexAttributeData(gltf, function (accessorId) {
  41.     // 找到属性对应的gltf中的accessor访问器
  42.     const accessor = gltf.accessors[accessorId];
  43.     // 获取对应bufferview的索引
  44.     const bufferViewId = accessor.bufferView;
  45.     // 是否归一化
  46.     accessor.normalized = defaultValue(accessor.normalized, false);
  47.     if (defined(bufferViewId)) {
  48.       // 找到bufferview
  49.       const bufferView = gltf.bufferViews[bufferViewId];
  50.       // 填充步长大小
  51.       bufferView.byteStride = getAccessorByteStride(gltf, accessor);
  52.       // bufferview的目标是顶点数组
  53.       bufferView.target = WebGLConstants.ARRAY_BUFFER;
  54.     }
  55.   });
  56.  
  57.   // 包含绘制索引
  58.   ForEach.accessorContainingIndexData(gltf, function (accessorId) {
  59.     // 找到索引对应的具体访问器
  60.     const accessor = gltf.accessors[accessorId];
  61.     // 找到索引对应的bufferView
  62.     const bufferViewId = accessor.bufferView;
  63.     if (defined(bufferViewId)) {
  64.       // 设置bufferView的目标是索引缓冲
  65.       const bufferView = gltf.bufferViews[bufferViewId];
  66.       bufferView.target = WebGLConstants.ELEMENT_ARRAY_BUFFER;
  67.     }
  68.   });
  69.  
  70.   // 遍历材质
  71.   ForEach.material(gltf, function (material) {
  72.     // 材质中是否有扩展
  73.     const extensions = defaultValue(
  74.       material.extensions,
  75.       defaultValue.EMPTY_OBJECT
  76.     );
  77.     // 材质中的KHR_materials_common扩展，定义光照模型，光照参数
  78.     const materialsCommon = extensions.KHR_materials_common;
  79.     if (defined(materialsCommon)) {
  80.       // 获取自定义的光照模型，以及与光照模型相对应的values值
  81.       const technique = materialsCommon.technique;
  82.       const values = defined(materialsCommon.values)
  83.         ? materialsCommon.values
  84.         : {};
  85.       materialsCommon.values = values;
  86.  
  87.       // 定义了环境光
  88.       values.ambient = defined(values.ambient)
  89.         ? values.ambient
  90.         : [0.0, 0.0, 0.0, 1.0];
  91.       // 定义了自发光
  92.       values.emission = defined(values.emission)
  93.         ? values.emission
  94.         : [0.0, 0.0, 0.0, 1.0];
  95.       // 定义了透明度
  96.       values.transparency = defaultValue(values.transparency, 1.0);
  97.       values.transparent = defaultValue(values.transparent, false);
  98.       // 定义了双面渲染
  99.       values.doubleSided = defaultValue(values.doubleSided, false);
  100.     
  101.       // 不是恒定的
  102.       if (technique !== "CONSTANT") {
  103.         values.diffuse = defined(values.diffuse)
  104.           ? values.diffuse
  105.           : [0.0, 0.0, 0.0, 1.0];
  106.         // 不是兰伯特，应该是phong或者blinn，需要高光
  107.         if (technique !== "LAMBERT") {
  108.           // 高光
  109.           values.specular = defined(values.specular)
  110.             ? values.specular
  111.             : [0.0, 0.0, 0.0, 1.0];
  112.           // 高光强度
  113.           values.shininess = defaultValue(values.shininess, 0.0);
  114.         }
  115.       }
  116.       return;
  117.     }
  118.  
  119.     // 自发光因子
  120.     material.emissiveFactor = defaultValue(
  121.       material.emissiveFactor,
  122.       [0.0, 0.0, 0.0]
  123.     );
  124.     // 透明模式
  125.     material.alphaMode = defaultValue(material.alphaMode, "OPAQUE");
  126.     // 双面渲染
  127.     material.doubleSided = defaultValue(material.doubleSided, false);
  128.     // 遮罩
  129.     if (material.alphaMode === "MASK") {
  130.       material.alphaCutoff = defaultValue(material.alphaCutoff, 0.5);
  131.     }
  132.  
  133.     // 如果有KHR_techniques_webgl扩展？？？？
  134.     const techniquesExtension = extensions.KHR_techniques_webgl;
  135.     if (defined(techniquesExtension)) {
  136.       // 遍历单个材质中的属性
  137.       ForEach.materialValue(material, function (materialValue) {
  138.         // Check if material value is a TextureInfo object
  139.         // 是纹理就添加纹理缓存引用
  140.         if (defined(materialValue.index)) {
  141.           // 纹理坐标引用
  142.           addTextureDefaults(materialValue);
  143.         }
  144.       });
  145.     }
  146.  
  147.     // 添加纹理坐标引用（自发光贴图、法线贴图、遮蔽图）
  148.     addTextureDefaults(material.emissiveTexture);
  149.     addTextureDefaults(material.normalTexture);
  150.     addTextureDefaults(material.occlusionTexture);
  151.  
  152.     // 金属、粗糙度
  153.     const pbrMetallicRoughness = material.pbrMetallicRoughness;
  154.     if (defined(pbrMetallicRoughness)) {
  155.       // 基本颜色
  156.       pbrMetallicRoughness.baseColorFactor = defaultValue(
  157.         pbrMetallicRoughness.baseColorFactor,
  158.         [1.0, 1.0, 1.0, 1.0]
  159.       );
  160.       // 金属都因子
  161.       pbrMetallicRoughness.metallicFactor = defaultValue(
  162.         pbrMetallicRoughness.metallicFactor,
  163.         1.0
  164.       );
  165.       // 粗糙度因子
  166.       pbrMetallicRoughness.roughnessFactor = defaultValue(
  167.         pbrMetallicRoughness.roughnessFactor,
  168.         1.0
  169.       );
  170.       // 默认纹理坐标引用
  171.       addTextureDefaults(pbrMetallicRoughness.baseColorTexture);
  172.       addTextureDefaults(pbrMetallicRoughness.metallicRoughnessTexture);
  173.     }
  174.  
  175.     // 高光光泽度模型
  176.     const pbrSpecularGlossiness =
  177.       extensions.KHR_materials_pbrSpecularGlossiness;
  178.     if (defined(pbrSpecularGlossiness)) {
  179.       // 漫反射
  180.       pbrSpecularGlossiness.diffuseFactor = defaultValue(
  181.         pbrSpecularGlossiness.diffuseFactor,
  182.         [1.0, 1.0, 1.0, 1.0]
  183.       );
  184.       // 镜面
  185.       pbrSpecularGlossiness.specularFactor = defaultValue(
  186.         pbrSpecularGlossiness.specularFactor,
  187.         [1.0, 1.0, 1.0]
  188.       );
  189.       // 光泽度
  190.       pbrSpecularGlossiness.glossinessFactor = defaultValue(
  191.         pbrSpecularGlossiness.glossinessFactor,
  192.         1.0
  193.       );
  194.       // 光泽度纹理
  195.       addTextureDefaults(pbrSpecularGlossiness.specularGlossinessTexture);
  196.     }
  197.   });
  198.  
  199.   // 动画
  200.   ForEach.animation(gltf, function (animation) {
  201.     ForEach.animationSampler(animation, function (sampler) {
  202.       sampler.interpolation = defaultValue(sampler.interpolation, "LINEAR");
  203.     });
  204.   });
  205.  
  206.   // 动画节点
  207.   const animatedNodes = getAnimatedNodes(gltf);
  208.   ForEach.node(gltf, function (node, id) {
  209.     const animated = defined(animatedNodes[id]);
  210.     if (
  211.       animated ||
  212.       defined(node.translation) ||
  213.       defined(node.rotation) ||
  214.       defined(node.scale)
  215.     ) {
  216.       node.translation = defaultValue(node.translation, [0.0, 0.0, 0.0]);
  217.       node.rotation = defaultValue(node.rotation, [0.0, 0.0, 0.0, 1.0]);
  218.       node.scale = defaultValue(node.scale, [1.0, 1.0, 1.0]);
  219.     } else {
  220.       node.matrix = defaultValue(
  221.         node.matrix,
  222.         [
  223.           1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0,
  224.           0.0, 1.0,
  225.         ]
  226.       );
  227.     }
  228.   });
  229.  
  230.   // 采样器
  231.   ForEach.sampler(gltf, function (sampler) {
  232.     sampler.wrapS = defaultValue(sampler.wrapS, WebGLConstants.REPEAT);   // 默认是重复
  233.     sampler.wrapT = defaultValue(sampler.wrapT, WebGLConstants.REPEAT);
  234.   });
  235.  
  236.   // 默认场景0
  237.   if (defined(gltf.scenes) && !defined(gltf.scene)) {
  238.     gltf.scene = 0;
  239.   }
  240.  
  241.   return gltf;
  242. }

 例如：

accessor.byteOffset   访问器的偏移量

bufferView.byteOffset  二进制数据的偏移量

primitive.material  如果某个mesh没有材质，则使用一个默认的材质

accessor.normalized    数据是否归一化

bufferView.byteStride    数据的步长   

bufferView.target = WebGLConstants.ARRAY_BUFFER;  顶点数组缓存类型的二进制数据

bufferView.target = WebGLConstants.ELEMENT_ARRAY_BUFFER;  索引数组缓存类型的二进制数据

 technique !== "CONSTANT"或"LAMBERT"指明材质所使用的光照模型，以及使用这个光照模型需要哪些对应的参数（材质的各种反射率），

材质的自发光、是否透明、是否双面渲染、透明剔除discard

自发光贴图、法线贴图、环境光遮蔽图的uv坐标索引

金属粗糙度模型的默认参数、光泽度模型的默认参数

动画的插值方式、骨骼矩阵

采样器的默认值

默认场景

10、processModelMaterialsCommon(gltf, options);是对于gltf的“KHR_materials_common”扩展的处理过程，与processPbrMaterials(gltf, options);对pbr的处理过程是互斥的。

        processModelMaterialsCommon(gltf, options);中代码如下：

  1. // 处KHR_materials_common扩展
  2. function processModelMaterialsCommon(gltf, options) {
  3.   options = defaultValue(options, defaultValue.EMPTY_OBJECT);
  4.  
  5.   if (!defined(gltf)) {
  6.     return;
  7.   }
  8.  
  9.   // 没有使用扩展材质就返回
  10.   if (!usesExtension(gltf, "KHR_materials_common")) {
  11.     return;
  12.   }
  13.  
  14.   // 使用KHR_materials_common就必须使用KHR_techniques_webgl
  15.   if (!usesExtension(gltf, "KHR_techniques_webgl")) {
  16.     // 没有扩展就创建扩展
  17.     if (!defined(gltf.extensions)) {
  18.       gltf.extensions = {};
  19.     }
  20.  
  21.     // 添加默认数组
  22.     gltf.extensions.KHR_techniques_webgl = {
  23.       programs: [],     // 程序
  24.       shaders: [],      // 着色器
  25.       techniques: [],   // glsl代码，attibute、uniform
  26.     };
  27.     // 将使用的扩展加入
  28.     gltf.extensionsUsed.push("KHR_techniques_webgl");
  29.     gltf.extensionsRequired.push("KHR_techniques_webgl");
  30.   }
  31.  
  32.   // 自定义glsl、uniform、attribute等信息
  33.   var techniquesWebgl = gltf.extensions.KHR_techniques_webgl;
  34.  
  35.   // 灯光默认值
  36.   lightDefaults(gltf);
  37.  
  38.   // 收集灯光参数，后续uniform会使用 （灯光颜色、矩阵、衰减参数等）
  39.   var lightParameters = generateLightParameters(gltf);
  40.  
  41.   // 通过mesh的材质索引封装mesh的顶点属性信息，因为这些顶点属性会影像材质(hasNormal、hasVertexColor等)
  42.   var primitiveByMaterial = ModelUtility.splitIncompatibleMaterials(gltf);
  43.  
  44.   var techniques = {};
  45.   var generatedTechniques = false;
  46.   // 遍历材质  生成technique
  47.   ForEach.material(gltf, function (material, materialIndex) {
  48.     if (   // 定义了扩展
  49.       defined(material.extensions) &&
  50.       defined(material.extensions.KHR_materials_common)
  51.     ) {
  52.       // 光照模型（phong、blinn等）
  53.       var khrMaterialsCommon = material.extensions.KHR_materials_common;
  54.       // 材质对应的顶点属性信息
  55.       var primitiveInfo = primitiveByMaterial[materialIndex];
  56.       // 获取Technique相关的信息，作为一个shader的唯一key，用于缓存shader，以及区别shader
  57.       // 将所有影像材质的信息做成一个key
  58.       var techniqueKey = getTechniqueKey(khrMaterialsCommon, primitiveInfo);
  59.       // 缓存避免重复处理
  60.       var technique = techniques[techniqueKey];
  61.  
  62.       // 缓存中没有找到就生成
  63.       if (!defined(technique)) {
  64.          // 拼接成很多个glsl片段、顶点属性片段、uniform对象, 收集attribute、uniform、组成shaders、program、technique
  65.         technique = generateTechnique(
  66.           gltf,                       // 原始数据
  67.           techniquesWebgl,            // 自定义glsl、uniform、attribute等信息，生成的technique会添加到这个数组中
  68.           primitiveInfo,              // 顶点属性的一些影响材质的信息（hasNormal、hasVertexColor等）
  69.           khrMaterialsCommon,         // 光照模型（模型自身材质反射率）
  70.           lightParameters,            // 所有的灯光参数（灯光位置、颜色、衰减参数）
  71.           options.addBatchIdToGeneratedShaders  // 添加批次表id
  72.         );
  73.         // 缓存到techniques中，避免重复处理
  74.         techniques[techniqueKey] = technique;
  75.         // 生成了techniques
  76.         generatedTechniques = true;
  77.       }
  78.  
  79.       // 收集gltf中提供的uniform的值
  80.       var materialValues = {};
  81.       var values = khrMaterialsCommon.values;
  82.       var uniformName;
  83.       for (var valueName in values) {
  84.         if (
  85.           values.hasOwnProperty(valueName) &&
  86.           valueName !== "transparent" &&   // 不是透明
  87.           valueName !== "doubleSided"      // 不是双面渲染
  88.         ) {
  89.           uniformName = "u_" + valueName.toLowerCase();
  90.           materialValues[uniformName] = values[valueName];  // 添加uniform名-值
  91.         }
  92.       }
  93.  
  94.       // 添加到材质的扩展，包括technique索引和values（uniform的数值）
  95.       material.extensions.KHR_techniques_webgl = {
  96.         technique: technique,
  97.         values: materialValues,
  98.       };
  99.  
  100.       // 设置材质中的模式
  101.       material.alphaMode = "OPAQUE";
  102.       if (khrMaterialsCommon.transparent) {
  103.         material.alphaMode = "BLEND";   // 透明模式为混合
  104.       }
  105.  
  106.       // 设置材质中的双面渲染
  107.       if (khrMaterialsCommon.doubleSided) { // 双面渲染
  108.         material.doubleSided = true;
  109.       }
  110.     }
  111.   });
  112.  
  113.   // 没有生成直接返回
  114.   if (!generatedTechniques) {
  115.     return gltf;
  116.   }
  117.  
  118.   // If any primitives have semantics that aren't declared in the generated
  119.   // shaders, we want to preserve them.
  120.   // 确保语义存在
  121.   ModelUtility.ensureSemanticExistence(gltf);
  123.   return gltf;
  124. }

其中lightDefaults(gltf);主要是完善灯光信息（gltf中的灯光使用了默认值，这里需要完善一下）

function generateLightParameters(gltf)函数主要是收集灯光信息，这些信息主要是为后续的glsl字符串的拼接、uniform的数据的收集使用。

 

 var primitiveByMaterial = ModelUtility.splitIncompatibleMaterials(gltf);函数会收集顶点属性等信息，这些信息为后续拼接glsl以及attibute等有帮助。

对于每一个材质var techniqueKey = getTechniqueKey(khrMaterialsCommon, primitiveInfo)会依据材质所使用的所有关键信息拼接成一个唯一值，以区别不同的材质。

  1. technique = generateTechnique(
  2.           gltf,                       // 原始数据
  3.           techniquesWebgl,            // 自定义glsl、uniform、attribute等信息，生成的technique会添加到这个数组中
  4.           primitiveInfo,              // 顶点属性的一些影响材质的信息（hasNormal、hasVertexColor等）
  5.           khrMaterialsCommon,         // 光照模型（模型自身材质反射率）
  6.           lightParameters,            // 所有的灯光参数（灯光位置、颜色、衰减参数）
  7.           options.addBatchIdToGeneratedShaders  // 添加批次表id
  8.         );

上述代码会根据各方面的信息生成technique，并将这个索引添加到material.extensions.KHR_techniques_webgl中，后续是由这个结构生成着色程序。

  1. // 生成Technique，其中包括shader、uniform、attribute所有的信息
  2. function generateTechnique(
  3.   gltf,
  4.   techniquesWebgl,
  5.   primitiveInfo,
  6.   khrMaterialsCommon,
  7.   lightParameters,            // 灯光参数
  8.   addBatchIdToGeneratedShaders
  9. ) {
  10.   // 未定义
  11.   if (!defined(khrMaterialsCommon)) {
  12.     khrMaterialsCommon = {};
  13.   }
  14.  
  15.   // 批次表的id片段
  16.   addBatchIdToGeneratedShaders = defaultValue(
  17.     addBatchIdToGeneratedShaders,
  18.     false
  19.   );
  20.  
  21.   // gltf中自带的数据：用户自定义的（一般不会自定义，这些是在默认值中创建的）
  22.   var techniques = techniquesWebgl.techniques;      // 包括解析后的glsl的顶点属性片段、shader片段、以及uniform封装对象
  23.   var shaders = techniquesWebgl.shaders;            // 自定义的着色器片段
  24.   var programs = techniquesWebgl.programs;          // 自定义的程序片段
  25.   var lightingModel = khrMaterialsCommon.technique.toUpperCase();   // 灯光模式（恒定、blinn、phong）
  26.  
  27.   var lights;
  28.   if (  // 定义了通用材质
  29.     defined(gltf.extensions) &&
  30.     defined(gltf.extensions.KHR_materials_common)
  31.   ) {
  32.     // 获取灯光数组（环境光、点光源、聚光灯）
  33.     lights = gltf.extensions.KHR_materials_common.lights;
  34.   }
  35.  
  36.   // 与khrMaterialsCommon.technique对应的模型反射率等
  37.   var parameterValues = khrMaterialsCommon.values;
  38.   // 骨骼节点数
  39.   var jointCount = defaultValue(khrMaterialsCommon.jointCount, 0);
  40.  
  41.   var skinningInfo;
  42.   var hasSkinning = false;
  43.   var hasVertexColors = false;
  44.  
  45.   // gltf中mesh中存储的索引信息
  46.   if (defined(primitiveInfo)) {
  47.     // 骨骼信息、顶点颜色
  48.     skinningInfo = primitiveInfo.skinning;
  49.     hasSkinning = skinningInfo.skinned;
  50.     hasVertexColors = primitiveInfo.hasVertexColors;
  51.   }
  52.  
  53.   // 拼接shader分为几部分：
  54.   /* 
  55.     vertexShader\fragmentShader : 函数外的attribute、uniform、varing在vertexShader字符串中,
  56.     vertexShaderMain: 函数内的处理过程在vertexShaderMain字符串中，
  57.     techniqueUniforms: uniform相关信息，
  58.     techniqueAttributes: attribute相关信息
  59.   */
  61.   // 默认高精度
  62.   var vertexShader = "precision highp float;\n";
  63.   var fragmentShader = "precision highp float;\n";
  64.  
  65.   // 光照模型不是恒定的，可能是lambert等，就需要法线参数
  66.   var hasNormals = lightingModel !== "CONSTANT";
  67.  
  68.   // Add techniques 添加uniform数据矩阵信息
  69.   var techniqueUniforms = {
  70.     u_modelViewMatrix: {     // 模型视图矩阵
  71.       semantic: usesExtension(gltf, "CESIUM_RTC")   // 如果使用了rtc，在glsl中使用CESIUM_RTC_MODELVIEW关键字，否则使用MODELVIEW
  72.         ? "CESIUM_RTC_MODELVIEW"  
  73.         : "MODELVIEW",
  74.       type: WebGLConstants.FLOAT_MAT4,              // 类型是mat4
  75.     },
  76.     u_projectionMatrix: {                           // 定义投影矩阵，代码中的名称是u_projectionMatrix，对应glsl中的关键字是PROJECTION
  77.       semantic: "PROJECTION",
  78.       type: WebGLConstants.FLOAT_MAT4,
  79.     },
  80.   };
  81.  
  82.   if (hasNormals) {                               // 存在法线
  83.     techniqueUniforms.u_normalMatrix = {
  84.       semantic: "MODELVIEWINVERSETRANSPOSE",      // 模型视图矩阵的逆矩阵
  85.       type: WebGLConstants.FLOAT_MAT3,            // 类型是mat3
  86.     };
  87.   }
  88.  
  89.   if (hasSkinning) {                              // 存在骨骼
  90.     techniqueUniforms.u_jointMatrix = {
  91.       count: jointCount,                          // 节点数
  92.       semantic: "JOINTMATRIX",                    // 节点矩阵，glsl中的uniform关键字
  93.       type: WebGLConstants.FLOAT_MAT4,
  94.     };
  95.   }
  96.  
  97.   // Add material values  添加材质值反射率信息
  98.   var uniformName;
  99.   var hasTexCoords = false;
  100.   for (var name in parameterValues) {               //
  101.     //generate shader parameters for KHR_materials_common attributes
  102.     //(including a check, because some boolean flags should not be used as shader parameters)
  103.     if (
  104.       parameterValues.hasOwnProperty(name) &&       // 本身的数据
  105.       name !== "transparent" &&                     // 透明
  106.       name !== "doubleSided"                        // 双面渲染
  107.     ) {
  108.       var uniformType = getKHRMaterialsCommonValueType( // 获取值的类型
  109.         name,
  110.         parameterValues[name]
  111.       );
  112.       // 拼接uniform名称
  113.       uniformName = "u_" + name.toLowerCase();
  114.       // 存在纹理坐标
  115.       if (!hasTexCoords && uniformType === WebGLConstants.SAMPLER_2D) {
  116.         hasTexCoords = true;
  117.       }
  118.       // 添加uniform相关的名称与类型，一次拼接glsl中的uniform，没有语义
  119.       techniqueUniforms[uniformName] = {
  120.         type: uniformType,
  121.       };
  122.     }
  123.   }
  124.  
  125.   // Give the diffuse uniform a semantic to support color replacement in 3D Tiles
  126.   // 为漫反射均匀提供语义，以支持3D瓦片中的颜色替换
  127.   if (defined(techniqueUniforms.u_diffuse)) {
  128.     techniqueUniforms.u_diffuse.semantic = "_3DTILESDIFFUSE";
  129.   }
  130.  
  131.   // Copy light parameters into technique parameters
  132.   // 赋值unifrom的灯光信息
  133.   if (defined(lightParameters)) {
  134.     for (var lightParamName in lightParameters) {
  135.       if (lightParameters.hasOwnProperty(lightParamName)) {
  136.         uniformName = "u_" + lightParamName;
  137.         techniqueUniforms[uniformName] = lightParameters[lightParamName];
  138.       }
  139.     }
  140.   }
  141.  
  142.   // Add uniforms to shaders 将uniform添加到glsl中
  143.   for (uniformName in techniqueUniforms) {
  144.     if (techniqueUniforms.hasOwnProperty(uniformName)) {
  145.       var uniform = techniqueUniforms[uniformName];   
  146.       var arraySize = defined(uniform.count) ? "[" + uniform.count + "]" : "";  // 如果uniform是数组
  147.       if (  // 不是mat3\mat4并且是用在片段着色器中
  148.         (uniform.type !== WebGLConstants.FLOAT_MAT3 &&
  149.           uniform.type !== WebGLConstants.FLOAT_MAT4) ||
  150.         uniform.useInFragment    // 用在片段着色器中
  151.       ) {
  152.         // 拼接片段着色器中的uniform常量
  153.         fragmentShader +=
  154.           "uniform " +
  155.           webGLConstantToGlslType(uniform.type) +
  156.           " " +
  157.           uniformName +
  158.           arraySize +
  159.           ";\n";
  160.         // 使用完了就删除
  161.         delete uniform.useInFragment;
  162.       } else {
  163.         // 拼接顶点着色器中的unifrom常量
  164.         vertexShader +=
  165.           "uniform " +
  166.           webGLConstantToGlslType(uniform.type) +
  167.           " " +
  168.           uniformName +
  169.           arraySize +
  170.           ";\n";
  171.       }
  172.     }
  173.   }
  174.  
  175.   // Add attributes with semantics 添加语义属性
  176.  
  177.   // 顶点着色器main函数
  178.   var vertexShaderMain = "";
  179.  
  180.   // 存在骨骼的情况，在顶点着色器的main中拼接
  181.   if (hasSkinning) {
  182.     // 根据骨骼索引找到骨骼矩阵，骨骼矩阵乘以权重
  183.     vertexShaderMain +=
  184.       "    mat4 skinMatrix =\n" +
  185.       "        a_weight.x * u_jointMatrix[int(a_joint.x)] +\n" +
  186.       "        a_weight.y * u_jointMatrix[int(a_joint.y)] +\n" +
  187.       "        a_weight.z * u_jointMatrix[int(a_joint.z)] +\n" +
  188.       "        a_weight.w * u_jointMatrix[int(a_joint.w)];\n";
  189.   }
  190.  
  191.   // Add position always  添加顶点属性中的顶点
  192.   var techniqueAttributes = {
  193.     a_position: {       // 
  194.       semantic: "POSITION", // 语义是顶点
  195.     },
  196.   };
  197.   // 顶点着色器中的顶点属性位置属性、转递属性（相机空间中的坐标）
  198.   vertexShader += "attribute vec3 a_position;\n";
  199.   vertexShader += "varying vec3 v_positionEC;\n";
  200.   // 存在骨骼
  201.   if (hasSkinning) {
  202.     // 计算骨骼变换后的相机空间坐标
  203.     vertexShaderMain +=
  204.       "  vec4 pos = u_modelViewMatrix * skinMatrix * vec4(a_position,1.0);\n";
  205.   } else {
  206.     // 直接计算相机空间坐标
  207.     vertexShaderMain +=
  208.       "  vec4 pos = u_modelViewMatrix * vec4(a_position,1.0);\n";
  209.   }
  210.   // 转递的相机空间坐标
  211.   vertexShaderMain += "  v_positionEC = pos.xyz;\n";
  212.   // 投影
  213.   vertexShaderMain += "  gl_Position = u_projectionMatrix * pos;\n";
  214.  
  215.   // 像素着色器中接收的相机空间坐标
  216.   fragmentShader += "varying vec3 v_positionEC;\n";
  217.  
  218.   // Add normal if we don't have constant lighting 如果没有恒定照明，则添加“正常”
  219.   if (hasNormals) {
  220.     // 存在法线
  221.     techniqueAttributes.a_normal = {
  222.       semantic: "NORMAL",
  223.     };
  224.     // 法线
  225.     vertexShader += "attribute vec3 a_normal;\n";
  226.     vertexShader += "varying vec3 v_normal;\n";
  227.     if (hasSkinning) {
  228.       // 骨骼中会计算法线
  229.       vertexShaderMain +=
  230.         "  v_normal = u_normalMatrix * mat3(skinMatrix) * a_normal;\n";
  231.     } else {
  232.       vertexShaderMain += "  v_normal = u_normalMatrix * a_normal;\n";
  233.     }
  235.     // 像素着色器中接收的法线坐标 
  236.     fragmentShader += "varying vec3 v_normal;\n";
  237.   }
  239.   // Add texture coordinates if the material uses them  天啊及纹理坐标
  240.   var v_texcoord;
  241.   if (hasTexCoords) {
  242.     techniqueAttributes.a_texcoord_0 = {  // 纹理坐标
  243.       semantic: "TEXCOORD_0",
  244.     };
  246.     // 顶点着色器中的纹理坐标
  247.     v_texcoord = "v_texcoord_0";
  248.     vertexShader += "attribute vec2 a_texcoord_0;\n";
  249.     vertexShader += "varying vec2 " + v_texcoord + ";\n";
  251.     // 转递纹理坐标
  252.     vertexShaderMain += "  " + v_texcoord + " = a_texcoord_0;\n";
  254.     // 像素着色器中接收的纹理坐标 
  255.     fragmentShader += "varying vec2 " + v_texcoord + ";\n";
  256.   }
  259.   if (hasSkinning) {
  260.     // 骨骼节点属性
  261.     techniqueAttributes.a_joint = {
  262.       semantic: "JOINTS_0",
  263.     };
  264.     // 权重属性
  265.     techniqueAttributes.a_weight = {
  266.       semantic: "WEIGHTS_0",
  267.     };
  269.     // 骨骼矩阵索引，权重属性，都是vec4的
  270.     vertexShader += "attribute vec4 a_joint;\n";
  271.     vertexShader += "attribute vec4 a_weight;\n";
  272.   }
  274.   if (hasVertexColors) {
  275.     // 颜色属性
  276.     techniqueAttributes.a_vertexColor = {
  277.       semantic: "COLOR_0",
  278.     };
  279.     // 顶点颜色、传递顶点颜色
  280.     vertexShader += "attribute vec4 a_vertexColor;\n";
  281.     vertexShader += "varying vec4 v_vertexColor;\n";
  282.     vertexShaderMain += "  v_vertexColor = a_vertexColor;\n";
  284.     // 像素着色器中接收的顶点颜色 
  285.     fragmentShader += "varying vec4 v_vertexColor;\n";
  286.   }
  288.   // 批次id属性
  289.   if (addBatchIdToGeneratedShaders) {
  290.     techniqueAttributes.a_batchId = {   //
  291.       semantic: "_BATCHID",             // 语义
  292.     };
  293.     // 顶点着色器中添加批次id
  294.     vertexShader += "attribute float a_batchId;\n";
  295.   }
  297.   // 存在高光
  298.   var hasSpecular =
  299.     hasNormals &&
  300.     (lightingModel === "BLINN" || lightingModel === "PHONG") &&   // 灯光模式为blinn或者phong
  301.     defined(techniqueUniforms.u_specular) &&        // 存在高光、高光强度
  302.     defined(techniqueUniforms.u_shininess) &&
  303.     techniqueUniforms.u_shininess > 0.0;
  305.   // Generate lighting code blocks  生成灯光代码块
  306.   var hasNonAmbientLights = false;
  307.   var hasAmbientLights = false;
  308.   var fragmentLightingBlock = "";   // 像素着色器代码段
  309.   for (var lightName in lights) {  // 遍历灯光
  310.     if (lights.hasOwnProperty(lightName)) {
  311.       var light = lights[lightName];
  312.       var lightType = light.type.toLowerCase(); // 灯光类型（环境光、点光源、聚光灯）
  313.       var lightBaseName = light.baseName;
  314.       fragmentLightingBlock += "  {\n";
  315.       var lightColorName = "u_" + lightBaseName + "Color";  // 灯光颜色
  316.       var varyingDirectionName;
  317.       var varyingPositionName;
  318.       if (lightType === "ambient") {  // 如果是换进光
  319.         hasAmbientLights = true;
  320.         fragmentLightingBlock +=      // 
  321.           "    ambientLight += " + lightColorName + ";\n";   // glsl中的颜色相加
  322.       } else if (hasNormals) {        // 存在法线
  323.         hasNonAmbientLights = true;   
  324.         varyingDirectionName = "v_" + lightBaseName + "Direction";  // 方向光
  325.         varyingPositionName = "v_" + lightBaseName + "Position";    // 方向光的位置
  327.         if (lightType !== "point") {  // 不是点光源
  328.           vertexShader += "varying vec3 " + varyingDirectionName + ";\n";  // v传递方向光
  329.           fragmentShader += "varying vec3 " + varyingDirectionName + ";\n"; // f接收方向光
  331.           vertexShaderMain +=
  332.             "  " +
  333.             varyingDirectionName +
  334.             " = mat3(u_" +
  335.             lightBaseName +
  336.             "Transform) * vec3(0.,0.,1.);\n";
  337.           if (lightType === "directional") {
  338.             fragmentLightingBlock +=
  339.               "    vec3 l = normalize(" + varyingDirectionName + ");\n";
  340.           }
  341.         }
  343.         if (lightType !== "directional") {  // 不是方向光
  344.           vertexShader += "varying vec3 " + varyingPositionName + ";\n";
  345.           fragmentShader += "varying vec3 " + varyingPositionName + ";\n";
  347.           vertexShaderMain +=
  348.             "  " +
  349.             varyingPositionName +
  350.             " = u_" +
  351.             lightBaseName +
  352.             "Transform[3].xyz;\n";
  353.           fragmentLightingBlock +=
  354.             "    vec3 VP = " + varyingPositionName + " - v_positionEC;\n";
  355.           fragmentLightingBlock += "    vec3 l = normalize(VP);\n";
  356.           fragmentLightingBlock += "    float range = length(VP);\n";
  357.           fragmentLightingBlock +=
  358.             "    float attenuation = 1.0 / (u_" +
  359.             lightBaseName +
  360.             "Attenuation.x + ";
  361.           fragmentLightingBlock +=
  362.             "(u_" + lightBaseName + "Attenuation.y * range) + ";
  363.           fragmentLightingBlock +=
  364.             "(u_" + lightBaseName + "Attenuation.z * range * range));\n";
  365.         } else {
  366.           fragmentLightingBlock += "    float attenuation = 1.0;\n";
  367.         }
  369.         // 聚光灯
  370.         if (lightType === "spot") {
  371.           fragmentLightingBlock +=
  372.             "    float spotDot = dot(l, normalize(" +
  373.             varyingDirectionName +
  374.             "));\n";
  375.           fragmentLightingBlock +=
  376.             "    if (spotDot < cos(u_" + lightBaseName + "FallOff.x * 0.5))\n";
  377.           fragmentLightingBlock += "    {\n";
  378.           fragmentLightingBlock += "      attenuation = 0.0;\n";
  379.           fragmentLightingBlock += "    }\n";
  380.           fragmentLightingBlock += "    else\n";
  381.           fragmentLightingBlock += "    {\n";
  382.           fragmentLightingBlock +=
  383.             "        attenuation *= max(0.0, pow(spotDot, u_" +
  384.             lightBaseName +
  385.             "FallOff.y));\n";
  386.           fragmentLightingBlock += "    }\n";
  387.         }
  389.         fragmentLightingBlock +=
  390.           "    diffuseLight += " +
  391.           lightColorName +
  392.           "* max(dot(normal,l), 0.) * attenuation;\n";
  394.         if (hasSpecular) {
  395.           if (lightingModel === "BLINN") {
  396.             fragmentLightingBlock += "    vec3 h = normalize(l + viewDir);\n";
  397.             fragmentLightingBlock +=
  398.               "    float specularIntensity = max(0., pow(max(dot(normal, h), 0.), u_shininess)) * attenuation;\n";
  399.           } else {
  400.             // PHONG
  401.             fragmentLightingBlock +=
  402.               "    vec3 reflectDir = reflect(-l, normal);\n";
  403.             fragmentLightingBlock +=
  404.               "    float specularIntensity = max(0., pow(max(dot(reflectDir, viewDir), 0.), u_shininess)) * attenuation;\n";
  405.           }
  406.           fragmentLightingBlock +=
  407.             "    specularLight += " +
  408.             lightColorName +
  409.             " * specularIntensity;\n";
  410.         }
  411.       }
  412.       fragmentLightingBlock += "  }\n";
  413.     }
  414.   }
  416.   // 不存在环境光
  417.   if (!hasAmbientLights) {
  418.     // Add an ambient light if we don't have one
  419.     fragmentLightingBlock += "  ambientLight += vec3(0.2, 0.2, 0.2);\n";
  420.   }
  421.  
  422.   // 存在换进光
  423.   if (!hasNonAmbientLights && lightingModel !== "CONSTANT") {
  424.     // 自定义了灯光颜色
  425.     fragmentShader += "#ifdef USE_CUSTOM_LIGHT_COLOR \n";
  426.     fragmentShader += "uniform vec3 gltf_lightColor; \n";
  427.     fragmentShader += "#endif \n";
  428.  
  429.     // 未定义灯光颜色
  430.     fragmentLightingBlock += "#ifndef USE_CUSTOM_LIGHT_COLOR \n";
  431.     fragmentLightingBlock += "    vec3 lightColor = czm_lightColor;\n";  // 使用cesium灯光颜色
  432.     fragmentLightingBlock += "#else \n";
  433.     fragmentLightingBlock += "    vec3 lightColor = gltf_lightColor;\n";  // 使用gltf灯光颜色
  434.     fragmentLightingBlock += "#endif \n";
  435.  
  436.     fragmentLightingBlock += "  vec3 l = normalize(czm_lightDirectionEC);\n"; // 相机空间下灯光方向
  437.     var minimumLighting = "0.2"; // Use strings instead of values as 0.0 -> 0 when stringified
  438.  
  439.     // 漫反射颜色
  440.     fragmentLightingBlock +=
  441.       "  diffuseLight += lightColor * max(dot(normal,l), " +
  442.       minimumLighting +
  443.       ");\n";
  444.  
  445.     // 存在高光
  446.     if (hasSpecular) {
  447.       // blinn灯光
  448.       if (lightingModel === "BLINN") {
  449.         fragmentLightingBlock += "  vec3 h = normalize(l + viewDir);\n";
  450.         fragmentLightingBlock +=
  451.           "  float specularIntensity = max(0., pow(max(dot(normal, h), 0.), u_shininess));\n";
  452.       } else {
  453.         // PHONG灯光
  454.         fragmentLightingBlock += "  vec3 reflectDir = reflect(-l, normal);\n";
  455.         fragmentLightingBlock +=
  456.           "  float specularIntensity = max(0., pow(max(dot(reflectDir, viewDir), 0.), u_shininess));\n";
  457.       }
  458.  
  459.       fragmentLightingBlock +=
  460.         "  specularLight += lightColor * specularIntensity;\n";
  461.     }
  462.   }
  463.  
  464.   // 拼接main
  465.   vertexShader += "void main(void) {\n";
  466.   vertexShader += vertexShaderMain;
  467.   vertexShader += "}\n";
  468.  
  469.   // 处理像素着色器
  470.   fragmentShader += "void main(void) {\n";
  471.   var colorCreationBlock = "  vec3 color = vec3(0.0, 0.0, 0.0);\n";
  472.   // 法线
  473.   if (hasNormals) {
  474.     fragmentShader += "  vec3 normal = normalize(v_normal);\n";
  475.     if (khrMaterialsCommon.doubleSided) {
  476.       fragmentShader += "  if (czm_backFacing())\n";
  477.       fragmentShader += "  {\n";
  478.       fragmentShader += "    normal = -normal;\n";
  479.       fragmentShader += "  }\n";
  480.     }
  481.   }
  482.  
  483.   var finalColorComputation;
  484.   // 不是恒定灯光
  485.   if (lightingModel !== "CONSTANT") {
  486.     // 漫反射
  487.     if (defined(techniqueUniforms.u_diffuse)) {
  488.       if (techniqueUniforms.u_diffuse.type === WebGLConstants.SAMPLER_2D) {
  489.         fragmentShader +=
  490.           "  vec4 diffuse = texture2D(u_diffuse, " + v_texcoord + ");\n";
  491.       } else {
  492.         fragmentShader += "  vec4 diffuse = u_diffuse;\n";
  493.       }
  494.       fragmentShader += "  vec3 diffuseLight = vec3(0.0, 0.0, 0.0);\n";
  495.       colorCreationBlock += "  color += diffuse.rgb * diffuseLight;\n";
  496.     }
  497.  
  498.     // 高光
  499.     if (hasSpecular) {
  500.       if (techniqueUniforms.u_specular.type === WebGLConstants.SAMPLER_2D) {
  501.         fragmentShader +=
  502.           "  vec3 specular = texture2D(u_specular, " + v_texcoord + ").rgb;\n";
  503.       } else {
  504.         fragmentShader += "  vec3 specular = u_specular.rgb;\n";
  505.       }
  506.       fragmentShader += "  vec3 specularLight = vec3(0.0, 0.0, 0.0);\n";
  507.       colorCreationBlock += "  color += specular * specularLight;\n";
  508.     }
  509.  
  510.     // 透明
  511.     if (defined(techniqueUniforms.u_transparency) && false) {
  512.       finalColorComputation =
  513.         "  gl_FragColor = vec4(color * diffuse.a * u_transparency, diffuse.a * u_transparency);\n";
  514.     } else {
  515.       finalColorComputation =
  516.         //"  gl_FragColor = vec4(color * diffuse.a, diffuse.a);\n";
  517.         "  gl_FragColor = vec4(diffuse.rgb * 1.5, 1.0);\n";
  518.     }
  519.   } else if (defined(techniqueUniforms.u_transparency)) {
  520.     // 恒定灯光下的透明
  521.     finalColorComputation =
  522.       "  gl_FragColor = vec4(color * u_transparency, u_transparency);\n";
  523.   } else {
  524.     // 最终的颜色
  525.     finalColorComputation = "  gl_FragColor = vec4(color, 1.0);\n";
  526.   }
  527.  
  528.   // 顶点颜色
  529.   if (hasVertexColors) {
  530.     colorCreationBlock += "  color *= v_vertexColor.rgb;\n";
  531.   }
  532.  
  533.   // 自发光
  534.   if (defined(techniqueUniforms.u_emission)) {
  535.     if (techniqueUniforms.u_emission.type === WebGLConstants.SAMPLER_2D) {
  536.       fragmentShader +=
  537.         "  vec3 emission = texture2D(u_emission, " + v_texcoord + ").rgb;\n";
  538.     } else {
  539.       fragmentShader += "  vec3 emission = u_emission.rgb;\n";
  540.     }
  541.     colorCreationBlock += "  color += emission;\n";
  542.   }
  543.  
  544.   // 环境光
  545.   if (defined(techniqueUniforms.u_ambient) || lightingModel !== "CONSTANT") {
  546.     if (defined(techniqueUniforms.u_ambient)) {
  547.       // 纹理中的环境光漫反射
  548.       if (techniqueUniforms.u_ambient.type === WebGLConstants.SAMPLER_2D) {
  549.         fragmentShader +=
  550.           "  vec3 ambient = texture2D(u_ambient, " + v_texcoord + ").rgb;\n";
  551.       } else {
  552.         fragmentShader += "  vec3 ambient = u_ambient.rgb;\n";
  553.       }
  554.     } else {
  555.       fragmentShader += "  vec3 ambient = diffuse.rgb;\n";
  556.     }
  557.     // 颜色相加
  558.     colorCreationBlock += "  color += ambient * ambientLight;\n";
  559.   }
  560.   // 
  561.   fragmentShader += "  vec3 viewDir = -normalize(v_positionEC);\n";
  562.   fragmentShader += "  vec3 ambientLight = vec3(0.0, 0.0, 0.0);\n";
  563.  
  564.   // Add in light computations  拼接灯光计算片段
  565.   fragmentShader += fragmentLightingBlock;
  566.  
  567.   fragmentShader += colorCreationBlock;
  568.   fragmentShader += finalColorComputation;
  569.   fragmentShader += "}\n";
  570.  
  571.   // Add shaders 着色片段数组中添加一个顶点片段
  572.   // 将新生成的片段添加到原来的gltf中，
  573.   var vertexShaderId = addToArray(shaders, {
  574.     type: WebGLConstants.VERTEX_SHADER,       // 属于顶点着色器
  575.     extras: {     // 额外的数据
  576.       _pipeline: {    // 管线
  577.         source: vertexShader,   // 顶点着色片段
  578.         extension: ".glsl",     //glsl
  579.       },
  580.     },
  581.   });
  582.  
  583.   // 将新生成的片段添加到原来的gltf中，
  584.   var fragmentShaderId = addToArray(shaders, {
  585.     type: WebGLConstants.FRAGMENT_SHADER,     // 属于像素着色器
  586.     extras: {
  587.       _pipeline: {
  588.         source: fragmentShader,
  589.         extension: ".glsl",
  590.       },
  591.     },
  592.   });
  593.  
  594.   // Add program  将新生成的片段添加到原来的gltf中索引中，添加着色程序片段
  595.   var programId = addToArray(programs, {
  596.     fragmentShader: fragmentShaderId,
  597.     vertexShader: vertexShaderId,
  598.   });
  599.  
  600.   // 添加到techniques数组中，返回索引位置
  601.   var techniqueId = addToArray(techniques, {
  602.     attributes: techniqueAttributes,        // 属性片段
  603.     program: programId,                     // shader片段
  604.     uniforms: techniqueUniforms,            // uniform片段
  605.   });
  606.  
  607.   return techniqueId;
  608. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/99775
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号