🚀 Advanced Light OCCT Playground

Welcome to the Advanced Light OCCT Playground! Experience the full power of industrial-grade CAD operations, boolean operations, file I/O, hidden line removal, and assembly management - all with modern Three.js visualization.

Advanced Features Available! 🔥

This advanced playground showcases the complete Light OCCT ecosystem: CAD primitives, boolean operations, STEP/IGES file import, technical drawings with HLR, assembly hierarchies, and advanced examples - all running in your browser with WebAssembly!

Advanced Interactive Playground

Explore the full capabilities of Light OCCT with categorized samples, real-time parameter controls, and comprehensive visualization:

🚀 Advanced Light OCCT + Three.js Playground

Interactive CAD samples with boolean operations, HLR, file I/O, and advanced features

WASM: Loading...

Three.js: Loading...

📦

Basic Primitives

Create boxes, spheres, cylinders, and other basic CAD primitives

BasicPrimitivesCAD

🎯

Advanced Primitives

Create torus, cones, wedges, and complex geometric shapes

AdvancedTorusCones

🌊

Parametric Surfaces

Generate B-spline surfaces, ruled surfaces, and revolutions

SurfacesB-splinesParametric

Initializing Three.js + WASM...

🔍 Operation Log

🔧 Advanced Workflows Demonstrated

The advanced playground showcases multiple sophisticated workflows:

1. CAD Primitives Workflow

LPrim_Shape → Geometry → Meshing → Three.js Visualization

2. Boolean Operations Workflow

Shape A + Shape B → Boolean Operations → Result Shape → Visualization

3. File Import Workflow

CAD Files (STEP/IGES) → LExchange → Shape Collection → Scene Assembly → Three.js

4. Hidden Line Removal Workflow

3D Shape → HLR Algorithm → Technical Views → Line Segments → Technical Drawing

5. Assembly Management Workflow

Components → XCAF Document → Assembly Tree → Attributes → Hierarchy Visualization

🎯 Core Integration Patterns

Basic Shape Creation & Visualization

javascript

// Create CAD geometry with coordinate system
const origin = LightOcct.CreatePoint(0, 0, 0)
const direction = LightOcct.CreateVector(0, 0, 1)  
const xDirection = LightOcct.CreateVector(1, 0, 0)
const placement = LightOcct.CreateAxis3Placement(origin, direction, xDirection)

// Create primitive using LPrim_Shape
const box = LightOcct.LPrim_Shape.CreateBox(placement, 5, 3, 2)

// Generate high-quality mesh
const meshResult = LightOcct.QuickMesh(box, linearDeflection)
const triangulation = box.GetTriangulation()

// Extract geometry for Three.js
const { vertices, indices, normals } = extractGeometry(triangulation)
const geometry = createThreeGeometry(vertices, indices, normals)
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

Boolean Operations Pattern

javascript

// Create two shapes
const box1 = LightOcct.LPrim_Shape.CreateBox(placement1, 2, 2, 2)
const box2 = LightOcct.LPrim_Shape.CreateBox(placement2, 2, 2, 2)

// Boolean union
const boolOp = LightOcct.LBoolOp_BooleanOperations.CreateUnion()
const result = boolOp.Execute(box1, box2)

if (result.IsValid()) {
  displayShape(result, scene)
}

File Import Pattern

javascript

// Import STEP file in browser
async function loadSTEPFile(file) {
  const arrayBuffer = await file.arrayBuffer()
  const uint8Array = new Uint8Array(arrayBuffer)
  
  // Allocate WASM memory
  const dataPtr = LightOcct._malloc(uint8Array.length)
  LightOcct.HEAPU8.set(uint8Array, dataPtr)
  
  // Import using Exchange module
  const exchange = LightOcct.LExchange.Create()
  const result = exchange.ReadFromMemory(dataPtr, uint8Array.length, 'STEP')
  
  LightOcct._free(dataPtr)
  
  if (result.IsSuccess()) {
    const shapes = result.GetShapes()
    shapes.forEach(shape => displayShape(shape, scene))
  }
}

Assembly Creation Pattern

javascript

// Create assembly with XCAF
const doc = LightOcct.LDocument.CreateXcafDocument()

// Add components with attributes
const baseLabel = doc.AddRootShape(baseShape, 'Base', {
  color: { r: 0.7, g: 0.7, b: 0.7 },
  material: 'Steel'
})

const shaftLabel = doc.AddComponentInstance(shaftShape, 'Shaft', transform)

// Export hierarchy for visualization
const hierarchy = doc.GetAssemblyHierarchy()
visualizeAssembly(hierarchy, scene)

Advanced Features

Real-time Mesh Quality Control

javascript

// Update mesh parameters and re-render in real-time
function updateMeshQuality(linearDeflection) {
  // Re-mesh with new parameters using Light OCCT
  const newMeshResult = mesher.GenerateMesh(shape, {
    LinearDeflection: linearDeflection,
    AngularDeflection: 0.2
  })
  
  // Extract new triangles
  const newTriangulation = shape.GetTriangulation()
  
  // Update Three.js geometry
  geometry.setAttribute('position', new THREE.BufferAttribute(newVertices, 3))
  geometry.setIndex(new THREE.BufferAttribute(newIndices, 1))
  geometry.computeVertexNormals()
}

Export Capabilities

javascript

// Export Three.js scene as JSON
function exportScene() {
  const sceneData = scene.toJSON()
  const blob = new Blob([JSON.stringify(sceneData)], { type: 'application/json' })
  // Download file...
}

// Export mesh as OBJ format
function exportOBJ() {
  let objData = ''
  scene.traverse((object) => {
    if (object instanceof THREE.Mesh) {
      // Write vertices and faces to OBJ format...
    }
  })
}

🚀 Advanced Playground Features

✅ Complete CAD Ecosystem

Basic Primitives: Boxes, spheres, cylinders, cones, torus, and complex surfaces
Boolean Operations: Union, difference, intersection with real-time visualization
File I/O: Import STEP, IGES, BREP, STL, OBJ files directly in browser
Hidden Line Removal: Generate technical drawings from 3D models
Assembly Management: XCAF-based hierarchies with colors, materials, metadata

✅ Interactive Controls

Sample Categories: Organized by functionality (Primitives, Boolean, HLR, Files, Examples)
Real-time Parameters: Adjust mesh quality, deflection, lighting with immediate feedback
Viewport Controls: Camera reset, wireframe toggle, screenshots, fullscreen mode
Operation Logging: Detailed logs with performance metrics and status tracking

✅ Advanced Examples

Bottle Example: Classic OpenCASCADE bottle with filleting and threading
Assembly Creation: Multi-component assemblies with proper hierarchy
Technical Drawings: HLR-based engineering drawings with multiple views
File Processing: Real-world CAD file import and visualization

✅ Developer-Friendly

Live Code Display: View the exact Light OCCT code for each sample
Performance Metrics: Operation timing and triangle/vertex counts
Export Capabilities: Scene export, sample download, screenshot capture
Comprehensive API: Full access to Light OCCT WebAssembly module

Performance Optimization

Mesh Quality Presets

javascript

const qualityPresets = {
  production: {
    LinearDeflection: 0.02,
    AngularDeflection: 0.1,
    description: 'High quality - more triangles'
  },
  preview: {
    LinearDeflection: 0.1,
    AngularDeflection: 0.2,
    description: 'Balanced quality'
  },
  draft: {
    LinearDeflection: 0.3,
    AngularDeflection: 0.4,
    description: 'Low quality - fewer triangles'
  }
}

Level of Detail (LOD)

javascript

// Create multiple mesh qualities for different viewing distances
const lod = new THREE.LOD()

// High detail mesh for close viewing
const highDetailMesh = createMeshFromOCCT(shape, qualityPresets.production)
lod.addLevel(highDetailMesh, 0)

// Medium detail for normal viewing
const mediumDetailMesh = createMeshFromOCCT(shape, qualityPresets.preview)
lod.addLevel(mediumDetailMesh, 50)

// Low detail for distant viewing
const lowDetailMesh = createMeshFromOCCT(shape, qualityPresets.draft)
lod.addLevel(lowDetailMesh, 200)

scene.add(lod)

🎮 How to Use the Advanced Playground

Getting Started

Select Category: Choose from Primitives, Boolean Ops, HLR, File I/O, or Advanced examples
Pick a Sample: Click any sample card to load its specific controls and code
Adjust Parameters: Use the controls panel to modify parameters in real-time
Execute Operations: Click operation buttons to see Light OCCT in action

Advanced Features

File Import: Upload STEP, IGES, BREP, STL, or OBJ files using the File I/O category
Boolean Operations: Create complex shapes by combining primitives with union, difference, intersection
Technical Drawings: Generate HLR-based engineering drawings from 3D models
Assembly Management: Create hierarchical assemblies with colors, materials, and metadata

Viewport Controls

Navigation: Mouse controls for orbit, zoom, pan in the Three.js viewport
Camera Reset: 📷 button to reset the camera to default position
Wireframe Toggle: 🔲 button to switch between solid and wireframe rendering
Screenshots: 📸 button to capture viewport images
Fullscreen: ⛶ button for fullscreen viewing experience

Code & Debugging

View Code: Click "Show Code" to see the exact Light OCCT implementation
Operation Logs: Monitor the log panel for detailed operation feedback and timing
Performance: Watch triangle/vertex counts and operation timing in real-time
Export/Download: Save scenes, samples, or screenshots for later use

Next Steps

Ready to build your own Three.js + Light OCCT application? Check out:

🎨 Three.js Integration Guide - Complete implementation guide
📚 WebAssembly Guide - Light OCCT WebAssembly usage
💻 Examples - Three.js + Light OCCT examples
🔧 API Reference - Complete class and method documentation

This advanced playground showcases the complete Light OCCT ecosystem - from basic primitives to complex assemblies, boolean operations to file I/O, technical drawings to performance optimization - all with modern Three.js visualization running entirely in your browser via WebAssembly! 🚀

Experience industrial-grade CAD operations with zero installation - just open your browser and start creating! 💻✨

🚀 Advanced Light OCCT Playground ​

Advanced Interactive Playground ​

🚀 Advanced Light OCCT + Three.js Playground

Basic Primitives

Advanced Primitives

Parametric Surfaces

🔍 Operation Log

🔧 Advanced Workflows Demonstrated ​

1. CAD Primitives Workflow ​

2. Boolean Operations Workflow ​

3. File Import Workflow ​

4. Hidden Line Removal Workflow ​

5. Assembly Management Workflow ​

🎯 Core Integration Patterns ​

Basic Shape Creation & Visualization ​

Boolean Operations Pattern ​

File Import Pattern ​

Assembly Creation Pattern ​

Advanced Features ​

Real-time Mesh Quality Control ​

Export Capabilities ​

🚀 Advanced Playground Features ​

✅ Complete CAD Ecosystem ​

✅ Interactive Controls ​

✅ Advanced Examples ​

✅ Developer-Friendly ​

Performance Optimization ​

Mesh Quality Presets ​

Level of Detail (LOD) ​

🎮 How to Use the Advanced Playground ​

Getting Started ​

Advanced Features ​

Viewport Controls ​

Code & Debugging ​

Next Steps ​

🚀 Advanced Light OCCT Playground

Advanced Interactive Playground

🔧 Advanced Workflows Demonstrated

1. CAD Primitives Workflow

2. Boolean Operations Workflow

3. File Import Workflow

4. Hidden Line Removal Workflow

5. Assembly Management Workflow

🎯 Core Integration Patterns

Basic Shape Creation & Visualization

Boolean Operations Pattern

File Import Pattern

Assembly Creation Pattern

Advanced Features

Real-time Mesh Quality Control

Export Capabilities

🚀 Advanced Playground Features

✅ Complete CAD Ecosystem

✅ Interactive Controls

✅ Advanced Examples

✅ Developer-Friendly

Performance Optimization

Mesh Quality Presets

Level of Detail (LOD)

🎮 How to Use the Advanced Playground

Getting Started

Advanced Features

Viewport Controls

Code & Debugging

Next Steps