如何在Canvas元素上應用tint（Context - webgl）

Question

我想在我的圖像上應用色調，該圖像使用庫glfx.js加載到畫布中，該庫使用webgl。

在下面的代碼中，我正在更改webgl的片段着色器中的暖色亮度。 現在為了色調我需要更改片段着色器中的rgba。 我到底該怎么做!! 下面是我的測試函數whicj執行此操作：

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

有1000種方法可以改變顏色，因此很難選擇顏色。 你可以做到

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

color.rgb *= tint;

舉個例子。 你的代碼沒有制服。 通常情況下，不是硬編碼warmth和brightness （和tint ），你可以制作它們的制服，這樣你就可以在運行時設置它們。 如果你不知道該怎么做，你應該閱讀一些關於WebGL的教程 。

其他方法包括使用顏色矩陣或3D查找表或基本上您可以想象的任何數學來操縱顏色值。

注意：您發布的代碼似乎根本沒有使用任何庫。 它看起來像原始的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>