@thatopen/components-front

Enumerations

Enumeration	Description
DeferredAoMode	Which ambient-occlusion estimator feeds the denoise + composite. SCREEN_SPACE
is the Hi-Z Alchemy disk; WORLD_SPACE is the hemisphere-probe estimator with a
metre-stable contact footprint. Matches the old DeferredPipeline enum value-for
-value so consumers keep working after the swap.
EdgeDetectionPassMode	The mode of the edge detection pass.
GraphicVertexPickerMode	-
HovererMode	How the Hoverer reacts to cursor input.

• HovererMode.MOUSE_STOP: hover detection runs once the cursor has settled briefly. Matches the classic "wait for the user to stop moving" feel: less jittery, useful when hover is paired with a heavy reaction.
• HovererMode.MOUSE_MOVE: hover detection runs continuously as the cursor moves, throttled to one pick per animation frame. Snappier, ideal now that GPU-readback picking is sub-millisecond. | | MeasurementLineType | How measurement lines are rendered.
• Basic: THREE.Line with a LineBasicMaterial. This is the default and matches the historical behavior; note WebGL ignores line width here, so lines always render 1px regardless of lineWidth.
• Fat: Line2 / LineSegments2 with a LineMaterial, which honors lineWidth (in screen pixels).

Modeled as an enum so more line styles can be added later without a breaking change. | | MeasurementPickMode | When the measurement tool runs the snap pick that drives the preview marker / dimension line.

• MeasurementPickMode.MOUSE_MOVE: pick once per animation frame while the cursor is moving. Snappy feedback; defaults here. Heavy on big models because every move triggers a pick (~15 ms GPU readback) plus a snap fetch on first sight of each new item.
• MeasurementPickMode.MOUSE_STOP: pick only after the cursor settles for Measurement.delay ms. One pick per stop, regardless of how the user got there. Recommended for large scenes — the marker only appears where the user actually pauses, which is also where they're about to click. | | PostproductionAspect | The postproduction enums live in their own leaf module ON PURPOSE.

They used to be declared in ./index, which imports the renderer back from .. — a cycle. Which module evaluates first then depends on the consumer's bundler, and a class field initialized from one of these enums can read it while its module is still half-initialized (undefined.DEFERRED, a TypeError at load). A leaf module has no imports, so it can never lose that race. Do not import anything here. | | PostproductionMode | The rendering pipeline the postproduction runs. COMPOSER is the default EffectComposer style stack; DEFERRED is the forward + auxiliary-geometry-prepass pipeline. An enum (rather than a boolean) leaves room for further modes. |

Classes

Class	Description
Angle	Represents an angle defined by three points in 3D space: a start point, a vertex (center), and an end point.
AngleMeasurement	A measurement tool to measure angles between 3 points in 3D and display a visual arc with the numeric angle value.
AreaMeasurement	AreaMeasurement allows users to measure and interact with areas in a 3D environment. This class provides functionality for creating, updating, and deleting area measurements, as well as managing their visual representation. 📕 Tutorial. 📘 API.
CivilCrossSectionNavigator	This component is used to navigate and visualize cross sections of a 3D model. 📕 Tutorial. 📘 API.
CivilNavigators	This component provides functionality for navigating and interacting with civil engineering data in a 3D environment. 📕 Tutorial. 📘 API.
CivilRaycaster	This component provides functionality for navigating and interacting with civil engineering data in a 3D environment. 📕 Tutorial. 📘 API.
ClipEdges	The ClipEdges class is responsible for managing and rendering clipped edges and fills in a ThreeJS scene based on specified styles and models. 📕 Tutorial. 📘 API.
ClipStyler	A component that can style Clipping Planes by adding edges and fills. 📕 Tutorial. 📘 API.
DeferredPipeline	DeferredPipeline — the rebuilt deferred postproduction pipeline.

Re-authored from scratch and validated pass-by-pass in the PipelineBisect harness (stages 18–23) before replacing the previous implementation. It reuses the SAME proven pass classes (capture / Hi-Z / AO / denoise / composite / FXAA); only the orchestration is new. Per frame:

1. single-pass capture -> G-buffer (colour + depth + octa-normal + faceId)
2. Hi-Z min-mip build from the captured depth
3. AO estimator (screen-space Alchemy over Hi-Z, or world-space probe), half-res
4. AO denoise (separable cross-bilateral)
5. combined composite (AO . contour . sheen . tonemap . sRGB) -> LDR target
6. FXAA -> the finished frame
7. occlusion seam — direct (points into the frame) or layer (premultiplied splats)
8. depth-occluded overlay (the floor grid) + flat overlay (hover/selection)
9. tail (selection outline) / screen-copy

reuseCapture skips 1–4 and re-composites the cached G-buffer (overlay-only repaint). The public API (constructor, settings, render args, accessors) matches the previous DeferredPipeline so consumers are untouched. | | DimensionLine | A class representing a simple dimension line in a 3D space. | | DrawingEditor | Front component that centralises all interaction for OBC.TechnicalDrawing. | | DrawingTool | Base class for all drawing tools. | | FontManager | Manages font loading and creates Three.js text meshes for annotation labels. | | GlossPass | A postprocessing pass that applies a gloss effect to the rendered scene. The gloss effect makes surfaces appear more reflective based on their angle relative to the camera view. | | GraphicVertexPicker | A class to provide a graphical marker for picking vertices in a 3D scene. | | Highlighter | This component allows highlighting and selecting fragments in a 3D scene. 📕 Tutorial. 📘 API. | | Hoverer | The Hoverer component applies a material overlay to whichever fragment item is under the cursor. It identifies the hovered item via the GPU-readback picker (no worker raycast) and visualizes it by attaching small proxy meshes that share the source tiles' geometry attributes — no Mesher.get, no fresh BufferGeometry per hover, no GPU memory allocation per item.

Per-hover cost when the chunks cache is warm: one picker render + 4-byte readback + a couple of proxy attach/detach calls. First hover on a new item adds one worker round-trip for the chunks query; the result is cached forever (until the model unloads). 📕 Tutorial. 📘 API. | | LengthMeasurement | A basic dimension tool to measure distances between 2 points in 3D and display a 3D symbol displaying the numeric value. 📕 Tutorial. 📘 API. | | Mark | Represents a marker in the 3D world. | | Marker | Component for Managing Markers along with creating different types of markers. Every marker is a Simple2DMarker. For every marker that needs to be added, you can use the Manager to add the marker and change its look and feel. 📕 Tutorial. 📘 API. | | Measurement | Abstract class that gives the core elements to create any measurement component. 📘 API. | | Mesher | Mesher is a class that manages the creation and removal of THREE.Mesh objects from fragment data. It allows to efficiently retrieve and remove meshes for specific model items. 📘 API. | | NearPlaneLineMaterial | A fat line material (screen-space quad expansion, real linewidth in px) that is also SAFE across the camera near plane.

three's stock LineMaterial expands each segment into a screen-space quad in the vertex shader. When a segment endpoint is behind the camera plane its projected w <= 0, so the NDC math is garbage and the quad blows up to span the whole screen — the "infinity streak" seen under clipping (and on LOD wires). Stock LineMaterial handles only the case where ONE endpoint is behind (it trims that endpoint to the near plane via trimSegment); it does nothing when BOTH endpoints are behind, which is the remaining streak.

This subclass injects the missing both-behind guard: if both endpoints are behind the camera plane the segment has no valid projection, so we collapse it offscreen (gl_Position past the far plane) instead of expanding a bogus quad. This mirrors the near-plane guard of fragments' LOD line shader: one guard, shared semantics across the fat-line consumers (section edges, measurement lines, LOD wires).

The guard lives in the material's OWN vertexShader string (NOT an onBeforeCompile patch), so it SURVIVES .clone() — ShaderMaterial.clone copies vertexShader, whereas it drops onBeforeCompile. That matters because ClipEdges clones the style material per model in local-clipping mode. | | Outliner | This component allows adding colored outlines with thickness to fragments in a 3D scene. Supports multiple named outline groups so different selections can be outlined with different colors / thicknesses at the same time. 📕 Tutorial. 📘 API. | | PointCloudLoader | Loads and streams out-of-core point clouds (Potree 2.0 octrees) and draws them THROUGH the world's deferred PostproductionRenderer: points stream by LOD and are drawn into the deferred occlusion seam, so they are correctly occluded by BIM geometry with no shader patching. Georeferenced precision (float64 anchor) and the tuned point material (adaptive sizing, overlap, max-size clamp, EDL) are handled internally — the app just points it at an octree.

potree-core is an OPTIONAL PEER DEPENDENCY — it is loaded lazily inside load, so apps that never load point clouds don't need it installed. | | PostproductionRenderer | A class that extends RendererWith2D and adds post-processing capabilities. 📕 Tutorial. 📘 API. | | RendererWith2D | A basic renderer capable of rendering 3D and 2D objects (Objec3Ds and CSS2DObjects respectively). | | SplatLoader | Streams 3D Gaussian splats THROUGH the world's deferred PostproductionRenderer as a first-class citizen of the pipeline.

The splats are drawn by the in-house WebGL2 GSplat renderer (EWA covariance billboards, a worker-driven global depth sort, a 10³ cell grid for distance LOD + frustum culling). They are rendered into the deferred occlusion seam in LAYER mode (premultiplied over the finished frame); critically, every splat writes its CENTRE's reversed-Z depth and the material depth- TESTS (GreaterEqualDepth, no depth write) against the BIM depth borrowed by the seam — so BIM geometry occludes the splats with NO shader patching, exactly as a real mesh would.

This replaces the previous Spark + 3d-tiles-renderer implementation; those optional peer dependencies are no longer needed. | | VolumeMeasurement | A basic dimension tool to measure volumes and display a 3D symbol with the numeric value. 📕 Tutorial. 📘 API. |

Interfaces

Interface	Description
ClipEdgesCreationConfig	Configuration for creating ClipEdges.
ClipEdgesItemStyle	Represents the style configuration for clip edges items.
ClipStyle	Represents the style configuration for clipping edges, including materials for lines and fills.
DimensionData	Interface representing the data required to create a dimension line.
DrawingPointerEvent	A processed pointer event in drawing local space.
HighlightEvents	Interface defining the events that the Highlighter class can trigger. Each highlighter has its own set of events, identified by the highlighter name.
HighlighterConfig	Interface defining the configuration options for the Highlighter class.
IGroupedMarkers	Interface representing a group of markers.
IMarker	Interface representing a marker object.
LinearPlacementContext	Context passed to every PlacementMode registered on LinearAnnotationsTool.
LoadedPointCloud	A loaded point cloud handle returned by PointCloudLoader.load.
LoadedSplat	A loaded splat handle returned by SplatLoader.load.
OcclusionPassContext	Forward-draw hook fired AFTER the deferred composite. The consumer (points /
splats) draws straight into the finished frame, whose depth attachment is
BORROWED from the capture G-buffer, so its fragments depth-test against the
real BIM depth (occluded behind walls) — Phase-1 occlusion, no shader patch.
Mirrors the old DeferredPipeline's OcclusionPass contract (direct mode).
OutlineGroupConfig	Per-group visual configuration for the outliner.
PlacementMode	A single placement strategy for a DrawingTool.
PointCloudRequestManager	The byte-fetching contract potree-core drives. App-supplied so the transport
(local server, S3 Range, signed-URL re-mint) is fully pluggable.
PointCloudSettings	Quality / performance knobs for point rendering. Live-settable; the loader
reads them per frame, so changes take effect on the next frame with no reload.
PointCloudSource	A pluggable source for a point-cloud octree. The app supplies the URL and,
optionally, a request manager (e.g. a Range / signed-url adapter). Loaders stay
EXTERNAL to the loader: the component draws, the app decides how bytes are
fetched (local server, S3 Range, signed URLs…).
SplatRequestManager	The byte-fetching contract, app-supplied so the transport is fully pluggable.
SplatSource	A 3D Gaussian splat source. Either:

• a URL to a .ply / .compressed.ply file (INRIA 3DGS or its compressed variant), or its raw bytes, or
• several LOD levels (lodUrls, finest → coarsest) concatenated into one global-sort buffer.

The bytes are decoded on the CPU (covariance precompute + Y-up flip) and uploaded to GPU textures by the in-house WebGL2 renderer (GSplat) — no external splat engine. |

Type Aliases

Type alias	Description
DrawingCursor	Alias exposed on DrawingEditor.cursor — same shape as DrawingPointerEvent.
HighlightStyle	A highlight style: the material definition used to color the items that
claim it, plus an optional draw priority. null means the style selects
items without coloring them.

Variables

Variable	Description
IndividualMode	One click → one dimension. Auto-confirms once both endpoints are set.
LineMode	Clicking a projection line locks onto both its endpoints at once, then a second click sets the offset distance.
SequentialMode	Keeps the session open after each confirmation so points can be chained.
defaultPointCloudSettings	Default quality settings — the measured "balanced" sweet spot (overlap 1.2,
~1.5M budget = steady ~90fps + good coverage on a typical scan).

Functions

Function	Description
dist2D	2-D distance between two Vector3s on the XZ plane (ignores Y).
formatUnits	Converts an internal unit key into its user-facing display form.
Area and volume unit keys use a trailing digit ("m2", "cm3"), which is
rendered with the proper superscript ("m²", "cm³"). All other unit keys
are returned untouched. The internal keys themselves never change, so
this only affects labels, not the API.