讓 2D 圖像展示虛擬 3D 的效果。

效果

隨著鼠標(biāo)移動(dòng)，一張2d圖片表現(xiàn)出3d動(dòng)態(tài)的效果。

動(dòng)圖

效果預(yù)覽

視頻

https://www.bilibili.com/video/BV1Xy4y1L7s6

視頻預(yù)覽

實(shí)現(xiàn)

原理

程序是處理輸入和輸出的，我們要明確各個(gè)條件和結(jié)果。

輸入條件

一張圖片
該圖片的深度紋理(越白越近，越黑越遠(yuǎn))
鼠標(biāo)移動(dòng)的位置

處理

片段著色器處理（根據(jù)深度紋理與鼠標(biāo)位置對(duì)原圖片采樣偏移處理）

輸出

根據(jù)鼠標(biāo)位置，圖片出現(xiàn)3d動(dòng)態(tài)的效果

原理

代碼

參考 https://github.com/akella/fake3d 中的代碼，在 Cocos Creator 3.1.0 中實(shí)現(xiàn)的effect片段著色器核心代碼如下。

  vec2 mirrored(vec2 v) {
    vec2 m = mod(v,2.);
    return mix(m,2.0 - m, step(1.0 ,m));
  }

  vec4 frag () {
    vec4 o = vec4(1, 1, 1, 1);
    vec4 depth = CCSampleWithAlphaSeparated(depthTexture, uv0);
    vec2 uMouse = mouseAndThreshold.xy;
    vec2 threshold = mouseAndThreshold.zw;
    vec2 offsetUv = vec2(depth.r*uMouse.x/threshold.x, depth.r*uMouse.y/threshold.y);
    o *= CCSampleWithAlphaSeparated(cc_spriteTexture, mirrored(uv0+offsetUv));
    return o;
  }

關(guān)于如何移植shader代碼，可參考之前的文章《如何抄一個(gè) shader 到 Cocos Creator》。

其中 vec2 mirrored(vec2 v)，先用mod求余，再用mix和step構(gòu)成一個(gè)分段函數(shù)，達(dá)到uv坐標(biāo)鏡像的結(jié)果。

mirrored

生成深度紋理圖

輸入

一張圖片

輸出

該圖片的深度紋理

Photoshop

白玉無冰??的ps技術(shù)拙劣，只能簡(jiǎn)單的摳圖和填色，勉勉強(qiáng)強(qiáng)生成了深度紋理圖。

相機(jī)人像圖

善用搜索引擎，搜索depth map extractor 找到一個(gè)在線工具，通過以下操作可生成一張深度圖。

用手機(jī)選擇人像模式，拍照。
打開 http://www.hasaranga.com/dmap/，傳入圖片，生成深度紋理圖。

人像模式生成的深度紋理

猜測(cè)其中的原理是人像模式的圖片含有一些深度信息，該工具提取深度信息生成深度紋理圖片。

機(jī)器學(xué)習(xí)訓(xùn)練

這幾年人工智能不是很火嘛？剛好在github找到這個(gè)項(xiàng)目，https://github.com/intel-isl/MiDaS。

這個(gè)項(xiàng)目已經(jīng)有訓(xùn)練好的數(shù)據(jù)，主要的工作就是配置環(huán)境和下載對(duì)應(yīng)的訓(xùn)練模型結(jié)果。

其他方法

當(dāng)然還有其他方法，這里沒做嘗試了，有興趣的可以去玩玩哈～

https://github.com/panrafal/depthy
https://stereo.jpn.org/eng/stphmkr/
....

小結(jié)

完整代碼工程：https://github.com/baiyuwubing/cocos-creator-examples/tree/master/awesome-shader

以上為白玉無冰使用 Cocos Creator 3.1.0 實(shí)現(xiàn) "2D 圖像展示虛擬 3D 效果" 的技術(shù)分享。

MatCap && Shader
如何抄shader
3D折紙
 漸變色文字3.0
水排序效果

點(diǎn)擊“閱讀原文”查看精選導(dǎo)航

“點(diǎn)贊“ ”在看” 鼓勵(lì)一下▼

Fake3D && Depth Map && Cocos Creator Shader

效果