Skip to content

feat: add GLB and GLTF 3D export formats#341

Closed
melmathari wants to merge 2 commits into
tscircuit:mainfrom
melmathari:329
Closed

feat: add GLB and GLTF 3D export formats#341
melmathari wants to merge 2 commits into
tscircuit:mainfrom
melmathari:329

Conversation

@melmathari
Copy link
Copy Markdown

@melmathari melmathari commented Sep 12, 2025

Add GLB and GLTF 3D Export Formats

/claim #329

Overview

This update introduces two new export formats for 3D circuit visualization:

  • GLB – Binary format
  • GLTF – JSON format

Usage

# Export to GLB
tsci export circuit.tsx -f glb

# Export to GLTF
tsci export circuit.tsx -f gltf

# Check files were created
ls -la test-circuit.glb test-circuit.gltf
file test-circuit.glb  # Should show "glTF binary model"

View in 3D

Implementation

Extended existing export system in lib/shared/export-snippet.ts. GLTF uses circuit-json-to-gltf directly while GLB uses two-step conversion (GLTF to GLB) with gltf-import-export due to buffer reference issues in direct GLB output. Added both formats to ALLOWED_FORMATS and OUTPUT_EXTENSIONS.

Issues We Found and Fixed

Problem: Direct GLB export from circuit-json-to-gltf with format: "glb" created files that failed in 3D viewers with errors like:

  • "Unable to load from file: /bufferViews/3/buffer: Failed to find index (0)"
  • "Invalid JSON data. Parser output: FormatException: SyntaxError: JSON Parse error: Unrecognized token"

Root Cause: Buffer reference issues in the GLB file structure - viewers couldn't properly parse the binary buffer sections.

Solution: Two-step process:

  1. Generate GLTF using circuit-json-to-gltf (works perfectly)
  2. Convert GLTF to GLB using gltf-import-export (creates buffer structure)
  3. Clean up temporary files

Result: GLB files now work correctly in Babylon.js Sandbox, Three.js viewers, and other 3D applications.

Dependencies

  • circuit-json-to-gltf@^0.0.6 - 3D conversion
  • gltf-import-export@^1.0.22 - GLB conversion (resolves buffer issues)

Files Changed

  • package.json - Added dependencies
  • lib/shared/export-snippet.ts - Added GLB/GLTF export cases
  • tests/cli/export/export-glb.test.ts - Tests for both formats
  • bun.lock - Lock file update

Notes

Web interface GLB export requires separate PR to @tscircuit/runframe package @seveibar

Resolves

Implements the GLB export functionality requested in issue #333. Uses circuit-json-to-gltf for GLTF generation, then converts to GLB with gltf-import-export to resolve buffer compatibility issues.

Scherm­afbeelding 2025-09-12 om 12 20 46

@melmathari
Copy link
Copy Markdown
Author

melmathari commented Sep 12, 2025

@seveibar open to suggestions, This PR implements GLB/GLTF export for the CLI, but I got a buffering issue that affects RunFrame integration to GLB.

Direct GLB export from circuit-json-to-gltf with format: "glb" creates files with buffer reference issues
These GLB files fail in 3D viewers with errors like "Failed to find index (0)" and "Invalid JSON data"

As for runframe, I'd appreciate some pointers on how to get it working there as well.

- Add 'glb' and 'gltf' to ALLOWED_FORMATS in export-snippet.ts
- Implement GLB export using two-step GLTF→GLB conversion to fix buffer issues
- GLTF export uses circuit-json-to-gltf directly (works perfectly)
- GLB export uses gltf-import-export library to resolve buffer reference issues
- Add comprehensive tests for both GLB and GLTF export formats
- GLB files now work correctly in Babylon.js Sandbox and other 3D viewers

Usage:
  tsci export circuit.tsx -f glb
  tsci export circuit.tsx -f gltf

Fixes buffer compatibility issues that caused GLB files to fail in 3D viewers.
@imrishabh18
Copy link
Copy Markdown
Member

Using the package gltf-import-export seems a bit unnecessary. The fix should have been done inside the circuit-json-to-gltf to make the glb generated from it work. Anyways this has been fixed, thanks for giving this a try

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants