week02-webgl/2d/05-kernels.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>WebGL</title>
</head>
<body>

  <canvas id="c"></canvas>

  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js" integrity="sha512-IQLehpLoVS4fNzl7IfH8Iowfm5+RiMGtHykgZJl9AWMgqx0AmJ6cRWcB+GaGVtIsnC4voMfm8f2vwtY+6oPjpQ==" crossorigin="anonymous"></script>
  <script type="module">

    import * as mat4 from "./js/gl-matrix/mat4.js";
    import * as vec4 from "./js/gl-matrix/vec4.js";

    const createShader = (gl, type, source) => {
      const shader = gl.createShader(type);
      gl.shaderSource(shader, source);
      gl.compileShader(shader);
      const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
      if (success) {
        return shader;
      }
      console.error(gl.getShaderInfoLog(shader));
      gl.deleteShader(shader);
    };

    const createProgram = (gl, vertexShader, fragmentShader) => {
      const program = gl.createProgram();
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      gl.linkProgram(program);
      const success = gl.getProgramParameter(program, gl.LINK_STATUS);
      if (success) {
        return program;
      }
      console.error(gl.getProgramInfoLog(program));
      gl.deleteProgram(program);
    };

    const canvas = document.querySelector('#c');

    const gl = canvas.getContext('webgl');
    const vertexShader = createShader(gl, gl.VERTEX_SHADER, `
    precision mediump float;
    
    attribute vec2 a_position;
    attribute vec2 a_texCoord;

    varying vec2 uv;
    
    void main() {     
      gl_Position = vec4(a_position, 1, 1);
      uv = a_texCoord;
    }
    `);
    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, `
    precision mediump float;

    uniform sampler2D texture;
    uniform vec2 u_textureSize;
    
    uniform mat4 matrix;
    uniform vec4 offset;

    uniform float effectFactor;

    uniform float u_kernel[9];
    uniform float u_kernelWeight;

    varying vec2 uv;
    
    void main() {
      vec2 onePixel = vec2(1.0, 1.0) / u_textureSize;

      vec4 sampleColor = texture2D(texture, uv);
      //vec4 filteredColor = matrix * sampleColor + offset;

      vec4 colorSum =
        texture2D(texture, uv + onePixel * vec2(-1, -1)) * u_kernel[0] +
        texture2D(texture, uv + onePixel * vec2( 0, -1)) * u_kernel[1] +
        texture2D(texture, uv + onePixel * vec2( 1, -1)) * u_kernel[2] +
        texture2D(texture, uv + onePixel * vec2(-1,  0)) * u_kernel[3] +
        texture2D(texture, uv + onePixel * vec2( 0,  0)) * u_kernel[4] +
        texture2D(texture, uv + onePixel * vec2( 1,  0)) * u_kernel[5] +
        texture2D(texture, uv + onePixel * vec2(-1,  1)) * u_kernel[6] +
        texture2D(texture, uv + onePixel * vec2( 0,  1)) * u_kernel[7] +
        texture2D(texture, uv + onePixel * vec2( 1,  1)) * u_kernel[8] ;

      vec4 filteredColor = vec4((colorSum / u_kernelWeight).rgb, 1.0);

      gl_FragColor = mix(sampleColor, filteredColor, effectFactor);
    }
    `);
    const program = createProgram(gl, vertexShader, fragmentShader);
    const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
    const positionBuffer = gl.createBuffer();
    const texCoordAttributeLocation = gl.getAttribLocation(program, "a_texCoord");
    const texCoordBuffer = gl.createBuffer();

    const matrixLocation = gl.getUniformLocation(program, "matrix");
    const offsetLocation = gl.getUniformLocation(program, "offset");

    const effectFactorLocation = gl.getUniformLocation(program, "effectFactor");
    const u_textureSizeLocation = gl.getUniformLocation(program, "u_textureSize");

    const u_kernelLocation = gl.getUniformLocation(program, "u_kernel[0]");
    const u_kernelWeightLocation = gl.getUniformLocation(program, "u_kernelWeight");

    const matrix = mat4.fromValues(
      0.590999960899353, 0.5235000252723694, 0.40800002217292786, 0, 
      1.153499960899353, 1.0290000438690186, 0.8009999990463257, 0, 
      0.28349998593330383, 0.25200000405311584, 0.1965000033378601, 0, 
      0, 0, 0, 1.5
    );
    const offset = vec4.fromValues(-0.25, -0.25, -0.25, 0);

    const properties = {
      effectFactor: 0
    };

    const init = async () => {
      const imgTexture = await loadImage("images/devine_selectie-087.jpg");

      gl.useProgram(program);

      gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
      gl.bufferData(
        gl.ARRAY_BUFFER,
        new Float32Array([
            -1.0, 1.0,
            1.0, 1.0,
            -1.0, -1.0,

            -1.0, -1.0,
            1.0, 1.0,
            1.0, -1.0
        ]),
        gl.STATIC_DRAW);
      gl.enableVertexAttribArray(positionAttributeLocation);
      gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

      gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
      gl.bufferData(
        gl.ARRAY_BUFFER,
        new Float32Array([
            0.0, 0.0,
            1.0, 0.0,
            0.0, 1.0,

            0.0, 1.0,
            1.0, 0.0,
            1.0, 1.0,
        ]),
        gl.STATIC_DRAW);
      gl.enableVertexAttribArray(texCoordAttributeLocation);
      gl.vertexAttribPointer(texCoordAttributeLocation, 2, gl.FLOAT, false, 0, 0);

      uploadImageToTexture(imgTexture, "texture", 0);

      gl.uniform2f(u_textureSizeLocation, imgTexture.width, imgTexture.height);

      canvas.width = imgTexture.width;
      canvas.height = imgTexture.height;

      canvas.addEventListener('mouseover', e => {
        gsap.to(properties, { duration: 1, ease: "power4.out", effectFactor: 1});
      });

      canvas.addEventListener('mouseout', e => {
        gsap.to(properties, { duration: 1, ease: "power4.out", effectFactor: 0});
      });

      const edgeDetectKernel = [
          -1, -1, -1,
          -1,  8, -1,
          -1, -1, -1
      ];
      gl.uniform1fv(u_kernelLocation, edgeDetectKernel);
      gl.uniform1f(u_kernelWeightLocation, computeKernelWeight(edgeDetectKernel));

      drawScene();
    };

    function computeKernelWeight(kernel) {
      var weight = kernel.reduce(function(prev, curr) {
          return prev + curr;
      });
      return weight <= 0 ? 1 : weight;
    }

    const drawScene = () => {
      gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
      gl.clearColor(0, 0, 0, 0);
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.useProgram(program);

      gl.uniformMatrix4fv(matrixLocation, false, matrix);
      gl.uniform4fv(offsetLocation, offset);

      gl.uniform1f(effectFactorLocation, properties.effectFactor);

      gl.drawArrays(gl.TRIANGLES, 0, 6);

      requestAnimationFrame(drawScene);
    };

    const loadImage = (src) => {
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.addEventListener("load", () => resolve(img));
        img.addEventListener("error", err => reject(err));
        img.src = src;
      });
    };

    const map = (value, x1, y1, x2, y2) => (value - x1) * (y2 - x2) / (y1 - x1) + x2;

    const uploadImageToTexture = (img, uniformName, textureUnitIndex) => {
      const u_imageLoc = gl.getUniformLocation(program, uniformName);
      gl.uniform1i(u_imageLoc, textureUnitIndex);

      const texture = gl.createTexture();
      gl.activeTexture(gl.TEXTURE0 + textureUnitIndex);
      gl.bindTexture(gl.TEXTURE_2D, texture);
    
      // Set the parameters so we can render any size image.
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    
      // Upload the image into the texture.
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
    };

    init();
  </script>
</body>
</html>