Skip to content

Commit 63a7ec6

Browse files
miguel-heygenmiguel-heygen
authored
feat(registry): eight more WebGPU shader backgrounds and a bundle with thirty new shaders (#5191)
* feat(registry): eight more WebGPU shader backgrounds and a bundle with thirty new shaders * refactor(registry): simpler bundle copy step in the shader build * test(registry): every shader block ships the same bundle and names a shader in it * refactor(registry): one block loader for the shader block tests * test(registry): name the stale block and match only shader names * chore(registry): shorter licence line at the top of the shader bundle * test(registry): every shader block installs the bundle's licences
1 parent 0576b24 commit 63a7ec6

42 files changed

Lines changed: 6410 additions & 1124 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎packages/cli/src/registry/registryBlocks.test.ts‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,15 @@ function loadRegistryManifest(itemDir: string): RegistryManifest {
1919
return JSON.parse(readFileSync(join(itemDir, "registry-item.json"), "utf8")) as RegistryManifest;
2020
}
2121

22+
function loadBlocks(): Array<{ name: string; itemDir: string; manifest: RegistryManifest }> {
23+
return readdirSync(blocksDir, { withFileTypes: true })
24+
.filter((entry) => entry.isDirectory())
25+
.map((entry) => {
26+
const itemDir = join(blocksDir, entry.name);
27+
return { name: entry.name, itemDir, manifest: loadRegistryManifest(itemDir) };
28+
});
29+
}
30+
2231
function findMissingLocalScripts(itemDir: string, manifest: RegistryManifest): string[] {
2332
const manifestPaths = new Set(manifest.files.map((file) => file.path));
2433
const missing: string[] = [];
@@ -110,6 +119,43 @@ describe("registry blocks", () => {
110119
expect(missing).toEqual([]);
111120
});
112121

122+
// Blocks installing the same shared library overwrite each other's copy, so a stale one downgrades the rest.
123+
it("ships the same bytes from every block that installs a shared library", () => {
124+
// target -> bytes -> blocks installing those bytes there
125+
const installs = new Map<string, Map<string, string[]>>();
126+
for (const { name, itemDir, manifest } of loadBlocks()) {
127+
for (const file of manifest.files) {
128+
if (!file.target.startsWith("compositions/lib/")) continue;
129+
const content = readFileSync(join(itemDir, file.path), "latin1");
130+
const byContent = installs.get(file.target) ?? new Map<string, string[]>();
131+
byContent.set(content, [...(byContent.get(content) ?? []), name]);
132+
installs.set(file.target, byContent);
133+
}
134+
}
135+
136+
expect(installs.has("compositions/lib/shaders.iife.js")).toBe(true);
137+
const diverged = [...installs]
138+
.filter(([, byContent]) => byContent.size > 1)
139+
.map(([target, byContent]) => `${target}: ${[...byContent.values()].join(" vs ")}`);
140+
expect(diverged).toEqual([]);
141+
});
142+
143+
it("names a shader the shared bundle holds, and installs its licences, in every shader block", () => {
144+
const missing: string[] = [];
145+
for (const { name, itemDir, manifest } of loadBlocks()) {
146+
const bundle = manifest.files.find((f) => f.target === "compositions/lib/shaders.iife.js");
147+
const composition = manifest.files.find((f) => f.type === "hyperframes:composition");
148+
if (!bundle || !composition) continue;
149+
const html = readFileSync(join(itemDir, composition.path), "utf8");
150+
const shader = html.match(/data-shader="([^"]+)"/)?.[1];
151+
const code = readFileSync(join(itemDir, bundle.path), "utf8");
152+
if (!shader || !code.includes(`name:"${shader}",role:`)) missing.push(`${name}: ${shader}`);
153+
const licences = "compositions/lib/shaders.THIRD-PARTY-LICENSES.txt";
154+
if (!manifest.files.some((f) => f.target === licences)) missing.push(`${name}: no licences`);
155+
}
156+
expect(missing).toEqual([]);
157+
});
158+
113159
it("keeps the Camcorder HUD seekable inside a differently named host composition", async () => {
114160
const bundled = await bundleToSingleHtml(resolve(blocksDir, "camcorder-hud"), {
115161
entryFile: "demo.html",

‎registry/blocks/aurora/aurora.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<style>
6+
[data-composition-id="aurora"] canvas[data-shader] {
7+
position: absolute;
8+
inset: 0;
9+
width: 1920px;
10+
height: 1080px;
11+
display: block;
12+
background: #000;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
<div
18+
data-composition-id="aurora"
19+
data-start="0"
20+
data-duration="2"
21+
data-width="1920"
22+
data-height="1080"
23+
data-requires-webgpu
24+
data-no-timeline
25+
style="position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #000"
26+
>
27+
<canvas data-shader="Aurora" width="1920" height="1080"></canvas>
28+
</div>
29+
<script src="lib/shaders.iife.js"></script>
30+
</body>
31+
</html>

‎registry/blocks/aurora/lib/shaders.THIRD-PARTY-LICENSES.txt‎

Lines changed: 314 additions & 0 deletions
Large diffs are not rendered by default.

‎registry/blocks/aurora/lib/shaders.iife.js‎

Lines changed: 267 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎registry/blocks/aurora/registry-item.json‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
3+
"name": "aurora",
4+
"type": "hyperframes:block",
5+
"title": "Aurora",
6+
"description": "Green and violet aurora curtains ripple across a night sky. A WebGPU shader from the Shaders library (shaders.com, MIT).",
7+
"tags": ["webgpu", "webgpu-shader", "background", "light", "aurora", "sky"],
8+
"license": "Apache-2.0 AND MIT",
9+
"dimensions": {
10+
"width": 1920,
11+
"height": 1080
12+
},
13+
"duration": 2,
14+
"files": [
15+
{
16+
"path": "aurora.html",
17+
"target": "compositions/aurora.html",
18+
"type": "hyperframes:composition"
19+
},
20+
{
21+
"path": "lib/shaders.iife.js",
22+
"target": "compositions/lib/shaders.iife.js",
23+
"type": "hyperframes:asset"
24+
},
25+
{
26+
"path": "lib/shaders.THIRD-PARTY-LICENSES.txt",
27+
"target": "compositions/lib/shaders.THIRD-PARTY-LICENSES.txt",
28+
"type": "hyperframes:asset"
29+
}
30+
],
31+
"preview": {
32+
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/aurora.mp4"
33+
}
34+
}

‎registry/blocks/flowing-gradient/lib/shaders.iife.js‎

Lines changed: 183 additions & 182 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎registry/blocks/frost/frost.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<style>
6+
[data-composition-id="frost"] canvas[data-shader] {
7+
position: absolute;
8+
inset: 0;
9+
width: 1920px;
10+
height: 1080px;
11+
display: block;
12+
background: #000;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
<div
18+
data-composition-id="frost"
19+
data-start="0"
20+
data-duration="2"
21+
data-width="1920"
22+
data-height="1080"
23+
data-requires-webgpu
24+
data-no-timeline
25+
style="position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #000"
26+
>
27+
<canvas data-shader="Frost" width="1920" height="1080"></canvas>
28+
</div>
29+
<script src="lib/shaders.iife.js"></script>
30+
</body>
31+
</html>

0 commit comments

Comments
 (0)