大家好，我基于WebNN在瀏覽器上實現了2020年Facebook提出的Neural-Supersampling-for-Real-time-Rendering算法。它是一個用于實時渲染的神經網絡超采樣算法，能夠把低分辨率的圖片超采樣為高分辨率的圖片

本課程系列文章可進入合集查看：
實時渲染前沿研究系列文章合集

介紹DLSS算法整體思想

算法的整體介紹可參考：毫秒級時間使圖像清晰16倍，Facebook提出的DLSS算法介紹

算法的pytorch實現請見：Github

算法的本課實現請見：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

后續優化點

現在的主要問題是推理太慢了，可以從下面幾個方面來加快速度：

• 測試每個Module耗費的時間，找到性能熱點

• 減少推理中的數據拷貝，如減少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