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

原创 已于 2024-10-21 14:10:22 修改 · 1.5k 阅读 · 21 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#学习

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

一、模型光源
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;
               //当前片元的世界坐标
               vec3 positionWC=(czm_model * vec4(positionMC,1.0)).xyz;
               //当前片元的法线（眼睛坐标系）
               vec3 normalEC = fsInput.attributes.normalEC;
               normalEC=normalize(normalEC);
               //光线方向（眼睛坐标系）
               vec3 lightDirection = (czm_view * vec4(u_lightPosition,1.0)).xyz - positionEC;
           }
           `
   })

c、接下来根据公司计算颜色

fragmentShaderText: ` 
 void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {                 

     //当前片元的模型坐标
     vec3 positionMC = fsInput.attributes.positionMC;
     //当前片元的眼睛坐标
     vec3 positionEC = fsInput.attributes.positionEC;
     //当前片元的模型坐标
     vec3 positionWC=(czm_model * vec4(positionMC,1.0)).xyz;
     //当前片元的法线（眼睛坐标系）
     vec3 normalEC = fsInput.attributes.normalEC;
     normalEC=normalize(normalEC);
     //光线方向（眼睛坐标）
     vec3 lightDirection = (czm_view * vec4(u_lightPosition,1.0)).xyz - positionEC;                    
     //光线与法线的夹角（眼睛坐标）
     float a=dot(normalEC,normalize(lightDirection));
     material.diffuse*=a*u_lightColor; 
 }
 `

在这里插入图片描述

4、添加限制条件

	我们通过公式实现了光源的效果，但是因为没有添加条件限制，所以光源范围很多，这并不不符合现实情况，本节我们为光源添加条件限制。因为我们实现的是点光源，所以可以添加一个半径作为限制条件，即圆心越远，光越弱。

tileset.customShader = new Cesium.CustomShader({
     // mode: Cesium.CustomShaderMode.REPLACE_MATERIAL,
     lightingModel: Cesium.LightingModel.UNLIT,
     uniforms: {
         u_lightPosition: {
             type: Cesium.UniformType.VEC3,
             value: linghtPosition
         },

         u_lightColor: {
             type: Cesium.UniformType.VEC3,
             value: linghtColor
         },

         u_lightRadius:{
             type: Cesium.UniformType.FLOAT,
             value: 1000
         },
     },
     fragmentShaderText: ` 
         void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {                 

             //当前片元的模型坐标
             vec3 positionMC = fsInput.attributes.positionMC;
             //当前片元的眼睛坐标
             vec3 positionEC = fsInput.attributes.positionEC;
             //当前片元的模型坐标
             vec3 positionWC=(czm_model * vec4(positionMC,1.0)).xyz;
             //当前片元的法线（眼睛坐标系）
             vec3 normalEC = fsInput.attributes.normalEC;
             normalEC=normalize(normalEC);
             //光线方向（眼睛坐标）
             vec3 lightDirection = (czm_view * vec4(u_lightPosition,1.0)).xyz - positionEC;                    
             //光线于法线的夹角（眼睛坐标）
             float a=dot(normalEC,normalize(lightDirection));
             //material.diffuse*=a*u_lightColor;

             //衰减
             float distance=length(lightDirection);
             float b=1.-distance/u_lightRadius;
             b=max(b, 0.);
             if(b > 0.00001 ) {
                 //叠加为颜色值 
                 material.diffuse*=a*u_lightColor*b;
             } else{
                 material.diffuse=vec3(0.,0.,0.);
             }
         }
         `
 })

在这里插入图片描述

5、多光源

实现多光源，只需要将多个光源的颜色进行叠加即可

tileset.customShader = new Cesium.CustomShader({
     // mode: Cesium.CustomShaderMode.REPLACE_MATERIAL,
     lightingModel: Cesium.LightingModel.UNLIT,
     uniforms: {
         u_lightPosition: {
             type: Cesium.UniformType.VEC3,
             value: linghtPosition
         },

         u_lightColor: {
             type: Cesium.UniformType.VEC3,
             value: linghtColor
         },

         u_lightPosition1: {
             type: Cesium.UniformType.VEC3,
             value: linghtPosition1
         },

         u_lightColor1: {
             type: Cesium.UniformType.VEC3,
             value: linghtColor1
         },

         u_lightPosition2: {
             type: Cesium.UniformType.VEC3,
             value: linghtPosition2
         },

         u_lightColor2: {
             type: Cesium.UniformType.VEC3,
             value: linghtColor2
         },

         u_lightRadius:{
             type: Cesium.UniformType.FLOAT,
             value: 1000
         },

         u_lightRadius1:{
             type: Cesium.UniformType.FLOAT,
             value: 1000
         },

         u_lightRadius2:{
             type: Cesium.UniformType.FLOAT,
             value: 1000
         },
     },
     fragmentShaderText: ` 
         void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {                 

             //当前片元的模型坐标
             vec3 positionMC = fsInput.attributes.positionMC;
             //当前片元的眼睛坐标
             vec3 positionEC = fsInput.attributes.positionEC;
             //当前片元的模型坐标
             vec3 positionWC=(czm_model * vec4(positionMC,1.0)).xyz;
             //当前片元的法线（眼睛坐标系）
             vec3 normalEC = fsInput.attributes.normalEC;
             normalEC=normalize(normalEC);

             vec3 finalColor=vec3(0.);
             //光线方向（眼睛坐标）
             vec3 lightDirection = (czm_view * vec4(u_lightPosition,1.0)).xyz - positionEC;                    
             //光线于法线的夹角（眼睛坐标）
             float a=dot(normalEC,normalize(lightDirection));

             //衰减
             float distance=length(lightDirection);
             float b=1.-distance/u_lightRadius;
             b=max(b, 0.);
             if(b > 0.00001 ) {
                 //叠加为颜色值 
                 finalColor=a*u_lightColor*b;
             } else{
                 finalColor=vec3(0.,0.,0.);
             } 

             //光线方向（眼睛坐标）
             lightDirection = (czm_view * vec4(u_lightPosition1,1.0)).xyz - positionEC;                    
             //光线于法线的夹角（眼睛坐标）
             a=dot(normalEC,normalize(lightDirection));


             //衰减
             distance=length(lightDirection);
             b=1.-distance/u_lightRadius1;
             b=max(b, 0.);
             if(b > 0.00001 ) {
                 //叠加为颜色值 
                 finalColor=  mix(  finalColor,  a*u_lightColor1*b ,  0.5  );
             } 


             //光线方向（眼睛坐标）
             lightDirection = (czm_view * vec4(u_lightPosition2,1.0)).xyz - positionEC;                    
             //光线于法线的夹角（眼睛坐标）
             a=dot(normalEC,normalize(lightDirection));


             //衰减
             distance=length(lightDirection);
             b=1.-distance/u_lightRadius1;
             b=max(b, 0.);
             if(b > 0.00001 ) {
                 //叠加为颜色值 
                 finalColor=  mix(  finalColor,  a*u_lightColor2*b ,  0.5  );
             } 

             material.diffuse*=finalColor;
         }
         `
 })

在这里插入图片描述

二、线框扫描效果

要实现线框扫描效果，一种简单的做法是加载两份数据，一份正常显示，一份设置线框模式显示，并且设置显示的范围

在这里插入图片描述

代码：

	 Cesium.Cesium3DTileset.fromUrl(url, {
     debugWireframe: true,
     enableDebugWireframe: true, 
 }).then((result) => {
    let building= viewer.scene.primitives.add(result); 
 })

在这里插入图片描述

设置指定范围内的模型显示，可以通过customShader属性在片元着色器中设置显示的范围

Cesium.Cesium3DTileset.fromUrl(url, {
     debugWireframe: true,
     enableDebugWireframe: true,
     customShader: new Cesium.CustomShader({
         mode: Cesium.CustomShaderMode.REPLACE_MATERIAL,
         lightingModel: Cesium.LightingModel.UNLIT,
         uniforms: {
             u_color: {
                 type: Cesium.UniformType.VEC4,
                 value: Cesium.Color.fromCssColorString("#62809b"),
             },
         },
         fragmentShaderText: ` 
             void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) { 
                 vec3 positionEC = fsInput.attributes.positionEC; 
                 if(positionEC.x >100.&&positionEC.x<200.  ){
                      material.diffuse = u_color.rgb;
                      material.alpha = 1.;
                 }else{
                     discard;
                 } 
             }
             `
     })
 })

在这里插入图片描述

让显示的范围动起来，可以通过变量来控制显示的范围

customShader: new Cesium.CustomShader({
    mode: Cesium.CustomShaderMode.REPLACE_MATERIAL,
    lightingModel: Cesium.LightingModel.UNLIT,
    uniforms: {
        u_range: {
            type: Cesium.UniformType.FLOAT,
            value: 0,
        },
        u_color: {
            type: Cesium.UniformType.VEC4, 
            value: Cesium.Color.fromCssColorString("#62809b"),
        },
    },
    fragmentShaderText: ` 
        void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) { 
            vec3 positionEC = fsInput.attributes.positionEC; 
            if(positionEC.x >u_range&&positionEC.x<u_range+400.  ){
                 material.diffuse = u_color.rgb;
                 material.alpha = 1.;
            }else{
                discard;
            } 
        }
        `
})

通过u_range变量控制显示的范围，需要不断改变范围的值

let value = 20;
 viewer.scene.postUpdate.addEventListener((scene, time) => { 
     if (building.customShader.uniforms.u_range.value < -5000) {
         value = 20;
     } else if (building.customShader.uniforms.u_range.value > 5000) {
         value = -20;
     }
     building.customShader.uniforms.u_range.value += value;
 })

在这里插入图片描述

cesium 光锥（发光锥体图元效果）
God's asylum的博客
05-05 1193
图形分为四个实体来解决分级别为圆锥、圆锥外围移动小点点、底部发光圆框、底部旋转虚线，分别采用图元加载方法进行加载，修改其中的材质就可以个出现效果了。底部旋转虚线和圆锥外围发光点采用canvas来进行编写。
Cesium gltf模型添加发亮效果（视频）
地理信息技术杂谈 博客，欢迎技术交流
03-25 2325
https://mp.weixin.qq.com/s/AbogfhrLy41gUKgjhOLNfw
Cesium材质特效
【cacrle】的博客
01-27 2987
现有的gis开发方向较流行的是webgis开发，其中Cesium是一款开源的WebGIS库，主要用于实时地球和空间数据的可视化和分析。它提供了丰富的地图显示和数据可视化功能，并能实现三维可视化开发。本文将使用一些特殊的材质，如视频材质、自定义材质和Cesium内置的一些特殊效果类、粒子系统等实现一些特效场景的模拟，包括云、雾、动态水面、雷达扫描、流动线、电子围栏、粒子烟花、粒子火焰及粒子天气等。
cesium入门
最新发布
Seven_Ting的博客
06-14 403
cesium入门。
cesium 粒子特效
02-03 2296
鼠标左键单击实现添加 粒子特效，右击停止添加 代码如下： function fireadd() { var firejingdu = 116.6554885; var fireweidu = 39.5454545; var fireheight = 0; var firedata; var boolen = true; //获取事件触发所在的 html Canvas容器 firecanvas = viewer.scene.canvas; var handler = new Cesium.S
cesium 效果
dagedezhiyin的博客
10-27 308
【代码】cesium 效果。
cesium常见特效之：从上角度，绕地面旋转漫游
happy81997的博客
02-28 696
cesium常见特效之：从上角度，绕地面旋转漫游。
cesium对模型进行光着色实现
weixin_42496466的博客
02-09 2339
一、cesium中光类型 方向光和太阳光 二、光的着色渲染代码实现 三、实现效果 太阳光不同着色效果 方向光的着色 如果对您有帮助 感谢支持技术分享，请扫码点赞支持： 技术合作交流qq:2401315930 ...
【Cesium动画高阶】：底图与地形切换动画效果的高级实现技巧
[【Cesium动画高阶】：底图与地形切换动画效果的高级实现技巧](https://opengraph.githubassets.com/e2a108a66a04be37bac3b1e87a7812979720072188ec45cb3d5082d1b529bcb2/wangzhongliang/cesium-terrain-push) ...
Cesium智慧城市特效(1)
weixin_45412353的博客
05-10 1489
【代码】Cesium智慧城市特效(1)
Cesium粒子特效js封装（火焰、水枪、爆炸、喷雾、烟），包含demo图片
yopo_AG的博客
09-01 9420
Cesium粒子特效js封装（火焰、水枪、爆炸、喷雾、烟），包含demo图片
Cesium实现建筑物泛光特效，使用自定义shader实现源码
04-26
很多Cesium的特效都是非常绚丽的，最近看到的是蓝色的炫光特效，非常的好看，研究了一下原来是通过自定义shader实现的，具体的可执行源码，直接在Cesium官方的沙盒里就能看到效果，需要的拿去吧，如果有问题可以私信我。
Cesium 点选3DTiles泛光特效
北京-giser的博客
07-12 731
Cesium 点选3DTiles泛光特效
Cesium 实现模型辉光
qq_34504481的博客
07-03 363
Cesium 模型辉光。
Cesium特效案例展示 持续更新...
qq_38621116的博客
07-01 3064
cesium案例集合持续更新，大概每周更新一次，欢迎同道中人一起学习gitee-shanbai
第52节：cesium 3DTiles模型特效+选中高亮（含源码+视频）
qq_29384639的博客
09-17 2411
cesium 3DTiles模型特效+选中高亮，自定义着色器，泛光
Cesium特效-2021年汇总
wzwxwc1987的专栏
05-30 2806
2021年使用cesium开发的一些效果 2-垂直发光飞线 3-发光扩散圆 4-立体扩散圆柱 5-平面流动发光线 6-地理围栏的4种效果
Cesium 模型光源
阿叁博客
12-29 1974
viewer.scene.light = new Cesium.DirectionalLight({ //去除时间原因影响模型颜色 direction: new Cesium.Cartesian3(0.35492591601301104, -0.8909182691839401, -0.2833588392420772) })
Cesium特效——城市白模的科技动效的各种效果
niuge8905的博客
01-22 675
注意事项：采用其他方式可能导致白模贴地，从而导致不能实现该效果，例如把步骤二的服务地址改为里的3dtiles服务，就不能实现效果图里的效果。原因是cesiumlib生成的白模服务本质上是错误的，是都在一个平面上。所以为保证精确度，场景需要小一些。设置拉伸高度。
Cesium粒子特效喷泉模型与代码详解
资源摘要信息:"Cesium粒子特效喷泉特效代码及模型.zip"是一个包含丰富的3D可视化资源的压缩包，它专注于通过WebGL技术实现粒子特效，特别是喷泉效果的展示。WebGL（Web图形库）是一种JavaScript API，用于在不需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cesium进阶学习

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值