feat: 平面图深度视差效果

This commit is contained in:
ifengzp 2024-12-28 23:42:43 +08:00
parent 7f572900e5
commit fa13bee93b
83 changed files with 3283 additions and 2 deletions

View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "6e7d9074-5f14-47c6-b2ae-00d3a8afff22",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

View File

@ -0,0 +1,86 @@
CCEffect %{
techniques:
- passes:
- vert: vs
frag: fs
blendState:
targets:
- blend: true
rasterizerState:
cullMode: none
properties:
texture: { value: white }
spriteTexture: { value: white }
depthTexture: { value: white }
offset: { value: [0.5, 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;
#endif
uniform sampler2D texture;
uniform sampler2D spriteTexture;
uniform sampler2D depthTexture;
uniform UBO{
vec2 offset;
};
void main () {
float scale = 0.01; // 增加缩放值以增强效果
float focus = 0.1; // 调整聚焦值以改变深度影响范围
float map = texture(depthTexture, v_uv0).r;
map = map * -1.0 + focus;
vec2 disCords = v_uv0 + offset * map * scale;
vec4 o = texture(spriteTexture, disCords);
gl_FragColor = o;
}
}%

View File

@ -0,0 +1,17 @@
{
"ver": "1.0.25",
"uuid": "40f87fb8-afd7-4555-bf36-fad4139168d9",
"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;\n#endif\nuniform sampler2D texture;\nuniform sampler2D spriteTexture;\nuniform sampler2D depthTexture;\nuniform vec2 offset;\nvoid main () {\n float scale = 0.01;\n float focus = 0.1;\n float map = texture2D(depthTexture, v_uv0).r;\n map = map * -1.0 + focus;\n vec2 disCords = v_uv0 + offset * map * scale;\n vec4 o = texture2D(spriteTexture, disCords);\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;\n#endif\nuniform sampler2D texture;\nuniform sampler2D spriteTexture;\nuniform sampler2D depthTexture;\nuniform UBO{\n vec2 offset;\n};\nvoid main () {\n float scale = 0.01;\n float focus = 0.1;\n float map = texture(depthTexture, v_uv0).r;\n map = map * -1.0 + focus;\n vec2 disCords = v_uv0 + offset * map * scale;\n vec4 o = texture(spriteTexture, disCords);\n gl_FragColor = o;\n}"
}
}
],
"subMetas": {}
}

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,7 @@
{
"ver": "1.2.6",
"uuid": "9bff84c4-4255-4e07-8218-2f37eacec64a",
"asyncLoadAssets": false,
"autoReleaseAssets": false,
"subMetas": {}
}

View File

@ -0,0 +1,25 @@
{
"__type__": "cc.Material",
"_name": "3D_photo",
"_objFlags": 0,
"_native": "",
"_effectAsset": {
"__uuid__": "40f87fb8-afd7-4555-bf36-fad4139168d9"
},
"_techniqueIndex": 0,
"_techniqueData": {
"0": {
"defines": {
"USE_TEXTURE": true
},
"props": {
"depthTexture": {
"__uuid__": "a2898b71-8c5b-4a8c-9ee7-c8cdd9f4accc"
},
"spriteTexture": {
"__uuid__": "bc149a25-8705-4f68-92ca-6fa74bdb6cc7"
}
}
}
}
}

View File

@ -0,0 +1,6 @@
{
"ver": "1.0.3",
"uuid": "581f70d7-9648-4f79-9066-17f04789d918",
"dataAsSubAsset": null,
"subMetas": {}
}

View File

@ -0,0 +1,44 @@
const { ccclass, property } = cc._decorator;
@ccclass
export default class DepthPhoto extends cc.Component {
@property(cc.Sprite) renderSprite: cc.Sprite = null;
@property({ type: cc.Texture2D }) textureList: cc.Texture2D[] = [];
@property({ type: cc.Texture2D }) depthTextures: cc.Texture2D[] = [];
@property(cc.Sprite) originPic: cc.Sprite = null;
@property(cc.Sprite) depthPic: cc.Sprite = null;
private textureIndex = -1;
start() {
this.switchNextTexture();
this.node.on(cc.Node.EventType.MOUSE_MOVE, this.onMouseMove, this);
this.node.on(cc.Node.EventType.TOUCH_MOVE, this.onMouseMove, this);
}
onMouseMove(event) {
let mousePosition = event.getLocation();
let normalizedMousePosition = [
(mousePosition.x / cc.winSize.width) * 2 - 1,
-(mousePosition.y / cc.winSize.height) * 2 + 1
];
this.renderSprite.getMaterial(0).setProperty('offset', new Float32Array(normalizedMousePosition));
}
switchNextTexture() {
this.textureIndex = (this.textureIndex + 1) % this.textureList.length;
this.updateMaterial()
}
switchPrevTexture() {
this.textureIndex = (this.textureIndex - 1 + this.textureList.length) % this.textureList.length;
this.updateMaterial()
}
updateMaterial() {
this.originPic.spriteFrame = new cc.SpriteFrame(this.textureList[this.textureIndex]);
this.depthPic.spriteFrame = new cc.SpriteFrame(this.depthTextures[this.textureIndex]);
this.renderSprite.spriteFrame.setTexture(this.textureList[this.textureIndex]);
this.renderSprite.getMaterial(0).setProperty('spriteTexture', this.textureList[this.textureIndex]);
this.renderSprite.getMaterial(0).setProperty('depthTexture', this.depthTextures[this.textureIndex]);
}
}

View File

@ -0,0 +1,9 @@
{
"ver": "1.0.5",
"uuid": "31726ef2-6309-4361-957f-fd954005bf1b",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}

View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "ae8f6637-35c2-41dc-840c-faa1966bc398",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "96098d3c-41c7-4914-8dd4-4ba92dc49d89",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "4b7d8f2c-3fb4-4746-88d0-fddada82e83e",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 750,
"height": 750,
"platformSettings": {},
"subMetas": {
"158681479b2849dfbd4246a0b9842ae6_0": {
"ver": "1.0.4",
"uuid": "6759a87d-9153-46af-9ad9-99ed8d04ec54",
"rawTextureUuid": "4b7d8f2c-3fb4-4746-88d0-fddada82e83e",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 750,
"height": 750,
"rawWidth": 750,
"rawHeight": 750,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 91 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "e0056e59-7239-4541-ab5b-830115c81d1d",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 1024,
"height": 1024,
"platformSettings": {},
"subMetas": {
"158681479b2849dfbd4246a0b9842ae6_1": {
"ver": "1.0.4",
"uuid": "cc837f26-9a94-4be6-861a-bb776b656efb",
"rawTextureUuid": "e0056e59-7239-4541-ab5b-830115c81d1d",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1024,
"height": 1024,
"rawWidth": 1024,
"rawHeight": 1024,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "8da9baaf-1adc-4a55-9b64-3ed21dac5c73",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "ebef7a35-6e5d-4184-8e99-88412e4d78c6",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 750,
"height": 750,
"platformSettings": {},
"subMetas": {
"4779444deafc4597b3357547a740f07d_0": {
"ver": "1.0.4",
"uuid": "9454a910-ed5f-43fe-b471-47bb587c1a98",
"rawTextureUuid": "ebef7a35-6e5d-4184-8e99-88412e4d78c6",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 750,
"height": 750,
"rawWidth": 750,
"rawHeight": 750,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "3340561a-7da7-4277-a6a3-24424022ac8b",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 1024,
"height": 1024,
"platformSettings": {},
"subMetas": {
"4779444deafc4597b3357547a740f07d_1": {
"ver": "1.0.4",
"uuid": "bb379af2-658d-4017-bb4a-87fb19278d46",
"rawTextureUuid": "3340561a-7da7-4277-a6a3-24424022ac8b",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1024,
"height": 1024,
"rawWidth": 1024,
"rawHeight": 1024,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "23936d39-cca9-495e-81c3-b797d84bc25c",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "a2898b71-8c5b-4a8c-9ee7-c8cdd9f4accc",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 1024,
"height": 1024,
"platformSettings": {},
"subMetas": {
"4edd1a4455704e7b874c4c7e7745d373_1": {
"ver": "1.0.4",
"uuid": "44657580-62df-4c32-bb1a-6b1282951fba",
"rawTextureUuid": "a2898b71-8c5b-4a8c-9ee7-c8cdd9f4accc",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1024,
"height": 1024,
"rawWidth": 1024,
"rawHeight": 1024,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "bc149a25-8705-4f68-92ca-6fa74bdb6cc7",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 750,
"height": 750,
"platformSettings": {},
"subMetas": {
"4edd1a4455704e7b874c4c7e7745d373_2": {
"ver": "1.0.4",
"uuid": "47c7e276-6d77-4e44-a87c-605d4aa1d2d0",
"rawTextureUuid": "bc149a25-8705-4f68-92ca-6fa74bdb6cc7",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 750,
"height": 750,
"rawWidth": 750,
"rawHeight": 750,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "e383637c-e997-48bd-a8d5-1573fade9971",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "7c105dc0-b886-4e51-a356-6c4e42084689",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 750,
"height": 750,
"platformSettings": {},
"subMetas": {
"5cbae42fd74049bc880eb0b1c8bedf55_3": {
"ver": "1.0.4",
"uuid": "07d41928-f0f2-4858-9a70-4fedc4efacba",
"rawTextureUuid": "7c105dc0-b886-4e51-a356-6c4e42084689",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 750,
"height": 750,
"rawWidth": 750,
"rawHeight": 750,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "02f34202-957a-491b-9136-951a7c22419a",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 1024,
"height": 1024,
"platformSettings": {},
"subMetas": {
"5cbae42fd74049bc880eb0b1c8bedf55_4": {
"ver": "1.0.4",
"uuid": "32dd7009-a4f1-4e7e-9893-a0663920c34d",
"rawTextureUuid": "02f34202-957a-491b-9136-951a7c22419a",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1024,
"height": 1024,
"rawWidth": 1024,
"rawHeight": 1024,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "e453e0ff-4e46-4e3a-9f55-23d905216bd8",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "3bc014ce-222c-47cc-b554-cb2cac8f7f29",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 750,
"height": 750,
"platformSettings": {},
"subMetas": {
"705b7cc5b6c740b2983b52f182eafa4a_0": {
"ver": "1.0.4",
"uuid": "d5df0f98-9634-456e-992f-49f9276de922",
"rawTextureUuid": "3bc014ce-222c-47cc-b554-cb2cac8f7f29",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 750,
"height": 750,
"rawWidth": 750,
"rawHeight": 750,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 101 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "1034535b-deac-406f-9f1b-10c634065213",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 1024,
"height": 1024,
"platformSettings": {},
"subMetas": {
"705b7cc5b6c740b2983b52f182eafa4a_1": {
"ver": "1.0.4",
"uuid": "e00c8acb-3309-4a10-92f5-4bdac5ccb892",
"rawTextureUuid": "1034535b-deac-406f-9f1b-10c634065213",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1024,
"height": 1024,
"rawWidth": 1024,
"rawHeight": 1024,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "cc25db6f-264b-4408-8a37-b180a7aa31fb",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "39559e8e-f360-47ef-aebd-8125942483b9",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 750,
"height": 750,
"platformSettings": {},
"subMetas": {
"78f01ca427f84baa9b09c732928c91ee_0": {
"ver": "1.0.4",
"uuid": "507f25e1-1130-4d24-b9e6-a0f71dd6a4b5",
"rawTextureUuid": "39559e8e-f360-47ef-aebd-8125942483b9",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 750,
"height": 750,
"rawWidth": 750,
"rawHeight": 750,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "58c3bfb8-e085-4578-9d31-d7da6facafac",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 1024,
"height": 1024,
"platformSettings": {},
"subMetas": {
"78f01ca427f84baa9b09c732928c91ee_1": {
"ver": "1.0.4",
"uuid": "597dec05-d145-49d7-95a4-38a3bbffbce9",
"rawTextureUuid": "58c3bfb8-e085-4578-9d31-d7da6facafac",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1024,
"height": 1024,
"rawWidth": 1024,
"rawHeight": 1024,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "7870f9b2-8969-4b98-82f1-cb95d13d143c",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "71056b5a-d5d4-4d21-9e6a-ff7db459d95e",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 750,
"height": 750,
"platformSettings": {},
"subMetas": {
"b531feb912504f4496aa25d4a0b19239_1": {
"ver": "1.0.4",
"uuid": "bbd52617-da5b-43de-ab9e-0651efdb27da",
"rawTextureUuid": "71056b5a-d5d4-4d21-9e6a-ff7db459d95e",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 750,
"height": 750,
"rawWidth": 750,
"rawHeight": 750,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "6e9bf99f-964d-48e4-aa44-6939a0c83cd4",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 1024,
"height": 1024,
"platformSettings": {},
"subMetas": {
"b531feb912504f4496aa25d4a0b19239_2": {
"ver": "1.0.4",
"uuid": "ceaaf6d2-0569-490d-bd26-ee6347ec86ba",
"rawTextureUuid": "6e9bf99f-964d-48e4-aa44-6939a0c83cd4",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1024,
"height": 1024,
"rawWidth": 1024,
"rawHeight": 1024,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "d75c8c60-9d33-4731-b542-f228e43b8108",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "08b4ba5c-bb6b-479e-a86f-b14b39a727c6",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 750,
"height": 750,
"platformSettings": {},
"subMetas": {
"b89adf331def44f9b806837684cb4194_0": {
"ver": "1.0.4",
"uuid": "d529fbbc-e6a1-4c01-84c9-16b346edeaf4",
"rawTextureUuid": "08b4ba5c-bb6b-479e-a86f-b14b39a727c6",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 750,
"height": 750,
"rawWidth": 750,
"rawHeight": 750,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "ecd0d817-6697-40a2-97cb-2c3d2a8977fe",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 1024,
"height": 1024,
"platformSettings": {},
"subMetas": {
"b89adf331def44f9b806837684cb4194_1": {
"ver": "1.0.4",
"uuid": "a8b7c496-1144-41f0-a2e9-162edc04202d",
"rawTextureUuid": "ecd0d817-6697-40a2-97cb-2c3d2a8977fe",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1024,
"height": 1024,
"rawWidth": 1024,
"rawHeight": 1024,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "9a7271e4-2f5a-4724-b937-e4853276b213",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "5a3060b2-2b7e-4348-ac12-6acfcbabf42e",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 750,
"height": 750,
"platformSettings": {},
"subMetas": {
"ca8ff137b7274ef9b40ed62680ea07c5_0": {
"ver": "1.0.4",
"uuid": "63aa7631-23ae-4a6f-b9c4-e2cde0e00471",
"rawTextureUuid": "5a3060b2-2b7e-4348-ac12-6acfcbabf42e",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 750,
"height": 750,
"rawWidth": 750,
"rawHeight": 750,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "7890de21-dc07-439a-a7fc-219ea5d35cce",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 1024,
"height": 1024,
"platformSettings": {},
"subMetas": {
"ca8ff137b7274ef9b40ed62680ea07c5_1": {
"ver": "1.0.4",
"uuid": "ff672a78-4e0e-4524-90de-9914ad715302",
"rawTextureUuid": "7890de21-dc07-439a-a7fc-219ea5d35cce",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1024,
"height": 1024,
"rawWidth": 1024,
"rawHeight": 1024,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "fb3439d8-1259-46ea-b73b-e77362a7c23d",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "c2e43d8f-2b8d-4079-96e6-014401bf8d48",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 750,
"height": 750,
"platformSettings": {},
"subMetas": {
"d312d76af61c4fb1aa96a53429066fa8_1": {
"ver": "1.0.4",
"uuid": "27cae3b0-039a-4a1d-a6bf-5b3823a2fd5c",
"rawTextureUuid": "c2e43d8f-2b8d-4079-96e6-014401bf8d48",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 750,
"height": 750,
"rawWidth": 750,
"rawHeight": 750,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 107 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "bffdf4cb-3b96-4754-92c1-dc5d70310e3f",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 1024,
"height": 1024,
"platformSettings": {},
"subMetas": {
"d312d76af61c4fb1aa96a53429066fa8_2": {
"ver": "1.0.4",
"uuid": "c3f8a770-9aed-43e0-a559-1c46fe7726b8",
"rawTextureUuid": "bffdf4cb-3b96-4754-92c1-dc5d70310e3f",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1024,
"height": 1024,
"rawWidth": 1024,
"rawHeight": 1024,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "cb1a2820-dfea-44c8-8ae3-6462113c28cc",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "d903ce12-2827-428b-9ee4-c4d9f6f9b7db",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 750,
"height": 750,
"platformSettings": {},
"subMetas": {
"dbed9b95b45544b2b607684d23d0ebdd_0": {
"ver": "1.0.4",
"uuid": "fc906b98-2006-4159-ac9b-b94ea93aac7f",
"rawTextureUuid": "d903ce12-2827-428b-9ee4-c4d9f6f9b7db",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 750,
"height": 750,
"rawWidth": 750,
"rawHeight": 750,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "1f86baf2-4598-4548-9586-2dc23f05ce45",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 1024,
"height": 1024,
"platformSettings": {},
"subMetas": {
"image": {
"ver": "1.0.4",
"uuid": "649e823f-d345-40d1-964c-c65c0f5836f5",
"rawTextureUuid": "1f86baf2-4598-4548-9586-2dc23f05ce45",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1024,
"height": 1024,
"rawWidth": 1024,
"rawHeight": 1024,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "5e0952d1-9f0a-4e94-a8bb-d9bd6c25c8c6",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "b19bf04d-df10-4152-9b29-090457474f14",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 750,
"height": 750,
"platformSettings": {},
"subMetas": {
"eb9e61ac5e2040c3bb063c7f67f2dddb_0": {
"ver": "1.0.4",
"uuid": "2d37a557-58aa-4e5c-ba21-d5ac12d436ac",
"rawTextureUuid": "b19bf04d-df10-4152-9b29-090457474f14",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 750,
"height": 750,
"rawWidth": 750,
"rawHeight": 750,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "166d1abf-06e8-4207-818f-07955957b8a2",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 1024,
"height": 1024,
"platformSettings": {},
"subMetas": {
"eb9e61ac5e2040c3bb063c7f67f2dddb_1": {
"ver": "1.0.4",
"uuid": "390a03b6-a608-4dea-bda1-b308dcbe225c",
"rawTextureUuid": "166d1abf-06e8-4207-818f-07955957b8a2",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1024,
"height": 1024,
"rawWidth": 1024,
"rawHeight": 1024,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "66290ec7-437e-4938-9315-f1d0a8f8137e",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "a18a8be4-cc4b-4ebf-a95b-c1e649212fd9",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 750,
"height": 750,
"platformSettings": {},
"subMetas": {
"ed4f2de27ed74321a4daf3bccf91dff0_0": {
"ver": "1.0.4",
"uuid": "55c32e36-4aec-40c2-8d91-b47e90185cdd",
"rawTextureUuid": "a18a8be4-cc4b-4ebf-a95b-c1e649212fd9",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 750,
"height": 750,
"rawWidth": 750,
"rawHeight": 750,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "af713f21-571a-479a-8929-7c37f6cf09b9",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 1024,
"height": 1024,
"platformSettings": {},
"subMetas": {
"ed4f2de27ed74321a4daf3bccf91dff0_1": {
"ver": "1.0.4",
"uuid": "7aab79dd-69f3-49bb-8519-0494cac43200",
"rawTextureUuid": "af713f21-571a-479a-8929-7c37f6cf09b9",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1024,
"height": 1024,
"rawWidth": 1024,
"rawHeight": 1024,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 872 B

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "3feed451-f861-4373-8326-431cf8f397fc",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 32,
"height": 32,
"platformSettings": {},
"subMetas": {
"sliding": {
"ver": "1.0.4",
"uuid": "5f1d96bb-5b9e-4692-90f0-3c799d90bc68",
"rawTextureUuid": "3feed451-f861-4373-8326-431cf8f397fc",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 32,
"height": 32,
"rawWidth": 32,
"rawHeight": 32,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

View File

@ -192,7 +192,7 @@
"array": [ "array": [
0, 0,
0, 0,
443.4050067376326, 769.0305585605815,
0, 0,
0, 0,
0, 0,

View File

@ -2,6 +2,7 @@ import BackHomeBtn from './BackHomeBtn';
const { ccclass, property } = cc._decorator; const { ccclass, property } = cc._decorator;
const LOAD_SCENE_MIN_SEC: number = 1.2; const LOAD_SCENE_MIN_SEC: number = 1.2;
enum sceneList { enum sceneList {
'3D_photo' = '平面图深度视差效果',
'Magnifying_mirror' = '放大镜效果', 'Magnifying_mirror' = '放大镜效果',
'Scratch_ticket' = '刮刮卡实现', 'Scratch_ticket' = '刮刮卡实现',
'Moving_ghost' = '移动残影效果', 'Moving_ghost' = '移动残影效果',

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

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "f4d39ec4-cd5d-4057-b570-164b7642b66b",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "ce4e5da7-b9d5-4a54-8a20-a947e1ed618f",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

View File

@ -0,0 +1,45 @@
# 效果演示
文生图在AIGC领域已经很成熟了也诞生了很多具有想象力的产品形态其中图文互动类的产品一直贯穿24年全年从最开始的智能绘本到最近大火的猫箱产品的沉浸感一直是很重要的命题异名作为老互动同学了我们不如让静态的文生图动起来
![](http://cdn.blog.ifengzp.com/cocos-awesome/3D_photo/parallax.gif)
# 实现思路
互动领域的图片“动态“诉求并不少比如视差、陀螺仪交互我们可选的技术方案也有很多。但是在大批量的内容供给、制作流程高度自主化等要求下很多技术方案的工程成本就基本不可能落地。在计算机视觉领域有一种方法可以把图片解构成三维的描述方式那就是depth map深度图它是一种灰度图图像的每一个像素值表示场景中某点与摄像机的距离比如我把下面这张AI生成的鳄鱼图片用深度图来描述
![](http://cdn.blog.ifengzp.com/cocos-awesome/3D_photo/depth.jpg)
异名使用的深度图工具是Inte开源的DPT模型【https://github.com/isl-org/DPT】可以直接本地部署并集成到自己的工程链路中如果只是体验的话可以使用Hugging Face上其他人已经部署好了的网页版【https://huggingface.co/spaces/nielsr/dpt-depth-estimation】只要上传图片等待几秒即可生成并下载。从上图中可以看出深度图很清晰地把场景的前中后景关系描述出来了结合原始图片我们就能够把对应的像素点转化成有深度关系的3维坐标关系异名这次还是使用CocosCreator游戏引擎构建运行时demo其中关键的shader片段是
```c++
void main () {
float scale = 0.01; // 增加缩放值以增强效果
float focus = 0.1; // 调整聚焦值以改变深度影响范围
// 从深度纹理中获取深度值,并将其反转(乘以 -1.0)并加上聚焦值
float map = texture(depthTexture, v_uv0).r;
map = map * -1.0 + focus;
// 根据深度值计算新的纹理坐标,应用了偏移和缩放
vec2 disCords = v_uv0 + offset * map * scale;
vec4 o = texture(spriteTexture, disCords);
gl_FragColor = o;
}
```
通过深度图和着色器处理我们就基本能做到”动图“的大规模供给。为了更直观对比效果异名还把不同风格的AI生图效果做了对比需要体验的同学可以长按二维码体验
![](http://cdn.blog.ifengzp.com/cocos-awesome/3D_photo/style.jpg)
# 效果预览
**源码**获取请点击**查看原文**,长按二维码**查看效果**👇
![长按预览效果](http://cdn.blog.ifengzp.com/cocos-awesome/3D_photo/ewm.png)

View File

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