scenic-draft-standalone

A scenic-draft scene, as one self-contained HTML file.

import { backgrounds, buildStandaloneHtml, materials, plane, sphere } from 'scenic-draft-standalone';
import { writeFileSync } from 'node:fs';

const SCENE = {
  scene: sphere(1).paint(materials.chrome).union(plane([0, 1, 0], -1)),
  background: backgrounds.dusk,
};

writeFileSync('chrome.html', buildStandaloneHtml(SCENE, { size: 900, seed: 7, min: true }));

The file that comes out depends on nothing. scenic-draft compiles a scene to GLSL with every parameter baked in as a numeric literal, so by the time the page is written there is no scene left to interpret and no library left to load — only the shader, a canvas, and the few dozen lines that add one sample per pixel per frame into it. No script tag pointing anywhere, no import, no font, no image. Open it off a disk with the network unplugged and it draws.

Install

npm install scenic-draft-standalone
# or: pnpm add scenic-draft-standalone

That is the whole install. The package carries scenic-draft and scenic-draft-fluent at exact versions and re-exports the whole of both, so the scene, the materials, the backgrounds and the camera all come from the same import that writes the page. It ships ESM with TypeScript declarations, and works in Node and in a browser alike — building a page is string work.

buildStandaloneHtml(spec, options?)

Compiles spec and returns the document as a string. Where that string goes — a file, an HTTP response, an <iframe srcdoc> — is yours.

| Option | | | | --- | --- | --- | | size | number | Square backing resolution in pixels (default 1024). | | width height | number | The same, when the canvas is not square. | | maxFrames | number | Samples per pixel to accumulate before stopping (default 1200). | | bounces | number | Light-bounce budget, baked into the shader (default 6). | | seed | number | Fix the sample sequence, so every visitor sees the same noise. | | min | boolean | Minify the markup, the stylesheet, the script and the shader. | | title | string | The document's <title> (default scenic-draft). |

width and height are the canvas's backing store, and so what the shader is compiled for. How large the page draws it is the stylesheet's business: it is centred and fitted to the window, so a 2048-pixel render is still a 2048-pixel render on a phone.

downloadStandaloneHtml(spec, options?)

The same page, saved by the browser it is called in — an export button, in one call. Takes everything above plus filename (default scene.html; .html is appended if it is missing), and returns the same HTML string, so a caller that also wants to show or measure what it saved need not build it twice.

<button onClick={() => downloadStandaloneHtml(SCENE, { size: 900, min: true })}>
  Download this scene
</button>

min

min strips the comments and squeezes the whitespace out of all four languages in the file. It renames nothing and reorders nothing — an identifier in a minified page is the identifier this package wrote, and the shader is the same shader — so the two modes differ in size and in nothing else. Roughly a third comes off a typical page; the shader is most of what is left, and most of that is the scene.

Leave it off while you are working — the readable file is the best description of what the library actually does at runtime — and turn it on for what you ship.

What is in the file

<canvas>            the backing store, at the size you asked for
<style>             centre it, fit it to the window, nothing else
<script>
  WIDTH … SEED      the constants you passed
  VERTEX            a fullscreen triangle drawn from gl_VertexID
  FRAGMENT          your scene, compiled
  DISPLAY           tonemap and gamma, accumulation buffer to canvas
  the loop          two float targets, ping-ponged, one sample per frame

The loop is scenic-draft's own renderer with everything a library needs taken out — no handle, no teardown, no progress callback, no context-loss recovery — because a page that draws one picture and stops has nobody to hand any of that to. A browser without WebGL2, or without float render targets, gets a line of text saying so instead of a black rectangle.

The companion packages

| Package | | | --- | --- | | scenic-draft | The library: scenes, the compiler, the renderer. | | scenic-draft-fluent | The same vocabulary, chained. | | scenic-draft-react | The renderer as a React component. | | scenic-draft-playwright | Scenes rendered to image files, from Node. |

All five are released together and carry the same version.

Licence

MIT