chore: archive dq8-audioctx worktree state 2026-09-25

This commit is contained in:
Miguel Angel Simon Sierra
2026-09-25 13:28:32 -04:00
parent ea1fcec9e0
commit 97fb42b581
68 changed files with 201 additions and 47304 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,328 +1,3 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kinetic Typography Sequence</title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<style>
[data-composition-id="typography"] .text-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: white;
text-align: center;
}
[data-composition-id="typography"] .phrase {
font-size: 100px;
font-weight: 500;
opacity: 0;
position: absolute;
text-transform: uppercase;
letter-spacing: -2px;
width: 90%;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
[data-composition-id="typography"] .word {
opacity: 0;
display: inline-block;
}
[data-composition-id="typography"] .glitch-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
mix-blend-mode: screen;
opacity: 0;
}
[data-composition-id="typography"] .chromatic {
color: #ff00ff;
transform: translateX(5px);
}
[data-composition-id="typography"] .chromatic-2 {
color: #00ffff;
transform: translateX(-5px);
}
[data-composition-id="typography"] .cursor {
opacity: 0;
margin-left: 10px;
}
[data-composition-id="typography"] .thank-you {
font-size: 150px;
background: linear-gradient(90deg, #00f2fe 0%, #4facfe 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}[data-composition-id="typography"] /* Glitch Effect Classes */
.glitch-flicker {
animation: flicker 0.1s infinite;
}
@[data-composition-id="typography"] keyframes flicker {[data-composition-id="typography"] 0% { opacity: 0.5; transform: skew(2deg); }[data-composition-id="typography"] 50% { opacity: 1; transform: skew(-2deg); }[data-composition-id="typography"] 100% { opacity: 0.8; transform: skew(0deg); }
}
</style>
</head>
<body>
<div
id="main"
data-composition-id="main-comp"
data-width="1080"
data-height="1920"
data-start="0"
data-duration="15"
>
<!-- Audio Asset -->
<audio
id="bg-music"
src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/generated_assets/f87f97d4_0c49f6fa95224cc3bd4f5ea3a0d937c5.wav"
data-start="0"
data-duration="15"
data-track-index="0"
data-end="15"
></audio>
<!-- Typography Composition -->
<div
style="position: relative; width: 1080px; height: 1920px"
data-height="1920"
data-width="1080"
id="typography-layer"
data-composition-id="typography"
data-start="0"
data-track-index="1"
>
<div class="text-container">
<div id="scene-1" class="phrase">
<span class="word">TEXT</span>
<span class="word">ANIMATION</span>
</div>
<div id="scene-2" class="phrase">
<span class="word">WHAT</span>
<span class="word">DO</span>
<span class="word">YOU</span>
<span class="word">WANT</span>
<span class="word">TO</span>
<span class="word">WRITE?</span>
</div>
<div id="scene-3" class="phrase">
<span class="word">EVERYTHING</span>
<span class="word">YOU</span>
<span class="word">WANT,</span>
</div>
<div id="scene-4" class="phrase">
<span class="word">STANDING</span>
<span class="word">IN</span>
<span class="word">FRONT</span>
<span class="word">OF</span>
<span class="word">YOU.</span>
</div>
<div id="scene-5" class="phrase">
<span class="word">VERY</span>
<span class="word">EASY,</span>
</div>
<div id="scene-6" class="phrase">
<span class="word">AND</span>
<span class="word">FAST.</span>
</div>
<div id="scene-7" class="phrase">
<span class="word">SIT</span>
<span class="word">BACK</span>
<span class="word">AND</span>
<span class="word">RELAX</span>
<span class="cursor">|</span>
</div>
<div id="scene-8" class="phrase">
<span class="word">WHAT</span>
<span class="word">YOU</span>
<span class="word">ARE</span>
<span class="word">LOOKING</span>
<span class="word">FOR?</span>
</div>
<div id="scene-9" class="phrase">
<span class="word">THERE</span>
<span class="word">YOU</span>
<span class="word">HAVE</span>
<span class="word">IT!</span>
</div>
<div id="scene-10" class="phrase thank-you">
<span class="word">THANK</span>
<span class="word">YOU</span>
</div>
</div>
</div>
</div>
<script>
const masterTL = gsap.timeline({ paused: true });
window.__timelines["main-comp"] = masterTL;
(function () {
var __compId = "typography";
var __run = function () {
try {
const tl = gsap.timeline({ paused: true });
const scenes = [
{ id: "#scene-1", start: 0.5, duration: 1.2 },
{ id: "#scene-2", start: 2.0, duration: 1.8 },
{ id: "#scene-3", start: 4.0, duration: 1.0 },
{ id: "#scene-4", start: 5.2, duration: 1.5 },
{ id: "#scene-5", start: 7.0, duration: 0.8 },
{ id: "#scene-6", start: 8.0, duration: 0.8 },
{ id: "#scene-7", start: 9.0, duration: 1.8 },
{ id: "#scene-8", start: 11.0, duration: 1.5 },
{ id: "#scene-9", start: 12.8, duration: 1.0 },
{ id: "#scene-10", start: 14.0, duration: 1.0 },
];
scenes.forEach((scene, index) => {
const startTime = scene.start;
const sceneEl = document.querySelector(scene.id);
const words = sceneEl.querySelectorAll(".word");
// Show scene container
tl.set(scene.id, { opacity: 1 }, startTime);
// Word by word appearance
words.forEach((word, wIndex) => {
const wordStart = startTime + wIndex * 0.2;
// Creative Animation Variations
if (index % 3 === 0) {
// Fly-in from sides
const xOffset = wIndex % 2 === 0 ? -500 : 500;
tl.fromTo(
word,
{ opacity: 0, x: xOffset, scale: 0.5 },
{ opacity: 1, x: 0, scale: 1, duration: 0.4, ease: "back.out(1.7)" },
wordStart,
);
} else if (index % 3 === 1) {
// Fade-in with scale and rotation
tl.fromTo(
word,
{ opacity: 0, scale: 0, rotation: -45 },
{
opacity: 1,
scale: 1,
rotation: 0,
duration: 0.5,
ease: "elastic.out(1, 0.5)",
},
wordStart,
);
} else {
// Pop-In & Flicker (Original)
tl.set(word, { opacity: 1, scale: 1.5 }, wordStart);
tl.to(word, { scale: 1, duration: 0.1, ease: "power4.out" }, wordStart);
}
// Glitch/Chromatic Aberration & Horizontal Displacement on major beats
tl.to(
scene.id,
{
x: wIndex % 2 === 0 ? 15 : -15,
skewX: wIndex % 2 === 0 ? 5 : -5,
duration: 0.05,
repeat: 1,
yoyo: true,
ease: "none",
},
wordStart,
);
// Color flash for specific words (purple, cyan, teal)
if (
word.textContent.includes("ANIMATION") ||
word.textContent.includes("WRITE") ||
word.textContent.includes("FAST") ||
word.textContent.includes("EASY")
) {
tl.to(
word,
{ color: "#a855f7", duration: 0.1, repeat: 1, yoyo: true },
wordStart,
);
}
});
// Typewriter Cursor for Scene 7
if (scene.id === "#scene-7") {
const cursor = sceneEl.querySelector(".cursor");
tl.set(cursor, { opacity: 1 }, startTime + words.length * 0.2);
tl.to(
cursor,
{ opacity: 0, duration: 0.4, repeat: 3, yoyo: true, ease: "steps(1)" },
startTime + words.length * 0.2,
);
}
// Outro: Whole line disappears
tl.set(scene.id, { opacity: 0 }, startTime + scene.duration);
});
// Special Outro for Thank You
tl.to(
"#scene-10",
{
filter: "hue-rotate(360deg) drop-shadow(0 0 30px rgba(0, 255, 255, 1))",
scale: 1.2,
duration: 1.0,
ease: "power1.inOut",
},
14.0,
);
tl.to(
"#scene-10 .word",
{
opacity: 0,
y: -50,
stagger: 0.1,
duration: 0.5,
ease: "power2.in",
},
14.5,
);
window.__timelines["typography"] = tl;
} catch (_err) {
console.error("[Compiler] Composition script failed", __compId, _err);
}
};
if (!__compId) {
__run();
return;
}
var __selector = '[data-composition-id="' + (__compId + "").replace(/"/g, '\\"') + '"]';
var __attempt = 0;
var __tryRun = function () {
if (document.querySelector(__selector)) {
__run();
return;
}
if (++__attempt >= 8) {
__run();
return;
}
requestAnimationFrame(__tryRun);
};
__tryRun();
})();
</script>
</body>
</html>
version https://git-lfs.github.com/spec/v1
oid sha256:82b3a8f3cd08e580cc925a901957e7a61ad6a811d8a6c085ecd26f4135575222
size 11102
File diff suppressed because one or more lines are too long
@@ -1,82 +1,3 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1080, height=1920">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<style>body { margin: 0; background: #000; width: 1080px; height: 1920px; overflow: hidden; }
:root {
--test-bg: #9bbc0f;
--test-fg: #0f380f;
}
[data-composition-id="overlay"] {
position: absolute;
top: 0;
left: 0;
width: 1080px;
height: 1920px;
background-color: var(--test-bg);
font-family: 'Press Start 2P', monospace;
color: var(--test-fg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
[data-composition-id="overlay"] .box {
width: 400px;
height: 400px;
border: 8px solid var(--test-fg);
background: var(--test-bg);
}
[data-composition-id="overlay"] .title {
font-size: 48px;
margin-top: 40px;
}</style>
<link as="style" href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="preload"><link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"></head>
<body>
<div id="root" data-composition-id="root" data-width="1080" data-height="1920" data-duration="5" style="position:absolute;width:1080px;height:1920px;">
<div style="width:1080px;height:1920px" data-composition-id="overlay" data-start="0" data-track-index="1" data-width="1080" data-height="1920">
<div class="box"></div>
<div class="title">CSS IMPORT TEST</div>
</div>
</div>
<script>const tl = gsap.timeline({ paused: true });
tl.set({}, {}, 5);
window.__timelines["root"] = tl;
;
(function(){
var __compId = "overlay";
var __run = function() {
try {
(function() {
const tl = gsap.timeline({ paused: true });
tl.from('[data-composition-id="overlay"] .box', { scale: 0, duration: 1, ease: 'power2.out' }, 0);
tl.from('[data-composition-id="overlay"] .title', { opacity: 0, y: 30, duration: 0.5 }, 0.5);
tl.set({}, {}, 5);
window.__timelines["overlay"] = tl;
})();
} catch (_err) {
console.error("[Compiler] Composition script failed", __compId, _err);
}
};
if (!__compId) { __run(); return; }
var __selector = '[data-composition-id="' + (__compId + '').replace(/"/g, '\\"') + '"]';
var __attempt = 0;
var __tryRun = function() {
if (document.querySelector(__selector)) { __run(); return; }
if (++__attempt >= 8) { __run(); return; }
requestAnimationFrame(__tryRun);
};
__tryRun();
})()</script></body>
</html>
version https://git-lfs.github.com/spec/v1
oid sha256:24327fe1869fd90efaff6ad5d85064835f23b78798efb24894d38f2ef4ce6503
size 2768
@@ -1,21 +1,3 @@
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; background: #0a0a0f; width: 1920px; height: 1080px; color: #e0e0e0; font-family: system-ui, sans-serif; }
.stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 60px; }
.spinner { width: 200px; height: 200px; border: 16px solid rgba(255,255,255,0.12); border-top-color: #5eead4; border-radius: 50%; animation: spin 1s linear infinite; }
.label { font-size: 40px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
@keyframes spin { to { transform: rotate(360deg); } }
</style>
</head>
<body>
<div id="root" data-composition-id="css-spinner" data-width="1920" data-height="1080" data-start="0" data-duration="5">
<div class="stage clip" data-start="0" data-duration="5">
<div class="spinner"></div>
<div class="label">Loading</div>
</div>
</div>
<script>window.__timelines = window.__timelines || {};</script></body>
</html>
version https://git-lfs.github.com/spec/v1
oid sha256:e4927706cd5ed83fadfbed5b2afa1172292a417612016d8ee9ba2690b1cf87a9
size 1011
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,12 +1,3 @@
<!DOCTYPE html>
<html>
<head>
<style>body { margin: 0; background: #000; width: 1920px; height: 1080px; } iframe { border: 0; display: block; }</style>
</head>
<body>
<div id="root" data-composition-id="iframe-test" data-width="1920" data-height="1080" data-start="0" data-duration="5">
<iframe src="target.html" width="1920" height="1080" class="clip" data-start="0" data-duration="5"></iframe>
</div>
<script>window.__timelines = window.__timelines || {};</script></body>
</html>
version https://git-lfs.github.com/spec/v1
oid sha256:cc795c332a17d38cfe2eb457e26744bf4e82fdb91c96bb3790ba9baac68dc418
size 493
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,23 +1,3 @@
<!DOCTYPE html>
<html>
<head>
<style>body { margin: 0; background: #000; width: 1920px; height: 1080px; } canvas { display: block; }</style>
</head>
<body>
<div id="root" data-composition-id="raf-ball" data-width="1920" data-height="1080" data-start="0" data-duration="5">
<canvas id="c" width="1920" height="1080" class="clip" data-start="0" data-duration="5"></canvas>
</div>
<script>const ctx = document.getElementById('c').getContext('2d');
function draw(t) {
ctx.fillStyle = '#000'; ctx.fillRect(0, 0, 1920, 1080);
const x = 960 + Math.sin(t / 1000 * Math.PI) * 700;
ctx.fillStyle = '#f87171';
ctx.beginPath(); ctx.arc(x, 540, 80, 0, Math.PI * 2); ctx.fill();
ctx.fillStyle = '#9ca3af'; ctx.font = '32px system-ui, sans-serif';
ctx.fillText(`t = ${t.toFixed(0)} ms`, 40, 60);
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);
window.__timelines = window.__timelines || {};</script></body>
</html>
version https://git-lfs.github.com/spec/v1
oid sha256:362ff01000c74232839c6f53382b95acfa274cd79d005628e467b468d4b727e9
size 981
@@ -1,13 +1,3 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="shared/brand.css">
</head>
<body style="margin: 0">
<div data-composition-id="render-symlinked-assets" data-width="320" data-height="180" data-duration="5" style="position: relative; width: 320px; height: 180px; overflow: hidden">
<div class="stage clip" data-start="0" data-duration="5">
<div class="card">SYMLINK CSS</div>
</div>
</div>
</body>
</html>
version https://git-lfs.github.com/spec/v1
oid sha256:3594fb2d8e58b22e5ab7a34d7d7521bd48563440def34458503c832c18e095c3
size 454
@@ -1,78 +1,3 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=480, height=270">
<title>Video Overlay Stretch Regression</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 480px;
height: 270px;
overflow: hidden;
background: #000;
}
#root {
position: relative;
width: 480px;
height: 270px;
overflow: hidden;
background: #000;
}
.scene-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.transition-overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.82;
}
.cut-label {
position: absolute;
right: 12px;
bottom: 12px;
z-index: 20;
padding: 5px 8px;
border: 2px solid rgba(255, 255, 255, 0.88);
color: #fff;
background: rgba(0, 0, 0, 0.68);
font: 700 13px Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div id="root" data-composition-id="video-overlay-stretch" data-start="0" data-duration="4" data-width="480" data-height="270">
<video id="clip-a" class="clip scene-video" src="clip.mp4" data-start="0" data-duration="2" data-track-index="0" muted playsinline data-end="2" data-has-audio="false"></video>
<video id="clip-b" class="clip scene-video" src="clip.mp4" data-start="2" data-duration="2" data-track-index="1" muted playsinline data-end="4" data-has-audio="false"></video>
<img id="transition" class="clip transition-overlay" src="transition-overlay.png" data-start="1.6" data-duration="0.8" data-track-index="10" alt="">
<div class="clip cut-label" data-start="0" data-duration="2" data-track-index="20">
CLIP A
</div>
<div class="clip cut-label" data-start="2" data-duration="2" data-track-index="21">
CLIP B
</div>
</div>
<script>window.__timelines = window.__timelines || {};</script></body>
</html>
version https://git-lfs.github.com/spec/v1
oid sha256:5b49e97a5790955c731e273114098622a13dac4f5952cb7d5d0de5bb86e31026
size 2251
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,109 +1,3 @@
<!DOCTYPE html>
<html lang="en">
<head><style data-hyperframes-text-rendering="true">html,body,*{text-rendering:geometricPrecision}</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=640, height=360">
<style>
* {
box-sizing: border-box;
}
html,
body {
width: 640px;
height: 360px;
margin: 0;
overflow: hidden;
background: #f5fafd;
}
#root {
position: relative;
width: 640px;
height: 360px;
overflow: hidden;
background: #f5fafd;
}
.scene {
position: absolute;
inset: 0;
overflow: hidden;
}
#scene-a {
background: #f8fbff;
}
#scene-b {
background: #f5fafd;
}
.panel {
position: absolute;
inset: 22px 42px 48px;
border: 3px solid #333b44;
border-radius: 8px;
background: #fffdfa;
}
.panel::before {
position: absolute;
top: 40px;
left: 34px;
width: 170px;
height: 18px;
border-radius: 999px;
background: #333b44;
content: "";
}
.panel::after {
position: absolute;
top: 84px;
left: 34px;
width: 310px;
height: 10px;
border-radius: 999px;
background: #9aa7b5;
box-shadow:
0 24px 0 #c3ccd7,
0 48px 0 #d6dde7;
content: "";
}
#leaky-band {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
height: 31px;
background: #daebff;
}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-root="true" data-width="640" data-height="360" data-start="0" data-duration="9">
<section id="scene-a" class="scene clip" data-start="0" data-duration="6">
<div class="panel"></div>
<div id="leaky-band" class="clip" data-start="0" data-duration="9"></div>
</section>
<section id="scene-b" class="scene clip" data-start="6" data-duration="3">
<div class="panel"></div>
</section>
</div>
<script>window.__timelines = window.__timelines || {};
window.__timelines.main = {
duration: function () {
return 9;
},
totalDuration: function () {
return 9;
},
pause: function () {},
seek: function () {},
};</script></body>
</html>
version https://git-lfs.github.com/spec/v1
oid sha256:93e349ab3cf09c15b5289d73bf5276a223e45a00463cafc634e3be1cca116377
size 2515
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,106 +1,3 @@
<!DOCTYPE html>
<html>
<head><style data-hyperframes-text-rendering="true">html,body,*{text-rendering:geometricPrecision}</style>
<style>
body {
margin: 0;
background: #000;
}
[data-composition-id="webgl-video-texture-test"] {
position: relative;
overflow: hidden;
}
#gl {
position: absolute;
top: 0;
left: 0;
width: 1280px;
height: 720px;
}
/* Texture-source video: sampled into WebGL only, parked off-canvas. */
#vid {
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 4px;
opacity: 0;
z-index: -1;
}
</style>
</head>
<body>
<div id="root" data-composition-id="webgl-video-texture-test" data-width="1280" data-height="720" data-start="0" data-duration="2">
<video id="vid" class="clip" data-start="0" data-duration="2" data-track-index="0" src="clip.mp4" muted playsinline data-end="2" data-has-audio="false"></video>
<canvas id="gl"></canvas>
</div>
<script>// WebGL2 textured fullscreen triangle sampling the source video element.
// The handler uploads that video as a texture on every hf-seek — the
// natural author pattern. In headless render, Chrome can't supply decoded
// video frames to WebGL, so the core video-texture patch substitutes the
// engine's injected, decoded render-frame image, and the post-injection
// GPU reseek re-runs this handler. With the fix, render reproduces the
// preview snapshot (PSNR high); without it the canvas is black (PSNR
// collapses). NB: avoid writing literal tag syntax in comments here — the
// compiler's media-attribute injection scans the raw HTML for it.
(function () {
var canvas = document.getElementById("gl");
canvas.width = 1280;
canvas.height = 720;
var gl = canvas.getContext("webgl2", { preserveDrawingBuffer: true });
if (!gl) return;
var VS =
"#version 300 es\n" +
"in vec2 p; out vec2 uv;\n" +
"void main(){ uv = vec2(p.x*0.5+0.5, 0.5-p.y*0.5); gl_Position = vec4(p,0.0,1.0); }";
var FS =
"#version 300 es\n" +
"precision highp float; in vec2 uv; uniform sampler2D tex; out vec4 c;\n" +
"void main(){ c = texture(tex, uv); }";
function sh(type, src) {
var s = gl.createShader(type);
gl.shaderSource(s, src);
gl.compileShader(s);
return s;
}
var prog = gl.createProgram();
gl.attachShader(prog, sh(gl.VERTEX_SHADER, VS));
gl.attachShader(prog, sh(gl.FRAGMENT_SHADER, FS));
gl.linkProgram(prog);
gl.useProgram(prog);
var buf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
var loc = gl.getAttribLocation(prog, "p");
gl.enableVertexAttribArray(loc);
gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
var video = document.getElementById("vid");
function render() {
if (video && video.readyState >= 2) {
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);
}
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
}
window.addEventListener("hf-seek", function () {
render();
});
render();
})();</script></body>
</html>
version https://git-lfs.github.com/spec/v1
oid sha256:253e2b94f1babe8290f5f1c20e51c0d79d8b21cf1af4fecfa6a0d22733d9298d
size 4110
File diff suppressed because one or more lines are too long