为什么做民宿网站网红推广

来自glTF和3D Tiles的模型会走ModelVS.glsl。这个文件不单独是把模型顶点转换为屏幕坐标，还包含了丰富的处理过程。

Cesium是根据定义的Define判断某个行为是否需要被执行，比如#define HAS_SILHOUETTE，说明需要计算模型外轮廓线。

Cesium的ModelVS.glsl中可能并不直接实现某个方法，而是留给具体的行为赋予该方法实际的实现。这种策略的好处是ModelVS已经定义了流水线的整体逻辑，避免混乱。

1、定义解释

positionMC  模型坐标(Model Coordinates)。

ProcessedAttributes 这个结构体的定义比较隐晦，很难找到出处，相关代码如下：

//\engine\Source\Scene\Model\GeometryPipelineStage.js
shaderBuilder.addStruct(GeometryPipelineStage.STRUCT_ID_PROCESSED_ATTRIBUTES_VS,"ProcessedAttributes",ShaderDestination.VERTEX,
);
//主要有如下三个数据组成。
struct ProcessedAttributes
{vec3 positionMC;vec3 normalMC;vec2 texCoord_0;
};

2、dequantizationStage（去量化阶段）

这部分的glsl同样隐蔽，是由DequantizationPipelineStage.js在运行时生成的。

首先传入的模型需要定义一个quantization的Attribute。量化算法包括octEncoded和DequantizeLine方法。其中octEncoded的算法是十进制（或256这样的进制）进行降维，比如（1,2）在256维可以表示为1*256+2=258。DequantizeLine算法也差不多，比如

attributes.texCoord_0 = model_quantizedVolumeOffset_texCoord_0 + a_quantized_texCoord_0 * model_quantizedVolumeStepSize;

3、morphTargetsStage和skinningStage（骨骼动画阶段）

跟dequantizationStage一样，代码也是运行时生成(MorphTargetsPipelineStage.js)。

动画我暂时就不展开，主要涉及morphedPosition、morphedNormal、morphedTangent三个关键属性。

4、primitiveOutlineStage（基本图元边界渲染阶段）

它要有元素(primitive)有outlineCoordinates这个Attribute。系统会创建一个model_outlineTexture的材质，在对应的线段上绘制出对应的颜色。

5、计算bitangentMC

这个数值一般传递到片元着色器去计算更好的纹理效果。

7、selectedFeatureIdStage

7.1、featureIdStage（存储featureId）

这个阶段主要为了接下来的自定义渲染、拣选。需要用到图元的featureIds。在这个阶段没有做什么复杂的事情，就是把用户的featureId转换为标准的featureId_N。这样在后面的自定义渲染等地方，就可以直接采用标准的featureId_N。

 7.2、ModelFeatureTable

要说到模型特征，必须提到BatchTable。以B3DM为例，它会根据其MetadataTable（属性表）创建ModelFeatureTable。 更多关于featureID的介绍可以看文CustomShaderGuide

7.2.1、它的出生

ModelFeatureTable最重要的一个属性是batchTexture。我们知道Cesium是最喜欢把数据存在Texture中的。

batchTexture就创建一个B3DM要素(Node)一样多的像素点的材质(面向GPU 的Texture)。因为GPU引擎可以创建的最大材质长度非常大（ContextLimits.maximumTextureSize=16384），因此这个贴图一般就一条线。这个材质按顺序存储RGBA颜色，且初始为白色。

7.2.2、它的多彩

如果设置了3dTiles的样式（Cesium3DTileStyle），那么默认创建的这个材质就要更新了。它会重新创建新的材质(Texture)。这时候这个材质的像素颜色就会变成用户针对每个ID的特定颜色了。

7.3、selectedFeatureIdStage

到了着色器阶段，一切就顺利成章了。首先在顶点着色器会读取每个顶点的attributes.featureId_0。然后根据这个值找到batchTexture的颜色。

这个颜色会跟模型本身的颜色进行混合，当然这是片元着色器的事情了。

baseColorWithAlpha.rgb = blend(baseColorWithAlpha.rgb, feature.color.rgb, model_colorBlend);

8、InstancingStage实例化阶段

这个阶段主要是计算I3DM模型实例的具体位置，I3DM实例会提供instancingTransform数据或者TS(translation、scale)两个数值来计算实例化矩阵。

9、geometryStage几何位置计算阶段

该阶段执行正常的PVM方法。

10、silhouetteStage 模型外轮廓高亮阶段

求得模型轮廓的方法，是基于顶点的法向。如果顶点法向与射线法向垂直，那么这就是一个轮廓线。当然正常情况下，是很难有非常准的垂直法向。因此只要满足一定阈值即可。

vec3 normal2 = normalize(czm_normal3D * attributes.normalMC);
normal2.x *= czm_projection[0][0];
ormal2.y *= czm_projection[1][1];
positionClip.xy += normal2.xy *50.0 *positionClip.w * czm_pixelRatio / czm_viewport.z;

而其中的 positionClip.w表示深度值，越靠近值越小。它可以让模型在远处也有一段轮廓边界。