Potree中文教程【三】 -- Potree的基本功能 -- EDL

Potree的基本功能 – EDL

Eye-Dome Lighting(EDL)是一种非逼真、基于图像的着色技术,旨在改善科学可视化图像中的深度感知。它依赖于使用 GLSL 着色器在 GPU 上实现的高效后处理通道,以实现交互式渲染。仅需要投影深度信息来计算阴影函数,然后将其应用于彩色场景图像。

Potree中的EDL改编自CloudCompare源码,其主要作用是凸显点云中的深度信息。

功能介绍

可通过侧边栏设置EDL相关的参数,或通过API进行设置。

Enable:开启或关闭EDL

Radius:阴影半径

Strenght:阴影强度

Opacity::整体透明度

对比

依然是viewer.html这个示例,下面两张图将对比出是否开启EDL的区别,图一为开启EDL,图二为关闭EDL。
请添加图片描述

请添加图片描述

很明显,图一在阴影的作用下更加的体现了三维点云在深度上的差异。

API

Class:Potree.Viewer

方法

  • 开启或关闭EDL:setEDLEnabled
  • 修改EDL阴影半径:setEDLRadius
  • 修改EDL阴影强度:setEDLStrength
  • 修改EDL整体透明度:setEDLOpacity

实践

将示例viewer.html中EDL默认修改为开启状态,并设置强度为5.0

// before
...
viewer.setEDLEnabled(false);
...

// after
viewer.setEDLEnabled(true);
viewer.setEDLStrength(5);

请添加图片描述

好的,这里提供一个更详细的示例来演示如何在Vue中使用`potree-core`库来渲染点云数据,并对一些常用的配置进行详细说明。 首先,你需要在Vue组件中引入`potree-core`库: ```javascript import * as Potree from 'potree-core'; ``` 然后,你需要在Vue组件的`mounted`生命周期钩子中创建一个`potreeViewer`对象,并将其添加到HTML页面中: ```javascript mounted() { // 创建potreeViewer对象 const potreeViewer = new Potree.Viewer(this.$refs.viewer); // 设置视角 potreeViewer.setFOV(60); // 设置视场角,单位为度 potreeViewer.setPointBudget(1_000_000); // 设置点数预算,超过预算的点将不会被渲染 potreeViewer.setEDLEnabled(false); // 设置是否开启EDL(Eye-Dome Lighting)效果 potreeViewer.setPointSize(1); // 设置点的大小,单位为像素 // 加载点云数据 Potree.loadPointCloud('/path/to/pointcloud', 'pointcloud', e => { const pointcloud = e.pointcloud; potreeViewer.scene.addPointCloud(pointcloud); // 自适应相机视角 const bs = pointcloud.pcoGeometry.tightBoundingBox; const node = { name: 'auto_view', position: bs.getCenter(new THREE.Vector3()), target: pointcloud.pcoGeometry.boundingBox.getCenter(new THREE.Vector3()) }; potreeViewer.scene.view.position.copy(node.position); potreeViewer.scene.view.lookAt(node.target); }); // 添加potreeViewer对象到HTML页面中 this.$refs.viewer.appendChild(potreeViewer.renderer.domElement); } ``` 这里的`$refs.viewer`是指向HTML页面中的一个`<div>`元素的引用。在上面的代码中,我们创建了一个`potreeViewer`对象,并将其渲染到HTML页面中的`<div>`元素中。然后,我们使用`Potree.loadPointCloud()`方法加载点云数据,并将其添加到`potreeViewer`对象的场景中。 下面,我们对一些常用的配置进行详细说明: - `setFOV(fov)`:设置视场角,单位为度。`fov`参数为数值类型,表示视场角大小。 - `setPointBudget(budget)`:设置点数预算,超过预算的点将不会被渲染。`budget`参数为数值类型,表示点数预算。 - `setEDLEnabled(enabled)`:设置是否开启EDL(Eye-Dome Lighting)效果。`enabled`参数为布尔类型,表示是否开启EDL效果。 - `setPointSize(size)`:设置点的大小,单位为像素。`size`参数为数值类型,表示点的大小。 除了上述常用的配置之外,`potreeViewer`对象还有很多其他的配置选项,比如相机控制、点云颜色、切片、可见性等等。你可以根据自己的需求进行配置。具体的配置选项可以参考`potree-core`库的文档。 希望这个示例能够帮助你在Vue项目中使用`potree-core`库来渲染点云数据,并对一些常用的配置进行详细说明。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值