Ajout de la vidéo

2026-08-02 15:31:56 +02:00
parent 3e7c9475e5
commit 36d9ac4230
3 changed files with 97 additions and 14 deletions
@@ -11,6 +11,7 @@
    <title>Le LOL est Ouvert</title>
 </head>
 <body id="lolIsOpen">
+    <video data-cute-texture-video class="cute-texture-video" src="/assets/video/background.webm" autoplay muted loop ></video>
    <canvas data-cute-texture class="cute-texture"></canvas>
    <main id="openContainer">
        <section>
@@ -26,6 +27,8 @@ uniform highp vec4 uRandom;
 uniform highp vec2 uCanvasSize;
 // Number of seconds since canvas was initialized
 uniform lowp float uTime;
+// Current frame of first video with [data-cute-texture-video] attribute
+uniform sampler2D uVideo;
 // Coordinates of current pixel being computed from [0,0] (top left) to [1,1] (bottom right)
 varying highp vec2 vTextureCoord;

@@ -35,20 +38,27 @@ void main() {
    highp float lum = abs(sin(coords.y-uTime)) + 0.631372549;
    lowp float opacity = 0.5;

-    highp vec3 baseColor = vec3(
+    gl_FragColor = vec4(
        0.0,
        lum,
-        0.0
+        0.0,
+        1.0
    );
-
-    highp vec3 rotatedColor = hue_rotate(baseColor, 13.12);
+    
+    gl_FragColor = hue_rotate(gl_FragColor, 13.12);

    gl_FragColor = vec4(
-        rotatedColor.x*opacity,
-        rotatedColor.y*opacity,
-        rotatedColor.z*opacity,
-        opacity
+        gl_FragColor.rgb * opacity,
+        1.0
    );
+
+    highp vec2 videoCoords = vTextureCoord.xy / 2.0 + vec2(0, 0.45);
+    highp vec4 videoPix = clamp(( grayscale(texture2D(uVideo, videoCoords), 1.0) * 2.0 ), vec4(0), vec4(1));
+    videoPix *= 0.777;
+
+    gl_FragColor = abs( videoPix - gl_FragColor );
+    
+    gl_FragColor.a = 1.0;
 }
    </script>