我想对使用使用webgl的glfx.js库加载到画布上的图像应用色调。
在下面的代码中,我要更改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);
}
}
有人可以帮我吗
答案 0 :(得分:0)
有上千种更改颜色的方法,因此很难选择一种。你可以做
vec3 tint = vec3(1, 0.8, 0.5); // reddish
color.rgb *= tint;
作为一个例子。您的代码没有制服。通常,不用硬编码warmth
和brightness
(和tint
),而是使它们统一,以便可以在运行时进行设置。如果您不知道该怎么做,应该read some tutorials on WebGL。
其他方式包括using a color matrix或a 3D Lookup Table或基本上任何您可以想象用来处理颜色值的数学运算。
注意:您发布的代码似乎根本没有使用任何库。它看起来像原始的WebGL。实际上,减去第一行和最后一行,它应该在给定图像网址的情况下运行
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>