Test_Project_Cocos/CocosCreator-Shader-Effect-Demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完善圆角裁剪

Browse Source
This commit is contained in:
caizhitao 2020-01-09 10:01:28 +08:00
parent 9e3ca8fce6
commit 7380cf3292
7 changed files with 213 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
assets/effects/sprite-round-corner-crop.effect
View File

@ -1,9 +1,7 @@
// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
// 老照片特效
// 原理：
// r = 0.393 * r + 0.769 * g + 0.189 * b;
// g = 0.349 * r + 0.686 * g + 0.168 * b;
// b = 0.272 * r + 0.534 * g + 0.131 * b;
// 圆角裁剪
// 原理：https://www.cnblogs.com/jqm304775992/p/4987793.html
// 代码：复制 yanjifa/shaderDemor 的 https://github.com/yanjifa/shaderDemo/blob/master/assets/Effect/CircleAvatar.effect
CCEffect %{
techniques:
@ -18,12 +16,12 @@ CCEffect %{
properties:
texture: { value: white }
alphaThreshold: { value: 0.5 }
# 老化程度
oldLevel: {
value: 1.0,
# 圆角半径
roundCornerRadius: {
value: 0.1,
inspector: {
tooltip: "老化程度",
range: [0.0, 1.0]
tooltip: "圆角半径",
range: [0.0, 0.5]
}
}
}%
@ -76,24 +74,10 @@ CCProgram fs %{
uniform sampler2D texture;
#endif
#if USE_OLD_PHOTO
uniform OldPhoto {
// 老化程度
float oldLevel;
}
/**
* 获取老化颜色
*
* @param color 原始颜色
*
* @return 老化后的颜色
*/
vec4 getOldPhotoColor(vec4 color) {
float r = 0.393 * color.r + 0.769 * color.g + 0.189 * color.b;
float g = 0.349 * color.r + 0.686 * color.g + 0.168 * color.b;
float b = 0.272 * color.r + 0.534 * color.g + 0.131 * color.b;
return vec4(r, g, b, color.a);
#if ENABLE_ROUNDCORNER
uniform RoundCorner {
// 圆角半径
float roundCornerRadius;
}
#endif
@ -111,11 +95,15 @@ CCProgram fs %{
ALPHA_TEST(o);
#if USE_OLD_PHOTO
vec4 srcColor = o;
vec4 oldColor = getOldPhotoColor(srcColor);
o = srcColor + (oldColor - srcColor) * oldLevel;
#if ENABLE_ROUNDCORNER
vec2 uv = v_uv0.xy - vec2(0.5, 0.5);
float rx = abs(uv.x) - (0.5 - roundCornerRadius);
float ry = abs(uv.y) - (0.5 - roundCornerRadius);
float mx = step(0.5 - roundCornerRadius, abs(uv.x));
float my = step(0.5 - roundCornerRadius, abs(uv.y));
float radius = length(vec2(rx, ry));
float a = 1.0 - mx * my * step(roundCornerRadius, radius) * smoothstep(0., roundCornerRadius * 0.01, radius - roundCornerRadius);
o = vec4(o.rgb, o.a * a);
#endif
gl_FragColor = o;
}

4
assets/effects/sprite-round-corner-crop.effect.meta
View File

@ -5,11 +5,11 @@
{
"glsl1": {
"vert": "\nprecision highp float;\nuniform mat4 cc_matViewProj;\nuniform mat4 cc_matWorld;\n\nattribute vec3 a_position;\nattribute vec4 a_color;\nvarying vec4 v_color;\n\n#if USE_TEXTURE\nattribute vec2 a_uv0;\nvarying vec2 v_uv0;\n#endif\n\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n\n v_color = a_color;\n\n gl_Position = pos;\n}\n",
"frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n \n uniform float alphaThreshold;\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\n\nvarying vec4 v_color;\n\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if USE_OLD_PHOTO\nuniform float oldLevel;\n/**\n * 获取老化颜色\n * \n * @param color 原始颜色 \n *\n * @return 老化后的颜色\n */\nvec4 getOldPhotoColor(vec4 color) {\n float r = 0.393 * color.r + 0.769 * color.g + 0.189 * color.b; \n float g = 0.349 * color.r + 0.686 * color.g + 0.168 * color.b; \n float b = 0.272 * color.r + 0.534 * color.g + 0.131 * color.b;\n return vec4(r, g, b, color.a);\n}\n#endif\n\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n\n #if USE_TEXTURE\n o *= texture2D(texture, v_uv0);\n #if CC_USE_ALPHA_ATLAS_TEXTURE\n o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n #endif\n #endif\n\n o *= v_color;\n\n ALPHA_TEST(o);\n\n #if USE_OLD_PHOTO\n vec4 srcColor = o;\n vec4 oldColor = getOldPhotoColor(srcColor);\n\n o = srcColor + (oldColor - srcColor) * oldLevel;\n #endif\n gl_FragColor = o;\n}\n"
"frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n \n uniform float alphaThreshold;\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\n\nvarying vec4 v_color;\n\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if ENABLE_ROUNDCORNER\nuniform float roundCornerRadius;\n#endif\n\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n\n #if USE_TEXTURE\n o *= texture2D(texture, v_uv0);\n #if CC_USE_ALPHA_ATLAS_TEXTURE\n o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n #endif\n #endif\n\n o *= v_color;\n\n ALPHA_TEST(o);\n\n #if ENABLE_ROUNDCORNER\n vec2 uv = v_uv0.xy - vec2(0.5, 0.5);\n float rx = abs(uv.x) - (0.5 - roundCornerRadius);\n float ry = abs(uv.y) - (0.5 - roundCornerRadius);\n float mx = step(0.5 - roundCornerRadius, abs(uv.x));\n float my = step(0.5 - roundCornerRadius, abs(uv.y));\n float radius = length(vec2(rx, ry));\n float a = 1.0 - mx * my * step(roundCornerRadius, radius) * smoothstep(0., roundCornerRadius * 0.01, radius - roundCornerRadius);\n o = vec4(o.rgb, o.a * a);\n #endif\n gl_FragColor = o;\n}\n"
},
"glsl3": {
"vert": "\nprecision highp float;\nuniform CCGlobal {\n vec4 cc_time;\n\n vec4 cc_screenSize;\n\n vec4 cc_screenScale;\n\n vec4 cc_nativeSize;\n\n mat4 cc_matView;\n mat4 cc_matViewInv;\n mat4 cc_matProj;\n mat4 cc_matProjInv;\n mat4 cc_matViewProj;\n mat4 cc_matViewProjInv;\n vec4 cc_cameraPos;\n\n vec4 cc_exposure;\n\n vec4 cc_mainLitDir;\n\n vec4 cc_mainLitColor;\n\n vec4 cc_ambientSky;\n vec4 cc_ambientGround;\n};\nuniform CCLocal {\n mat4 cc_matWorld;\n mat4 cc_matWorldIT;\n};\n\nin vec3 a_position;\nin vec4 a_color;\nout vec4 v_color;\n\n#if USE_TEXTURE\nin vec2 a_uv0;\nout vec2 v_uv0;\n#endif\n\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n\n v_color = a_color;\n\n gl_Position = pos;\n}\n",
"frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n \n uniform ALPHA_TEST {\n float alphaThreshold;\n }\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\n\nin vec4 v_color;\n\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if USE_OLD_PHOTO\nuniform OldPhoto {\n\n float oldLevel;\n}\n\n/**\n * 获取老化颜色\n * \n * @param color 原始颜色 \n *\n * @return 老化后的颜色\n */\nvec4 getOldPhotoColor(vec4 color) {\n float r = 0.393 * color.r + 0.769 * color.g + 0.189 * color.b; \n float g = 0.349 * color.r + 0.686 * color.g + 0.168 * color.b; \n float b = 0.272 * color.r + 0.534 * color.g + 0.131 * color.b;\n return vec4(r, g, b, color.a);\n}\n#endif\n\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n\n #if USE_TEXTURE\n o *= texture(texture, v_uv0);\n #if CC_USE_ALPHA_ATLAS_TEXTURE\n o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n #endif\n #endif\n\n o *= v_color;\n\n ALPHA_TEST(o);\n\n #if USE_OLD_PHOTO\n vec4 srcColor = o;\n vec4 oldColor = getOldPhotoColor(srcColor);\n\n o = srcColor + (oldColor - srcColor) * oldLevel;\n #endif\n gl_FragColor = o;\n}\n"
"frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n \n uniform ALPHA_TEST {\n float alphaThreshold;\n }\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\n\nin vec4 v_color;\n\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if ENABLE_ROUNDCORNER\nuniform RoundCorner {\n\n float roundCornerRadius;\n}\n#endif\n\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n\n #if USE_TEXTURE\n o *= texture(texture, v_uv0);\n #if CC_USE_ALPHA_ATLAS_TEXTURE\n o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n #endif\n #endif\n\n o *= v_color;\n\n ALPHA_TEST(o);\n\n #if ENABLE_ROUNDCORNER\n vec2 uv = v_uv0.xy - vec2(0.5, 0.5);\n float rx = abs(uv.x) - (0.5 - roundCornerRadius);\n float ry = abs(uv.y) - (0.5 - roundCornerRadius);\n float mx = step(0.5 - roundCornerRadius, abs(uv.x));\n float my = step(0.5 - roundCornerRadius, abs(uv.y));\n float radius = length(vec2(rx, ry));\n float a = 1.0 - mx * my * step(roundCornerRadius, radius) * smoothstep(0., roundCornerRadius * 0.01, radius - roundCornerRadius);\n o = vec4(o.rgb, o.a * a);\n #endif\n gl_FragColor = o;\n}\n"
}
}
],

6
assets/materials/sprite-round-corner-crop.mtl
View File

@ -8,7 +8,9 @@
},
"_defines": {
"USE_TEXTURE": true,
"USE_OLD_PHOTO": true
"ENABLE_ROUNDCORNER": true
},
"_props": {}
"_props": {
"roundCornerRadius": 0.1
}
}

151
assets/scenes/RoundCornerCropEffectScene.fire
View File

@ -78,10 +78,10 @@
"_active": true,
"_components": [
{
"__id__": 45
"__id__": 47
},
{
"__id__": 46
"__id__": 48
}
],
"_prefab": null,
@ -251,7 +251,7 @@
"_active": true,
"_components": [
{
"__id__": 44
"__id__": 46
}
],
"_prefab": null,
@ -646,8 +646,8 @@
}
],
"_useOriginalSize": false,
"_string": "老化程度：",
"_N$string": "老化程度：",
"_string": "圆角半径：",
"_N$string": "圆角半径：",
"_fontSize": 40,
"_lineHeight": 40,
"_enableWrapText": true,
@ -1341,15 +1341,18 @@
},
{
"__id__": 40
},
{
"__id__": 42
}
],
"_active": true,
"_components": [
{
"__id__": 42
"__id__": 44
},
{
"__id__": 43
"__id__": 45
}
],
"_prefab": null,
@ -1364,7 +1367,7 @@
"_contentSize": {
"__type__": "cc.Size",
"width": 384,
"height": 583.73
"height": 629.73
},
"_anchorPoint": {
"__type__": "cc.Vec2",
@ -1408,7 +1411,7 @@
"__id__": 29
},
"_children": [],
"_active": true,
"_active": false,
"_components": [
{
"__id__": 31
@ -1496,7 +1499,7 @@
},
{
"__type__": "cc.Node",
"_name": "cocos_logo",
"_name": "freedom",
"_objFlags": 0,
"_parent": {
"__id__": 29
@ -1517,6 +1520,100 @@
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 240,
"height": 240
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
-120,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "47hFX2oHFLvrpZ4r0ouXPs"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 32
},
"_enabled": true,
"_materials": [
{
"__uuid__": "642c2d0e-7eb6-4d65-96f2-d6e0d0305310"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "dbc8f785-d78b-4179-bfce-ffbf69396712"
},
"_type": 0,
"_sizeMode": 0,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "f61+UyKJdOyIJQABsng1SX"
},
{
"__type__": "cc.Node",
"_name": "cocos_logo",
"_objFlags": 0,
"_parent": {
"__id__": 29
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 35
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 195,
@ -1532,7 +1629,7 @@
"ctor": "Float64Array",
"array": [
0,
-207,
-387,
0,
0,
0,
@ -1561,7 +1658,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 32
"__id__": 34
},
"_enabled": true,
"_materials": [
@ -1596,10 +1693,10 @@
"__id__": 29
},
"_children": [],
"_active": true,
"_active": false,
"_components": [
{
"__id__": 35
"__id__": 37
}
],
"_prefab": null,
@ -1626,7 +1723,7 @@
"ctor": "Float64Array",
"array": [
0,
-384,
-564,
0,
0,
0,
@ -1655,7 +1752,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 34
"__id__": 36
},
"_enabled": true,
"_materials": [
@ -1690,10 +1787,10 @@
"__id__": 29
},
"_children": [],
"_active": true,
"_active": false,
"_components": [
{
"__id__": 37
"__id__": 39
}
],
"_prefab": null,
@ -1720,7 +1817,7 @@
"ctor": "Float64Array",
"array": [
0,
-451,
-631,
0,
0,
0,
@ -1749,7 +1846,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 36
"__id__": 38
},
"_enabled": true,
"_materials": [
@ -1787,7 +1884,7 @@
"_active": true,
"_components": [
{
"__id__": 39
"__id__": 41
}
],
"_prefab": null,
@ -1814,7 +1911,7 @@
"ctor": "Float64Array",
"array": [
0,
-513.2,
-559.2,
0,
0,
0,
@ -1843,7 +1940,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 38
"__id__": 40
},
"_enabled": true,
"_materials": [
@ -1879,7 +1976,7 @@
"_active": true,
"_components": [
{
"__id__": 41
"__id__": 43
}
],
"_prefab": null,
@ -1906,7 +2003,7 @@
"ctor": "Float64Array",
"array": [
0,
-567.065,
-613.065,
0,
0,
0,
@ -1935,7 +2032,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 40
"__id__": 42
},
"_enabled": true,
"_materials": [
@ -2000,7 +2097,7 @@
"_layoutSize": {
"__type__": "cc.Size",
"width": 384,
"height": 583.73
"height": 629.73
},
"_resize": 1,
"_N$layoutType": 2,

53
assets/scripts/RoundCornerCropEffectScene.ts
View File

@ -8,6 +8,9 @@ export default class RoundCornerCropEffectScene extends cc.Component {
private _examplesParentNode: cc.Node = null;
onLoad() {
// 关闭动态合图
cc.dynamicAtlasManager.enabled = false;
this._roundCornerRadiuSlider = cc.find("Canvas/Content/Sliders/RoundCornerRadiusSlider/Slider").getComponent(cc.Slider);
this._roundCornerRadiuLabel = cc.find("Canvas/Content/Sliders/RoundCornerRadiusSlider/ValueLabel").getComponent(cc.Label);
@ -29,31 +32,31 @@ export default class RoundCornerCropEffectScene extends cc.Component {
private _onSliderChanged() {
this._roundCornerRadiuLabel.string = `${this._roundCornerRadiuSlider.progress.toFixed(2)}`;
// // 更新材质
// this._updateRenderComponentMaterial({
// oldLevel: this._roundCornerRadiuSlider.progress
// });
// 更新材质
this._updateRenderComponentMaterial({
roundCornerRadius: this._roundCornerRadiuSlider.progress
});
}
// /**
// * 更新渲染组件的材质
// *
// * 1. 获取材质
// * 2. 给材质的 unitform 变量赋值
// * 3. 重新将材质赋值回去
// */
// private _updateRenderComponentMaterial(param: {
// /**
// * 老化程度 [0.0, 1.0] ，1.0 表示完全老化
// */
// oldLevel: number;
// }) {
// this._examplesParentNode.children.forEach(childNode => {
// childNode.getComponents(cc.RenderComponent).forEach(renderComponent => {
// let material: cc.Material = renderComponent.getMaterial(0);
// material.setProperty("oldLevel", param.oldLevel);
// renderComponent.setMaterial(0, material);
// });
// });
// }
/**
* 更新渲染组件的材质
*
* 1. 获取材质
* 2. 给材质的 unitform 变量赋值
* 3. 重新将材质赋值回去
*/
private _updateRenderComponentMaterial(param: {
/**
* 圆角半径 [0.0, 0.5] ，0.5 表示圆形裁剪
*/
roundCornerRadius: number;
}) {
this._examplesParentNode.children.forEach(childNode => {
childNode.getComponents(cc.RenderComponent).forEach(renderComponent => {
let material: cc.Material = renderComponent.getMaterial(0);
material.setProperty("roundCornerRadius", param.roundCornerRadius);
renderComponent.setMaterial(0, material);
});
});
}
}

BIN
assets/textures/freedom.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 160 KiB

34
assets/textures/freedom.jpg.meta Normal file
View File

@ -0,0 +1,34 @@
{
"ver": "2.3.3",
"uuid": "caf42253-1569-497e-83da-2d1696f5866b",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"platformSettings": {},
"subMetas": {
"freedom": {
"ver": "1.0.4",
"uuid": "dbc8f785-d78b-4179-bfce-ffbf69396712",
"rawTextureUuid": "caf42253-1569-497e-83da-2d1696f5866b",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 755,
"height": 755,
"rawWidth": 755,
"rawHeight": 755,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}