Première version GPU des effets de fond

2026-08-02 15:31:55 +02:00
parent 9f67c28bc0
commit 3e7c9475e5
7 changed files with 363 additions and 104 deletions
@@ -11,11 +11,50 @@
    <title>Le LOL est Ouvert</title>
 </head>
 <body id="lolIsOpen">
+    <canvas data-cute-texture class="cute-texture"></canvas>
    <main id="openContainer">
        <section>
          <p>Le LOL est actuellement</p>
          <h3 id="lolStatus">ouvert !</h3>
        </section>
    </main>
+    
+    <script type="x-shader/glsl+fragment">
+// Some random values computed for each frame
+uniform highp vec4 uRandom;
+// Size (in logical pixel) of current CuteTexture canvas
+uniform highp vec2 uCanvasSize;
+// Number of seconds since canvas was initialized
+uniform lowp float uTime;
+// Coordinates of current pixel being computed from [0,0] (top left) to [1,1] (bottom right)
+varying highp vec2 vTextureCoord;
+
+void main() {
+    highp float waveSize = 10.0;
+    highp vec2 coords = (uCanvasSize.xy * vTextureCoord.xy) / waveSize;
+    highp float lum = abs(sin(coords.y-uTime)) + 0.631372549;
+    lowp float opacity = 0.5;
+
+    highp vec3 baseColor = vec3(
+        0.0,
+        lum,
+        0.0
+    );
+
+    highp vec3 rotatedColor = hue_rotate(baseColor, 13.12);
+
+    gl_FragColor = vec4(
+        rotatedColor.x*opacity,
+        rotatedColor.y*opacity,
+        rotatedColor.z*opacity,
+        opacity
+    );
+}
+    </script>
+
+    <script type="module">
+        import {initCuteTexture} from "../js/cuteTexture.js"
+        initCuteTexture()
+    </script>
 </body>
 </html>