Cesium tileset 建筑物贴纹理
Cesium tileset 建筑物贴纹理
- cesium加载tileset
- tileset 设置颜色
- tileset设置customshader
- 理解customshader里面的一些变量代表的意思
cesium加载tileset
//这一句代码非常重要，不然自定义的渲染不会生效Cesium.ExperimentalFeatures.enableModelExperimental = true // 必须将这个设为true才能惊醒自定义shadervar tilesets = this.viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: "Assets/tilesetsWhrite/tileset.json",name: '3Dtiles',// url: this.urls + '/CQKSHMAP/tileset.json',dynamicScreenSpaceErrorDensity: 0.1,// maximumScreenSpaceError: 128, // 默认值16 用于提高细节细化级别的最大屏幕空间错误maximumNumberOfLoadedTiles: 10000000}))
tileset 设置颜色
这里可以设置整体颜色，也可以根据条件来设置颜色，虽然等下建筑物会进行贴图，但是你设置颜色还是会有效果的，会改变建筑物的整体颜色
tilesets.readyPromise.then(tileset => tileset.style = new Cesium.Cesium3DTileStyle({color: {conditions: [// ['${floor} >= 5', "color('rgb(42, 160, 224)',1)"],// ['${floor} >= 5', 'rgba(255, 255, 255,1)'],['true', "color('rgb(18, 66, 93)',1)"]// ['true', 'color("#C1D8F5",1)']// ['true', "color('rgb(42, 160, 224)',1)"]]}})// viewer.flyTo(tileset);})
tileset设置customshader
var customShader = new Cesium.CustomShader({// lightingModel: Cesium.LightingModel.UNLIT,// lightingModel: Cesium.LightingModel.PBR,//设置变量，由顶点着色器传递给片元着色器varyings: {v_normalMC: Cesium.VaryingType.VEC3,v_st: Cesium.VaryingType.VEC3},//外部传给顶点着色器或者片元着色器uniforms: {u_texture: {value: new Cesium.TextureUniform({url: '/Assets/Images/buildWall.jpg'}),type: Cesium.UniformType.SAMPLER_2D},u_texture1: {value: new Cesium.TextureUniform({url: '/Assets/Images/buildWall1.jpg'}),type: Cesium.UniformType.SAMPLER_2D}},//贴纹理//顶点着色器//将法向量从顶点着色器设置变量传给片元着色器vertexShaderText: `void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput) {v_normalMC = vsInput.attributes.normalMC;v_st=vsInput.attributes.positionMC ; }`,//片元着色器fragmentShaderText: `void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {vec3 positionMC = fsInput.attributes.positionMC;//这里是设置要贴图的图片的尺寸，设置小了会重复float width = 37.0;float height = 40.0;vec3 rgb;//这是是设置了屋顶的颜色，当和法向量平行时，就是屋顶，这里设置0.95，相当于垂直，建筑物四周开始贴图if (dot(vec3(0.0, 1.0, 0.0), v_normalMC) > 0.95) {material.diffuse = vec3(1.0, 0.0, 0.0);} else {float textureX = 0.0;float dotYAxis = dot(vec3(0.0, 0.0, 1.0), v_normalMC);// cos(45deg) 约等于 0.71，这里是建筑物四周的向量与法向量会大于四十五度夹角if (dotYAxis > 0.71 || dotYAxis < -0.71) {//x代表的是前后面textureX = mod(positionMC.x, width) / width;} else {//z代表的是左右面textureX = mod(positionMC.z, width) / width;}float textureY = mod(positionMC.y, height) / height;//我这里是根据建筑物高度贴了两张不同的图片if (positionMC.y > 30.0) {rgb = texture2D(u_texture1, vec2(textureX, textureY)).rgb; } else {rgb = texture2D(u_texture, vec2(textureX, textureY)).rgb;}material.diffuse = rgb;}}` })tilesets.customShader = customShader
理解customshader里面的一些变量代表的意思
这个表可以在https://github.com/CesiumGS/cesium，链接是下图，可以自己去看看
最终结果
注：有时候自己tileset的高度不一定就是position.z，就像我这次的，垂直方向是y，所以要具体情况具体分析，可以更改代码中的xyz的值来达到此效果，具体为什么作者暂时还没有搞清楚，请谅解
Cesium tileset 建筑物贴纹理相关推荐
- Cesium实现建筑物泛光特效，使用自定义shader实现源码
自从Cesium1.87以后的版本,提供了方便的自定义shader的接口,从而不用修改源码,就可以方便的实现很多自定义的特效,这对Cesium的从业人员来说是一个极大的好消息,所用到的接口是 Cesi ...
- cesium 3d建筑物光效 泛光实体
cesium 3d建筑物光效 泛光实体 以下为源码,直接复制粘贴就好 export default class Tilesets {constructor(val) {this.viewer = va ...
- Cesium 可变高度+动态纹理水体
Cesium 可变高度+动态纹理水体 由于任务中的需求,要求使用primitive实体配合动态纹理并且可以进行高度变化,实现一种动态水体的效果. 删除原实体重新添加新实体的方法会影响系统观感. 动态纹 ...
- Cesium立体建筑物闪烁效果
Cesium立体建筑物闪烁效果 实现效果 详情参见 Cesium实战项目
- cesium实现建筑物渐变颜色与动态光环效果
文章目录 1.实现效果 2.实现方法 Cesium实战系列文章总目录: 传送门 1.实现效果 2.实现方法 在常见的可视化过程中,建筑白模一般按楼层高度设色,颜色单一不够美观,这里使用渐变色设置建筑物 ...
- Cesium实现建筑物单体化（分栋分层）
单体化的方式有很多种:切割单体化.重建单体化,本文所介绍的方法为叠加单体化(简单). 基本原理为:对于模型中的每个建筑,事先准备好相应的矢量面数据:在场景中单击模型时,通过获取单击位置的坐标,进而查询 ...
- cesium城市建筑物贴图（地图数据篇.12）
听老人家说:多看美女会长寿 地图之家总目录(建议先查看该内容) 1:全国3D建筑物轮廓可通过bigemap进行下载(该软件收费) 测试数据下载: https://download.csdn.net/d ...
- 23.（cesium之家）cesium城市建筑物光效
听老人家说:多看美女会长寿 cesium之家总目录(订阅之前建议先查看该博客) 文章末尾处提供保证可运行完整代码包,运行如有问题,可"私信"博主. 效果如下所示: 下面献上完整代码 ...
- 23.（cesium篇）cesium城市建筑物光效
地图之家总目录(订阅之前请先查看该博客) 地图之家:cesium+leaflet+echart+地图数据+地图工具等相关内容的介绍 文章末尾处提供保证可运行完整代码包,运行如有问题,可"私信 ...
- cesium城市建筑物光效（cesium篇.23）
听老人家说:多看美女会长寿 地图之家总目录(建议先查看该内容) 文章末尾处提供保证可运行完整代码包,运行如有问题,可"私信"博主. 效果如下所示: 下面献上完整代码,代码重要位置会 ...
最新文章
- 独家｜深度学习训练和推理之间有什么差异？
- final finally finalize 的区别
- selenium webdriver你使用的是不受支持的命令行标记
- 文件系统管理 之 Linux 查看磁盘分区、文件系统、使用情况的命令和相关工具介绍...
- Spark Streaming（二）Flume
- How to create and apply a patch with Git
- c# DES 加密解密方法
- AS报Failed to resolve: junit:junit:4.12错误正确的解决方法
- javascript HTMLMediaElement
- Actor-Critic：强化学习中的参与者-评价者算法简介
- Spring @Validate 报 :No validator could be found for type 异常解決
- mangos新手教程 - 服务器配置文件中文说明
- PCIe中断--INTx
- 【JAVA今法修真】 第五章 练气百日，筑基三年
- 创建型模式：工厂方法
- 【渝粤题库】广东开放大学 标准文献检索与应用 形成性考核
- 如何应对火车站强行乞讨的小孩
- 使用canvas实现黑客帝国数字雨
- 能在多种前端框架下使用的表格控件
- 苹果iOS13系统升降机(图文教程)