thatopen-impl-viewer

Initialize a ThatOpen BIM viewer with correct World, renderer, and camera setup.

17|1|Updated Mar 20, 2026
One-click install
npx skills add https://github.com/Impertio-Studio/ThatOpen-Claude-Skill-Package --skill thatopen-impl-viewer-impertio-studio
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: thatopen-impl-viewer
Source: https://github.com/Impertio-Studio/ThatOpen-Claude-Skill-Package/tree/main/skills/source/thatopen-impl/thatopen-impl-viewer
Command: npx skills add https://github.com/Impertio-Studio/ThatOpen-Claude-Skill-Package --skill thatopen-impl-viewer-impertio-studio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the “blank canvas” and mis-initialized viewer problem by enforcing the correct setup order for ThatOpen’s Components, World, Scene, Renderer, and Camera so rendering starts reliably.

Core Features & Use Cases

  • Correct Viewer Initialization Sequence: Enforces the required order (scene, renderer, camera, then components.init) to prevent missing lifecycle calls and incomplete world state.
  • Renderer Options (Simple vs Postproduction): Supports both SimpleRenderer and PostproductionRenderer, including enabling post-processing and excluding the grid to avoid visual artifacts.
  • Production-Ready Guardrails: Validates container sizing and DOM presence, provides disposal guidance, and helps avoid common WebGL lifecycle pitfalls.

Quick Start

Ask the skill to generate a minimal TypeScript viewer setup that creates a World, assigns a SimpleScene, binds a SimpleRenderer to a non-zero-sized container, sets an OrthoPerspectiveCamera, and calls components.init() after all assignments are complete.

Frequently Asked Questions about thatopen-impl-viewer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does my ThatOpen WebGL viewer render a blank black canvas?

A blank ThatOpen viewer canvas usually means the setup order is wrong. You must initialize the scene, bind the renderer to a non-zero container, set the camera, and call components.init() last to start the render loop reliably.

How do I set up a ThatOpen BIM viewer with PostproductionRenderer?

To set up post-processing in a ThatOpen viewer, initialize the PostproductionRenderer and configure grid exclusion to avoid visual artifacts. This prevents grid-related rendering glitches while enabling advanced post-processing effects.

Do I need explicit container dimensions for ThatOpen viewer initialization?

Yes, explicit container dimensions are required for ThatOpen viewer initialization. Binding a SimpleRenderer to a zero-sized DOM container causes rendering failures, so validating container sizing and DOM presence ensures the WebGL viewer starts correctly.

What is the correct lifecycle order for initializing ThatOpen components?

The correct ThatOpen lifecycle order is creating the World, assigning a SimpleScene, binding a SimpleRenderer, setting an OrthoPerspectiveCamera, and finally calling components.init() to start the deterministic render loop.

How do I fix grid artifacts in my ThatOpen post-processing viewer?

To fix grid artifacts in a ThatOpen post-processing viewer, use the PostproductionRenderer configuration to exclude the grid. This removes visual artifacts while maintaining the rest of your BIM scene rendering.

Can I use an OrthoPerspectiveCamera with ThatOpen components?

Yes, an OrthoPerspectiveCamera is supported and recommended for ThatOpen viewers. Assigning it correctly within the World setup sequence before calling components.init() ensures proper camera controls and responsive resizing.