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

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 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 declares the .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), 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 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.

// 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.

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

// 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 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.

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:

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 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}