Viewer WASM API¶

Project Overview¶

The WebEx Viewer is a sophisticated web-based 3D model viewer that leverages WebAssembly (WASM) for high-performance rendering. The project consists of a modular JavaScript architecture that interfaces with a WASM-based rendering engine to display WebEx 3D model files.

Architecture Components¶

1. JavaScript Layer: Modular ES6 architecture handling UI, state management, and WASM communication
2. WASM Module: Compiled WebAssembly module for 3D rendering (loaded from CDN)
3. WebEx Format: Proprietary 3D model format with material and layer support

WASM Communication Interface¶

Primary Interface: window.webex_in¶

The webex_in function is the primary communication bridge between JavaScript and the WASM rendering engine. This function is injected into the global scope by the WASM module during initialization.

// General pattern
window.webex_in(operation, ...parameters)

Documented WASM Operations¶

1. Camera Controls¶

Zoom Operation¶

window.webex_in("zoom", direction)

Auto Rotation¶

window.webex_in("set_auto_spin", state)

2. Scene Loading¶

Open Scene¶

window.webex_in("open_scene", url)

3. Rendering Operations¶

Resize Handler¶

window.webex_in("resize")

Quality Settings¶

window.webex_in("set_quality", quality)

Resolution Factor¶

window.webex_in("set_string", "::globals", "globals_resolution_factor", value)

4. Material System Operations¶

Apply Material¶

window.webex_in("apply_mtl", layer, material)

Module Configuration Interface¶

The WASM module is configured through the window.Module object before initialization:

window.Module = {
    json: {
        set_clear_color: "white",     // Background color
        open_scene: "url",            // WebEx file URL
        auto_spin: "0",               // Auto rotation (0/1)
        canvas_id: "canvas-viewer"    // Canvas element ID
    },
    onRuntimeInitialized: function() {
        // Initialization callback
    }
}

Configuration Parameters¶

• set_clear_color: Background color (default: "white")
• open_scene: URL to the WebEx 3D model file (required)
• auto_spin: Enable automatic rotation on load ("0" or "1", default: "0")
• canvas_id: ID of the canvas element (default: "canvas-viewer")

Data Flow and State Management¶

State Structure¶

{
    layer_sets: [],              // Array of layer arrays
    material_sets: [],           // Array of material arrays
    initialized: false,          // WASM init status
    current_quality: 'medium',   // Render quality
    current_resolution: '1',     // Resolution multiplier
    auto_spin: false            // Rotation state
}

Material System Details¶

The material system uses paired arrays to define material variations:

• layers1, layers2, ...: Arrays of layer identifiers
• mtls1, mtls2, ...: Arrays of material identifiers

Each position in the material array corresponds to a material variant that can be applied to all layers in the corresponding layer set. For example:

layers1 = ["bezel", "prongs"]
mtls1 = ["gold", "silver", "platinum"]

URL Parameter Parsing¶

The viewer supports complex URL parameters for configuration:

?url=https://example.com/model.webex
&layers1=["layer1","layer2"]
&mtls1=["material1","material2"]
&set_clear_color=black

Alternative Google Drive support:

?fileid=GOOGLE_DRIVE_FILE_ID

Loading and Initialization Sequence¶

1. Parse URL Parameters: Extract configuration from URL
2. Setup Event Listeners: Bind UI controls
3. Load WASM Module:

   await loader.load_script(`${CDN_BASE}/webex-viewer-module.js`)
   

4. Configure Module: Set up window.Module with scene parameters
5. Load Viewer:

   await loader.load_script(`${CDN_BASE}/webex-viewer.js`)
   

6. Runtime Initialization: WASM module initializes and injects webex_in
7. UI Setup: Create material controls and apply initial settings

Canvas Controls¶

The viewer automatically manages canvas rendering properties:

• imageRendering: Set to "auto" for optimal display quality
• Buffer Dimensions: Automatically adjusted based on physical canvas size
• Resize Detection: Monitors DOM changes and window resizing
• Resolution Scaling: Applied through the resolution factor setting

UI Button Groups¶

Autospin Button¶

The rotate button toggles automatic model rotation: - Located in the view controls (top-left) - Visual feedback with active state styling - Persists rotation state during viewer lifetime

Quality/Resolution Controls¶

These controls are grouped together and shown when quality adjustments are available: - Settings Button: Opens quality menu (medium, high, ultra) - Resolution Button: Opens resolution menu with performance presets - Only displayed when supported by the viewer configuration