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
@@ -10,11 +10,48 @@
    <title>Le LOL est Fermé ...</title>
 </head>
 <body id="lolIsClosed">
+    <canvas data-cute-texture class="cute-texture"></canvas>
    <main id="closedContainer">
        <section>
          <p>Le LOL est actuellement</p>
          <h3 id="lolStatus">fermé ...</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;
+// Coordinates of current pixel being computed from [0,0] (top left) to [1,1] (bottom right)
+varying highp vec2 vTextureCoord;
+
+void main() {
+    highp float pixelSize = 50.0;
+    highp vec2 coords = floor((uCanvasSize.xy * vTextureCoord.xy) / pixelSize);
+    highp float lum = (noise1(uRandom.yz+coords) * 0.631372549);
+    lowp float opacity = 0.5;
+
+    highp vec3 baseColor = vec3(
+        0.0,
+        lum,
+        lum
+    );
+
+    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>