Renderer Overview

This is another optional deep dive. If you only care about the end result, feel free to skip it. If you like knowing why the Viewer feels so smooth, read on.

Once the geometry engine finishes, the web studio needs to show the stone in real time. The Renderer is a thin WebGL2 layer written in TypeScript. Even if you never plan to touch the code, knowing how it works explains why the Viewer feels so responsive.

Data hand-off

1. The wasm bridge exposes slices of memory that contain vertex positions, normals, indices, and label data.
2. TypeScript creates typed-array views on top of that memory. No copies are made, so every time you edit the FSL file and re-run the interpreter, the buffers update instantly.
3. The Renderer binds those views to WebGL buffer objects and draws them as triangles with per-facet colors.

Because the buffers are shared, even large stones load quickly without stuttering.

View modes and lighting

The Viewer offers a few shading styles:

• Mono (Uniform) – solid color with soft lighting, ideal for spotting facet alignment.
• Palette – highlights tiers with alternating colors to emphasise symmetry.
• Raytraced – real-time internal reflection and refraction shading for interactive sparkle checks.
• ASET & Window – angular light-return and tilt-leakage diagnostic shaders.

Switching modes simply swaps shader programs (or engines); the underlying geometry stays the same.

Labels and overlays

Tier labels are rendered on a 2D canvas layered over the WebGL canvas. The Renderer projects each label position into screen space, then draws rounded rectangles so names stay legible regardless of zoom. Frosted facets and selection hints are also handled in this overlay.

Camera controls

• Drag to orbit, scroll to zoom, right-click (or two-finger drag) to pan.
• The camera maintains sensible limits so you cannot accidentally flip the stone upside down unless you intentionally enable “Flip” in the toolbar.
• A “Home” button snaps back to the default orientation.

All camera math happens in TypeScript, but the parameters mirror the physical feel of a mast and dops.

Printing tie-in

When you print from the web studio, the Renderer is temporarily hidden and the faceting diagram panel moves into a separate print root. The SVG data comes straight from the Rust printable builder, so the on-screen view matches the printed packet.

Extending the Renderer

Want to add wireframe mode, measurement overlays, or custom palettes?

1. Update the wasm bridge if you need additional data (e.g., facet areas).
2. Add new shader programs or overlay drawing logic in web/src/renderer.ts.
3. Wire new controls through web/src/main.ts.

Remember to rebuild the wasm module and re-run npm run dev after changing the Rust side.

That is the entire story—no hidden frameworks, just a lean bridge between Rust geometry and WebGL. Feel free to experiment once you are comfortable with the basics.