Première version GPU des effets de fond

index.html

@@ -160,10 +160,7 @@
                </article>
             </section>
       </section>
-      <video id="texture" autoplay muted loop src="./assets/video/close.webm" class="closedBackground"></video>
+      <canvas class="cute-texture"></canvas>
-      <video id="texture" autoplay muted loop src="./assets/video/open.webm" class="openBackground"></video>
-      <video id="background" autoplay muted loop src="./assets/video/background.webm" class="openBackground"></video>
-      <canvas></canvas>
     </main>
 
     <section class="floatingWindow" id="posterWindow">

js/cuteTexture.js

@@ -1,87 +1,274 @@
-const target = document.querySelector('canvas');
+const DEFAULT_VERTEX_SHADER = `
+  attribute float aVertexIndex;
+  varying highp vec2 vTextureCoord;
 
-const ctx = target.getContext('2d');
+ 	// This vertex shader produces the following, when drawn using indices 0..3:
+	//
+	//  1 |  0-----x.....2
+	//  0 |  |  s  |  . ´
+	// -1 |  x_____x´
+	// -2 |  :  .´
+	// -3 |  1´
+	//    +---------------
+	//      -1  0  1  2  3
+	//
+	// The axes are clip-space x and y. The region marked s is the visible region.
+	// The digits in the corners of the right-angled triangle are the vertex
+	// indices.
+	//
+	// The top-left has UV 0,0, the bottom-left has 0,2, and the top-right has 2,0.
+	// This means that the UV gets interpolated to 1,1 at the bottom-right corner
+	// of the clip-space rectangle that is at 1,-1 in clip space.
 
-export let lolState = false;
+	void main() {
-
+	    vec2 uv = vec2(floor(aVertexIndex / 2.0), floor(mod(aVertexIndex, 2.0))) * 2.0;
-let scale = 0.7;
+	    gl_Position = vec4(uv * vec2(2.0, -2.0) + vec2(-1.0, 1.0), 0.0, 1.0);
-
+      vTextureCoord = uv;
-function analogLikeNoise(){
-  let tH = target.height;
-  let tW = target.width;
-  //console.log('window dimensions :', tH, tW)
-  const img = ctx.createImageData(tW, tH);
-  let offset = 0;
-  let index = 0;
-  let brightness = 0;
-
-  for(let x = 0; x<tW; x++){
-    const sx = x * scale + offset
-    for(let y = 0; y<tH; y++){
-      let lum = Math.random()*161
-
-      //img.data[index++] = lum*150/255;
-      index++
-      img.data[index++] = lum;
-      img.data[index++] = lum;
-      img.data[index++] = 255;
 	}
-    }
+`
-  ctx.putImageData(img, 0, 0);
 
-  offset ++;
+const FRAGMENT_SHADER_UTILITIES = `
-  if(offset>1024){
+  highp float noise1(highp vec2 co){
-    offset = 0;
+      return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453);
+  }
+
+  // Color spaces from https://github.com/tobspr/GLSL-Color-Spaces/blob/master/ColorSpaces.inc.glsl
+
+  const highp float HCV_EPSILON = 1e-10;
+  const highp float HSL_EPSILON = 1e-10;
+
+  highp vec3 hue_to_rgb(highp float hue)
+  {
+      highp float R = abs(hue * 6.0 - 3.0) - 1.0;
+      highp float G = 2.0 - abs(hue * 6.0 - 2.0);
+      highp float B = 2.0 - abs(hue * 6.0 - 4.0);
+      return clamp(vec3(R,G,B), vec3(0), vec3(1));
+  }
+
+  // Converts from HSL to linear RGB
+  highp vec3 hsl_to_rgb(highp vec3 hsl)
+  {
+      highp vec3 rgb = hue_to_rgb(hsl.x);
+      highp float C = (1.0 - abs(2.0 * hsl.z - 1.0)) * hsl.y;
+      return (rgb - 0.5) * C + hsl.z;
+  }
+
+  // Converts a value from linear RGB to HCV (Hue, Chroma, Value)
+  highp vec3 rgb_to_hcv(highp vec3 rgb)
+  {
+      // Based on work by Sam Hocevar and Emil Persson
+      highp vec4 P = (rgb.g < rgb.b) ? vec4(rgb.bg, -1.0, 2.0/3.0) : vec4(rgb.gb, 0.0, -1.0/3.0);
+      highp vec4 Q = (rgb.r < P.x) ? vec4(P.xyw, rgb.r) : vec4(rgb.r, P.yzx);
+      highp float C = Q.x - min(Q.w, Q.y);
+      highp float H = abs((Q.w - Q.y) / (6.0 * C + HCV_EPSILON) + Q.z);
+      return vec3(H, C, Q.x);
+  }
+
+  // Converts from linear rgb to HSL
+  highp vec3 rgb_to_hsl(highp vec3 rgb)
+  {
+      highp vec3 HCV = rgb_to_hcv(rgb);
+      highp float L = HCV.z - HCV.y * 0.5;
+      highp float S = HCV.y / (1.0 - abs(L * 2.0 - 1.0) + HSL_EPSILON);
+      return vec3(HCV.x, S, L);
+  }
+
+  highp vec3 hue_rotate(highp vec3 rgb_input, highp float amount) {
+    highp vec3 hsl = rgb_to_hsl(rgb_input);
+    hsl.x = mod(hsl.x+amount,1.0);
+    return hsl_to_rgb(hsl);
+  }
+`
+
+const FRAGMENT_SHADER_UTILITIES_N_LINES = FRAGMENT_SHADER_UTILITIES.split(/\n/g).length
+
+const DEFAULT_FRAGMENT_SHADER = `
+  // Some random values computed for each frame
+  uniform highp vec4 uRandom;
+  // Size (in logical pixel) of current CuteTexture canvas
+  uniform lowp 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() {
+    gl_FragColor = vec4(vTextureCoord.x, vTextureCoord.y, 0.0, 1.0);
+  }
+`
+
+/**
+ * Initialise un canvas d'arrière plan "CuteTexture" avec les options données
+ */
+export function initCuteTexture(){
+  /** @type {HTMLCanvasElement} */
+  const targetCanvas = document.querySelector("canvas[data-cute-texture]") || document.querySelector("canvas.cute-texture") || document.querySelector("canvas");
+  if(!targetCanvas)
+    throw new Error(`Aucun élément <canvas> trouvé sur la page`)
+
+  {
+    let computedStyle = getComputedStyle(targetCanvas)
+    let elementWidth = parseFloat(computedStyle.width)
+    let elementHeight = parseFloat(computedStyle.height)
+    targetCanvas.width = elementWidth
+    targetCanvas.height = elementHeight
+  }
+
+  const ctx = targetCanvas.getContext("webgl");
+  if(ctx == null)
+    throw new Error("WebGL n'ext pas supporté sur votre machine")
+
+  let mainShader = initMainShader(ctx)
+  console.log("Shader CuteTexture initialisé", mainShader)
+  
+  const initTime = Date.now()
+
+  function startRender(){
+    renderCuteTexture(targetCanvas, mainShader, initTime)
+    requestAnimationFrame(startRender)
+  }
+
+  startRender()
+
+  return {
+    target: targetCanvas,
+    initTime,
+    resize: function(width, height) {
+      targetCanvas.width = width
+      targetCanvas.height = height
+    }
   }
 }
 
-let time = 0
+/**
+ * @param {WebGLRenderingContext} ctx 
+ */
+function initMainShader(ctx, oldShader=null){
+  const vertexShader = ctx.createShader(ctx.VERTEX_SHADER)
+  ctx.shaderSource(vertexShader, DEFAULT_VERTEX_SHADER)
+  ctx.compileShader(vertexShader)
 
-function scanlines(){
+  if (!ctx.getShaderParameter(vertexShader, ctx.COMPILE_STATUS)) {
-  time += 0.05;
+    throw new Error(`Le vertex shader n'a pas pu être compilé: ${ctx.getShaderInfoLog(vertexShader)}`)
-  let tH = target.height;
+    ctx.deleteShader(vertexShader)
-  let tW = target.width;
+    return null
-  //console.log('window dimensions :', tH, tW)
-  const img = ctx.createImageData(tW, tH);
-  let index = 0;
-
-  for(let y = 0; y<tH; y++){
-    for(let x = 0; x<tW; x++){
-      let lum = (Math.sin(y*2 - time*3.1415) * 44) + 161;
-
-      //img.data[index++] = lum;
-      index++;
-      img.data[index++] = lum;
-      //img.data[index++] = lum + Math.random()*32;
-      index++
-      img.data[index++] = 255;
-      }
-    }
-  ctx.putImageData(img, 0, 0);
   }
 
-export function scanlinesAnimation(){
+  let fragmentShaderCode;
-    scanlines();
+  let fragmentShaderCodeElement = document.querySelector(`script[type="x-shader/glsl+fragment"]`);
-    requestAnimationFrame(scanlinesAnimation);
+  if(fragmentShaderCodeElement){
+    fragmentShaderCode = fragmentShaderCodeElement.innerHTML
+  } else {
+    fragmentShaderCode = DEFAULT_FRAGMENT_SHADER
   }
 
-export function noiseAnimation(){
+  const fragmentShader = ctx.createShader(ctx.FRAGMENT_SHADER)
-    analogLikeNoise();
+  ctx.shaderSource(fragmentShader, FRAGMENT_SHADER_UTILITIES+fragmentShaderCode)
-    requestAnimationFrame(noiseAnimation);
+  ctx.compileShader(fragmentShader)
+
+  if (!ctx.getShaderParameter(fragmentShader, ctx.COMPILE_STATUS)) {
+    let error = ctx.getShaderInfoLog(fragmentShader)
+    
+    let errorLine = error.match(/\d+:(\d+):/)
+    if(errorLine) {
+      let lineNum = parseInt(errorLine[1])
+      let lineNumeWithoutUtils = lineNum-FRAGMENT_SHADER_UTILITIES_N_LINES;
+      if(lineNumeWithoutUtils >= 0){
+        error = `Ligne ${lineNumeWithoutUtils}: ${error}`
+      }
     }
 
-
+    ctx.deleteShader(fragmentShader)
-export function loadCanvas(){
+    throw new Error(`Le fragment shader n'a pas pu être compilé: ${error}`)
-  let textureVideo = document.querySelectorAll('main > #texture');
-
- for (let video of textureVideo){
-   video.style.visibility = 'collapse';
   }
 
- let textureCanvas = document.querySelector('main > canvas');
+  const shaderProgram = ctx.createProgram()
- textureCanvas.style.visibility = 'visible';
+  ctx.attachShader(shaderProgram, vertexShader)
+  ctx.attachShader(shaderProgram, fragmentShader)
+  ctx.linkProgram(shaderProgram)
 
- //console.log(textureCanvas);
+  if (!ctx.getProgramParameter(shaderProgram, ctx.LINK_STATUS)) {
-
+    throw new Error(`Le shader n'a pas pu être linké: ${ctx.getProgramInfoLog(shaderProgram)}`)
- //console.log(textureVideo)
+    ctx.deleteShader(vertexShader)
+    ctx.deleteShader(fragmentShader)
+    ctx.deleteProgram(shaderProgram)
+    return null
+  }
+
+  if(oldShader){
+    ctx.deleteProgram(oldShader.program)
+    ctx.deleteShader(oldShader.vertexShader)
+    ctx.deleteShader(oldShader.fragmentShader)
+    ctx.deleteBuffer(oldShader.vertexIndexBuffer)
+  }
+
+  const vertexIndexBuffer = ctx.createBuffer()
+  ctx.bindBuffer(ctx.ARRAY_BUFFER, vertexIndexBuffer)
+  ctx.bufferData(ctx.ARRAY_BUFFER, new Float32Array([0, 1, 2]), ctx.STATIC_DRAW)
+
+  return {
+    program: shaderProgram,
+    vertexShader,
+    fragmentShader,
+    fragmentShaderElement: fragmentShaderCodeElement,
+    aVertexIndex: ctx.getAttribLocation(shaderProgram, "aVertexIndex"),
+    uRandom: ctx.getUniformLocation(shaderProgram, "uRandom"),
+    uCanvasSize: ctx.getUniformLocation(shaderProgram, "uCanvasSize"),
+    uTime: ctx.getUniformLocation(shaderProgram, "uTime"),
+    vertexIndexBuffer,
+  }
+}
+
+/**
+ * @param {HTMLCanvasElement} target 
+ * @param {*} mainShader 
+ */
+function renderCuteTexture(target, mainShader, initTime){
+  let ctx = target.getContext("webgl")
+
+  ctx.clearColor(0, 0, 0, 0)
+  ctx.clearDepth(1.0)
+  ctx.enable(ctx.DEPTH_TEST)
+  ctx.depthFunc(ctx.LEQUAL)
+
+  ctx.clear(ctx.COLOR_BUFFER_BIT)
+
+  ctx.bindBuffer(ctx.ARRAY_BUFFER, mainShader.vertexIndexBuffer)
+  ctx.vertexAttribPointer(
+    mainShader.aVertexIndex, // location
+    1, // pull out 1 value per iteration
+    ctx.FLOAT, // the data in the buffer is 32bit floats
+    false, // don't normalize
+    0, // how many bytes to get from one set of values to the next
+    0 // how many bytes inside the buffer to start from
+  )
+  ctx.enableVertexAttribArray(mainShader.aVertexIndex)
+
+  ctx.useProgram(mainShader.program)
+  if(mainShader.uRandom){
+    ctx.uniform4f(
+      mainShader.uRandom,
+      Math.random(),
+      Math.random(),
+      Math.random(),
+      Math.random()
+    )
+  }
+
+  if(mainShader.uCanvasSize){
+    ctx.uniform2f(
+      mainShader.uCanvasSize,
+      target.width,
+      target.height
+    )
+  }
+
+  if(mainShader.uTime){
+    ctx.uniform1f(
+      mainShader.uTime,
+      (Date.now() - initTime)/1000
+    )
+  }
+  
+  ctx.drawArrays(ctx.TRIANGLE_STRIP, 0, 3);
 }

js/main.js

@@ -1,41 +1,9 @@
 import { loadEvents } from './events.js'
 import { loadStatus } from './status.js'
-import { scanlinesAnimation } from './cuteTexture.js'
+import { initCuteTexture } from './cuteTexture.js'
-import { noiseAnimation } from './cuteTexture.js'
-import { loadCanvas } from './cuteTexture.js'
-
-
-
-
 
 // =================================== background texture
-loadCanvas();
+initCuteTexture()
-let backgroundVideo = document.querySelector('main > #background');
-
-let proxyTarget = {};
-let proxyHandler = {
-
-};
-export let statusProxy = new Proxy(proxyTarget, {
-  set(obj, prop, value){
-    if(prop === 'lolStatus'){
-      if (value){
-        backgroundVideo.style.visibility = 'visible';
-        scanlinesAnimation();
-          return true
-      } else {
-        backgroundVideo.style.visibility = 'collapse';
-        noiseAnimation();
-          return true
-      }
-    }
-  }
-})
-
-statusProxy.lolStatus = false;
-
-//console.log(proxyTarget.lolStatus);
-
 
 // ======================================== events & statut d'ouverture
 loadEvents();

status/closedStyle.css

@@ -8,9 +8,24 @@
   position: relative;
   top: 0;
   left: 0;
+  margin: 0;
   width: 100vw;
   height: 100vh;
   background-color: var(--main-color);
+
+  #closedContainer {
+    padding: 15px;
+    box-sizing: border-box;
+  }
+
+  .cute-texture {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+  }
 }
 
 #closedContainer{

status/index.fermé.html

@@ -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>

status/index.ouvert.html

@@ -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>

status/openStyle.css

@@ -29,13 +29,29 @@
 }
 
 /*======================= Page Statut LOL ouvert ===*/
+
 #lolIsOpen {
   position: relative;
   top: 0;
   left: 0;
+  margin: 0;
   width: 100vw;
   height: 100vh;
   background-color: var(--main-color);
+
+  #openContainer {
+    padding: 15px;
+    box-sizing: border-box;
+  }
+
+  .cute-texture, .cute-texture-video {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+  }
 }
 
 #openContainer{