Browser support

Glyphfield checks for browser capabilities instead of browser names. The documentation and the deterministic HTTP API need only ordinary modern web features. The Studio needs the graphics, storage, file and codec features that the active tool uses.

Required capabilities

Recommended setup

Use a current desktop browser with hardware acceleration on, persistent storage, downloads allowed, and enough memory for the selected canvas size. Rendering motion needs much more memory and GPU time than reading the documentation or exporting a small still.

For production checks, test the browsers your audience uses instead of inferring support from a user-agent string. MP4 and WebGL support can differ across operating systems, GPU drivers, browser settings and managed-device policies.

Detect features at runtime

An integration can run a short check before it starts a large job:

// A canvas holds one context type, so each check uses its own canvas.
const canvas = () => document.createElement('canvas');

const support = {
  canvas2d: Boolean(canvas().getContext('2d')),
  webgl2: Boolean(canvas().getContext('webgl2', { failIfMajorPerformanceCaveat: true })),
  webgpu: 'gpu' in navigator && Boolean(await navigator.gpu.requestAdapter().catch(() => null)),
  webCodecs: 'VideoEncoder' in window,
  indexedDb: 'indexedDB' in window,
  localStorage: (() => {
    try {
      const key = 'glyphfield-capability-check';
      localStorage.setItem(key, '1');
      localStorage.removeItem(key);
      return true;
    } catch {
      return false;
    }
  })(),
};

This check is coarse. The reliable test for MP4 is starting the real encoder, and the reliable test for a material is rendering it in the Studio.

WebGL and WebGPU behavior

Shader Library cards are static WebP thumbnails, so browsing the library does not start any GPU renderer. A live material canvas renders only while it is within 160 px of the viewport, and it stops while the page is hidden. Every live WebGL material needs WebGL2, and there is no WebGL1 fallback. The Glyph field material draws with Canvas 2D. Design Lab's Live shader preview quality setting limits the live shader resolution (Shaders and time explains the options).

When a material is replaced, the previous material stays on the canvas, paused, until the new one has drawn its first frame (for at most 8 seconds). Then it fades out over 160 ms.

If a WebGL context is lost, Glyphfield remounts the renderer after 350 ms. After five remounts it marks the surface as failed, and after a 2.5-second pause it tries again. When the renderer does not recover, keep the source and continue in another supported browser. A static thumbnail shows the intended look but does not prove that an animated export contains real motion.

Motion and memory

Export cost grows with width × height × frame count. A four-second, 1920-pixel animation at 30 FPS needs far more memory and GPU and CPU time than a 960-pixel proof at 15 FPS.

When the browser is under memory pressure:

1. Save and copy the current source.
2. Close duplicate Studio tabs and stop any live sequence preview.
3. Export one format at a time.
4. Test at a smaller width or frame rate.
5. Return to the final dimensions after the smaller export succeeds.

A smaller proof is a diagnostic step. Deliver the size and quality that were requested.

Private browsing and embedded webviews

Private browsing, strict tracking protection, sandboxed iframes and embedded webviews can limit storage, downloads, file selection, clipboard access, WebGL or codecs. The Studio can look normal while saving or exporting is unavailable.

Do not rely on browser-local saves in a temporary profile. Copy the source and download the artifacts during the same session.

Reduced motion

The Studio follows the operating system's prefers-reduced-motion setting. Reduce motion in the Studio's Visual settings pauses decorative effects and makes interface transitions instant. While the operating system requests reduced motion, Design Lab's Auto preview quality stops measuring frame times. Exporting motion is always an explicit action. A product that embeds exported animation should offer a still alternative and respect prefers-reduced-motion during playback.

Browser acceptance test

For each production browser:

1. Load /docs and /studio and confirm that the console shows no fatal errors.
2. Create a project and confirm that it survives a reload.
3. Open Design Lab and render a WebGL2 material and a Shaders.com WebGPU material.
4. Import a small authorized image and confirm that it survives a source round trip.
5. Export a PNG and confirm its MIME type, dimensions and non-zero size.
6. Export a short GIF and inspect several frames and the point where it loops.
7. Export an MP4 and confirm that it plays, with audio when audio is required.
8. Open a saved design after a reload and compare it with the exported proof.

Troubleshooting, Formats and portability and Accessibility cover related topics.