Three.js实战项目 图片处理系统
概述
如有不明白的可以加QQ:2354528292;wx: aichitudousien
更多教学视频请访问:https://space.bilibili.com/236087412
源码获取: https://item.taobao.com/item.htm?spm=a21dvs.23580594.0.0.3c3a645eIMTaft&ft=t&id=714761674142
写一个Three.js 图片处理系统,图片全使用shader处理,先看视频效果
图片处理
灰度图
// 灰度shader
export const grayscaleShader = {
vs: `
varying vec2 v_uv;
void main() {
v_uv = uv;
gl_Position = vec4( position, 1.0 );
}
`,
fs: `
varying vec2 v_uv;
uniform sampler2D tex;
void main() {
vec4 t_color = texture2D(tex, v_uv);
float luminance = 0.2 * t_color.r + 0.2 * t_color.g + 0.2 * t_color.b;
gl_FragColor = vec4(luminance, luminance, luminance, 1);
}
`,
uniforms: {
tex: {
value: null
}
}
}
更改rgba
// 自由调色shader
export const freeShader = {
vs: `
varying vec2 v_uv;
void main() {
v_uv = uv;
gl_Position = vec4( position, 1.0 );
}
`,
fs: `
varying vec2 v_uv;
uniform sampler2D tex;
uniform float r;
uniform float g;
uniform float b;
uniform float a;
void main() {
vec4 t_color = texture2D(tex, v_uv);
gl_FragColor = vec4(t_color.r * r, t_color.g * g, t_color.b * b, t_color.a * a);
}
`,
uniforms: {
tex: {
value: null
},
r: {
value: 1.0
},
g: {
value: 1.0
},
b: {
value: 1.0
},
a: {
value: 1.0
}
}
}
单色效果
// 单色处理
export const monochromeShader = {
vs: `
varying vec2 v_uv;
void main() {
v_uv = uv;
gl_Position = vec4( position, 1.0 );
}
`,
fs: `
#define R_LUMINANCE 0.298912
#define G_LUMINANCE 0.586611
#define B_LUMINANCE 0.114478
varying vec2 v_uv;
uniform sampler2D tex;
const vec3 monochromeScale = vec3(R_LUMINANCE, G_LUMINANCE, B_LUMINANCE);
void main() {
vec4 color = texture2D(tex, v_uv);
float grayColor = dot(color.rgb, monochromeScale);
gl_FragColor = vec4(vec3(grayColor), 1.0);
}
`,
uniforms: {
tex: {
value: null
}
}
}
反转效果
// 反转处理
export const reversalShader = {
vs: `
varying vec2 v_uv;
void main() {
v_uv = uv;
gl_Position = vec4( position, 1.0 );
}
`,
fs: `
varying vec2 v_uv;
uniform sampler2D tex;
void main() {
vec4 color = texture2D(tex, v_uv);
gl_FragColor = vec4(1.0 - color.x, 1.0 - color.y, 1.0 - color.z, 1.0);
}
`,
uniforms: {
tex: {
value: null
}
}
}