Cesium高阶学习十一、模型特效

Cesium进阶学习

于 2024-10-11 08:30:48 发布

阅读量250

点赞数 8

分类专栏： Cesium高阶学习文章标签：学习

本文链接：https://blog.csdn.net/weixin_43700915/article/details/142823936

版权

一、模型光源
1、关于光照原理可以参考“WebGL编程指南” 第八章
在这里插入图片描述

2、以点光源为例，计算公式为最后的颜色=光源颜色 x 物体基底色 x（光线方向 . 物体法线）
在这里插入图片描述

3、Cesium中如何实现

在模型上实现光源效果，我们可以使用 CustomShader 类，来实现，因为我们已经有了计算公式，只需要按照公式获取相关参数即可实现。计算公式：最后的颜色=光源颜色 x 物体基底色 x（光线方向 . 物体法线）（关于如何传递参数到着色器中，可以参考“进阶学习”模型压平章节）
光源颜色：光源颜色肯定是我们从外部传递到着色器内部的
光线方向：光线方向是通过光源位置和片元位置计算而来，而光源位置是从外部传递到着色器内部
物体基底色：即物体原本的颜色，在着色器中通过material.diffuse获取
物体法线：在着色器中可以通过fsInput.attributes.normalEC获取

CustomShader类的片元着色器默认能够获取到的相关参数在文档中看不到，可以根据Cesium提供的示例或者查看源码获取更多的参数

接下来我们创建一个CustomShader类进行测试

a、首先加载一个模型（这里加载一个白膜数据）

let url = 'http://xt3d.online:8081/data/country_build/chengdu_ajust_clip/tileset.json';
Cesium.Cesium3DTileset.fromUrl(url, {
   
}).then((result) => {
   
    viewer.scene.primitives.add(result);
    viewer.zoomTo(result);
}).catch((err) => {
   
});

在这里插入图片描述

b、然后创建一个CustomShader，并且将光源位置和颜色作为参数传递到着色器中

let linghtPosition=Cesium.Cartesian3.fromDegrees(104.06722494841634, 30.63871487729699, 200);
 let linghtColor=Cesium.Color.RED;
 tileset.customShader = new Cesium.CustomShader({
   
       lightingModel: Cesium.LightingModel.UNLIT,
       uniforms: {
   
           u_lightPosition: {
   
               type: Cesium.UniformType.VEC3,
               value: linghtPosition
           },

           u_lightColor: {
   
               type: Cesium.UniformType.VEC3,
               value: linghtColor
           },
       },
       fragmentShaderText: ` 
           void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
               //当前片元的模型坐标
               vec3 positionMC = fsInput.attributes.positionMC;
               //当前片元的眼睛坐标
               vec3 positionEC = fsInput.attributes.positionEC;