如何在 GLSL 着色器中实现颜色矩阵过滤器
How to implement a Color Matrix Filter in a GLSL shader
我想在 GLSL 着色器中实现颜色矩阵过滤器,但找不到任何关于此事的文档。我是着色器世界的新手(我自己从未编写过代码)所以如果我的 explanation/vocabulary 没有任何意义,请原谅我。
到目前为止我能收集到的信息:
- 一个颜色矩阵由 5 列(RGBA + 偏移量)和 4 行组成
前四列中的值分别与源红色、绿色、蓝色和 alpha 值相乘。第五列值为added(offset)
我相信 GLSL 中的最大 矩阵是 4×4 mat4
矩阵(不包括 'offset' 列)
我见过的唯一 mat4
在着色器中实现的是这样的:
colorMatrix = (GPUMatrix4x4){{0.3588, 0.7044, 0.1368, 0.0},
{0.2990, 0.5870, 0.1140, 0.0},
{0.2392, 0.4696, 0.0912 ,0.0},
{0,0,0,1.0}
};
问题:
- 如何实现一个?如上所述,我以前从未编写过 GLSL 着色器,不幸的是我无法提供 MCVE。我很想看到一个例子,以便我可以从中学习。
谢谢
编辑:
我正在使用 Processing,这是我发现的用于颜色渲染的顶点和片段着色器的唯一示例:
colorvert.glsl:
uniform mat4 transform;
attribute vec4 position;
attribute vec4 color;
varying vec4 vertColor;
void main() {
gl_Position = transform * position;
vertColor = color;
}
colorfrag.glsl:
#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif
varying vec4 vertColor;
void main() {
gl_FragColor = vertColor;
}
对于初学者,我会尝试:
顶点:
#version 410 core
layout(location = 0) in vec3 in_vertex;
layout(location = 3) in vec4 in_color;
out vec4 color;
void main()
{
const mat4x4 m=mat4x4 // RGBA matrix
(
0.3588, 0.7044, 0.1368, 0.0,
0.2990, 0.5870, 0.1140, 0.0,
0.2392, 0.4696, 0.0912 ,0.0,
0.0 , 0.0 , 0.0 ,1.0
);
const vec4 o=vec4(0.0,0.0,0.0,0.0); // offset
color = (m * in_color) + o; // transformation
gl_Position = vec4(in_vertex,1.0);
}
片段:
#version 410 core
in vec4 color;
out vec4 out_color;
void main()
{
out_color=color;
}
只需更改 #version
、布局和输入 attributes/uniforms 即可满足您的需要(目前它使用默认的 nVidia 固定管道的属性位置)
现在要转换图像,例如只在 <-1,+1>
顶点坐标 x,y
范围内渲染纹理四边形。
如果您的矩阵或颜色在片段内部发生变化(例如,由于某些程序生成的东西),而不是将转换移至片段着色器。
您还可以将 const
更改为 uniform
(并将其移到 main
上方),这样您就可以在 运行 上传递自定义参数 ...
如果您需要 GLSL 启动示例,请参阅:
我想在 GLSL 着色器中实现颜色矩阵过滤器,但找不到任何关于此事的文档。我是着色器世界的新手(我自己从未编写过代码)所以如果我的 explanation/vocabulary 没有任何意义,请原谅我。
到目前为止我能收集到的信息:
- 一个颜色矩阵由 5 列(RGBA + 偏移量)和 4 行组成
前四列中的值分别与源红色、绿色、蓝色和 alpha 值相乘。第五列值为added(offset)
我相信 GLSL 中的最大 矩阵是 4×4
mat4
矩阵(不包括 'offset' 列)我见过的唯一
mat4
在着色器中实现的是这样的:
colorMatrix = (GPUMatrix4x4){{0.3588, 0.7044, 0.1368, 0.0}, {0.2990, 0.5870, 0.1140, 0.0}, {0.2392, 0.4696, 0.0912 ,0.0}, {0,0,0,1.0} };
问题:
- 如何实现一个?如上所述,我以前从未编写过 GLSL 着色器,不幸的是我无法提供 MCVE。我很想看到一个例子,以便我可以从中学习。
谢谢
编辑:
我正在使用 Processing,这是我发现的用于颜色渲染的顶点和片段着色器的唯一示例:
colorvert.glsl:
uniform mat4 transform;
attribute vec4 position;
attribute vec4 color;
varying vec4 vertColor;
void main() {
gl_Position = transform * position;
vertColor = color;
}
colorfrag.glsl:
#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif
varying vec4 vertColor;
void main() {
gl_FragColor = vertColor;
}
对于初学者,我会尝试:
顶点:
#version 410 core
layout(location = 0) in vec3 in_vertex;
layout(location = 3) in vec4 in_color;
out vec4 color;
void main()
{
const mat4x4 m=mat4x4 // RGBA matrix
(
0.3588, 0.7044, 0.1368, 0.0,
0.2990, 0.5870, 0.1140, 0.0,
0.2392, 0.4696, 0.0912 ,0.0,
0.0 , 0.0 , 0.0 ,1.0
);
const vec4 o=vec4(0.0,0.0,0.0,0.0); // offset
color = (m * in_color) + o; // transformation
gl_Position = vec4(in_vertex,1.0);
}
片段:
#version 410 core
in vec4 color;
out vec4 out_color;
void main()
{
out_color=color;
}
只需更改 #version
、布局和输入 attributes/uniforms 即可满足您的需要(目前它使用默认的 nVidia 固定管道的属性位置)
现在要转换图像,例如只在 <-1,+1>
顶点坐标 x,y
范围内渲染纹理四边形。
如果您的矩阵或颜色在片段内部发生变化(例如,由于某些程序生成的东西),而不是将转换移至片段着色器。
您还可以将 const
更改为 uniform
(并将其移到 main
上方),这样您就可以在 运行 上传递自定义参数 ...
如果您需要 GLSL 启动示例,请参阅: