[cesium] | 3dTilset建筑物 | 模型 | Shader 泛光涟漪特效

最新推荐文章于 2023-05-20 01:37:41 发布
最新推荐文章于 2023-05-20 01:37:41 发布
阅读量4.3k 收藏 17
点赞数
分类专栏： GIS开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40902527/article/details/108256797
版权

效果比较简单，修改了一点源码，还可以再加一些其他的shader，后续上传github

在线查看

效果

 

github地址：传送门

啊嘞嘞嘞嘞
关注
  • 0
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
cesium加载城市白膜数据，并给建筑物设置动态光效
元仙僧的博客
05-22 567
cesium加载城市白膜数据，根据高度设置不同建筑物颜色，并给建筑物设置动态光效
Cesium-CustomShader给3dtiles加贴图
weixin_44212242的博客
04-12 4047
使用CustomShader为改变3dtiles渲染效果
Cesium实现建筑物泛光特效，使用自定义shader实现源码
liyan_gis的专栏
05-11 4887
自从Cesium1.87以后的版本，提供了方便的自定义shader的接口，从而不用修改源码，就可以方便的实现很多自定义的特效，这对Cesium的从业人员来说是一个极大的好消息，所用到的接口是 Cesium.CustomShader 先看效果吧： 具体代码可参考： Cesium实现建筑物泛光特效，使用自定义shader实现源码_cesium点光源-Javascript文档类资源-CSDN下载 new Cesium.CustomShader(options) vertextShader.
Cesium 1.87+实现建筑泛光效果
u011115373的博客
02-16 4302
Cesium 3dtiles建筑泛光效果 <!DOCTYPE html> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <ti
[cesium] 基于Cesium的动态泛光效果示例
热门推荐
啊嘞嘞的博客
07-28 2万+
抽空将之前的功能单独抽出来写成一个模块，方便单独调用，配合单个模块写了一些示例 可以兼容各个基于cesium底层库的三方框架，引入即可。 效果 动态泛光墙 泛光面 城市泛光线 其他示例 三维效果和功能 在线地址：传送门 ...
cesium 3d建筑物光效 泛光实体
God's asylum的博客
02-09 1345
cesium城市泛光特效，直接复制即可
Cesium实现建筑物轮廓三维模型泛光特效源码
04-13
这个效果是很多的小伙伴想要达到的，现在源代码整理好了，需要的可以下载了，具体有什么问题可以私信我
24.（cesium篇）cesium建筑物3DTile单体化.zip
06-08
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“24.（cesium篇）cesium建筑物3DTile单体化”。如下载有问题，可联系博主。 解压密码：cesium
23.（cesium篇）cesium城市建筑物光效.zip
06-08
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“23.（cesium篇）cesium城市建筑物光效”。如下载有问题，可联系博主。 解压密码：cesium
Cesium粒子特效喷泉特效代码及模型.zip
08-08
基于webgl开发的粒子特效,喷泉效果,包括喷泉的gltf模型,粒子图片以及完整vue组件代码
Cesium 3Dtiles加载建筑
03-01
Cesium 3Dtiles加载建筑 建筑渐变色 动态光线，自定义Shader纹理，适合cesium1.87版本以上，因为1.87版本增加了CustomShader，此文档为html，引用了在线cesium cdn，可直接运行，网上版本都是一段一段的，没有基础的...
Cesium 加载实景三维模型 优化建议
泽洋数字有限公司的钱奴
01-25 6421
关于通过谷歌浏览器通过Cesium底层添加实景三维都会存在，谷歌浏览器内存回收机制，这个问题官方一直没有解决了。我可以根据一些参数进行调整一下，我这套方案，本人亲测有效，加载模型速度快，而且当你相机视角达到某个高度的时候或者移走的时候，他会自动回收，一点不占内存 建议用异步方式和设置一些官方参数加载模型： var tileset = new Cesium.Cesium3DTileset({ url:url, skipLevelOfDetail: true,
Supermap/Cesium 开发心得----动态散点图（波纹点/涟漪点）
YOOSHIN的博客
11-13 1729
在二维开发中,openlayers4 入门开发系列结合 echarts4 实现散点图，下图是GIS之家的效果图，那么在三维中，则可借助Entity来变相构造下图的效果。 思路： 构造实体ellipse，造一个用作实心中心区域的表征位置，再造两个圆，控制他们的半径动态变化，然后轮回播放，这其中涉及的是 Cesium.CallbackProperty Cesium.Image...
Cesium中对3D数据集进行体渲染展示
weixin_43481439的博客
10-27 2645
传统意义上我们构建模型都是通过构建物体的外表面去实现的，例如通过三角面构建模型，或者通过方程的形式构建隐式的表面模型。而体渲染则是通过 3d 数据集渲染物体的一种方式，典型的 3D 数据集是医学领域上的 CT，CT 是一组 2d 的切片图像（例如，每毫米深度进行一次切片），因此 3D 数据集也可以理解成一组存放 2d 贴图的数组。通过 3D 数据集可以渲染出具有内部信息的模型。
Cesium建筑自定义光源效果
rpgpp55的博客
04-10 4536
const customShader = new Cesium.CustomShader({ lightingModel: Cesium.LightingModel.UNLIT, uniforms: { u_cameraDirectionWC: { type: Cesium.UniformType.VEC3, value: WE.viewer.scene.camera.positionWC, }, u_lightCol...
cesium中如何添加自定义材质，编写shader
webMinStudent的博客
05-20 1814
cesium中提供了接口，让我们开发者在cesium中编写底层的shader着色器代码，达到一些酷炫的效果fabric : {} ` } })最简单的模板就是这样，source是glsl的源代码，这里定义了一个函数czm_getMaterial，在后续的代码中会调用这个czm_getMaterial函数，这个函数返回了一个材质，我们只有将这个material，的一些属性进行修改即可。例如:diffusealpha至于这些属性表示什么意思，需要查看cesium对这块的文档说明。
cesium加载S3M白膜，通过分层设色实现渐变效果，设置点光源
weixin_39150852的博客
05-12 4548
var hyp = null; var layer = null; //加载白膜 function fnOpenSCENE() { var promise = scene.open('http://www.supermapol.com/realspace/services/3D-CBDbuilding/rest/realspace'); Cesium.when.all(promise, function () { //切换视角至模型位置 scene.camera.setView({
cesium 发光建筑模型
最新发布
06-08
在 Cesium 中创建发光建筑模型的基本思路是，将建筑模型的外表面和内部空间分别用不同的材质进行渲染，其中外表面使用普通材质，内部空间使用发光材质。具体实现步骤如下： 1. 加载建筑模型 首先，你需要加载一个建筑模型，你可以使用 glTF 或者其他格式的模型。Cesium 提供了 `Cesium.Model` 类用于加载和显示模型。例如，以下代码加载了一个 glTF 格式的建筑模型： ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame( Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 0.0)); var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({ url: 'path/to/model.gltf', modelMatrix: modelMatrix })); ``` 2. 定义发光材质 接下来，你需要定义一个发光材质，并将其应用于建筑模型的内部空间。Cesium 提供了 `Cesium.GlobeSurfaceShaderSet` 类用于创建和管理地球表面使用的着色器程序，你可以使用 `Cesium.GlobeSurfaceShaderSet.buildPolylineFS` 方法创建一个发光材质的着色器程序。例如，以下代码定义了一个发光材质： ```javascript var glowMaterial = new Cesium.Material({ fabric: { type: 'PolylineGlow', uniforms: { color: new Cesium.Color(0.0, 1.0, 0.0, 1.0), glowPower: 0.5, taperPower: 0.0 } } }); ``` 其中，`PolylineGlow` 是 Cesium 内置的一个发光材质类型，`color` 属性指定了发光的颜色，`glowPower` 属性指定了发光的强度，`taperPower` 属性指定了发光的渐变程度。 3. 应用发光材质 最后，你需要将发光材质应用于建筑模型的内部空间。你可以使用 `Cesium.Model` 对象的 `getNodeByName` 方法获取建筑模型中的某个节点，并使用 `Cesium.MaterialProperty` 对象将发光材质应用到该节点上。例如，以下代码将发光材质应用到建筑模型中名为 "Interior" 的节点上： ```javascript var interiorNode = model.getNodeByName('Interior'); interiorNode.material = new Cesium.MaterialProperty(glowMaterial); ``` 现在，你可以在 Cesium 中创建一个发光建筑模型了。注意，由于发光材质需要使用着色器程序实现，因此需要 GPU 支持。某些移动设备或者低性能的计算机可能无法正常显示发光效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值