Three.js实战项目 图片处理系统

Three.js实战项目 图片处理系统

• 概述
• 灰度图
• 更改rgba
• 单色效果
• 反转效果

概述

如有不明白的可以加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
    }
  }
}