CVAT 3D 任务工作区完全指南：透视窗口、投影视图与上下文图像的协同标注

CVAT 3D 任务工作区完全指南透视窗口、投影视图与上下文图像的协同标注【免费下载链接】cvatComputer Vision Annotation Tool (CVAT) is a leading platform for building high-quality visual datasets for vision AI. It offers open-source, cloud, and enterprise products, as well as labeling services, for image, video, and 3D annotation with AI-assisted labeling, quality assurance, team collaboration, analytics, and developer APIs.项目地址: https://gitcode.com/GitHub_Trending/cvat/cvat3D 任务工作区3D Task Workspace是 CVAT 面向点云数据Point Cloud标注的核心界面它将一个透视窗口Perspective与三个正交投影视图Top / Side / Front组合在同一画布中配合可选的上下文图像Context Image实现车辆、建筑、场景等三维对象的立体观察与精确标注。读完本文你将掌握 CVAT 3D 工作区的四视图布局、投影视图的工作机制、上下文图像的目录组织与界面操作以及 3D 标注绘制、调整、跟踪、复制的完整实战流程。3D 任务工作区界面总览在 CVAT 中创建一个使用点云数据如 PCD、BIN 等格式的 3D 任务后标注界面会呈现如下布局整张画布由四个视图组成其中右下方的**透视窗口Perspective**是 3D 任务中操作对象的主窗口而左侧/上方的Top、Side、Front三个投影视图则用于从俯视、侧视、正视三个正交方向精确校准对象。这一布局在官方文档 3d-task-workspace.md 中有明确说明并可在前端源码 canvas3dView.ts 中印证视图被划分为BOTTOM_VIEWS [TOP, SIDE, FRONT]三个正交视图与PERSPECTIVE透视视图合计四块渲染区域。透视窗口Perspective3D 标注的主战场Perspective是 3D 任务中与对象打交道的主要工作窗口。在这里你可以以自由三维视角观察整个点云场景将 cuboid长方体标注框放置到 3D 场景中的目标物体上直观地旋转视角、平移、缩放从任意角度确认对象在空间中的位置。从源码看透视视图使用**透视相机PerspectiveCamera**渲染其默认相机参数在 canvas3dView.ts 中定义如默认位置[-15, 0, 8]、朝向[10, 0, 0]、上方向[0, 0, 1]而三个投影视图则对应使用正交相机OrthographicCamera保证平行投影下尺寸不失真。另外需要特别注意的是如果任务的related_images文件夹中包含图像透视窗口中就会有一个上下文图像context image可用。这个上下文图像可以与 3D 数据对照显示帮助标注者快速识别所标记对象的真实外观与标签。上下文图像Context Image辅助识别的关键参照上下文图像也叫 related images是与主数据相关联的附加图像用于提供关于对象的额外背景信息从而提高标注准确性。它同时适用于 2D 与 3D 任务详见 contextual-images.md。3D 任务支持的目录结构要让上下文图像出现在 3D 任务中需要把图像文件夹组织成受支持的布局之一。任务既可以从压缩包创建也可以从原始文件创建。3D 任务支持以下四种布局3D 方案一点云与关联图像放同一目录关联文件必须与对应点云同名每种点云只允许 1 张关联图像root_directory/ pointcloud1.pcd pointcloud1.jpg pointcloud2.pcd pointcloud2.png ...3D 方案二每个点云独立目录每个点云放入与其同名文件名一致的独立目录中关联图像放在对应点云旁边文件名与扩展名可以任意root_directory/ pointcloud1/ pointcloud1.pcd pointcloud1_ri1.png pointcloud1_ri2.jpg ... pointcloud2/ pointcloud2.pcd pointcloud2_ri1.bmp3D 任务 KITTI 格式上下文图像放在image_00/、image_01/、image_N/N 为任意数字目录中文件名必须与data/目录下的点云文件对应image_00/ data/ 0000000000.png 0000000001.png ... velodyne_points/ data/ 0000000000.bin 0000000001.bin ...3D 任务 Supervisely 格式点云放在pointcloud/目录关联图像放在related_images/下以点云文件名扩展名命名的子目录中root_directory/ pointcloud/ pointcloud1.pcd pointcloud2.pcd related_images/ pointcloud1_pcd/ context_image_for_pointclud1.jpg pointcloud2_pcd/ context_image_for_pointcloud2.jpg关于 3D 数据格式的更通用说明可参考 3D data formats 一节。界面显示规则与工具栏上下文图像最多 12 张默认放置在主图像右侧默认情况下只显示 3 张上下文图像加入上下文图像后屏幕顶部会出现一个小工具栏包含三个元素元素说明Fit views适配视图点击将布局恢复为原始外观。若曾放大过任何图像将恢复到原始尺寸不影响屏幕上上下文图像的数量Add new image添加新图像点击向布局中添加上下文图像Reload layout重载布局点击将布局重载为默认视图。注意此操作可能改变上下文图像数量将其重置回 3 张每张上下文图像自身还带有 6 个操作元素全屏点击展开/还原全屏、移动图像按住并拖拽到屏幕其他位置、名称唯一名称、选择图像点击打开全部可用图像的水平列表视图并选择、关闭从上下文图像菜单中移除、扩展按住并拉动以扩展图像。投影视图Top / Side / Front精确调整的利器投影视图是 3D 任务工作区中最具特色的设计之一它的工作方式与普通 CAD 软件的正交视图不同投影与对象cuboid绑定当某个 cuboid 被选中时Top、Side、Front 三个投影视图会以该对象为中心显示cuboid 在投影中呈现为一个矩形只显示被选中的对象投影视图不会显示整个点云场景而是聚焦于当前选中的 cuboid便于把注意力集中在目标对象的姿态与尺寸上。三个投影视图的含义分别为Top—— 从正上方俯视对象的投影Side—— 从对象左侧观察的投影Front—— 对象的正面前向投影。在源码 canvas3dModel.ts 中四个视图被建模为PlanestopPlane、sidePlane、frontPlane、perspectivePlane与ViewTypetop、side、front、perspective两类枚举且每个 cuboid 在四个视图中都有各自独立的网格实例见 cuboid.ts 中CuboidModel的perspective、top、side、front四个THREE.Mesh并同步应用位置、缩放与旋转保证四视图中的对象完全一致。源码实现cvat-canvas3d 四视图架构3D 画布由独立的前端模块cvat-canvas3d提供该模块以 TypeScript 编写职责是查看、绘制和编辑 3D 标注。其模块说明见 cvat-canvas3d/README.md。画布 API 与四视图 DOMCanvas3d对外暴露的核心接口包括html()、setup(frameData, objectStates)、mode()、render()、keyControls(keys)、draw(drawData)、activate(clientID)、configure(configuration)、fit()等见 canvas3d.ts。其中html()返回ViewsDOM即四个视图对应的 HTMLCanvasElement// 创建画布实例并挂载到容器 const canvas new window.canvas.Canvas3d(); const views canvas.html(); htmlContainer.appendChild(views.perspective); htmlContainer.appendChild(views.top); htmlContainer.appendChild(views.side); htmlContainer.appendChild(views.front);这一 API 设计直接对应本文所述的一个透视窗口 三个投影视图的界面结构。内部采用经典的Model-Controller-View架构Canvas3dModelImpl维护状态、Canvas3dControllerImpl处理输入、Canvas3dViewImpl负责基于 Three.js 渲染见 canvas3d.ts。视图渲染与相机配置每个视图都包含独立的THREE.WebGLRenderer、THREE.Scene与相机透视或正交并配有CameraControls与Raycaster见 canvas3dView.ts。点云通过PCDLoader加载场景还维护了包围盒sceneBBox用于视图适配。可配置的外观参数画布的Configuration接口见 canvas3dModel.ts支持如下外观配置均可在 UI 中调整配置项说明默认值 / 约束colorBy着色依据Label、Instance或GroupshapeOpacity形状透明度0–100默认 40selectedShapeOpacity选中形状透明度0–100默认 60outlinedBorders边框轮廓模式false或轮廓颜色字符串controlPointsSize控制点尺寸默认BASE_POINT_SIZE4focusedObjectPadding聚焦对象内边距≥ 0默认 50orientationVisibility方向箭头显隐x/y/z三个布尔值默认均关闭默认值见 canvas3dModel.ts。3D 任务中的导航与标注实战视角导航3D 画布支持鼠标与键盘两种导航方式。键盘快捷键与源码CameraAction枚举见 canvas3dView.ts一一对应操作快捷键相机旋转Camera rotationShift方向键上/下/左/右左移 / 右移AltJ/AltL上移 / 下移AltU/AltO放大 / 缩小AltK/AltI其中CameraAction.ZOOM_IN KeyI、MOVE_LEFT KeyJ、MOVE_RIGHT KeyL、MOVE_UP KeyU、MOVE_DOWN KeyO、ZOOM_OUT KeyK而四个方向键对应TILT_UP、TILT_DOWN、ROTATE_RIGHT、ROTATE_LEFT。相机交互参数移动速度MOVEMENT_FACTOR 200、缩放DOLLY_FACTOR 5、最近/最远距离MIN_DISTANCE 0.3/MAX_DISTANCE 100定义在 consts.ts 中。用 cuboid 进行 3D 标注3D 任务提供两种标注方式Shape形状适用于目标检测类任务为单个帧添加独立的 3D 标注框Track跟踪利用插值预测对象在后续帧中的位置每个对象会被分配唯一 ID 并在整个图像序列中保持。添加 3D 形状的步骤在对象面板objects pane中选择Draw new cuboid→ 从下拉列表选择标签 → 选择Shape光标会跟随一个 cuboid将其放置到 3D 场景中的目标上使用投影视图调整 cuboid按住鼠标左键即可在投影上编辑标签形状可选移动 cuboid 的四个点之一来改变其尺寸可选选中中点并上下/左右拖动 cuboid 进行旋转。用 cuboid 跟踪选择Draw new cuboid→ 选择标签 → 选择Track放置 cuboid 到 3D 场景用投影视图调整 cuboid按住左键编辑投影形状可选通过四个角点改尺寸、通过中点旋转向前移动若干帧你会看到第 1 帧添加的 cuboid按需调整它重复以上步骤直到对象出现的最后一帧。移动与复制对象移动将光标悬停在 cuboid 上并按ShiftNcuboid 会被剪下然后可在其他位置粘贴双击完成粘贴复制与 2D 任务一样可使用CtrlC/CtrlV复制粘贴对象但与 2D 不同的是你需要在3D 空间中放置复制的对象同样通过双击完成放置。投影窗口截图你可以通过左键单击投影窗口然后选择将图像另存为save image as或复制图像copy image来保存或复制投影窗口中的图像。cuboid 方向箭头Cuboid Orientation外观设置块中有一个复选框用于控制3D 空间中 cuboid 方向箭头的显示/隐藏。启用后代表 cuboid 轴方向X - 红色Y - 绿色Z - 蓝色的箭头会显示出来为 cuboid 在 3D 环境中的对齐提供视觉参考有助于理解其空间朝向。这一特性在源码中有精确对应CuboidModel.createArrows()使用THREE.ArrowHelper分别以0xff0000X 轴红、0x00ff00Y 轴绿、0x0000ffZ 轴蓝创建三个方向箭头见 cuboid.ts并在四个视图中同步渲染。cuboid 尺寸输入Cuboid Size Input通过对象侧边栏objects sidebar的详情面板你可以手动指定 cuboid 在 3D 空间中的精确尺寸分别输入**长X、宽Y、高Z**的数值cuboid 的尺寸会按照其当前方向相应调整从而在 3D 任务标注中获得更高的控制精度。与 2D 任务对象一样3D 任务对象也支持修改外观、属性、属性值并拥有操作菜单详细说明见 objects sidebar。总结CVAT 的 3D 任务工作区以Perspective 透视窗口为主战场、Top/Side/Front 三个正交投影视图为精确调整工具、上下文图像为识别参照构建了一套完整的三维标注界面透视窗口提供自由视角的 3D 场景漫游与 cuboid 放置三个投影视图与选中 cuboid 绑定使其居中显示为矩形仅聚焦当前对象极大简化了姿态与尺寸校准上下文图像通过related_images目录支持同目录同名、独立目录、KITTI、Supervisely 四种布局挂载默认显示 3 张、最多 12 张并支持全屏、移动、选择、扩展等交互底层由 TypeScript 模块 cvat-canvas3d 基于 Three.js 实现四视图共享同一个 CuboidModel通过 Model-Controller-View 架构驱动渲染、相机控制、绘制与配置更新。无论是自动驾驶场景中的车辆/行人标注、建筑与地貌的点云分割还是任何需要三维空间理解的视觉任务掌握这一工作区的视图机制与操作流程都能显著提升 3D 标注的效率与精度。【免费下载链接】cvatComputer Vision Annotation Tool (CVAT) is a leading platform for building high-quality visual datasets for vision AI. It offers open-source, cloud, and enterprise products, as well as labeling services, for image, video, and 3D annotation with AI-assisted labeling, quality assurance, team collaboration, analytics, and developer APIs.项目地址: https://gitcode.com/GitHub_Trending/cvat/cvat创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考