1793cecTime-domain nonlinear shell cymbal after Samejima (2021)Jeremy Magland 1// Hook owning the render worker. Unlike the sibling cymbal app there is no
2// debounced auto-preview: a cymbal2 render is a full time-domain integration
3// and takes from tens of seconds (preview) to minutes (full quality) in the
4// browser, so renders are explicit. A request in flight can be cancelled,
5// which tears the worker down and builds a fresh one.
7import { useCallback, useEffect, useRef, useState } from 'react';
8import type { Cymbal2Params } from '../params';
9import type { MFile } from '../mfiles';
10import type { ErrorMessage, ProgressMessage, RenderResponse } from '../worker/renderWorker';
12export interface RenderError {
13 message: string;
14 file?: string;
15 line?: number;
16}
18export interface RenderState {
19 result: RenderResponse | null;
20 error: RenderError | null;
21 busy: boolean;
22 stage: string;
23 elapsedS: number;
24}
26export function useRenderer(params: Cymbal2Params, mfiles: MFile[]) {
27 const workerRef = useRef<Worker | null>(null);
28 const nextId = useRef(1);
29 const inFlight = useRef<number | null>(null);
30 const startedAt = useRef(0);
31 const [state, setState] = useState<RenderState>({
32 result: null,
33 error: null,
34 busy: false,
35 stage: '',
36 elapsedS: 0,
37 });
39 const attachHandlers = useCallback((worker: Worker) => {
40 worker.onmessage = (ev: MessageEvent<RenderResponse | ProgressMessage | ErrorMessage>) => {
41 const msg = ev.data;
42 if (msg.type === 'progress') {
43 setState((s) => ({ ...s, stage: msg.stage }));
44 return;
45 }
46 inFlight.current = null;
47 if (msg.type === 'error') {
48 setState((s) => ({
49 ...s,
50 error: { message: msg.message, file: msg.file, line: msg.line },
51 busy: false,
52 stage: '',
53 }));
54 return;
55 }
56 setState((s) => ({ ...s, result: msg, error: null, busy: false, stage: '' }));
57 };
58 }, []);
60 const makeWorker = useCallback(() => {
61 const worker = new Worker(new URL('../worker/renderWorker.ts', import.meta.url), {
62 type: 'module',
63 });
64 attachHandlers(worker);
65 workerRef.current = worker;
66 return worker;
67 }, [attachHandlers]);
69 useEffect(() => {
70 const worker = makeWorker();
71 return () => {
72 worker.terminate();
73 workerRef.current = null;
74 inFlight.current = null;
75 };
76 }, [makeWorker]);
78 // elapsed-time ticker while a render is in flight
79 useEffect(() => {
80 if (!state.busy) return;
81 const t = setInterval(
82 () => setState((s) => ({ ...s, elapsedS: (performance.now() - startedAt.current) / 1000 })),
83 250,
84 );
85 return () => clearInterval(t);
86 }, [state.busy]);
88 const render = useCallback(
89 (quality: 'preview' | 'full') => {
90 const worker = workerRef.current;
91 if (!worker || inFlight.current !== null) return;
92 const id = nextId.current++;
93 inFlight.current = id;
94 startedAt.current = performance.now();
95 setState((s) => ({ ...s, busy: true, stage: 'starting', elapsedS: 0 }));
96 worker.postMessage({ type: 'render', id, params, mfiles, quality });
97 },
98 [params, mfiles],
99 );
101 const cancel = useCallback(() => {
102 const worker = workerRef.current;
103 if (worker) worker.terminate();
104 inFlight.current = null;
105 makeWorker();
106 setState((s) => ({ ...s, busy: false, stage: '', elapsedS: 0 }));
107 }, [makeWorker]);
109 const renderPreview = useCallback(() => render('preview'), [render]);
110 const renderFull = useCallback(() => render('full'), [render]);
112 return { ...state, renderPreview, renderFull, cancel };
113}