1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
import {
applyEffectPasses,
applyMaskFeather as applyMaskFeatherWasm,
initializeGpu,
} from "opencut-wasm";
import type { EffectPass, EffectUniformValue } from "@/effects/types";
import { wasmCompositor } from "./compositor/wasm-compositor";
const canvasRepairListeners = new Set<() => void>();
export function onGpuCanvasRepaired({
callback,
}: {
callback: () => void;
}): () => void {
canvasRepairListeners.add(callback);
return () => canvasRepairListeners.delete(callback);
}
function repairSharedCompositorCanvas(): void {
wasmCompositor.repairSharedCanvas();
for (const listener of canvasRepairListeners) {
listener();
}
}
let gpuAvailable = false;
let initPromise: Promise<void> | null = null;
export function initializeGpuRenderer(): Promise<void> {
if (!initPromise) {
initPromise = initializeGpu()
.then(() => {
gpuAvailable = true;
})
.catch((error: unknown) => {
gpuAvailable = false;
const message = error instanceof Error ? error.message : String(error);
console.warn(`GPU renderer unavailable: ${message}`);
});
}
return initPromise;
}
export function isGpuAvailable(): boolean {
return gpuAvailable;
}
export const gpuRenderer = {
applyEffect({
source,
width,
height,
passes,
}: {
source: OffscreenCanvas;
width: number;
height: number;
passes: EffectPass[];
}): OffscreenCanvas {
if (passes.length === 0 || !gpuAvailable) {
return source;
}
const result = applyEffectPasses({
source,
width,
height,
passes: serializeEffectPasses(passes),
});
repairSharedCompositorCanvas();
return result;
},
applyMaskFeather({
maskCanvas,
width,
height,
feather,
}: {
maskCanvas: OffscreenCanvas;
width: number;
height: number;
feather: number;
}): OffscreenCanvas {
if (!gpuAvailable) {
return maskCanvas;
}
const result = applyMaskFeatherWasm({
mask: maskCanvas,
width,
height,
feather,
});
repairSharedCompositorCanvas();
return result;
},
};
function serializeEffectPasses(passes: EffectPass[]) {
return passes.map((pass) => ({
shader: pass.shader,
uniforms: Object.entries(pass.uniforms).map(([name, value]) => ({
name,
value: normalizeUniformValue(value),
})),
}));
}
function normalizeUniformValue(value: EffectUniformValue): number[] {
return typeof value === "number" ? [value] : value;
}
|
