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
assets/Scene
3D_photo.meta
3D_photo
3D_photo.effect3D_photo.effect.meta3D_photo.fire3D_photo.fire.meta3D_photo.mtl3D_photo.mtl.meta3D_photo.ts3D_photo.ts.metatexture.meta
texture
158681479b2849dfbd4246a0b9842ae6.meta
158681479b2849dfbd4246a0b9842ae6
4779444deafc4597b3357547a740f07d.meta
4779444deafc4597b3357547a740f07d
4edd1a4455704e7b874c4c7e7745d373.meta
4edd1a4455704e7b874c4c7e7745d373
5cbae42fd74049bc880eb0b1c8bedf55.meta
5cbae42fd74049bc880eb0b1c8bedf55
705b7cc5b6c740b2983b52f182eafa4a.meta
705b7cc5b6c740b2983b52f182eafa4a
78f01ca427f84baa9b09c732928c91ee.meta
78f01ca427f84baa9b09c732928c91ee
b531feb912504f4496aa25d4a0b19239.meta
b531feb912504f4496aa25d4a0b19239
b89adf331def44f9b806837684cb4194.meta
b89adf331def44f9b806837684cb4194
ca8ff137b7274ef9b40ed62680ea07c5.meta
ca8ff137b7274ef9b40ed62680ea07c5
d312d76af61c4fb1aa96a53429066fa8.meta
d312d76af61c4fb1aa96a53429066fa8
dbed9b95b45544b2b607684d23d0ebdd.meta
dbed9b95b45544b2b607684d23d0ebdd
eb9e61ac5e2040c3bb063c7f67f2dddb.meta
eb9e61ac5e2040c3bb063c7f67f2dddb
ed4f2de27ed74321a4daf3bccf91dff0.meta
ed4f2de27ed74321a4daf3bccf91dff0
sliding.pngsliding.png.meta
Home
Test.meta
Test
doc/3D_photo
settings

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

@ -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;
}
}%

@ -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

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

@ -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"
}
}
}
}
}

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

@ -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]);
}
}

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

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

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

@ -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": {}
}
}
}

@ -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": {}
}
}
}

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

@ -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": {}
}
}
}

@ -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": {}
}
}
}

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

@ -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": {}
}
}
}

@ -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": {}
}
}
}

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

@ -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": {}
}
}
}

@ -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": {}
}
}
}

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

@ -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

(image error) Size: 101 KiB

@ -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": {}
}
}
}

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

Binary file not shown.

After

(image error) Size: 103 KiB

@ -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": {}
}
}
}

@ -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": {}
}
}
}

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

@ -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": {}
}
}
}

@ -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": {}
}
}
}

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

@ -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": {}
}
}
}

@ -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": {}
}
}
}

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

@ -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": {}
}
}
}

@ -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": {}
}
}
}

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

@ -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

(image error) Size: 107 KiB

@ -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": {}
}
}
}

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

@ -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

(image error) Size: 92 KiB

@ -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": {}
}
}
}

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

@ -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": {}
}
}
}

@ -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": {}
}
}
}

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

@ -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": {}
}
}
}

@ -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

(image error) Size: 872 B

@ -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": {}
}
}
}

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

@ -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

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

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

@ -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)

@ -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": "",