# How to Use the Implicit CAD Skill for Browser‑Native Modeling: A Complete Guide

> Learn to use Implicit CAD for browser-native modeling. Write JavaScript modules to define SDFs in GLSL for direct execution in your browser via ray-march rendering. No server-side processing needed.

- Repository: [earthtojake/text-to-cad](https://github.com/earthtojake/text-to-cad)
- Tags: how-to-guide
- Published: 2026-07-31

---

**The Implicit CAD skill lets you write JavaScript modules that define signed‑distance fields (SDFs) in GLSL, which the CAD Viewer executes directly in the browser via a ray‑march renderer without any server‑side processing.**

This guide explains how to author, preview, and export browser‑native CAD geometry using the **Implicit CAD** skill from the `earthtojake/text‑to‑cad` repository. You will learn to create [`.implicit.js`](https://github.com/earthtojake/text-to-cad/blob/main/.implicit.js) modules that describe shapes mathematically, manipulate them with boolean operations, and render them interactively in the viewer.

## Understanding the Implicit CAD Architecture

The Implicit CAD skill operates on a client‑side pipeline that converts JavaScript modules into GPU‑executed GLSL code. Unlike traditional mesh‑based CAD, geometry is generated procedurally through signed‑distance fields evaluated in real time.

The architecture consists of four key components:

- **Skill Definition** – [`skills/implicit-cad/SKILL.md`](https://github.com/earthtojake/text-to-cad/blob/main/skills/implicit-cad/SKILL.md) declares the [`.implicit.js`](https://github.com/earthtojake/text-to-cad/blob/main/.implicit.js) / `.implicit.mjs` file format and authoring workflow.
- **Helper Library** – `skills/implicit-cad/scripts/lib/implicit-cad.mjs` provides JavaScript wrappers around GLSL primitives (e.g., `sphere`, `unionRound`, `vec3`) and re‑exports the JSON schema for validation.
- **GLSL Runtime** – The `packages/implicitjs` directory contains the actual GLSL implementations (`implicit_sphere`, `implicit_union_round`, etc.) and the schema definition ([`schema.js`](https://github.com/earthtojake/text-to-cad/blob/main/schema.js)), which the viewer bundles and injects into its shader pipeline.
- **CLI Tools** – `scripts/snapshot.mjs` generates PNG/GIF previews, while `scripts/export.mjs` converts implicit models to mesh formats (`glb`, `stl`, `3mf`).

## Creating Your First Implicit CAD Model

To begin, create a file ending in [`.implicit.js`](https://github.com/earthtojake/text-to-cad/blob/main/.implicit.js) that exports an object conforming to the `implicit.js/0.1.0` schema. The object must define a `name`, a `glsl` string containing the SDF function, and optionally `params` for interactivity.

### Basic Structure and Required Schema

Every module must export a default object with the schema identifier and a GLSL code block defining `float sdf(vec3 p)`. The `color` function is optional but recommended for visual distinction.

```javascript
// models/implicit-cad/rounded-block.implicit.js
import { vec3 } from '../scripts/lib/implicit-cad.mjs';

export default {
  schema: "implicit.js/0.1.0",
  name: "rounded capsule block",
  glsl: `
    float sdf(vec3 p) {
      float sphere = implicit_sphere(p, vec3(0.0), 22.0);
      float block  = implicit_box_centered(p, vec3(34.0, 18.0, 18.0), vec3(0.0));
      return implicit_union_round(sphere, block, 3.0);
    }

    vec3 color(vec3 p, vec3 normal) {
      return mix(vec3(0.20, 0.55, 0.95), vec3(0.95, 0.45, 0.20),
                 smoothstep(-15.0, 20.0, p.z));
    }
  `,
};

```

In this example, `implicit_sphere` and `implicit_box_centered` are primitives provided by the runtime, while `implicit_union_round` performs a smooth boolean union with a 3.0 unit blend radius.

### Using Helper Primitives for Cleaner Code

Instead of writing raw GLSL strings, import helper functions from `implicit-cad.mjs` to construct SDF expressions programmatically. This reduces syntax errors and improves readability.

```javascript
import { vec3, unionRound, sphere, boxCentered } from '../scripts/lib/implicit-cad.mjs';

export default {
  schema: "implicit.js/0.1.0",
  name: "capsule-box",
  glsl: `
    ${unionRound([
      `implicit_sphere(p, ${vec3(0,0,0)}, 12)`,
      `implicit_box_centered(p, ${vec3(30,10,10)}, ${vec3(0,0,0)})`,
    ], 3)}
  `,
};

```

The `unionRound` helper generates the nested GLSL call automatically, inserting the appropriate `implicit_union_round` function with the specified blend radius.

## Adding Parameters and Animations

To make models interactive, define a `params` object and reference the parameter names directly in your GLSL code. The viewer automatically injects these as uniforms.

### Defining UI Controls

```javascript
// models/implicit-cad/breathing-orb.implicit.js
import { vec3 } from '../scripts/lib/implicit-cad.mjs';

export default {
  schema: "implicit.js/0.1.0",
  name: "breathing orb",
  params: {
    radius: {
      type: "number",
      label: "Radius",
      min: 12,
      max: 34,
      default: 22,
      unit: "mm",
    },
  },
  animations: {
    breathe: {
      label: "Breathe",
      duration: 3,
      update({ progress, set }) {
        set("radius", 18 + Math.sin(progress * Math.PI) * 10);
      },
    },
  },
  render: { steps: 224, epsilon: 0.004 },
  glsl: `
    float sdf(vec3 p) {
      return length(p) - radius;   // radius is injected as a GLSL uniform
    }

    vec3 color(vec3 p, vec3 normal) {
      return mix(vec3(0.10, 0.58, 0.95),
                 vec3(1.0, 0.34, 0.12),
                 smoothstep(-18.0, 18.0, p.z));
    }
  `,
};

```

The `params` configuration generates a slider in the CAD Viewer UI, allowing real‑time adjustment of the `radius` uniform. The `animations` block defines a procedural animation that updates the uniform over a 3‑second duration.

## CLI Workflows for Verification and Export

Once your [`.implicit.js`](https://github.com/earthtojake/text-to-cad/blob/main/.implicit.js) file is ready, use the provided CLI tools to generate static previews or export to standard mesh formats for slicing and simulation.

### Generating Snapshots with snapshot.mjs

The `snapshot.mjs` script renders a PNG or GIF preview without launching the interactive viewer, ideal for CI pipelines or quick visual verification.

```bash
node scripts/snapshot.mjs \
  --input models/implicit-cad/breathing-orb.implicit.js \
  --output /tmp/breathing-orb.png

```

This invokes the same runtime used by the viewer but outputs a raster image instead of opening a WebGL context.

### Exporting Meshes with export.mjs

To convert the SDF into a polygonal mesh for downstream manufacturing, run `export.mjs` with your desired format:

```bash
node scripts/export.mjs \
  --input models/implicit-cad/breathing-orb.implicit.js \
  --format glb

```

The command produces `breathing-orb.glb` in the same directory as the source file. Supported formats include `glb`, `stl`, and `3mf`.

## Summary

- The **Implicit CAD** skill uses [`.implicit.js`](https://github.com/earthtojake/text-to-cad/blob/main/.implicit.js) modules to define SDFs in GLSL that run natively in the browser via the `packages/implicitjs` runtime.
- Author models by exporting an object with `schema: "implicit.js/0.1.0"`, a `name`, and a `glsl` string containing the `sdf` function.
- Import helpers from `skills/implicit-cad/scripts/lib/implicit-cad.mjs` to construct GLSL code cleanly and avoid syntax errors.
- Add interactivity using `params` (injected as uniforms) and `animations` (procedural updates) for real‑time parameter tweaking.
- Use `scripts/snapshot.mjs` for quick PNG/GIF previews and `scripts/export.mjs` to generate mesh files (`glb`, `stl`, `3mf`) for fabrication.

## Frequently Asked Questions

### What file extension should I use for Implicit CAD models?

Use [`.implicit.js`](https://github.com/earthtojake/text-to-cad/blob/main/.implicit.js) or `.implicit.mjs` so the CAD Viewer recognizes the file as an Implicit CAD skill module. The viewer watches these extensions and automatically loads them as ES modules when the skill is installed.

### How does the viewer handle parameters defined in the params object?

The viewer parses the `params` configuration and generates UI controls (such as sliders for number types). Each parameter name becomes a GLSL uniform variable automatically injected into the shader scope, allowing the `sdf` function to reference values that update in real time as you adjust the controls.

### Can I use custom GLSL functions outside the provided primitives?

Yes, you can define helper functions inside the `glsl` string before the `sdf` function. However, boolean operations and primitives should use the runtime‑provided functions (e.g., `implicit_union_round`, `implicit_sphere`) located in `packages/implicitjs` to ensure compatibility with the ray‑march renderer and proper surface normal calculations.

### What is the difference between snapshot.mjs and export.mjs?

`snapshot.mjs` renders a pixel‑accurate image (PNG/GIF) of the model using the viewer's ray‑march engine for quick visual checks. `export.mjs` performs a meshing operation to convert the continuous SDF into a polygonal format (`glb`, `stl`, or `3mf`) suitable for 3D printing or simulation software, producing a boundary representation rather than a procedural one.