A browser-based 3D shape creation tool for glass rendering systems. Create and manipulate 3D shapes using SDF (Signed Distance Field) operations with real-time preview and export capabilities.
Features
3D Modeling
- SDF-based modeling - Non-destructive shape creation using signed distance fields
- Real-time preview - Instant visualization with physically-based glass materials
- Click-to-place - Position shapes exactly where you click on the build surface
- Boolean operations - Union, subtraction, and intersection of shapes
- Primitive shapes - Sphere, cube, cylinder, torus, plane, and more
Professional Tools
- Selection tools - Marquee, lasso, and direct object selection
- Transform tools - Move, rotate, scale with axis constraints
- Sculpting tools - Carve, smooth, inflate for organic modeling
- Edit tools - Slice, mirror, array for precise modifications
Keyboard Shortcuts
- File Operations: Ctrl+N (New), Ctrl+S (Save), Ctrl+E (Export)
- Tools: V (Select), W (Move), E (Rotate), R (Scale)
- Primitives: Shift+1 (Sphere), Shift+2 (Cube), Shift+3 (Cylinder)
- View: Shift+W (Wireframe), Shift+P (Points), Shift+G (Glass Preview)
- Transform Modes: G (Grab), R (Rotate), S (Scale) + X/Y/Z for axis lock
Export Formats
- Raw Arrays - Direct integration with glass rendering systems
- GLB with Thickness - 3D models with custom thickness attributes
- Canvas Integration - Send directly to glass rendering canvas
Installation
Prerequisites
- Node.js 18+
- npm or yarn
Setup
```bash
Clone the repository
git clone
Install dependencies
npm install
Start development server
npm run dev ```
Testing
```bash
Run test suite
npm test
Run tests in watch mode
npm run test:watch ```
Usage
Basic Workflow
- Select a tool from the left sidebar or use keyboard shortcuts
- Click on the build surface to place shapes at specific positions
- Use transform tools to modify shape position, rotation, and scale
- Apply boolean operations to combine or subtract shapes
- Export your creation in the desired format
Viewport Controls
- Mouse orbit - Left click + drag to rotate view
- Pan - Middle click + drag or Shift + left click + drag
- Zoom - Mouse wheel or Ctrl + left click + drag
- Grid reference - Always visible build platform with coordinate axes
Shape Properties
- Position - X, Y, Z coordinates in world space
- Size - Dimensions for boxes, radius for spheres/cylinders
- Material - Glass preview with transparency and refraction
- Thickness - Per-vertex thickness data for realistic glass rendering
Architecture
Core Components
- SDF Graph - Manages shape hierarchy and boolean operations
- Mesh Worker - Background mesh generation using marching cubes
- Viewport - Three.js-based 3D rendering and interaction
- Tool System - Modular tool architecture with keyboard shortcuts
SDF System
```typescript // Example SDF node structure interface SDFNode { id: string type: 'sphere' | 'roundBox' | 'cylinder' | 'plane' position?: [number, number, number] // Type-specific properties r?: number // radius for sphere/cylinder size?: [number, number, number] // dimensions for box h?: number // height for cylinder } ```
Mesh Generation
- SDF Evaluation - Sample distance field at grid points
- Marching Cubes - Generate triangular mesh from distance field
- Normal Calculation - Compute surface normals for lighting
- Thickness Computation - Ray marching for glass absorption
Technical Details
Glass Rendering Integration
The Shape Creator generates mesh data specifically designed for glass rendering systems:
- Positions - Vertex coordinates as Float32Array
- Normals - Surface normals for lighting calculations
- Indices - Triangle connectivity as Uint32Array
- Thickness - Per-vertex thickness for Beer-Lambert absorption
Export Formats
Raw Arrays
```javascript { positions: Float32Array, // [x,y,z, x,y,z, ...] normals: Float32Array, // [nx,ny,nz, nx,ny,nz, ...] indices: Uint32Array, // [0,1,2, 3,4,5, ...] thickness: Float32Array // [t, t, t, ...] } ```
GLB with Custom Attributes
Standard GLB format with additional _THICKNESS attribute for glass rendering compatibility.
Development
Project Structure
``` ├── app/ # Next.js app router pages ├── components/ # React components │ ├── Viewport.tsx # 3D rendering viewport │ ├── ToolSidebar.tsx # Tool selection interface │ └── InspectorPanel.tsx # Object properties panel ├── lib/ # Core libraries │ ├── sdf/ # SDF system implementation │ └── types.ts # TypeScript definitions ├── workers/ # Web workers for mesh generation └── tests/ # Test suites ```
Key Technologies
- Next.js 15 - React framework with app router
- Three.js - 3D graphics and rendering
- TypeScript - Type-safe development
- Tailwind CSS - Utility-first styling
- Jest - Testing framework
- Web Workers - Background mesh processing
Adding New Primitives
- Define SDF function in
lib/sdf/primitives.ts - Add mesh generation in
workers/mesher.worker.js - Update tool system in
components/ToolSidebar.tsx - Add keyboard shortcut in main component
Testing
The project includes comprehensive tests for:
- Tool interactions and keyboard shortcuts
- SDF graph operations and boolean logic
- Mesh generation and export functionality
- UI component behavior and state management
Contributing
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
License
This project is licensed under the MIT License - see the LICENSE file for details.
Acknowledgments
- Inspired by professional 3D modeling software like Blender and Shapr3D
- SDF techniques based on Inigo Quilez's distance function research
- Glass rendering integration designed for physically-based materials