# Material atelier / free sample

A 48-fold ring in a pale studio. Compare clay, silver, and green ink, adjust the surface and lighting, or drag the object to turn it. The angle slider provides the same control from a keyboard. About this study contains the short explanation; the instrument stays focused on the material. All runtime files are local; the example makes no CDN, font, telemetry, or asset requests to another host.

Open `index.html` directly in your browser. The interactive study works offline; no server or installation is required. The readable source and all dependencies remain in this folder.

Use the finish presets, then keep the camera and lighting fixed while changing roughness. The finish name describes the chosen preset; slider changes are custom adjustments to that preset. Values are artistic parameters, not a measured physical material model.

The original geometry is a closed parametric annulus with 48 helical pleats, 28,273 vertices, and 55,296 triangles. Surface normals are sampled from derivatives to avoid a visible seam. The transparent static image is an original procedural projection of this same surface. It uses an illustrative lighting approximation and remains available without WebGL.

The study starts paused even when reduced motion is off. A change to the operating-system reduced-motion preference pauses rotation. An explicit Start rotation action can start it again. Hidden tabs stop frames. Static parameter changes render on demand. A pixel-ratio cap limits rendering cost.

Exercises and checks:

1. Select Silver. The title, selected preset, roughness, metallic value, and rendered surface change together.
2. Use Tab and arrow keys on each range. Rotation pauses when you set a manual angle.
3. Drag horizontally on the object. Start rotation, pause, and reset. Reset restores the clay values, camera-relative orientation, and exposure.
4. Open `?fallback=1`. The static illustration and explanation remain; renderer-only controls are disabled.
5. Disable JavaScript or block the generated app bundle. The initial illustration remains available.
6. Resize to a narrow viewport. Controls follow the stage without clipping or horizontal page scrolling.
7. Inspect reduced motion and hidden-tab behavior in your browser. Test screen-reader output separately from visual rendering.

The example demonstrates [material studies](../../skills/three-d/material-study/SKILL.md), [fallbacks](https://www.rival.tips/workshop), [scene lifecycle](https://www.rival.tips/workshop), and [scene interaction](https://www.rival.tips/workshop). The geometry, material definitions, interface, and procedural fallback image are original. No external reference assets are bundled. Three.js 0.180.0 and RoomEnvironment are MIT licensed; see [vendor provenance](vendor/PROVENANCE.md) and [the retained license](vendor/THREE-LICENSE.txt).

This is a learning artifact, not a claim of complete accessibility conformance or photometric accuracy. Recheck browser support and graphics performance when adapting it to a production product.

## Rebuilding the offline script

The page loads `app.bundle.js`, a classic script containing `app.js`, the pinned local Three.js modules, and RoomEnvironment. Source files stay readable and editable. No runtime imports, CDN, or local server are needed.

Use `index.html?embed=1` inside Workshop's example viewer. It hides the standalone header and finish description, keeps the rendering status and all controls, and fits the desktop stage to the viewer height. The standalone view and mobile layout remain available.

From the Rival repository root, after assembling the v4 authoring copy and before running the Workshop release builder:

```sh
node scripts/kits/prepare-material-offline.mjs
```

An optional directory argument rebuilds another complete copy:

```sh
node scripts/kits/prepare-material-offline.mjs path/to/material-atelier
```

The build uses the repository's installed esbuild (current bundle: 0.27.7), preserves the upstream license comments and `vendor/THREE-LICENSE.txt`, checks for unresolved imports, and parses the result as a classic script. The browser still needs WebGL for live rendering; the static image remains available when graphics are unavailable.

[Explore the full Rival Workshop edition](https://www.rival.tips/workshop).