2021-07-16 14:18:18 +08:00
|
|
|
// sample greyscale fragment shader
|
|
|
|
export default `#version 300 es
|
2021-05-25 05:10:46 +08:00
|
|
|
precision highp float;
|
|
|
|
|
|
|
|
uniform sampler2D u_texture;
|
|
|
|
uniform vec2 u_resolution;
|
2021-07-24 06:17:20 +08:00
|
|
|
uniform bool u_rotate;
|
2021-05-25 05:10:46 +08:00
|
|
|
|
2021-07-16 14:18:18 +08:00
|
|
|
out vec4 colour;
|
|
|
|
|
2021-07-24 06:17:20 +08:00
|
|
|
vec4 grey(float x, float y) {
|
|
|
|
vec3 color = texture(u_texture, vec2(x, y)).rgb;
|
2021-07-22 13:35:18 +08:00
|
|
|
float grey = dot(color, vec3(0.299, 0.587, 0.114));
|
|
|
|
return vec4(vec3(grey), 1.0);
|
|
|
|
}
|
|
|
|
|
2021-05-25 05:10:46 +08:00
|
|
|
void main() {
|
2021-07-22 13:35:18 +08:00
|
|
|
ivec2 size = textureSize(u_texture, 0);
|
2021-07-24 06:17:20 +08:00
|
|
|
float ar_texture = float(size.x) / float(size.y);
|
|
|
|
if (u_rotate) {
|
|
|
|
float ar_resolution = u_resolution.y / u_resolution.x;
|
|
|
|
if (ar_resolution >= ar_texture) {
|
|
|
|
float height = float(u_resolution.x) * ar_texture;
|
|
|
|
float border_height = (u_resolution.y - height) / 2.0;
|
|
|
|
if ((gl_FragCoord.y < border_height) ||
|
|
|
|
(gl_FragCoord.y >= (border_height + height))) {
|
2021-07-22 13:35:18 +08:00
|
|
|
colour = vec4(0);
|
2021-07-24 06:17:20 +08:00
|
|
|
} else {
|
|
|
|
colour = grey(1.0 - (gl_FragCoord.y - border_height) / height,
|
|
|
|
gl_FragCoord.x / u_resolution.x);
|
|
|
|
}
|
2021-07-22 13:35:18 +08:00
|
|
|
} else {
|
2021-07-24 06:17:20 +08:00
|
|
|
float width = float(u_resolution.y) / ar_texture;
|
|
|
|
float border_width = (u_resolution.x - width) / 2.0;
|
|
|
|
if ((gl_FragCoord.x < border_width) ||
|
|
|
|
(gl_FragCoord.x >= (border_width + width))) {
|
2021-07-22 13:35:18 +08:00
|
|
|
colour = vec4(0);
|
2021-07-24 06:17:20 +08:00
|
|
|
} else {
|
|
|
|
colour = grey(1.0 - gl_FragCoord.y / u_resolution.y,
|
|
|
|
(gl_FragCoord.x - border_width) / width);
|
|
|
|
}
|
2021-07-22 13:35:18 +08:00
|
|
|
}
|
2021-07-17 15:44:02 +08:00
|
|
|
} else {
|
2021-07-24 06:17:20 +08:00
|
|
|
float ar_resolution = u_resolution.x / u_resolution.y;
|
|
|
|
if (ar_resolution >= ar_texture) {
|
|
|
|
float width = float(u_resolution.y) * ar_texture;
|
|
|
|
float border_width = (u_resolution.x - width) / 2.0;
|
|
|
|
if ((gl_FragCoord.x < border_width) ||
|
|
|
|
(gl_FragCoord.x >= (border_width + width))) {
|
2021-07-22 13:35:18 +08:00
|
|
|
colour = vec4(0);
|
2021-07-24 06:17:20 +08:00
|
|
|
} else {
|
|
|
|
colour = grey((gl_FragCoord.x - border_width) / width,
|
|
|
|
gl_FragCoord.y / u_resolution.y);
|
|
|
|
}
|
2021-07-22 13:35:18 +08:00
|
|
|
} else {
|
2021-07-24 06:17:20 +08:00
|
|
|
float height = float(u_resolution.x) / ar_texture;
|
|
|
|
float border_height = (u_resolution.y - height) / 2.0;
|
|
|
|
if ((gl_FragCoord.y < border_height) ||
|
|
|
|
(gl_FragCoord.y >= (border_height + height))) {
|
|
|
|
colour = vec4(0);
|
|
|
|
} else {
|
|
|
|
colour = grey(gl_FragCoord.x / u_resolution.x,
|
|
|
|
(gl_FragCoord.y - border_height) / height);
|
|
|
|
}
|
2021-07-22 13:35:18 +08:00
|
|
|
}
|
2021-07-16 14:18:18 +08:00
|
|
|
}
|
2021-05-25 05:10:46 +08:00
|
|
|
}`;
|