# CascadeStudio
**Repository Path**: mirrors_zalo/CascadeStudio
## Basic Information
- **Project Name**: CascadeStudio
- **Description**: A Full Live-Scripted CAD Kernel in the Browser
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-06
- **Last Updated**: 2026-03-30
## Categories & Tags
**Categories**: cad
**Tags**: None
## README
## A Full Live-Scripted CAD Kernel and IDE in the Browser.
Use code to create 3D Models with features ranging from simple primitives + CSG to complex revolves, sweeps, and fillets. Cascade Studio exposes the full power of the [OpenCascade](https://github.com/Open-Cascade-SAS/OCCT) kernel (OCCT 8.0), while providing a concise standard library for simple operations.
Write in JavaScript or OpenSCAD, visualize in real-time, and export to `.step`, `.stl`, or `.obj`. Copy the URL to share your model with anyone.
## Features
- **Powerful Standard Library** for primitives, booleans, sweeps, lofts, fillets, and more
- **Sketch API** with plane parameter (`new Sketch([x,y], 'XZ')`) for drawing in XY, XZ, or YZ planes
- **Selector API** for querying edges and faces: `Edges(shape).parallel([0,0,1]).max([0,0,1]).indices()`
- **Measurement Functions**: `Volume()`, `SurfaceArea()`, `CenterOfMass()`
- **Dual Editor Modes**: JavaScript and OpenSCAD
- **IntelliSense** autocomplete with full TypeScript definitions and JSDoc
- **Modeling History Timeline** to scrub through build steps in the 3D viewport
- **Agent API** (`window.CascadeAPI`) for programmatic control via Playwright or developer tooling
- **Reusable CAD Engine** — `cascade-core` npm package for embedding CAD modeling in any web app
- Access to the full OpenCASCADE kernel via the `oc.` namespace
- Automatic caching acceleration of standard library operations
- `.STEP`/`.IGES`/`.STL` import and `.STEP`/`.STL`/`.OBJ` export
- URL serialization of code for easy sharing
- Save/Load projects to preserve code, layout, and imported files
- Integrated GUI system (sliders, checkboxes, buttons) via Tweakpane
- Responsive layout with mobile support
- Installable for offline use as a Progressive Web App
- **Free and open source under the MIT License**
## Examples
## Getting Started
### Quick Start
```bash
npm install
npm run build
npx http-server ./packages/cascade-studio/dist -p 8080 -c-1
# Open http://localhost:8080
```
### Standard Library
Cascade Studio provides a concise standard library for common CAD operations:
```javascript
// Primitives
Box(x, y, z, centered?)
Sphere(radius)
Cylinder(radius, height, centered?)
Cone(r1, r2, height)
Circle(radius, wire?) // wire=true for Loft/Pipe, false for Extrude
Polygon(points, wire?)
Text3D(text, size, height, font?)
// Sketch API — draw in any plane
let face = new Sketch([0, 0]) // default XY plane
.LineTo([20, 0]).Fillet(3)
.LineTo([20, 10]).Fillet(3)
.LineTo([0, 10])
.End(true).Face();
let profile = new Sketch([0, 0], "XZ") // XZ plane for Revolve profiles
.LineTo([15, 0]).LineTo([10, 8]).LineTo([0, 8])
.End(true).Face();
Revolve(profile, 360);
// Transforms — all return NEW shapes
Translate([x, y, z], shape)
Rotate([ax, ay, az], degrees, shape)
Scale(factor, shape)
Mirror([vx, vy, vz], shape)
// Booleans
Union(shapes)
Difference(mainBody, [tools])
Intersection(shapes)
// Operations
Extrude(face, [dx, dy, dz], keepFace?)
Revolve(shape, degrees, [ax, ay, az]?)
Loft([wires])
Pipe(shape, wirePath)
Offset(shape, distance)
FilletEdges(shape, radius, edgeIndices)
ChamferEdges(shape, distance, edgeIndices)
// Selectors
Edges(shape).ofType("Line"|"Circle").parallel([axis]).max([axis]).min([axis]).indices()
Faces(shape).ofType("Plane"|"Cylinder").max([axis]).indices()
// Measurement
Volume(shape)
SurfaceArea(shape)
CenterOfMass(shape)
```
### OpenSCAD Mode
Switch to OpenSCAD mode via the dropdown in the top navigation bar. Cascade Studio transpiles OpenSCAD to its JavaScript standard library:
```openscad
difference() {
cube([20, 20, 20], center=true);
sphere(r=12);
}
```
### Using cascade-core in Your Own Project
The CAD engine is available as a standalone package with no GUI dependencies:
```javascript
import { CascadeEngine } from 'cascade-core';
const engine = new CascadeEngine({ workerUrl: './cascade-worker.js' });
await engine.init();
const result = await engine.evaluate(`
let box = Box(20, 20, 20);
FilletEdges(box, 3, Edges(box).max([0,0,1]).indices());
`, { guiState: { 'Cache?': true } });
// result.meshData = { faces: [...], edges: [...] }
// Render with Three.js, Babylon.js, or any WebGL framework
```
## Agent API
Cascade Studio exposes `window.CascadeAPI` for programmatic control via [Playwright](https://playwright.dev/) or other browser automation tools.
```javascript
// Navigate and wait for WASM to load
await page.goto('http://localhost:8080');
await page.waitForFunction(() => window.CascadeAPI?.isReady());
// Learn the API
const guide = await page.evaluate(() => CascadeAPI.getQuickStart());
// Run CAD code and check results
const result = await page.evaluate(code => CascadeAPI.runCode(code), `
let profile = new Sketch([0, 0], "XZ")
.LineTo([15, 0]).LineTo([10, 8]).LineTo([0, 8])
.End(true).Face();
Revolve(profile, 360);
`);
// result = { success: true, errors: [], logs: [...], historySteps: [...] }
// Set camera angle and take a screenshot
await page.evaluate(() => {
CascadeAPI.setCameraAngle(30, 20); // azimuth, elevation
CascadeAPI.saveScreenshot('model.png');
});
```
## Architecture
This is an npm workspaces monorepo with two packages:
- **`cascade-core`** — Reusable CAD engine (no GUI dependencies)
- **`cascade-studio`** — Browser IDE (Three.js viewport, Monaco editor, Tweakpane GUI)
```
packages/
cascade-core/
src/
engine/
CascadeEngine.js ← Main-thread API wrapping Worker + MessageBus
MessageBus.js ← Typed worker message routing
worker/
CascadeWorker.js ← Web Worker entry; evaluates user code
StandardLibrary.js ← CAD primitives (Box, Sphere, Sketch, etc.)
ShapeToMesh.js ← OpenCascade shape → mesh triangulation
FileUtils.js ← STEP/IGES/STL import/export
openscad/
OpenSCADTranspiler.js ← OpenSCAD → JS transpiler
index.js ← Package entry point
cascade-studio/
src/
main.js ← ESM entry point
CascadeMain.js ← App shell, Dockview layout
CascadeAPI.js ← window.CascadeAPI for agent/programmatic use
CascadeView.js ← 3D viewport (Three.js), modeling timeline
EditorManager.js ← Monaco editor, code evaluation
ConsoleManager.js ← Console panel, log/error capture
GUIManager.js ← Tweakpane GUI panel (sliders, checkboxes)
css/, textures/, icon/, lib/ ← Static assets
test/ ← Playwright tests (monorepo root)
```
The build system uses **esbuild**. `npm run build` builds `cascade-core` first (worker bundle + WASM + fonts), then `cascade-studio` (main app bundle + static assets), outputting to `packages/cascade-studio/dist/`.
## Testing
Cascade Studio includes a Playwright test suite covering primitives, transforms, booleans, operations, selectors, OpenSCAD, exports, and regression scenarios.
```bash
npm run build
npx playwright test # 12 tests, ~40s
```
WebGL rendering in headless mode requires `--use-gl=angle --use-angle=swiftshader` (configured in `playwright.config.js`).
## [Community](https://github.com/zalo/CascadeStudio/discussions)
Model code is saved to the URL upon every successful evaluation, so you can copy and paste that link to others to view your model. Share your creations in [Github Discussions](https://github.com/zalo/CascadeStudio/discussions).
## Contributing
```bash
npm install
npm run build
npx http-server ./packages/cascade-studio/dist -p 8080 -c-1
```
Edit source files in `packages/`, rebuild, and refresh. Use a new port if changing JS code, as browsers cache ESM aggressively.
Pull Requests to this repo are automatically hosted to Vercel instances, so other users will be able to test and benefit from your modifications as soon as the PR is submitted.
## Credits
Cascade Studio uses:
- [opencascade.js](https://github.com/donalffons/opencascade.js) (CAD Kernel — OCCT 8.0.0 RC4 via Embind)
- [Three.js](https://github.com/mrdoob/three.js/) r170 (3D Rendering)
- [Monaco Editor](https://github.com/microsoft/monaco-editor) (Code Editor with IntelliSense)
- [Dockview](https://github.com/mathuo/dockview) (Panel Layout System)
- [Tweakpane](https://github.com/cocopon/tweakpane) v4 (GUI Controls)
- [opentype.js](https://github.com/opentypejs/opentype.js) (Font Parsing for Text3D)
- [fflate](https://github.com/101arrowz/fflate) (URL Code Compression)
- [potpack](https://github.com/mapbox/potpack) (Texture Atlas Packing)
- [esbuild](https://github.com/evanw/esbuild) (Bundler)
- [Playwright](https://playwright.dev/) (Testing)
Cascade Studio is maintained by [Johnathon Selstad @zalo](https://github.com/zalo)