Ajout de la vidéo

js/cuteTexture.js

@@ -73,10 +73,16 @@ const FRAGMENT_SHADER_UTILITIES = `
       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);
+  highp vec4 hue_rotate(highp vec4 rgb_input, highp float amount) {
+    highp vec3 hsl = rgb_to_hsl(rgb_input.xyz);
     hsl.x = mod(hsl.x+amount,1.0);
-    return hsl_to_rgb(hsl);
+    return vec4(hsl_to_rgb(hsl), rgb_input.w);
+  }
+
+  highp vec4 grayscale(highp vec4 rgb_input, highp float amount) {
+    highp vec3 hsl = rgb_to_hsl(rgb_input.xyz);
+    hsl.y = 1.0 - amount;
+    return vec4(hsl_to_rgb(hsl), rgb_input.w);
   }
 `
 
@@ -89,6 +95,10 @@ const DEFAULT_FRAGMENT_SHADER = `
   uniform lowp 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;
+  // Size (in pixels) of current video frame in uVideo
+  uniform lowp vec2 uVideoSize;
   // Coordinates of current pixel being computed from [0,0] (top left) to [1,1] (bottom right)
   varying highp vec2 vTextureCoord;
 
@@ -195,6 +205,30 @@ function initMainShader(ctx, oldShader=null){
     return null
   }
 
+  let videoElement, videoTexture = null;
+  if(ctx.getUniformLocation(shaderProgram, "uVideo") != null){
+    videoElement = document.querySelector("video[data-cute-texture-video]") || document.querySelector("video");
+    if(!videoElement){
+      console.warn("Aucune vidéo avec l'attribut [data-cute-texture-video] n'a été trouvé sur la page");
+    } else {
+      videoTexture = ctx.createTexture();
+      ctx.bindTexture(ctx.TEXTURE_2D, videoTexture)
+      ctx.texImage2D(
+        ctx.TEXTURE_2D,
+        0,
+        ctx.RGBA,
+        1, 1,
+        0,
+        ctx.RGBA,
+        ctx.UNSIGNED_BYTE,
+        new Uint8Array([0, 0, 0, 255])
+      )
+      ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_S, ctx.CLAMP_TO_EDGE);
+      ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.CLAMP_TO_EDGE);
+      ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MIN_FILTER, ctx.LINEAR);
+    }
+  }
+
   if(oldShader){
     ctx.deleteProgram(oldShader.program)
     ctx.deleteShader(oldShader.vertexShader)
@@ -211,10 +245,14 @@ function initMainShader(ctx, oldShader=null){
     vertexShader,
     fragmentShader,
     fragmentShaderElement: fragmentShaderCodeElement,
+    videoElement,
+    videoTexture,
     aVertexIndex: ctx.getAttribLocation(shaderProgram, "aVertexIndex"),
     uRandom: ctx.getUniformLocation(shaderProgram, "uRandom"),
     uCanvasSize: ctx.getUniformLocation(shaderProgram, "uCanvasSize"),
     uTime: ctx.getUniformLocation(shaderProgram, "uTime"),
+    uVideo: ctx.getUniformLocation(shaderProgram, "uVideo"),
+    uVideoSize: ctx.getUniformLocation(shaderProgram, "uVideoSize"),
     vertexIndexBuffer,
   }
 }
@@ -269,6 +307,40 @@ function renderCuteTexture(target, mainShader, initTime){
       (Date.now() - initTime)/1000
     )
   }
+
+  if(mainShader.uVideo){
+    ctx.activeTexture(ctx.TEXTURE0);
+    ctx.bindTexture(ctx.TEXTURE_2D, mainShader.videoTexture);
+    ctx.uniform1i(
+      mainShader.uVideo,
+      0
+    )
+  }
+
+  if(mainShader.uVideo && mainShader.videoElement && mainShader.videoTexture){
+    ctx.activeTexture(ctx.TEXTURE0);
+    ctx.bindTexture(ctx.TEXTURE_2D, mainShader.videoTexture);
+    ctx.texImage2D(
+      ctx.TEXTURE_2D,
+      0,
+      ctx.RGBA,
+      ctx.RGBA,
+      ctx.UNSIGNED_BYTE,
+      mainShader.videoElement,
+    );
+    ctx.uniform1i(
+      mainShader.uVideo,
+      0
+    )
+  }
+
+  if(mainShader.uVideoSize && mainShader.videoElement) {
+    ctx.uniform2f(
+      mainShader.uVideoSize,
+      mainShader.videoElement.videoWidth,
+      mainShader.videoElement.videoHeight
+    )
+  }
   
   ctx.drawArrays(ctx.TRIANGLE_STRIP, 0, 3);
 }