颜色滤镜

This commit is contained in:
ifengzp 2020-05-12 11:40:13 +08:00
parent 3eebab3efc
commit dcfd82e1de
35 changed files with 2373 additions and 2 deletions

7
assets/Scene/Filter.meta Normal file
View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "d4ddaecb-2dc5-417c-ae6c-a7b23adf580e",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,7 @@
{
"ver": "1.2.6",
"uuid": "b23d729e-ccd3-45cc-b478-e555f5c92388",
"asyncLoadAssets": false,
"autoReleaseAssets": false,
"subMetas": {}
}

View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "d1d1b569-80e8-4b7e-9cbe-87b4f79d0e8e",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 91 B

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "b09cc4b6-a8f3-4236-9c6b-0686fc3d765e",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": false,
"width": 2,
"height": 2,
"platformSettings": {},
"subMetas": {
"bg": {
"ver": "1.0.4",
"uuid": "5640ff1a-66dc-4ba9-b0e5-8be4190a3333",
"rawTextureUuid": "b09cc4b6-a8f3-4236-9c6b-0686fc3d765e",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 2,
"height": 2,
"rawWidth": 2,
"rawHeight": 2,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "07eb0dc1-20cb-4ea6-aff1-1eda4bc174fd",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 500,
"height": 375,
"platformSettings": {},
"subMetas": {
"img": {
"ver": "1.0.4",
"uuid": "47667903-c979-4668-b039-50fe9a95c12a",
"rawTextureUuid": "07eb0dc1-20cb-4ea6-aff1-1eda4bc174fd",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 500,
"height": 375,
"rawWidth": 500,
"rawHeight": 375,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

View File

@ -0,0 +1,73 @@
// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
CCEffect %{
techniques:
- passes:
- vert: vs
frag: fs
blendState:
targets:
- blend: true
rasterizerState:
cullMode: none
properties:
texture: { value: white }
}%
CCProgram vs %{
precision highp float;
#include <cc-global>
#include <cc-local>
in vec3 a_position;
in vec4 a_color;
out vec4 v_color;
#if USE_TEXTURE
in vec2 a_uv0;
out vec2 v_uv0;
#endif
void main () {
vec4 pos = vec4(a_position, 1);
#if CC_USE_MODEL
pos = cc_matViewProj * cc_matWorld * pos;
#else
pos = cc_matViewProj * pos;
#endif
#if USE_TEXTURE
v_uv0 = a_uv0;
#endif
v_color = a_color;
gl_Position = pos;
}
}%
CCProgram fs %{
precision highp float;
#include <alpha-test>
in vec4 v_color;
#if USE_TEXTURE
in vec2 v_uv0;
uniform sampler2D texture;
#endif
void main () {
vec4 color = texture(texture, v_uv0);
float _r = color.r * 0.393 + color.g * 0.769 + color.b * 0.189;
float _g = color.r * 0.349 + color.g * 0.686 + color.b * 0.168;
float _b = color.r * 0.272 + color.g * 0.534 + color.b * 0.131;
color = vec4(_r, _g, _b, color.a);
gl_FragColor = color;
}
}%

View File

@ -0,0 +1,17 @@
{
"ver": "1.0.25",
"uuid": "dd3a8417-d752-4cf1-9c45-f9ee3c0bf858",
"compiledShaders": [
{
"glsl1": {
"vert": "\nprecision highp float;\nuniform mediump mat4 cc_matViewProj;\nuniform mat4 cc_matWorld;\nattribute vec3 a_position;\nattribute vec4 a_color;\nvarying vec4 v_color;\n#if USE_TEXTURE\nattribute vec2 a_uv0;\nvarying vec2 v_uv0;\n#endif\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n v_color = a_color;\n gl_Position = pos;\n}",
"frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n#endif\nvarying vec4 v_color;\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\nvoid main () {\n vec4 color = texture2D(texture, v_uv0);\n float _r = color.r * 0.393 + color.g * 0.769 + color.b * 0.189;\n float _g = color.r * 0.349 + color.g * 0.686 + color.b * 0.168;\n float _b = color.r * 0.272 + color.g * 0.534 + color.b * 0.131;\n color = vec4(_r, _g, _b, color.a);\n gl_FragColor = color;\n}"
},
"glsl3": {
"vert": "\nprecision highp float;\nuniform CCGlobal {\n highp vec4 cc_time;\n mediump vec4 cc_screenSize;\n mediump vec4 cc_screenScale;\n mediump vec4 cc_nativeSize;\n highp mat4 cc_matView;\n mediump mat4 cc_matViewInv;\n mediump mat4 cc_matProj;\n mediump mat4 cc_matProjInv;\n mediump mat4 cc_matViewProj;\n mediump mat4 cc_matViewProjInv;\n mediump vec4 cc_cameraPos;\n};\nuniform CCLocal {\n mat4 cc_matWorld;\n mat4 cc_matWorldIT;\n};\nin vec3 a_position;\nin vec4 a_color;\nout vec4 v_color;\n#if USE_TEXTURE\nin vec2 a_uv0;\nout vec2 v_uv0;\n#endif\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n v_color = a_color;\n gl_Position = pos;\n}",
"frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n uniform ALPHA_TEST {\n float alphaThreshold;\n };\n#endif\nin vec4 v_color;\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\nvoid main () {\n vec4 color = texture(texture, v_uv0);\n float _r = color.r * 0.393 + color.g * 0.769 + color.b * 0.189;\n float _g = color.r * 0.349 + color.g * 0.686 + color.b * 0.168;\n float _b = color.r * 0.272 + color.g * 0.534 + color.b * 0.131;\n color = vec4(_r, _g, _b, color.a);\n gl_FragColor = color;\n}"
}
}
],
"subMetas": {}
}

View File

@ -0,0 +1,19 @@
{
"__type__": "cc.Material",
"_name": "New Material",
"_objFlags": 0,
"_native": "",
"_effectAsset": {
"__uuid__": "dd3a8417-d752-4cf1-9c45-f9ee3c0bf858"
},
"_techniqueIndex": 0,
"_techniqueData": {
"0": {
"defines": {
"USE_TEXTURE": true,
"USE_ALPHA_TEST": false
},
"props": {}
}
}
}

View File

@ -0,0 +1,6 @@
{
"ver": "1.0.3",
"uuid": "e697bd51-81a4-4e3a-9e4c-cdef6af6e7ca",
"dataAsSubAsset": null,
"subMetas": {}
}

View File

@ -0,0 +1,73 @@
// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
CCEffect %{
techniques:
- passes:
- vert: vs
frag: fs
blendState:
targets:
- blend: true
rasterizerState:
cullMode: none
properties:
texture: { value: white }
alphaThreshold: { value: 0.5 }
}%
CCProgram vs %{
precision highp float;
#include <cc-global>
#include <cc-local>
in vec3 a_position;
in vec4 a_color;
out vec4 v_color;
#if USE_TEXTURE
in vec2 a_uv0;
out vec2 v_uv0;
#endif
void main () {
vec4 pos = vec4(a_position, 1);
#if CC_USE_MODEL
pos = cc_matViewProj * cc_matWorld * pos;
#else
pos = cc_matViewProj * pos;
#endif
#if USE_TEXTURE
v_uv0 = a_uv0;
#endif
v_color = a_color;
gl_Position = pos;
}
}%
CCProgram fs %{
precision highp float;
#include <alpha-test>
in vec4 v_color;
#if USE_TEXTURE
in vec2 v_uv0;
uniform sampler2D texture;
#endif
void main () {
vec4 color = texture(texture, v_uv0);
float _r = abs(color.g - color.b + color.g + color.r) * color.r;
float _g = abs(color.b - color.g + color.b + color.r) * color.r;
float _b = abs(color.b - color.g + color.b + color.r) * color.g;
color = vec4(_r, _g, _b, color.a);
gl_FragColor = color;
}
}%

View File

@ -0,0 +1,17 @@
{
"ver": "1.0.25",
"uuid": "1410dc1a-1903-435f-bf7a-35e48ca53fd6",
"compiledShaders": [
{
"glsl1": {
"vert": "\nprecision highp float;\nuniform mediump mat4 cc_matViewProj;\nuniform mat4 cc_matWorld;\nattribute vec3 a_position;\nattribute vec4 a_color;\nvarying vec4 v_color;\n#if USE_TEXTURE\nattribute vec2 a_uv0;\nvarying vec2 v_uv0;\n#endif\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n v_color = a_color;\n gl_Position = pos;\n}",
"frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n#endif\nvarying vec4 v_color;\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\nvoid main () {\n vec4 color = texture2D(texture, v_uv0);\n float _r = abs(color.g - color.b + color.g + color.r) * color.r;\n float _g = abs(color.b - color.g + color.b + color.r) * color.r;\n float _b = abs(color.b - color.g + color.b + color.r) * color.g;\n color = vec4(_r, _g, _b, color.a);\n gl_FragColor = color;\n}"
},
"glsl3": {
"vert": "\nprecision highp float;\nuniform CCGlobal {\n highp vec4 cc_time;\n mediump vec4 cc_screenSize;\n mediump vec4 cc_screenScale;\n mediump vec4 cc_nativeSize;\n highp mat4 cc_matView;\n mediump mat4 cc_matViewInv;\n mediump mat4 cc_matProj;\n mediump mat4 cc_matProjInv;\n mediump mat4 cc_matViewProj;\n mediump mat4 cc_matViewProjInv;\n mediump vec4 cc_cameraPos;\n};\nuniform CCLocal {\n mat4 cc_matWorld;\n mat4 cc_matWorldIT;\n};\nin vec3 a_position;\nin vec4 a_color;\nout vec4 v_color;\n#if USE_TEXTURE\nin vec2 a_uv0;\nout vec2 v_uv0;\n#endif\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n v_color = a_color;\n gl_Position = pos;\n}",
"frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n uniform ALPHA_TEST {\n float alphaThreshold;\n };\n#endif\nin vec4 v_color;\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\nvoid main () {\n vec4 color = texture(texture, v_uv0);\n float _r = abs(color.g - color.b + color.g + color.r) * color.r;\n float _g = abs(color.b - color.g + color.b + color.r) * color.r;\n float _b = abs(color.b - color.g + color.b + color.r) * color.g;\n color = vec4(_r, _g, _b, color.a);\n gl_FragColor = color;\n}"
}
}
],
"subMetas": {}
}

View File

@ -0,0 +1,17 @@
{
"__type__": "cc.Material",
"_name": "cartoon",
"_objFlags": 0,
"_native": "",
"_effectAsset": {
"__uuid__": "1410dc1a-1903-435f-bf7a-35e48ca53fd6"
},
"_techniqueIndex": 0,
"_techniqueData": {
"0": {
"defines": {
"USE_TEXTURE": true
}
}
}
}

View File

@ -0,0 +1,6 @@
{
"ver": "1.0.3",
"uuid": "33274f30-e75f-40b1-ac3f-cea71b7ba496",
"dataAsSubAsset": null,
"subMetas": {}
}

View File

@ -0,0 +1,75 @@
// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
CCEffect %{
techniques:
- passes:
- vert: vs
frag: fs
blendState:
targets:
- blend: true
rasterizerState:
cullMode: none
properties:
texture: { value: white }
alphaThreshold: { value: 0.5 }
}%
CCProgram vs %{
precision highp float;
#include <cc-global>
#include <cc-local>
in vec3 a_position;
in vec4 a_color;
out vec4 v_color;
#if USE_TEXTURE
in vec2 a_uv0;
out vec2 v_uv0;
#endif
void main () {
vec4 pos = vec4(a_position, 1);
#if CC_USE_MODEL
pos = cc_matViewProj * cc_matWorld * pos;
#else
pos = cc_matViewProj * pos;
#endif
#if USE_TEXTURE
v_uv0 = a_uv0;
#endif
v_color = a_color;
gl_Position = pos;
}
}%
CCProgram fs %{
precision highp float;
#include <alpha-test>
in vec4 v_color;
#if USE_TEXTURE
in vec2 v_uv0;
uniform sampler2D texture;
#endif
void main () {
// 冰冻
vec4 color = texture(texture, v_uv0);
float r = abs(color.r - color.g - color.b) * 1.5;
float g = abs(color.g - color.b - color.r) * 1.5;
float b = abs(color.b - color.r - color.g) * 1.5;
color = vec4(r, g, b, color.a);
gl_FragColor = color;
}
}%

View File

@ -0,0 +1,17 @@
{
"ver": "1.0.25",
"uuid": "5953f127-122f-48e3-8906-b4dbb9bb9ec6",
"compiledShaders": [
{
"glsl1": {
"vert": "\nprecision highp float;\nuniform mediump mat4 cc_matViewProj;\nuniform mat4 cc_matWorld;\nattribute vec3 a_position;\nattribute vec4 a_color;\nvarying vec4 v_color;\n#if USE_TEXTURE\nattribute vec2 a_uv0;\nvarying vec2 v_uv0;\n#endif\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n v_color = a_color;\n gl_Position = pos;\n}",
"frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n#endif\nvarying vec4 v_color;\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\nvoid main () {\n vec4 color = texture2D(texture, v_uv0);\n float r = abs(color.r - color.g - color.b) * 1.5;\n float g = abs(color.g - color.b - color.r) * 1.5;\n float b = abs(color.b - color.r - color.g) * 1.5;\n color = vec4(r, g, b, color.a);\n gl_FragColor = color;\n}"
},
"glsl3": {
"vert": "\nprecision highp float;\nuniform CCGlobal {\n highp vec4 cc_time;\n mediump vec4 cc_screenSize;\n mediump vec4 cc_screenScale;\n mediump vec4 cc_nativeSize;\n highp mat4 cc_matView;\n mediump mat4 cc_matViewInv;\n mediump mat4 cc_matProj;\n mediump mat4 cc_matProjInv;\n mediump mat4 cc_matViewProj;\n mediump mat4 cc_matViewProjInv;\n mediump vec4 cc_cameraPos;\n};\nuniform CCLocal {\n mat4 cc_matWorld;\n mat4 cc_matWorldIT;\n};\nin vec3 a_position;\nin vec4 a_color;\nout vec4 v_color;\n#if USE_TEXTURE\nin vec2 a_uv0;\nout vec2 v_uv0;\n#endif\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n v_color = a_color;\n gl_Position = pos;\n}",
"frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n uniform ALPHA_TEST {\n float alphaThreshold;\n };\n#endif\nin vec4 v_color;\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\nvoid main () {\n vec4 color = texture(texture, v_uv0);\n float r = abs(color.r - color.g - color.b) * 1.5;\n float g = abs(color.g - color.b - color.r) * 1.5;\n float b = abs(color.b - color.r - color.g) * 1.5;\n color = vec4(r, g, b, color.a);\n gl_FragColor = color;\n}"
}
}
],
"subMetas": {}
}

View File

@ -0,0 +1,17 @@
{
"__type__": "cc.Material",
"_name": "desaturate",
"_objFlags": 0,
"_native": "",
"_effectAsset": {
"__uuid__": "5953f127-122f-48e3-8906-b4dbb9bb9ec6"
},
"_techniqueIndex": 0,
"_techniqueData": {
"0": {
"defines": {
"USE_TEXTURE": true
}
}
}
}

View File

@ -0,0 +1,6 @@
{
"ver": "1.0.3",
"uuid": "82d5bfd4-a190-47f0-a20e-282a0068737b",
"dataAsSubAsset": null,
"subMetas": {}
}

View File

@ -0,0 +1,76 @@
// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
CCEffect %{
techniques:
- passes:
- vert: vs
frag: fs
blendState:
targets:
- blend: true
rasterizerState:
cullMode: none
properties:
texture: { value: white }
alphaThreshold: { value: 0.5 }
}%
CCProgram vs %{
precision highp float;
#include <cc-global>
#include <cc-local>
in vec3 a_position;
in vec4 a_color;
out vec4 v_color;
#if USE_TEXTURE
in vec2 a_uv0;
out vec2 v_uv0;
#endif
void main () {
vec4 pos = vec4(a_position, 1);
#if CC_USE_MODEL
pos = cc_matViewProj * cc_matWorld * pos;
#else
pos = cc_matViewProj * pos;
#endif
#if USE_TEXTURE
v_uv0 = a_uv0;
#endif
v_color = a_color;
gl_Position = pos;
}
}%
CCProgram fs %{
precision highp float;
#include <alpha-test>
in vec4 v_color;
#if USE_TEXTURE
in vec2 v_uv0;
uniform sampler2D texture;
#endif
void main () {
// 灰度将颜色的RGB设置为相同的值即可使得图片为灰色一般处理方法有
// 1、取三种颜色的平均值
// 2、取三种颜色的最大值最小值
// 3、加权平均值0.3R + 0.59G + 0.11*B
vec4 color = texture(texture, v_uv0);
float gray = (color.r + color.g + color.b)/3.0;
color = vec4(gray, gray, gray, color.a);
gl_FragColor = color;
}
}%

View File

@ -0,0 +1,17 @@
{
"ver": "1.0.25",
"uuid": "69550ca6-c885-4706-b41c-c048fae5051b",
"compiledShaders": [
{
"glsl1": {
"vert": "\nprecision highp float;\nuniform mediump mat4 cc_matViewProj;\nuniform mat4 cc_matWorld;\nattribute vec3 a_position;\nattribute vec4 a_color;\nvarying vec4 v_color;\n#if USE_TEXTURE\nattribute vec2 a_uv0;\nvarying vec2 v_uv0;\n#endif\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n v_color = a_color;\n gl_Position = pos;\n}",
"frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n#endif\nvarying vec4 v_color;\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\nvoid main () {\n vec4 color = texture2D(texture, v_uv0);\n float gray = (color.r + color.g + color.b)/3.0;\n color = vec4(gray, gray, gray, color.a);\n gl_FragColor = color;\n}"
},
"glsl3": {
"vert": "\nprecision highp float;\nuniform CCGlobal {\n highp vec4 cc_time;\n mediump vec4 cc_screenSize;\n mediump vec4 cc_screenScale;\n mediump vec4 cc_nativeSize;\n highp mat4 cc_matView;\n mediump mat4 cc_matViewInv;\n mediump mat4 cc_matProj;\n mediump mat4 cc_matProjInv;\n mediump mat4 cc_matViewProj;\n mediump mat4 cc_matViewProjInv;\n mediump vec4 cc_cameraPos;\n};\nuniform CCLocal {\n mat4 cc_matWorld;\n mat4 cc_matWorldIT;\n};\nin vec3 a_position;\nin vec4 a_color;\nout vec4 v_color;\n#if USE_TEXTURE\nin vec2 a_uv0;\nout vec2 v_uv0;\n#endif\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n v_color = a_color;\n gl_Position = pos;\n}",
"frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n uniform ALPHA_TEST {\n float alphaThreshold;\n };\n#endif\nin vec4 v_color;\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\nvoid main () {\n vec4 color = texture(texture, v_uv0);\n float gray = (color.r + color.g + color.b)/3.0;\n color = vec4(gray, gray, gray, color.a);\n gl_FragColor = color;\n}"
}
}
],
"subMetas": {}
}

View File

@ -0,0 +1,17 @@
{
"__type__": "cc.Material",
"_name": "gray",
"_objFlags": 0,
"_native": "",
"_effectAsset": {
"__uuid__": "69550ca6-c885-4706-b41c-c048fae5051b"
},
"_techniqueIndex": 0,
"_techniqueData": {
"0": {
"defines": {
"USE_TEXTURE": true
}
}
}
}

View File

@ -0,0 +1,6 @@
{
"ver": "1.0.3",
"uuid": "d33b6c67-cde8-433f-91ed-cce8f99db941",
"dataAsSubAsset": null,
"subMetas": {}
}

BIN
assets/Scene/Filter/img.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "07942f94-3a77-4fe7-98d3-78d5b11e1b9e",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 500,
"height": 375,
"platformSettings": {},
"subMetas": {
"img": {
"ver": "1.0.4",
"uuid": "aed08844-9343-4ecd-83f0-125c0f2c31ff",
"rawTextureUuid": "07942f94-3a77-4fe7-98d3-78d5b11e1b9e",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 500,
"height": 375,
"rawWidth": 500,
"rawHeight": 375,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

View File

@ -0,0 +1,75 @@
// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
CCEffect %{
techniques:
- passes:
- vert: vs
frag: fs
blendState:
targets:
- blend: true
rasterizerState:
cullMode: none
properties:
texture: { value: white }
alphaThreshold: { value: 0.5 }
}%
CCProgram vs %{
precision highp float;
#include <cc-global>
#include <cc-local>
in vec3 a_position;
in vec4 a_color;
out vec4 v_color;
#if USE_TEXTURE
in vec2 a_uv0;
out vec2 v_uv0;
#endif
void main () {
vec4 pos = vec4(a_position, 1);
#if CC_USE_MODEL
pos = cc_matViewProj * cc_matWorld * pos;
#else
pos = cc_matViewProj * pos;
#endif
#if USE_TEXTURE
v_uv0 = a_uv0;
#endif
v_color = a_color;
gl_Position = pos;
}
}%
CCProgram fs %{
precision highp float;
#include <alpha-test>
in vec4 v_color;
#if USE_TEXTURE
in vec2 v_uv0;
uniform sampler2D texture;
#endif
void main () {
// 反相RGB三种颜色分别取255的差值
vec4 color = texture(texture, v_uv0);
float _r = 255.0 / 256.0 - color.r;
float _g = 255.0 / 256.0 - color.g;
float _b = 255.0 / 256.0 - color.b;
color = vec4(_r, _g, _b, color.a);
gl_FragColor = color;
}
}%

View File

@ -0,0 +1,17 @@
{
"ver": "1.0.25",
"uuid": "53def89f-dc59-4c81-8c1f-f0966b17f00a",
"compiledShaders": [
{
"glsl1": {
"vert": "\nprecision highp float;\nuniform mediump mat4 cc_matViewProj;\nuniform mat4 cc_matWorld;\nattribute vec3 a_position;\nattribute vec4 a_color;\nvarying vec4 v_color;\n#if USE_TEXTURE\nattribute vec2 a_uv0;\nvarying vec2 v_uv0;\n#endif\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n v_color = a_color;\n gl_Position = pos;\n}",
"frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n#endif\nvarying vec4 v_color;\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\nvoid main () {\n vec4 color = texture2D(texture, v_uv0);\n float _r = 255.0 / 256.0 - color.r;\n float _g = 255.0 / 256.0 - color.g;\n float _b = 255.0 / 256.0 - color.b;\n color = vec4(_r, _g, _b, color.a);\n gl_FragColor = color;\n}"
},
"glsl3": {
"vert": "\nprecision highp float;\nuniform CCGlobal {\n highp vec4 cc_time;\n mediump vec4 cc_screenSize;\n mediump vec4 cc_screenScale;\n mediump vec4 cc_nativeSize;\n highp mat4 cc_matView;\n mediump mat4 cc_matViewInv;\n mediump mat4 cc_matProj;\n mediump mat4 cc_matProjInv;\n mediump mat4 cc_matViewProj;\n mediump mat4 cc_matViewProjInv;\n mediump vec4 cc_cameraPos;\n};\nuniform CCLocal {\n mat4 cc_matWorld;\n mat4 cc_matWorldIT;\n};\nin vec3 a_position;\nin vec4 a_color;\nout vec4 v_color;\n#if USE_TEXTURE\nin vec2 a_uv0;\nout vec2 v_uv0;\n#endif\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n v_color = a_color;\n gl_Position = pos;\n}",
"frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n uniform ALPHA_TEST {\n float alphaThreshold;\n };\n#endif\nin vec4 v_color;\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\nvoid main () {\n vec4 color = texture(texture, v_uv0);\n float _r = 255.0 / 256.0 - color.r;\n float _g = 255.0 / 256.0 - color.g;\n float _b = 255.0 / 256.0 - color.b;\n color = vec4(_r, _g, _b, color.a);\n gl_FragColor = color;\n}"
}
}
],
"subMetas": {}
}

View File

@ -0,0 +1,17 @@
{
"__type__": "cc.Material",
"_name": "New Material",
"_objFlags": 0,
"_native": "",
"_effectAsset": {
"__uuid__": "53def89f-dc59-4c81-8c1f-f0966b17f00a"
},
"_techniqueIndex": 0,
"_techniqueData": {
"0": {
"defines": {
"USE_TEXTURE": true
}
}
}
}

View File

@ -0,0 +1,6 @@
{
"ver": "1.0.3",
"uuid": "b404cbda-3e82-403a-8202-084b5719345a",
"dataAsSubAsset": null,
"subMetas": {}
}

View File

@ -16,7 +16,8 @@ enum sceneList {
'Infinite_bg_scroll' = '背景无限滚动', 'Infinite_bg_scroll' = '背景无限滚动',
'Change_clothes' = '换装', 'Change_clothes' = '换装',
'Screen_vibrating' = '震屏效果+动画恢复第一帧', 'Screen_vibrating' = '震屏效果+动画恢复第一帧',
'Joystick' = '遥控杆' 'Joystick' = '遥控杆',
'Filter' = '颜色滤镜'
} }
@ccclass @ccclass

Binary file not shown.

After

Width:  |  Height:  |  Size: 157 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

View File

@ -0,0 +1,96 @@
# 效果演示
我们手机上有很多照片处理软件,图片滤镜是里面不可或缺的一部分,我们可以先尝试一些很简单的滤镜的算法,管中窥豹地去认识一下色彩的处理。
![demo](/resources/demo.png)
# 实现思路
先来看一下比较常用的褐色、老照片效果,它的算法是:
> r = r * 0.393 + g * 0.769 + b * 0.189;
> g = r * 0.349 + g * 0.686 + b * 0.168;
> b = r * 0.272 + g * 0.534 + b * 0.131;
```js
void main () {
vec4 color = texture(texture, v_uv0);
float _r = color.r * 0.393 + color.g * 0.769 + color.b * 0.189;
float _g = color.r * 0.349 + color.g * 0.686 + color.b * 0.168;
float _b = color.r * 0.272 + color.g * 0.534 + color.b * 0.131;
color = vec4(_r, _g, _b, color.a);
gl_FragColor = color;
}
```
灰度或者去色的核心是让RGB三种色值相等即可得到不同的灰度根据需求的不同我们可以通过取三个色值的平均值三个色值的最大值最小值加权平均值等方式来处理
```js
void main () {
vec4 color = texture(texture, v_uv0);
float gray = (color.r + color.g + color.b)/3.0;
color = vec4(gray, gray, gray, color.a);
gl_FragColor = color;
}
```
反相的算法是让RGB三种颜色分别取255的差值
```js
void main () {
vec4 color = texture(texture, v_uv0);
float r = (255.0 - color.r * 256.0) / 256.0;
float g = (255.0 - color.g * 256.0) / 256.0;
float b = (255.0 - color.b * 256.0) / 256.0;
color = vec4(r, g, b, color.a);
gl_FragColor = color;
}
```
让图像呈现淡蓝色,也可以形象叫做冰冻,它的算法是
```js
void main () {
vec4 color = texture(texture, v_uv0);
float _r = (255.0 - color.r * 256.0) / 256.0;
float _g = (255.0 - color.g * 256.0) / 256.0;
float _b = (255.0 - color.b * 256.0) / 256.0;
color = vec4(_r, _g, _b, color.a);
gl_FragColor = color;
}
```
连环画滤镜是:
> R = |g b + g + r| * r;
> G = |b g + b + r| * r;
> B = |b g + b + r| * g;
```js
void main () {
vec4 color = texture(texture, v_uv0);
float _r = abs(color.g - color.b + color.g + color.r) * color.r;
float _g = abs(color.b - color.g + color.b + color.r) * color.r;
float _b = abs(color.b - color.g + color.b + color.r) * color.g;
color = vec4(_r, _g, _b, color.a);
gl_FragColor = color;
}
```
滤镜是用来实现图片的各种特殊效果的简单的颜色滤镜我们就通过简单的颜色叠加公式可以得出但是复杂的滤镜效果就可能需要使用更高阶的数学处理甚至叠加多次处理才能得到我们在图像处理APP里面看到的各种各样的滤镜其实就是人家专门针对某种效果提炼出来的公式有兴趣的同学用前端的知识也能够打造一个专门的图像处理App
# 效果预览
源码获取请点击**查看原文**,长按二维码查看效果👇
![ewm](/resources/ewm.png)
我是异名,你的阅读是我的动力

View File

@ -34,7 +34,7 @@
"height": 640, "height": 640,
"width": 960 "width": 960
}, },
"last-module-event-record-time": 1588409548473, "last-module-event-record-time": 1589255814190,
"assets-sort-type": "name", "assets-sort-type": "name",
"facebook": { "facebook": {
"appID": "", "appID": "",