1 Star 29 Fork 11

CesiumLearn / cesium-volume-rendering

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

基于Cesium的体渲染使用说明

简介

在Cesium的基础上实现体渲染功能

源码使用方法

  1. 安装 npm install

  2. 调试 npm run dev

  3. 打包 npm run build

示例说明

示例代码使用讲解

示例代码请参考scripts/index.js文件。

js文件引入

引入parseCsv.js/VolumeRendering.js以后,VolumeRendering/parseCsv为全局变量, VolumeRendering是一个Cesium的图元,可以直接加入到scene当中去使用 parseCsv是一个函数,用来解析csv数据

html代码:

    <script src="./scripts/parseCsv.js"></script>
    <script src="./scripts/VolumeRendering.js"></script>

js代码:

const VolumeRendering = window.VolumeRendering;
const parseCsv = window.parseCsv;

csv数据解析

加载完成后对csv数据进行解析, csv文件必须符合结构必须是:前三个字段表示x/y/z即位置,后面的字段各自表示某个时刻的数值

buffers为buffer的数组,每个元素都代表着某个时刻的所有体渲染数据

stpProperty 这是创建体渲染需要用到的参数,用来表示x/y/z轴的使用顺序,shader中使用,不用理解,后面直接赋值就好

minCartesian, maxCartesian 分别代表csv中数据的最小位置,最大位置,创建的体渲染需要这两个参数决定体渲染的大小

const { buffers, stpProperty, minCartesian, maxCartesian } = parseCsv(text);

体渲染图元的创建

VolumeRendering是一个Cesium的图元类。使用方法如下:

// 创建体渲染模型,其中的属性minCartesain/maxCartesian/stpProperty是从parseCsv获取到的
var vr = viewer.scene.primitives.add(new VolumeRendering(viewer.scene));
vr.modelMatrix = enuMatrix; // 设置渲染体在地球上的什么位置,如何摆放
vr.minCartesain = minCartesian; // 确定渲染体的最小位置点
vr.maxCartesian = maxCartesian; // 确定渲染体的最大位置点
vr.stpProperty = stpProperty; // 确定shader中xyz的顺序,一般情况下不要修改,直接使用parseCsv获取得就好
vr.show = true; // 是否可见
vr.stepSize = 0.1; // 迭代步长,单位米,如果太小,会影响性能,如果太大,显示效果会不好
vr.maxSteps = 10000; // 迭代总次数,一般情况下不要修改,越小,性能越好,但是显示效果会变差

vr.gradientCanvas.colorStops = [ // 修改色带,范围在0到1之间
    [0.0, "rgba(0, 255, 0, 0.1)"],
    [0.5, "rgba(0, 0, 255, 0.5)"],
    [0.7, "rgba(255, 255, 0, 1.0)"],
    [1.0, "rgba(255, 0, 0, 1.0)"],
];

// 对应csv中所描述属性的最小值,注意minIntensity的位置,会用色带中位置0处的颜色,如果csv中有数值小于minIntensity,则会强制设置为minIntensity
vr.minIntensity = 0.0;

// 对应csv中所描述属性的最大值,maxIntensity对应色带中位置为1.0的颜色,如果csv中有数值超过maxIntensity,则会强制设置为maxIntensity
vr.maxIntensity = 100.0;

vr.blendAlpha = 0.8;

// vr.blendAlpha(buffer) // buffer为Uint8Array类型数组,长度是固定的:1024*1024*4,请使用parseCsv中获取到得进行赋值
window.vr = vr;

空文件

简介

基于Cesium的体渲染 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/CesiumLearn/cesium-volume-rendering.git
git@gitee.com:CesiumLearn/cesium-volume-rendering.git
CesiumLearn
cesium-volume-rendering
cesium-volume-rendering
master

搜索帮助