關於ccc2.1.0更新項目中 編輯器中網格穿透到透明圖片上方的問題

Creator 2.x
#1

標題敘述的問題不止是在編輯器中, 輸出的網頁也有同樣後方物件穿透的問題
希望可以指引如何修正輸出網頁的穿透問題
使用版本 ccc1.5.1 Webgl @jare

目前我的應用會將整個網頁的背景設成透明,
當場景中有透明圖疊加時整個場景的透明度並不正確, 影響最終的呈現。

例如:
圖a: 完全不透明, 圖b: 50%opacity 疊在a上,

在疊加的區域你會發現編輯器的網格會穿透看得到, 網格正確來說應該被圖a遮住才對
這在輸出成網頁後, 背景是黑色時不會發現, 但我的應用中, 背景是透明, 後方是有東西的,
而後方的東西也像網格一樣透出來了.

小弟有一點D3D的知識, 感覺像是AlphaOP直接將sprite的透明度寫入到screen alpha buffer一樣。

目前正在引擎源碼中尋找類似的程式碼想修正此問題, 剛好看到ccc2.1.0中有修正編輯器的部分,
但由於是編輯器修正所以沒有源碼, 希望引擎組可以幫忙引導一下我在網頁輸出部分如何修正screen alpha buffer不正確的問題, 苦腦中, 感謝

(編輯器透出網格部分沒關系, 我希望可以手動修改讓輸出的網頁不要有此問題)

#2

目前追一追跟到 SHADER_SPRITE_POSITION_TEXTURECOLOR

#3

你好，你可以在其他版本中继续测试下这个问题么，比如说1.9.3版本或者2.0.8版本，我在这两个版本中没有遇到过你所说的这个问题

#4

好的 我會試試 再跟您回報

#5

目前確定測試 ccc2.08 仍有此問題, 是否有QQ或mail 可提供您測試專案檔 @zzf_Cocos @Jno

手邊沒webserver 執行結果截圖如下
https://imgur.com/a/hlZiSfv

您可自行建立如下測試:

#Platform Scene

  • 功能

    • 模擬執行的平台

  • 場景內容

    • 一個底圖
    • 一個WebView, 並將WebView背景設為透明

  • 其它說明

    • 將WebView URL設定為GameScene的網址, 模擬在平台上執行遊戲

#Game Scene

  • 功能:

    • 模擬真正的產品

  • 場景內容

    • 一個藍色方塊
    • 一個紅色方塊(opacity=128, 部分與藍色方塊交疊)

  • 其它說明

    • 輸出Game Scene後藉由修改main.js, style-mobile. 讓GameScene背景為透明
    • 將GameScene放置在web server上，並將PlatformScene中webview URL指向GameScene，模擬平台運行GameScene

#總結

  • 會發現GameScene中紅藍交疊的部分看得到PlatformScene的底圖
  • 正確的結果應是底圖被藍色方塊遮住
  • 不論多少層, 只要最上層的圖或node是帶透明的, 該位置就會穿透看到底圖
  • 此呈現不止在PlatformScene測試, 在其它平台也是相同結果
#6

收到，我会对你所描述的情况进行测试。

1赞
#7

你把测试demo发到我邮箱
337031709@qq.com

1赞
#8

好的 我已寄出了

#9

你好 我这边没有收到，再确认下是否发送成功。
或者你把demo发到论坛上来

1赞
#10

附件似乎被安全性檢查擋下來了(含js程式碼) 我壓縮後再次寄出 您看有沒有收到

#11

有收到了

#12

原來有上傳功能 好的

#ccc208_FrameBufferAlphaTest
包含Platform Scene和Game Scene

#Game
為輸出好且背景已處理為半透明的Game Scene,
將Game放置到webSever上 例如.http://localhost/game,
而後將Platform的webView指向http://localhost/game執行即可看到結果

#備註
如果您那邊也無法有一個webserver可以放置game scene做測試的話, 請告訴我,
我再想辦法弄一個直接可看結果的網址予您。 謝謝

#13

目前这个问题暂时没有比较好的解决方案，从渲染流程上看，

确实出现了混合错误。
如果有解决方案了，再回复。

1赞
#14

目前這個問題對我這邊的開發影響有一定程度, 有些功能需依賴此部分正確渲染。
原本我以為可以用shader解決，後來才想到shader只能控制當下繪製polygon的alpha和color, fragment shader的輸出和framebuffer上的混合應該是用固定渲染流程flag決定的無法在shader裡處理。

另外我以為可以利用解決編輯器背景網格的透出的相同原理解決, 因為在1.5.1編輯器中交疊alpha同樣會透出背景網格, 但是2.0.8就不會了, 還希望大神能有機會指導解決此議題，感謝

提供一個一閃而過的思路:
framebuffer上的alpha應該是固定渲染流程決定的, 但如果先將場景畫到rendertarget上, 再輸入shader的話, 就可以對rendertarget的alpha有操作空間, 這個思路是否通暢沒有仔細想, 但至少性能代價也比較大…(其實也就是post process)

#15

https://forum.facepunch.com/dev/pdyk/OpenGL-Problem-with-alpha-values-in-framebuffers/1/

嘿引擎組的大哥 他們似乎在討論相同的東西 並且討論出了解法 @337031709