Как нанести оттенок на элемент Canvas (Context - webgl)

Question

Я хочу нанести оттенок на мое изображение, которое загружается в холст с помощью библиотеки glfx.js, которая использует webgl.

В приведенном ниже коде я изменяю яркость тепла во фрагментном шейдере webgl. Теперь для оттенка мне нужно изменить RGBA во фрагментном шейдере. Как именно я должен это сделать !! Ниже моя тестовая функция, которая выполняет это действие:

test = (imgID, pro) => {
    const image = new Image();
    image.src = pro.allImageElement[1].currentSrc;
    image.onload = function () {
      const canvas = document.getElementById(imgID);
      /*  canvas.width = image.naturalWidth;
       canvas.height = image.naturalHeight; */

     const gl = canvas.getContext('webgl');

     gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
     gl.clearColor(1.0, 0.8, 0.1, 1.0);
     gl.clear(gl.COLOR_BUFFER_BIT);

     const vertShaderSource = `
       attribute vec2 position;

       varying vec2 texCoords;

       void main() {
         texCoords = (position + 1.0) / 2.0;
         texCoords.y = 1.0 - texCoords.y;
         gl_Position = vec4(position, 0, 1.0);
       }
     `;

     const fragShaderSource = `
       precision highp float;

       varying vec2 texCoords;

       uniform sampler2D textureSampler;

       void main() {
         float warmth = 1.0;
         float brightness = 0.2;

         vec4 color = texture2D(textureSampler, texCoords);

         color.r += warmth;
         color.b -= warmth;

        color.rgb += brightness;

         gl_FragColor = color;
       }
     `;

     const vertShader = gl.createShader(gl.VERTEX_SHADER);
     const fragShader = gl.createShader(gl.FRAGMENT_SHADER);

     gl.shaderSource(vertShader, vertShaderSource);
     gl.shaderSource(fragShader, fragShaderSource);

     gl.compileShader(vertShader);
     gl.compileShader(fragShader);

     const program = gl.createProgram();
     gl.attachShader(program, vertShader);
     gl.attachShader(program, fragShader);

     gl.linkProgram(program);

     gl.useProgram(program);

     const vertices = new Float32Array([
       -1, -1,
       -1, 1,
       1, 1,

       -1, -1,
       1, 1,
       1, -1,
     ]);

     const vertexBuffer = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
     gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

     const positionLocation = gl.getAttribLocation(program, 'position');

     gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
     gl.enableVertexAttribArray(positionLocation);
     const texture = gl.createTexture();
     gl.activeTexture(gl.TEXTURE0);
     gl.bindTexture(gl.TEXTURE_2D, texture);
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, 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.LINEAR);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
     gl.drawArrays(gl.TRIANGLES, 0, 6);
    }   
  }

Может ли кто-нибудь помочь мне с этим

Answer 1

Есть тысячи способов изменить цвета, поэтому трудно выбрать один.Вы можете просто сделать

vec3 tint = vec3(1, 0.8, 0.5);  // reddish

color.rgb *= tint;

в качестве одного примера.Ваш код не имеет формы.Обычно вместо жесткого кодирования warmth и brightness (и tint) вы делаете их униформными, чтобы их можно было устанавливать во время выполнения.Если вы не знаете, как это сделать, вам следует прочитать некоторые учебные пособия на WebGL .

Другие способы включают с использованием цветовой матрицы или 3D LookupТаблица или, в принципе, любая математика, которую вы можете себе представить, чтобы манипулировать значениями цвета.

примечание: отправленный вами код, похоже, вообще не использует никаких библиотек.Это похоже на сырой WebGL.На самом деле, минус первая и последняя строки, которые он должен выполнить, используя URL-адрес изображения

const image = new Image();
image.src = 'https://i.imgur.com/CwQSMv9.jpg';
image.crossOrigin = 'anonymous';
image.onload = function() {
  const canvas = document.querySelector('canvas');
  /*  canvas.width = image.naturalWidth;
   canvas.height = image.naturalHeight; */

  const gl = canvas.getContext('webgl');

  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  gl.clearColor(1.0, 0.8, 0.1, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);

  const vertShaderSource = `
       attribute vec2 position;

       varying vec2 texCoords;

       void main() {
         texCoords = (position + 1.0) / 2.0;
         texCoords.y = 1.0 - texCoords.y;
         gl_Position = vec4(position, 0, 1.0);
       }
     `;

  const fragShaderSource = `
       precision highp float;

       varying vec2 texCoords;

       uniform sampler2D textureSampler;

       void main() {
         float warmth = 1.0;
         float brightness = 0.2;

         vec4 color = texture2D(textureSampler, texCoords);

         color.r += warmth;
         color.b -= warmth;

        color.rgb += brightness;

         gl_FragColor = color;
       }
     `;

  const vertShader = gl.createShader(gl.VERTEX_SHADER);
  const fragShader = gl.createShader(gl.FRAGMENT_SHADER);

  gl.shaderSource(vertShader, vertShaderSource);
  gl.shaderSource(fragShader, fragShaderSource);

  gl.compileShader(vertShader);
  gl.compileShader(fragShader);

  const program = gl.createProgram();
  gl.attachShader(program, vertShader);
  gl.attachShader(program, fragShader);

  gl.linkProgram(program);

  gl.useProgram(program);

  const vertices = new Float32Array([-1, -1, -1, 1,
    1, 1,

    -1, -1,
    1, 1,
    1, -1,
  ]);

  const vertexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

  const positionLocation = gl.getAttribLocation(program, 'position');

  gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(positionLocation);
  const texture = gl.createTexture();
  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, 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.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.drawArrays(gl.TRIANGLES, 0, 6);
}

<canvas></canvas>