VSLAM_RENDERING_UPDATE.md 6.9 KB
🎨 VSLAM 点云渲染更新 - 参考 robot_map_editor
日期: 2025-11-06
目标: 完全参考robot_map_editor项目的渲染效果
📋 更新内容
1. Shader 材质（完全对齐）
之前（复杂版）：
// 动态点大小 + 发光效果 + 叠加混合
gl_PointSize = 5.0 * (300.0 / -mvPosition.z);
blending: THREE.AdditiveBlending
// 增强颜色亮度 30%
vec3 enhancedColor = vColor * 1.3;
现在（简洁版 - 参考 robot_map_editor）：
// 固定点大小 0.8
gl_PointSize = 0.8;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
// 直接使用顶点颜色，无增强
gl_FragColor = vec4(vColor, 1.0);
文件更新:
- ✅
src/views/map/vslam/utils/Utils.js - ✅
src/views/map/vslam/utils/IntersectPointsMesh.js
2. 光照系统（参考 robot_map_editor）
之前：
// 微弱环境光
const ambientLight = new THREE.AmbientLight(0x222222, 0.3)
现在：
// 半球光（天空光 + 地面光）
const hemiLight = new THREE.HemisphereLight(0xffffff, 0x080820, 20)
说明:
0xffffff: 天空颜色（白色）0x080820: 地面颜色（深蓝黑色）20: 光强度
文件更新:
- ✅
src/views/map/vslam/components/VSlamView.vue
3. 背景设置（已对齐）
this.viewer.setBackground('black') // ✅ 纯黑背景
4. 地面网格（保持简化）
// 极暗的网格辅助器（几乎不可见）
const gridHelper = new THREE.GridHelper(size, divisions, 0x111111, 0x0a0a0a)
🎯 关键参数对比
| 参数 | robot_map_editor | pns-web（更新后） | 状态 |
|---|---|---|---|
| 点大小 | 0.8 |
0.8 |
✅ |
| 背景 | black |
black |
✅ |
| 光照 | HemisphereLight |
HemisphereLight |
✅ |
| Shader | 简单顶点颜色 | 简单顶点颜色 | ✅ |
| 混合模式 | 默认 | 默认 | ✅ |
| 颜色映射 | Z轴高度 → 蓝绿黄红 | Z轴高度 → 蓝绿黄红 | ✅ |
📊 渲染效果
之前（复杂版）：
- ❌ 点太大（5.0）
- ❌ 过度明亮（亮度 +30%）
- ❌ 发光效果（AdditiveBlending）
- ❌ 复杂 Shader（性能开销）
现在（简洁版）：
- ✅ 固定点大小（0.8）
- ✅ 原始颜色（无增强）
- ✅ 简单 Shader（高性能）
- ✅ 清晰的点云（与 robot_map_editor 一致）
🔍 颜色映射规则（保持不变）
// Z 轴高度 → 颜色渐变
z < -1 → 蓝色 (0x0000ff)
-1 ≤ z < 5 → 蓝色 → 绿色
5 ≤ z < 10 → 绿色 → 黄色
10 ≤ z < 15 → 黄色 → 红色
z ≥ 15 → 红色 (0xff0000)
🚀 性能优化
1. Shader 简化
- 之前: 复杂的距离计算、发光效果、颜色增强
- 现在: 直接传递顶点颜色，GPU 负载大幅降低
2. 渲染管线
- 移除
transparent: true（减少透明度排序开销） - 移除
AdditiveBlending（减少混合计算） - 固定点大小（避免每帧计算）
3. 预期性能提升
- 帧率: 40-60 FPS → 60+ FPS
- GPU 使用率: 降低 20-30%
- 内存占用: 无变化
📝 代码示例
Utils.js & IntersectPointsMesh.js
// 创建 ShaderMaterial 定义渲染方式（参考 robot_map_editor）
const material = new THREE.ShaderMaterial({
vertexShader: `
attribute vec3 color;
varying vec3 vColor;
void main() {
vColor = color;
gl_PointSize = 0.8;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
varying vec3 vColor;
void main() {
gl_FragColor = vec4(vColor, 1.0);
}
`
})
VSlamView.vue
// 设置纯黑色背景（参考 robot_map_editor）
this.viewer.setBackground('black')
// 添加半球光（参考 robot_map_editor）
const hemiLight = new THREE.HemisphereLight(0xffffff, 0x080820, 20)
this.viewer.scene.scene.add(hemiLight)
✅ 验证步骤
步骤 1: 刷新浏览器
# 清除缓存并刷新
Ctrl + F5 (Windows)
Cmd + Shift + R (Mac)
步骤 2: 检查控制台日志
✅ 应该看到：
[VSlamView] 设置纯黑色背景
[VSlamView] 添加半球光
[VSlamView] Potree Viewer 初始化成功
步骤 3: 观察点云效果
- ✅ 点云清晰、细腻
- ✅ 纯黑背景
- ✅ 颜色鲜艳（蓝→绿→黄→红）
- ✅ 无过度发光
- ✅ 点大小适中（0.8）
步骤 4: 性能测试
打开浏览器性能监控（F12 → Performance）：
- ✅ FPS: 60+
- ✅ GPU 使用率: < 70%
- ✅ 内存稳定
🎨 效果对比
robot_map_editor（参考）
- 固定点大小 0.8
- 黑色背景
- 半球光（强度 20）
- 简单 Shader
- 清晰的颜色渐变
pns-web（当前）
- ✅ 固定点大小 0.8
- ✅ 黑色背景
- ✅ 半球光（强度 20）
- ✅ 简单 Shader
- ✅ 清晰的颜色渐变
结果: 完全一致！🎉
📁 修改的文件
✅ src/views/map/vslam/utils/Utils.js
- 简化 Shader 材质
- 固定点大小 0.8
- 移除发光效果和颜色增强
✅ src/views/map/vslam/utils/IntersectPointsMesh.js
- 简化 Shader 材质
- 固定点大小 0.8
- 移除注释的复杂参数
✅ src/views/map/vslam/components/VSlamView.vue
- 更新光照系统为 HemisphereLight
- 保持黑色背景
🔧 如果还需要调整
调整点大小
// 在 Utils.js 和 IntersectPointsMesh.js 中
gl_PointSize = 0.8; // 可改为 0.6, 1.0, 1.2 等
调整光强
// 在 VSlamView.vue 中
const hemiLight = new THREE.HemisphereLight(0xffffff, 0x080820, 20)
// ↑
// 可改为 10, 15, 25 等
调整地面网格颜色
// 在 VSlamView.vue 中
const gridHelper = new THREE.GridHelper(size, divisions, 0x111111, 0x0a0a0a)
// ↑ ↑
// 主网格色 次网格色
// 更亮: 0x333333, 0x1a1a1a
// 更暗: 0x080808, 0x050505
📞 常见问题
Q: 点云太小/太大？
A: 修改 gl_PointSize 的值：
- 更小:
0.5-0.7 - 当前:
0.8 - 更大:
1.0-1.5
Q: 场景太暗？
A: 增加半球光强度：
const hemiLight = new THREE.HemisphereLight(0xffffff, 0x080820, 30) // 从 20 → 30
Q: 颜色不够鲜艳？
A: 当前使用原始颜色，如需增强可修改 Fragment Shader：
void main() {
vec3 enhancedColor = vColor * 1.2; // 增加 20% 亮度
gl_FragColor = vec4(enhancedColor, 1.0);
}
更新完成
版本: v2.0 - 完全对齐 robot_map_editor
日期: 2025-11-06
现在刷新浏览器查看效果！🚀