Os-s is a high-performance, web-based 3D sculpting application designed to provide professional-grade modeling tools directly within the browser. Built on React and Three.js, the application leverages direct buffer attribute manipulation to enable real-time mesh deformation and vertex painting on high-resolution geometry. It serves as a lightweight, accessible alternative to desktop sculpting software, focusing on essential workflows for concepting and organic modeling.
The core interaction layer is built upon a custom deformation engine that manipulates geometry buffers in real-time.
- Standard Brush: Displaces geometry along vertex normals to add volume and form.
- Smooth: Applies Laplacian smoothing algorithms to average vertex positions, effectively denoising surface irregularities and relaxing topology.
- Flatten: Calculates the average plane of the selection area and projects vertices onto it, essential for hard-surface modeling and planing.
- Pinch: Pulls vertices toward the brush center to sharpen edges and create distinct crease lines.
- Vertex Painting: Features a cubic-falloff airbrush system for applying vertex colors with smooth gradients, opacity layering, and high-fidelity blending.
- History System: A comprehensive Undo/Redo stack that captures snapshots of both geometry positions and vertex color buffers, ensuring data integrity during the creative process.
- OBJ Export: Native generation of Wavefront
.objfiles, allowing for seamless interoperability with industry-standard software such as Blender, Maya, and ZBrush. - Material Simulation: Real-time shading switching between Standard, Clay (high roughness), and Metallic (high specularity) materials to visualize surface details under different lighting conditions.
- Visualization: Toggleable wireframe overlays and global mesh tinting for topology inspection.
- Frontend Framework: React 19 (TypeScript)
- Build Tool: Vite
- 3D Graphics Engine: Three.js
- React Integration: React Three Fiber / @react-three/drei
- Styling: Tailwind CSS
- Direct Buffer Manipulation: To achieve 60 FPS performance during complex deformation calculations, sculpting logic operates directly on the
Float32Arraybuffers (attributes.positionandattributes.color). This bypasses the overhead of high-level object abstraction layers during the render loop. - Memory Management: The application utilizes rigorous memory management strategies, including optimized vector math to minimize garbage collection during high-frequency pointer events.
- State Architecture: React state manages the UI and tool configuration, while mutable Refs are utilized for render-loop data and history stacks to decouple rendering performance from the React reconciliation cycle.
- Node.js (Version 18 or higher recommended)
- npm (Node Package Manager)
-
Clone the Repository
git clone https://github.com/dovvnloading/Os-Sculpt.git cd Os-Sculpt -
Install Dependencies
npm install
-
Start Development Server
npm run dev
The application will launch at
http://localhost:5173(default Vite port). -
Build for Production
npm run build
| Action | Control |
|---|---|
| Rotate Camera | Left Click + Drag (on background) |
| Pan Camera | Right Click + Drag |
| Zoom | Mouse Scroll Wheel |
- Select a tool (Standard, Smooth, Flatten, Pinch) from the left sidebar.
- Adjust Radius and Intensity in the right Properties Panel.
- Left Click + Drag on the mesh surface to apply the deformation.
- Select the Paint tool from the sidebar.
- Select a color from the "Paint Color" palette in the Properties Panel.
- The tool operates as an airbrush; repeated strokes increase opacity.
- Export: Click the EXP button in the top toolbar to generate and download a
.objfile of the current mesh.