大家好，我基於WebNN在瀏覽器上實現了2020年Facebook提出的Neural-Supersampling-for-Real-time-Rendering算法。它是一個用於實時渲染的神經網絡超採樣算法，能夠把低分辨率的圖片超採樣爲高分辨率的圖片
本課程系列文章可進入合集查看：
實時渲染前沿研究系列文章合集
介紹DLSS算法整體思想
算法的整體介紹可參考：毫秒級時間使圖像清晰16倍，Facebook提出的DLSS算法介紹
算法的pytorch實現請見：Github
介紹整體實現思路
1.使用pytorch實現訓練，保存weight、bias
2.使用WebNN實現推理，讀取weight、bias
實現的重點記錄
1.後面需要加入Motion Vector input，並實現Backward Warp
2.zero upsampling的實現參考了：https://github.com/pytorch/pytorch/issues/7911#issuecomment-392835113
3.應該可以使用Typescript dependent type來實現Tensor維度的編譯檢查。不過目前沒有完全實現
4.等webnn issue實現後，就可以直接獲得MLOperand的dimensions了。這樣可方便簡化代碼，如在builder.slice時直接獲得dimensions
在瀏覽器上推理的結果
使用webgl後端，場景大小爲180*120，推理後爲720*480
耗時爲：
2015年的macbook pro：6000ms
後續優化點
現在的主要問題是推理太慢了，可以從下面幾個方面來加快速度：
-
減少推理中的數據拷貝，如減少builder.slice、builder.concat的使用
-
減少previous frame的個數
目前我用的是5個，可以減少爲4個 -
減半Reconstruction網絡的參數
-
等待WebNN成熟，從而可以使用WebGPU後端、甚至是硬件推理後端
改進方向
對顏色rgb進行處理
進入神經網絡前先除以albedo；神經網絡輸出後再乘以它
可以結合Neural Supersampling for Real-time Rendering、High-Quality Supersampling via Mask-reinforced Deep Learning for Real-time Rendering論文提出的神經網絡，從而獲得16*4=64倍的像素提升！
具體方法是：
1.渲染512*256的1/4的像素（也就是256*128）
2.使用該論文提出的神經網絡，將其超採樣爲512*256的分辨率
3.使用本文實現的DLSS算法的神經網絡，再將其超採樣爲512*256*16的分辨率
不使用Motion Vector來做Backward Warp?
參考Fast Temporal Reprojection without Motion Vectors
移動端的改進
參考MNSS: Neural Supersampling Framework for Real-Time Rendering on Mobile Devices