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

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
    }
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱吃土豆丝嗯z

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值