Cesium高级教程-自定义光源-光照原理

于 2024-11-05 20:59:10 发布
阅读量421 收藏 8
点赞数 4
分类专栏： Cesium高级教程 文章标签： cesium教程 cesium xt3d cesium高级教程 cesium进阶教程 cesium自定义光源 cesium点光源
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xietao20/article/details/143527268
版权

Cesium高级教程-自定义光源-光照原理

光照原理

关于光照原理可以参考WebGL编程指南 第八章的相关内容，里面有非常详细的介绍。本章的重点在于如何在Cesium中去实现，而不是研究光照的原理，要看原理随便百度一下文章多如牛毛。

在这里插入图片描述

获取 WebGL编程指南 可以百度搜索下载电子版，或者联系作者获取

在这里插入图片描述

在编程世界中，所有抽象的问题最后最会都可以转变为数学公式的表达，以点光源为例，计算公式为 最后的颜色=光源颜色 x 物体基底色 x（ 光线方向 . 物体法线 ），所以如果要在Cesium中实现点光源，首先需要弄明白公式中每个参与运算的变量是什么？如何获取？

运算变量

最后的颜色：计算结果 RGBA

光源颜色：光的颜色 RGBA

物体基底色：即物体自有的颜色 RGBA

光线方向：光源到片元的方向（向量）XYZ

物体法线：物体表面法线（向量）XYZ

在Cesium中实现

整个计算过程是在片元着色器中进行的，在Cesium实现可以有多中方式，比如您可以通过自定义材质属性MaterialProperty在实体中进行实现，也可以通过外观Appearance在图元中实现，但是最常见的是在Cesium3DTileset和后处理中实现，因为在实体和图元中实现光源的意义不大。

在这里插入图片描述

在后处理中实现的优势是光源作用于整个场景内容，不需要每个物体都进行单独处理。但是在Cesium3DTileset中实现也很常见，因为有时可能就只想添加模型的灯光想效果，其他地方不需要处理。

接下来我们以点光源为例，分别介绍在Cesium3DTileset和后处理中实现的过程。

更多内容见 Cesium高级教程-教程简介

xt3d
关注
专栏目录
Cesium 实战 - 模型亮度调整（解决模型非常暗的问题）
linzi19900517的博客
05-22 5166
Cesium 实战 - 模型亮度调整（解决模型非常暗的问题）。
Cesium基础-（Entity）-（model ）
最新发布
纸飞机的旅行的博客
11-12 18
addModel。
cesium添加灯光扫描
Chou_Junn的博客
06-12 7800
var viewer=ysc.createNormalCesium("cesiumContainer",{ globalImagery:"天地图"//天地图影像 }); var data={ circle:[0.003,117,35,30]// 第一个参数 0.003表示半径，第二个第三个分别表示底座圆心的坐标,第四个表示切割成多少个点。组成多少个面。越多会越卡 尽量实际项目...
Cesium高阶学习十一、模型特效
程迷学习的博客
10-11 743
Cesium高阶学习十一、模型特效
Cesium 使用着色器实现点光源
kuyewb的专栏
09-22 2411
可设置点光源位置，颜色，使用自定义着色器，混合3DTileset，实现点光源效果。
cesium 场景点光源
北京-giser的博客
01-17 791
cesium 场景点光源
Cesium中实现多光源
weixin_43481439的博客
02-04 3196
Cesium中实现延迟渲染多光源
cesium加载S3M白膜，通过分层设色实现渐变效果，设置点光源
weixin_39150852的博客
05-12 4816
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-threejs-experiment
07-27
在这个"cesium-threejs-experiment"项目中，开发者可能在尝试利用Three.js的某些高级特性，如更灵活的几何形状、动画系统或自定义着色器，来增强Cesium的基础功能。他们可能已经成功地将Three.js对象嵌入到Cesium的...
Cesium实现建筑物泛光特效，使用自定义shader实现，含全部
liyan_gis的专栏
10-20 1700
从Cesium1.87以后的版本，提供了方便的自定义shader的接口，从而不用修改源码，就可以方便的实现很多自定义的特效，这对Cesium的从业人员来说是一个极大的好消息。
【超图+CESIUM】【基础API使用示例】02、超图｜CESIUM初始化场景与销毁场景
汪同学丶的博客
02-24 3189
前言 缺少前置学习使用资料，请自行查阅：[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.csdn.net/weixin_44402694/article/details/123110136) 以下示例使用到的公共静态资料，不建议下载，建议官网自行下载超图Build资源，示例所涉及图片会在示例使用到时提供出来。如有需要可下载：[https://download.csdn.net/download/
Cesium实现建筑物泛光特效，使用自定义shader实现源码
04-26
很多Cesium的特效都是非常绚丽的，最近看到的是蓝色的炫光特效，非常的好看，研究了一下原来是通过自定义shader实现的，具体的可执行源码，直接在Cesium官方的沙盒里就能看到效果，需要的拿去吧，如果有问题可以私信我。
实现读取高度图，设置点光源设置材质
10-18
1、创建Win32工程，实现基本的程序框架。渲染逻辑、清除资源各占5分 2、读取高度图3、将高度图数据加载到缓冲区 4、在网格中使用高度图 5．正确渲染地形网格对象 6、计算网格法线7、设置材质 8、设置点光源。
手把手教你实现聚光灯效果
ThingJS的博客
07-06 2773
聚光灯是一种特殊的点光源，它能够朝着一个方向投射光线。聚光灯投射出的是类似圆锥形的光线，这与我们现实中看到的聚光灯是一致的。其灯光从一点发出，沿着某一个方向照射出一个锥形光照范围。聚光灯近似于一个有夹角范围限定的点光源。聚光灯可用于数字孪生可视化场景中模拟舞台、汽车车头灯，手电筒，台灯等光源效果，可添加至3D容器、摄像机等对象下方，对其中所有对应的数字孪生可视化对象生效。 在数字孪生可视化场景中因为项目需要聚光灯是最常使用的光源之一，特别是如果我们想要使用阴影的话也需要用到聚光灯。ThingJS内的聚光灯
[cesium] | 模型光照 | PBR光照
啊嘞嘞的博客
10-28 6547
基于3dtilset的光源效果 效果 点光源 聚光源
Cesium点光源
u011454763的博客
08-17 1988
通过CustomShader写入点光源特效
cesium给自定义的区域添加高亮
qq_37741863的博客
09-21 6606
cesium添加自定义高亮区 目前的需求是在cesium地图上将指定的河流添加上颜色进行高亮显示，此方法可以实现任意流域高亮 有两种方法可以实现： 1.用google earth绘制出指定流域的边界，再导出成***.kmz格式的文件，用官方的API引入文件就可以显示出，自行下载，此方法搜索功能有问题用不了 var options = { camera : viewer.scene.camera, ...
【Cesium】调整3dtiles模型的光照
ximi2231的博客
10-14 5090
在网上查了一些代码，Cesium的光照效果的设置是通过webgl修改白膜的材质来实现的，由于巷道本身有贴图材质，用该方法实现的效果不好。最近有个项目需要把掘进车放到巷道里面，加载出来的效果一片漆黑，看不清模型细节。由于Cesium中材质没有自发光的设置，所以只能设置光源。设置光照角度跟随摄像机视角，并实时刷新光照角度。
Cesium教程番外篇--自定义Geometry（一）
05-31
好的，您想了解有关自定义几何体的内容，我很乐意为您解答。首先，让我们了解一下什么是几何体。 在Cesium中，几何体是由一些点、线和三角形组成的图形。几何体可以在地球上显示各种形状的物体，如建筑、飞机、汽车等。Cesium提供了一些内置的几何体，如BoxGeometry、CylinderGeometry、SphereGeometry等，但是有时候我们需要展示一些特殊形状的物体，这时候就需要自定义几何体了。 下面是一个简单的自定义几何体的例子： ```javascript var geometry = new Cesium.Geometry({ attributes: { position: new Cesium.GeometryAttribute({ componentDatatype: Cesium.ComponentDatatype.DOUBLE, componentsPerAttribute: 3, values: new Float64Array([ 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, 0.0, 0.0, 1.0, 0.0 ]) }) }, indices: new Uint16Array([ 0, 1, 2, 0, 2, 3 ]), primitiveType: Cesium.PrimitiveType.TRIANGLES }); ``` 这个例子中，我们创建了一个由四个点组成的矩形，并用这些点的索引定义了两个三角形。这个几何体可以用来在地球上显示一个矩形。 接下来，让我们逐步了解这个例子中的代码。首先是Cesium.GeometryAttribute。 Cesium.GeometryAttribute是几何体属性的容器。在这个例子中，我们定义了一个名为position的属性，它有三个分量：x、y和z。这个属性使用的数据类型是Cesium.ComponentDatatype.DOUBLE，表示每个分量有一个双精度浮点数。componentsPerAttribute表示每个属性有几个分量。在这个例子中，每个属性都有三个分量。最后，我们用一个Float64Array数组来定义这个属性的值。 接下来是indices，它定义了几何体使用哪些点来组成三角形。在这个例子中，我们定义了两个三角形，每个三角形使用三个顶点。在indices数组中，我们用顶点在attributes数组中的索引来定义每个三角形。 最后，我们定义了几何体的primitiveType，它表示几何体的类型。在这个例子中，我们使用的是三角形类型，所以primitiveType为Cesium.PrimitiveType.TRIANGLES。 希望这个例子可以帮助您更好地理解自定义几何体的实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

xt3d

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

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

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

打赏作者

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

抵扣说明：

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

余额充值