Agent Skills › lichtblick-suite/lichtblick › panel-image

panel-image

GitHub

解析ThreeDeeRender中ImageMode面板机制，涵盖Worker解码、相机投影及标注渲染。

.github/skills/panel-image/SKILL.md lichtblick-suite/lichtblick

Trigger Scenarios

询问3D面板图像显示原理查询Worker图片解码流程了解相机模型与标注叠加逻辑

Install

npx skills add lichtblick-suite/lichtblick --skill panel-image -g -y

More Options

Non-standard path

npx skills add https://github.com/lichtblick-suite/lichtblick/tree/develop/.github/skills/panel-image -g -y

Use without installing

npx skills use lichtblick-suite/lichtblick@panel-image

指定 Agent (Claude Code)

npx skills add lichtblick-suite/lichtblick --skill panel-image -a claude-code -g -y

安装 repo 全部 skill

npx skills add lichtblick-suite/lichtblick --all -g -y

预览 repo 内 skill

npx skills add lichtblick-suite/lichtblick --list

SKILL.md

Frontmatter

{
    "name": "panel-image",
    "description": "Deep Image panel knowledge: the panel is ThreeDeeRender's ImageMode SceneExtension, WorkerImageDecoder pipeline, camera-model projection (pinhole\/fisheye), and annotation overlays."
}

Panel Image Skill

The Image panel is not a separate panel — it is a specialized mode of the 3D panel (ThreeDeeRender) that uses a 2D camera projection.

Architecture

ImagePanel (re-export wrapper, panels/Image/)
    │
    ▼
ThreeDeeRender (Renderer.ts)
    │
    ▼
ImageMode SceneExtension
    │
    ├── WorkerImageDecoder (JPEG/PNG/… in a Worker)
    ├── Camera-model projection (pinhole, fisheye, …)
    └── Annotation overlays (boxes, points, text)

Core Components

File	Role
`renderables/Images/ImageMode.ts`	SceneExtension for image display
`renderables/Images/WorkerImageDecoder.ts`	Worker-based image decoding (Comlink)
`renderables/Images/WorkerImageDecoder.worker.ts`	Worker-side decode implementation
`renderables/Images/annotations/`	Overlay rendering (boxes, points, text)

Image Decoding Pipeline

Raw image message arrives (compressed JPEG/PNG or raw bytes)
Sent to WorkerImageDecoder via Comlink (off the main thread)
Decoded to an ImageBitmap or raw pixel buffer
Applied as a THREE.js texture on a plane geometry
The camera model determines UV mapping (handles distortion)

Camera Models

Pinhole — standard perspective projection
Fisheye — equidistant / equisolid / stereographic projections
Custom — extensions register additional models via installedCameraModels

CameraInfo intrinsics map pixels to 3D rays correctly.

Annotations

Overlaid on the image plane as THREE.js objects in screen space: bounding boxes (with labels), point annotations, and text overlays.

Performance Notes

JPEG/PNG decompression is CPU-heavy → always in a Worker
ImageBitmap enables a GPU-side decode path in supported browsers
Large images (4K+) strain GPU memory — consider downscaling
At high frame rates, skip decode if the previous frame isn't yet displayed

Key Files

packages/suite-base/src/panels/ThreeDeeRender/renderables/Images/
packages/suite-base/src/panels/ThreeDeeRender/renderables/Images/WorkerImageDecoder.ts
packages/suite-base/src/panels/Image/ (re-export wrapper)