CocosPlugin/cocos-awesome
1
0
Fork 0
mirror of https://github.com/ifengzp/cocos-awesome.git synced 2024-12-24 10:49:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: 🎸 渐变过渡的相册

Browse Source 
一个借助shader渐变的相册demo
This commit is contained in:
ifengzp 2020-06-06 23:54:55 +08:00
parent 16946d2d06
commit ca81a027d3
24 changed files with 1659 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/Scene/Circle_avatar/circle_avatar.effect.meta
View File

@ -5,11 +5,11 @@
{
"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\nuniform float radius;\nuniform float blur;\nuniform vec2 center;\nuniform float wh_ratio;\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n o *= texture2D(texture, v_uv0);\n o *= v_color;\n float circle = radius * radius;\n float rx = center.x * wh_ratio;\n float ry = center.y;\n float dis = (v_uv0.x * wh_ratio - rx) * (v_uv0.x * wh_ratio - rx) + (v_uv0.y - ry) * (v_uv0.y - ry);\n o.a = smoothstep(circle, circle - blur, dis);\n gl_FragColor = o;\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\nuniform float radius;\nuniform float blur;\nuniform vec2 center;\nuniform float wh_ratio;\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n o *= texture2D(texture, v_uv0);\n o *= v_color;\n float circle = radius * radius;\n float rx = center.x * wh_ratio;\n float ry = center.y;\n float dis = (v_uv0.x * wh_ratio - rx) * (v_uv0.x * wh_ratio - rx) + (v_uv0.y - ry) * (v_uv0.y - ry);\n o.a = smoothstep(circle, circle - blur, dis) * o.a;\n gl_FragColor = o;\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\nuniform ARGS{\n float radius;\n float blur;\n vec2 center;\n float wh_ratio;\n};\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n o *= texture(texture, v_uv0);\n o *= v_color;\n float circle = radius * radius;\n float rx = center.x * wh_ratio;\n float ry = center.y;\n float dis = (v_uv0.x * wh_ratio - rx) * (v_uv0.x * wh_ratio - rx) + (v_uv0.y - ry) * (v_uv0.y - ry);\n o.a = smoothstep(circle, circle - blur, dis);\n gl_FragColor = o;\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\nuniform ARGS{\n float radius;\n float blur;\n vec2 center;\n float wh_ratio;\n};\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n o *= texture(texture, v_uv0);\n o *= v_color;\n float circle = radius * radius;\n float rx = center.x * wh_ratio;\n float ry = center.y;\n float dis = (v_uv0.x * wh_ratio - rx) * (v_uv0.x * wh_ratio - rx) + (v_uv0.y - ry) * (v_uv0.y - ry);\n o.a = smoothstep(circle, circle - blur, dis) * o.a;\n gl_FragColor = o;\n}"
}
}
],

3
assets/Scene/Home/Home.ts
View File

@ -19,7 +19,8 @@ enum sceneList {
'Screen_vibrating' = '震屏效果+动画恢复第一帧',
'Joystick' = '遥控杆',
'Filter' = '颜色滤镜',
'Mosaic' = '马赛克/像素风（shader）'
'Mosaic' = '马赛克/像素风（shader）',
'Photo_gallery' = '渐变过渡的相册（shader）'
}
@ccclass

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

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "3f7ef956-c957-4e12-951a-97f6c5a11393",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

1246
assets/Scene/Photo_gallery/Photo_gallery.fire Normal file
View File

File diff suppressed because it is too large Load Diff

7
assets/Scene/Photo_gallery/Photo_gallery.fire.meta Normal file
View File

@ -0,0 +1,7 @@
{
"ver": "1.2.6",
"uuid": "96343569-0f12-4ed5-8ba0-596a8ffde78c",
"asyncLoadAssets": false,
"autoReleaseAssets": false,
"subMetas": {}
}

42
assets/Scene/Photo_gallery/Photo_gallery.ts Normal file
View File

@ -0,0 +1,42 @@
const { ccclass, property } = cc._decorator;
@ccclass
export default class Scene_transition extends cc.Component {
@property([cc.Node])
switchNodeList: cc.Node[] = [];
fadeRadius: number = 0.1;
onLoad() {
this.switchNodeList.forEach((node, idx) => {
node.zIndex = this.switchNodeList.length - idx;
})
}
isTransforming: boolean = false;
bgTramsform() {
if (this.isTransforming) return;
this.isTransforming = true;
let time = 0.0;
let node = this.switchNodeList[0];
let material = node.getComponent(cc.Sprite).getMaterial(0);
material.setProperty('u_fade_radius', this.fadeRadius);
material.setProperty('u_time', time);
material.define('USE_TRAMSFORM', true, 0, true);
let timer = setInterval(() => {
time += 0.03;
material.setProperty('u_time', time);
if (time > 1.0 + this.fadeRadius) {
this.switchNodeList.shift();
this.switchNodeList.push(node);
this.switchNodeList.forEach((node, idx) => {
node.zIndex = this.switchNodeList.length - idx;
})
material.define('USE_TRAMSFORM', false, 0, true);
this.isTransforming = false;
timer && clearInterval(timer);
}
}, 30);
}
}

9
assets/Scene/Photo_gallery/Photo_gallery.ts.meta Normal file
View File

@ -0,0 +1,9 @@
{
"ver": "1.0.5",
"uuid": "26442228-fb1a-4e55-82e3-6432b4130955",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}

7
assets/Scene/Photo_gallery/Texture.meta Normal file
View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "e8ed3b15-d6c2-4c35-be4f-6495c46dbe42",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

BIN
assets/Scene/Photo_gallery/Texture/bg1.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

36
assets/Scene/Photo_gallery/Texture/bg1.jpg.meta Normal file
View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "ee9b221f-8ed3-4418-8cbf-b987bbb772ca",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": false,
"width": 1024,
"height": 445,
"platformSettings": {},
"subMetas": {
"bg1": {
"ver": "1.0.4",
"uuid": "d61bb924-4a50-4487-90ce-e35d82c2e7a9",
"rawTextureUuid": "ee9b221f-8ed3-4418-8cbf-b987bbb772ca",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1024,
"height": 445,
"rawWidth": 1024,
"rawHeight": 445,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

BIN
assets/Scene/Photo_gallery/Texture/bg2.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 144 KiB

36
assets/Scene/Photo_gallery/Texture/bg2.jpg.meta Normal file
View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "19c794aa-df1e-41ca-95f1-6cb3e1697ae4",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": false,
"width": 1335,
"height": 864,
"platformSettings": {},
"subMetas": {
"bg2": {
"ver": "1.0.4",
"uuid": "897869c8-2252-4cdc-8590-a4cd75951029",
"rawTextureUuid": "19c794aa-df1e-41ca-95f1-6cb3e1697ae4",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1335,
"height": 864,
"rawWidth": 1335,
"rawHeight": 864,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

BIN
assets/Scene/Photo_gallery/Texture/bg3.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

36
assets/Scene/Photo_gallery/Texture/bg3.jpg.meta Normal file
View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "574b895a-3021-49b2-8e07-0c6f94fa77a1",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 1024,
"height": 445,
"platformSettings": {},
"subMetas": {
"bg3": {
"ver": "1.0.4",
"uuid": "1d7fee62-0711-4d91-97a8-e6126253d95e",
"rawTextureUuid": "574b895a-3021-49b2-8e07-0c6f94fa77a1",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1024,
"height": 445,
"rawWidth": 1024,
"rawHeight": 445,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

BIN
assets/Scene/Photo_gallery/Texture/bg4.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

36
assets/Scene/Photo_gallery/Texture/bg4.jpg.meta Normal file
View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "2737adaa-2eba-48cf-ab02-0ebdbac933d6",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 800,
"height": 445,
"platformSettings": {},
"subMetas": {
"bg4": {
"ver": "1.0.4",
"uuid": "a4b26052-bda2-4bec-ba05-adf268ff62f3",
"rawTextureUuid": "2737adaa-2eba-48cf-ab02-0ebdbac933d6",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 800,
"height": 445,
"rawWidth": 800,
"rawHeight": 445,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

BIN
assets/Scene/Photo_gallery/Texture/bg5.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

36
assets/Scene/Photo_gallery/Texture/bg5.jpg.meta Normal file
View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "a7d2fa64-184c-4a57-b5f7-0bc703fcb9b8",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 800,
"height": 445,
"platformSettings": {},
"subMetas": {
"bg5": {
"ver": "1.0.4",
"uuid": "18a56f47-1625-4ab1-a7e9-5754637c0d57",
"rawTextureUuid": "a7d2fa64-184c-4a57-b5f7-0bc703fcb9b8",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 800,
"height": 445,
"rawWidth": 800,
"rawHeight": 445,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

BIN
assets/Scene/Photo_gallery/Texture/next.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

36
assets/Scene/Photo_gallery/Texture/next.png.meta Normal file
View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "ef40a864-df76-464a-9525-358aab5d4919",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 124,
"height": 48,
"platformSettings": {},
"subMetas": {
"next": {
"ver": "1.0.4",
"uuid": "1969f470-bc7b-4feb-9dbe-2aee4f26556a",
"rawTextureUuid": "ef40a864-df76-464a-9525-358aab5d4919",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 124,
"height": 48,
"rawWidth": 124,
"rawHeight": 48,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

80
assets/Scene/Photo_gallery/pic_transform.effect Normal file
View File

@ -0,0 +1,80 @@
// 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 }
u_time: { value: 1.0 }
u_fade_radius: { value: 0.2 }
}%
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;
in vec4 v_color;
#if USE_TEXTURE
in vec2 v_uv0;
uniform sampler2D texture;
#endif
uniform ARGS {
float u_time;
float u_fade_radius;
};
void main () {
vec4 color = vec4(1, 1, 1, 1);
color *= texture(texture, v_uv0);
color *= v_color;
#if USE_TRAMSFORM
color.a = smoothstep(0.0, u_fade_radius, u_fade_radius + v_uv0.x - u_time);
#endif
gl_FragColor = color;
}
}%

17
assets/Scene/Photo_gallery/pic_transform.effect.meta Normal file
View File

@ -0,0 +1,17 @@
{
"ver": "1.0.25",
"uuid": "51844cdd-b9a2-48ae-866a-e162d76c202c",
"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;\nvarying vec4 v_color;\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\nuniform float u_time;\nuniform float u_fade_radius;\nvoid main () {\n vec4 color = vec4(1, 1, 1, 1);\n color *= texture2D(texture, v_uv0);\n color *= v_color;\n #if USE_TRAMSFORM\n color.a = smoothstep(0.0, u_fade_radius, u_fade_radius + v_uv0.x - u_time);\n #endif\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;\nin vec4 v_color;\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\nuniform ARGS {\n float u_time;\n float u_fade_radius;\n};\nvoid main () {\n vec4 color = vec4(1, 1, 1, 1);\n color *= texture(texture, v_uv0);\n color *= v_color;\n #if USE_TRAMSFORM\n color.a = smoothstep(0.0, u_fade_radius, u_fade_radius + v_uv0.x - u_time);\n #endif\n gl_FragColor = color;\n}"
}
}
],
"subMetas": {}
}

18
assets/Scene/Photo_gallery/pic_transform.mtl Normal file
View File

@ -0,0 +1,18 @@
{
"__type__": "cc.Material",
"_name": "Scene_transition",
"_objFlags": 0,
"_native": "",
"_effectAsset": {
"__uuid__": "51844cdd-b9a2-48ae-866a-e162d76c202c"
},
"_techniqueIndex": 0,
"_techniqueData": {
"0": {
"defines": {
"USE_TEXTURE": true,
"USE_TRAMSFORM": false
}
}
}
}

6
assets/Scene/Photo_gallery/pic_transform.mtl.meta Normal file
View File

@ -0,0 +1,6 @@
{
"ver": "1.0.3",
"uuid": "c19dcfd2-1514-4816-ae60-a2bd155220d6",
"dataAsSubAsset": null,
"subMetas": {}
}