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
114
115
116
117
118
|
import {
applyEffectPasses,
applyMaskFeather as applyMaskFeatherWasm,
initializeGpu,
} from "opencut-wasm";
import type { EffectPass, EffectUniformValue } from "@/lib/effects/types";
let initializeGpuRendererPromise: Promise<void> | null = null;
export function initializeGpuRenderer(): Promise<void> {
if (!initializeGpuRendererPromise) {
initializeGpuRendererPromise = initializeGpu();
}
const promise = initializeGpuRendererPromise;
if (!promise) {
throw new Error("GPU renderer initialization promise was not created");
}
return promise;
}
export const gpuRenderer = {
applyEffect({
source,
width,
height,
passes,
}: {
source: CanvasImageSource;
width: number;
height: number;
passes: EffectPass[];
}): CanvasImageSource {
if (passes.length === 0) {
return source;
}
const sourceCanvas = ensureOffscreenCanvas({
source,
width,
height,
label: "effect source",
});
return applyEffectPasses({
source: sourceCanvas,
width,
height,
passes: serializeEffectPasses(passes),
});
},
applyMaskFeather({
maskCanvas,
width,
height,
feather,
}: {
maskCanvas: CanvasImageSource;
width: number;
height: number;
feather: number;
}): CanvasImageSource {
const sourceCanvas = ensureOffscreenCanvas({
source: maskCanvas,
width,
height,
label: "mask source",
});
return applyMaskFeatherWasm({
mask: sourceCanvas,
width,
height,
feather,
});
},
};
function ensureOffscreenCanvas({
source,
width,
height,
label,
}: {
source: CanvasImageSource;
width: number;
height: number;
label: string;
}): OffscreenCanvas {
if (source instanceof OffscreenCanvas) {
return source;
}
if (typeof OffscreenCanvas === "undefined") {
throw new Error(`OffscreenCanvas is required for the GPU ${label}`);
}
const canvas = new OffscreenCanvas(width, height);
const context = canvas.getContext("2d");
if (!context) {
throw new Error(`Failed to get 2d context for the GPU ${label}`);
}
context.clearRect(0, 0, width, height);
context.drawImage(source, 0, 0, width, height);
return canvas;
}
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;
}
|
