整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
所周知，威固膜作為客戶認(rèn)可度最高的太陽膜品牌，采用汽車貼膜生產(chǎn)中的先進(jìn)工藝生產(chǎn)，擁有超高的隔熱率，隔熱效果冠絕群雄。那么磁控濺射汽車膜生產(chǎn)工藝就是太陽膜的最尖端工藝？
我們先來一起認(rèn)識(shí)一下，磁控濺射為“神馬”？
磁控濺射工藝是為了在低氣壓下進(jìn)行高速濺射，必須有效地提高氣體的離化率。通過在靶陰極表面引入磁場(chǎng)，利用磁場(chǎng)對(duì)帶電粒子的約束來提高等離子體密度以增加濺射率的方法。
說的這些關(guān)于磁控濺射的原理似乎還是不能跟汽車貼膜結(jié)合起來，以及磁控濺射生產(chǎn)工的汽車貼膜與傳統(tǒng)汽車貼膜有何不同？
我們接下來再詳細(xì)認(rèn)識(shí)一下磁控濺射工藝的汽車貼膜！
磁控濺射是目前車膜制造中的尖端技術(shù)，與早期或現(xiàn)在一些劣質(zhì)車膜生產(chǎn)商仍在采用的染色與鍍鋁復(fù)合方式來生產(chǎn)窗膜的工藝有著本質(zhì)的不同。采用真空磁控濺射工藝生產(chǎn)的車膜，可以做到10年原廠質(zhì)量保證——這個(gè)10年承諾，既包括不褪色，也包括與玻璃接觸的膜紙四周的邊緣不翹起來。過去，一些車膜出現(xiàn)膜紙四周與車玻璃分離、車膜小于玻璃面積四周露白邊和車膜有氣泡等，都責(zé)怪是操作工安裝水平問題，實(shí)際上是膜的質(zhì)量不過關(guān)造成的問題。
傳統(tǒng)的汽車膜生產(chǎn)工藝是染色與鍍鋁復(fù)合方式。染色大家都明白，不必多述。鍍鋁方式就是制作鏡子的方式，既把一些熔點(diǎn)低的金屬物溶化之后，通過熱蒸發(fā)涂布在某種聚脂膜上。這種汽車膜生產(chǎn)工藝成本低，但最大的問題是顏料與鋁層對(duì)光線的相互干涉而產(chǎn)生大量散失光線，容易造成司機(jī)視覺疲勞，導(dǎo)致司機(jī)頭暈?zāi)垦！⒁曈X模糊而引發(fā)駕車安全性下降等諸多問題。而磁控濺射汽車膜生產(chǎn)工藝則不同，磁控濺射工藝汽車貼膜解決了染色－熱蒸發(fā)工藝生產(chǎn)的窗膜透光低、高反光、隔熱功能差、視覺模糊、易褪色、耐腐蝕性差等諸多缺陷，不僅可以制作各種純金屬化窗膜，而且因?yàn)闆]有添加任何顏料，所以它可以杜絕偏色、變色，做到永不褪色，保證純正的中性色，與任何車輛的顏色都能完美匹配，并保證不分層、不剝落與開裂。更重要的是，它在不同的光照度下，視覺顏色恒定不變，可以保證車內(nèi)人員的視線清晰。
目前汽車貼膜領(lǐng)域，磁控濺射汽車膜生產(chǎn)工藝無疑是汽車太陽膜領(lǐng)域最尖端的工藝。（威固隔熱膜進(jìn)入中國(guó)19年，作為客戶認(rèn)可度最高的太陽膜品牌，威固隔熱膜就是采用了先進(jìn)的磁控濺射汽車膜生產(chǎn)工藝！前所未有的智能光譜選擇技術(shù)，先進(jìn)磁控濺射科技，顛覆了數(shù)千年來人們對(duì)光和熱密不可分的傳統(tǒng)認(rèn)知，威固隔熱膜無疑是高端隔熱膜的代表！）
本文由汽車貼膜http://www.haiqiaoshiji.com/整理
出自：http://www.haiqiaoshiji.com/changshi/qichetiemo/20151112742.html
愛普生9880C回頂部
【PConline 海選導(dǎo)購】對(duì)于CAD專業(yè)制圖用戶而言，一張工程圖紙上凝聚著自己很長(zhǎng)時(shí)間工作的心血，因此是否能將圖紙上的畫面以高分辨率、精準(zhǔn)色彩等最好的形態(tài)展現(xiàn)出來，就顯得尤為重要，而且對(duì)后期的工程實(shí)施有著巨大的影響。眾所知周，在大幅面繪圖領(lǐng)域，打印機(jī)或者繪圖儀的好壞，直接關(guān)系著圖紙質(zhì)量的好壞，是絕對(duì)不能疏忽的事情。今天，小編要為CAD專業(yè)制圖用戶推薦幾款專業(yè)級(jí)大幅面打印機(jī)，這些打印機(jī)不僅可以盡可能真實(shí)的還原圖紙中的細(xì)節(jié)，而且分辨率極高，有需要的CAD制圖用戶可以關(guān)注一下。
CAD制圖首選 專業(yè)大幅面打印機(jī)選購指南
推薦產(chǎn)品：愛普生9880C
參考售價(jià)：37000元
愛普生STYLUS PRO 9880C是愛普生公司于2007年秋季推出的多款大幅面打印機(jī)中的一款。它使用8色顏料墨，可支持至44英寸幅面，還能夠帶給用戶超快速度的震撼體驗(yàn)。在競(jìng)爭(zhēng)激烈的印刷行業(yè)中，其性價(jià)比優(yōu)勢(shì)相當(dāng)明顯。
愛普生 STYLUS PRO 9880C圖片評(píng)測(cè)論壇報(bào)價(jià)網(wǎng)購實(shí)價(jià)
愛普生STYLUS PRO 9880C的外觀采用黑白混搭的色調(diào)設(shè)計(jì)，簡(jiǎn)約大方。機(jī)身控制面板上，它的功能按鍵的設(shè)置便捷實(shí)用，加之具有背光照明系統(tǒng)的液晶屏幕，優(yōu)雅美觀的同時(shí)也十分便于用戶監(jiān)測(cè)打印機(jī)工作狀態(tài)。
愛普生STYLUS PRO 9880C能夠帶給用戶震撼速度的體驗(yàn)，其打印速度約為愛普生7600/9600的三倍，能夠輕松完成持續(xù)、大批量的打印任務(wù)。此外，愛普生9880C采用了“世紀(jì)虹彩K3 VM”墨水，在紅色和藍(lán)色色域展現(xiàn)了更強(qiáng)的表現(xiàn)力，色彩還原真實(shí)而準(zhǔn)確，確保打印質(zhì)量。值得一提的是，愛普生9880C除了在機(jī)身背后標(biāo)配USB2.0接口，還提供了100Mbps的以太網(wǎng)接口，引入的網(wǎng)絡(luò)打印單元輕松實(shí)現(xiàn)用戶多點(diǎn)打印的需求，盡顯設(shè)計(jì)的人性化。
耗材方面，愛普生STYLUS PRO 9880C采用均為220毫升的C13T604180、C13T604280、C13T604380、C13T604480、C13T604580、C13T604680、C13T604780、C13T604980、C13T612800墨盒，市場(chǎng)售價(jià)在400左右。
| 品牌 | 愛普生 |
| 型號(hào) | STYLUS PRO 9880C |
| 產(chǎn)品鏈接 | http://product.pconline.com.cn/largeformat_printers/epson/199748.html |
| IT商城 | 網(wǎng)購實(shí)價(jià) |
| 圖片 報(bào)價(jià)參數(shù)比較網(wǎng)友點(diǎn)評(píng)評(píng)測(cè)·行情 |
STYLUS PRO 9880C兼容不同規(guī)格的紙張，從A4到44英寸幅面寬，不論是單頁紙還是卷紙都可以方便的打印輸出，對(duì)介質(zhì)的厚度也有極大的寬容性，不論是在厚度僅為0.08毫米介質(zhì)上還是較厚的介質(zhì)上，甚至在厚度為1.5毫米厚的展板上都可以實(shí)現(xiàn)高精度的打印輸出。標(biāo)配的自動(dòng)切紙系統(tǒng)可以精確而快速的對(duì)介質(zhì)進(jìn)行裁切，PRO 9880C的用戶還可以選擇選配的手動(dòng)裁紙單元，可以輕松的裁切堅(jiān)韌或較厚的介質(zhì)，在打印機(jī)機(jī)身上設(shè)置了極易讀取的介質(zhì)安裝位置標(biāo)記，便于用戶輕松對(duì)齊紙張。
愛普生STYLUS PRO 9880C打印機(jī)的大尺寸液晶屏幕裝配了背光照明系統(tǒng)，不論是查詢打印機(jī)狀態(tài)和各種信息，還是進(jìn)行脫機(jī)操作，都更加方便快捷。它具有的無邊距打印功能可以讓用戶直接打印照片等影像時(shí)，無需裁切白邊，提高工作效率。
編輯點(diǎn)評(píng)：愛普生STYLUS PRO 9880C大幅面打印機(jī)采用愛普生微壓電打印技術(shù)，與愛普生“世紀(jì)虹彩K3 VM”顏料墨水以及新型圖像處理技術(shù)相配合，實(shí)現(xiàn)了精確的色彩還原和對(duì)細(xì)節(jié)的更精細(xì)的展現(xiàn)。愛普生通過獨(dú)有的微壓電打印技術(shù)控制壓電晶體形變，精確地控制墨滴的大小，使得愛普生STYLUS PRO 9880C成為收藏級(jí)照片輸出設(shè)備之一。愛普生STYLUS PRO 9880C的輸出效率高，打印品質(zhì)好，價(jià)格也十分實(shí)惠，是一款性價(jià)比超高的大幅面打印機(jī)。加之其人性化的設(shè)計(jì)、強(qiáng)大的功能，愛普生9880C成為專業(yè)辦公的好助手不在話下。
2佳能iPF815回頂部
推薦產(chǎn)品：佳能iPF815
參考售價(jià)：47000元
佳能 imagePROGRAF iPF815是一款5色的大幅面打印機(jī)，適合建筑機(jī)械CAD、地理信息、國(guó)土資源、衛(wèi)星遙感、軍事等領(lǐng)域用戶在描圖紙、涂料紙和相紙等介質(zhì)上進(jìn)行輸出的需要。
佳能 imagePROGRAF iPF815圖片評(píng)測(cè)論壇報(bào)價(jià)網(wǎng)購實(shí)價(jià)
外觀方面，佳能 imagePROGRAF iPF815大幅面打印機(jī)采用黑白為主色調(diào)，商務(wù)大氣，機(jī)身尺寸為1893×1291×1144mm(安裝有支架時(shí)，安裝大容量收紙籃后)，機(jī)器重量為約141kg(安裝有支架時(shí))，相比同樣產(chǎn)品，機(jī)器的身材算苗條。
性能方面，最大打印幅面為1118mm（44inch/B0+），打印長(zhǎng)度為18m，打印寬度為44英寸，支持普通紙、厚銅版紙、相光面紙等打印介質(zhì)，打印分辨率為2400×1200dpi，標(biāo)配的接口類型為USB2.0 Hi-Speed,10Base-T/100Base-TX,IEEE1394（選配）。
佳能 imagePROGRAF iPF815大幅面打印機(jī)標(biāo)配32GB內(nèi)存，大容量?jī)?nèi)存提供了更大尺寸的數(shù)據(jù)交換空間，有效提升數(shù)據(jù)處理速度和能力，避免打印大尺寸圖像時(shí)出現(xiàn)的內(nèi)存溢出現(xiàn)象。同時(shí)，其160GB的硬盤，有利于進(jìn)行打印文件的存儲(chǔ)管理。
| 品牌 | 佳能 |
| 型號(hào) | imagePROGRAF iPF815 |
| 產(chǎn)品鏈接 | http://product.pconline.com.cn/largeformat_printers/canon/444403.html |
| IT商城 | 網(wǎng)購實(shí)價(jià) |
| 圖片 報(bào)價(jià)參數(shù)比較網(wǎng)友點(diǎn)評(píng)評(píng)測(cè)·行情 |
佳能 imagePROGRAF iPF815大幅面打印機(jī)標(biāo)配大容量的硬盤的好處在于，當(dāng)需要重復(fù)打印作業(yè)時(shí)，可以直接從打印機(jī)硬盤中調(diào)用解釋好的打印作業(yè)，有效減少用戶的等待時(shí)間，從而提升了打印工作的整體效率。
耗材方面，佳能 imagePROGRAF iPF815大幅面打印機(jī)為每種顏色墨水都提供單獨(dú)副墨艙。在副墨艙中始終保留預(yù)設(shè)的墨水量，用戶無須停止打印即可更換墨水盒，即使主墨水盒意外用盡，用戶也可使用副墨艙繼續(xù)打印，充分利用墨水，避免浪費(fèi)。噴頭配置為MBK5120個(gè)噴嘴,BK/C/M/Y×每色各2560個(gè)噴嘴,共計(jì)15360個(gè)噴嘴
編輯點(diǎn)評(píng)：佳能 imagePROGRAF iPF815大幅面打印機(jī)，打印分辨率為2400×1200dpi，共有手送、卷筒紙和雙卷筒供紙三種方式。采用多種數(shù)據(jù)處理方式，可以根據(jù)需要徹底清除硬盤數(shù)據(jù)，有效防止泄密事件發(fā)生，能夠滿足很多行業(yè)用戶的需要。
3愛普生Stylus PRO 9710回頂部
推薦產(chǎn)品：愛普生Stylus PRO 9710
參考售價(jià)：32000元
愛普生大幅面打印機(jī)Stylus PRO 9710，通過雙五色的墨水系統(tǒng)設(shè)計(jì)實(shí)現(xiàn)了速度的大幅提升，為CAD/GIS、廣告圖文輸出和版式/報(bào)業(yè)打樣等高速打印行業(yè)樹立了全新的標(biāo)準(zhǔn)。
愛普生 Stylus PRO 9710圖片評(píng)測(cè)論壇報(bào)價(jià)網(wǎng)購實(shí)價(jià)
愛普生Stylus PRO 9710大幅面打印機(jī)使用了愛普生最新一代打印頭技術(shù)——TFP微壓電打印頭，輸出速度顯著提升。與以往機(jī)型不同的是，這兩款新品采用雙五色、即五色十通道打印頭設(shè)計(jì)，工作時(shí)每種顏色的墨水可通過雙通道、720個(gè)噴嘴精確輸出，打印速度雙倍提高，使其在輸出線條圖時(shí)，最高機(jī)械打印速度可達(dá)36秒/A1，海報(bào)輸出的速度則高達(dá)46平米/小時(shí)，這樣的生產(chǎn)能力將為圖文輸出、CAD/GIS等高速打印行業(yè)帶來福音。
| 品牌 | 愛普生 |
| 型號(hào) | Stylus PRO 9710 |
| 產(chǎn)品鏈接 | http://product.pconline.com.cn/largeformat_printers/epson/394005.html |
| IT商城 | 網(wǎng)購實(shí)價(jià) |
| 圖片 報(bào)價(jià)參數(shù)比較網(wǎng)友點(diǎn)評(píng)評(píng)測(cè)·行情 |
耗材方面，愛普生Stylus PRO 9710大幅面打印機(jī)配備700ml大容量墨盒，可以通過降低更換墨盒的頻率進(jìn)一步提高生產(chǎn)效率。而新旋轉(zhuǎn)型裁紙刀的應(yīng)用則將包括布料和油畫布等介質(zhì)的裁切時(shí)間縮至4秒，可謂全方位多角度為用戶提供高速應(yīng)用體驗(yàn)。
編輯點(diǎn)評(píng)：愛普生 9710采用愛普生“活的色彩VM”顏料墨水，通過新增加鮮洋紅色墨水，其藍(lán)色至紅色區(qū)域的色域得到擴(kuò)展，打印色彩更加鮮艷，同時(shí)，照片黑墨水的引入也提高了其在高光類介質(zhì)上的打印輸出質(zhì)量，使這款產(chǎn)品可適用的介質(zhì)種類進(jìn)一步增加。
4惠普111回頂部
推薦產(chǎn)品：惠普111
參考價(jià)格：12000元
惠普111是惠普旗下的一款精致小巧的大幅面打印機(jī)產(chǎn)品，這款打印機(jī)一改其他大幅面打印機(jī)笨重的形象，采用攜帶式的設(shè)計(jì)，但是可以提供每90秒1份A1/D幅面的打印速度，保證了用戶的打印效率，同時(shí)提供不錯(cuò)的打印質(zhì)量，此外1.2萬元的價(jià)格也是十分親民，適合打印大幅面辦公文檔，建筑和機(jī)械設(shè)計(jì)及圖像。
惠普 Designjet 111(CQ533A)(帶紙盒) 圖片評(píng)測(cè)論壇報(bào)價(jià)網(wǎng)購實(shí)價(jià)
外觀方面，這款惠普111大幅面打印機(jī)采用深、淺灰色的色彩搭配，整體外觀給人感覺十分簡(jiǎn)潔典雅。機(jī)身體積十分小巧便攜，尺寸為1042×495×220mm，僅重23kg，用戶可以任意擺放辦公室里。 同時(shí)打印機(jī)為用戶提供了滾筒與紙盒兩種出圖方式，用戶可以根據(jù)打印的幅面靈活選擇十分方便。
性能方面，這款惠普111是一款24英寸熱噴墨大幅面打印機(jī)，雖然體積小，但是在性能上卻不含糊，作為一款四色的大幅面打印機(jī)，惠普111可以輸出純正、生動(dòng)的色彩以及清晰、精確的線條圖、海報(bào)和展示材料，打印機(jī)標(biāo)配有64MB標(biāo)準(zhǔn)緩存，可以為打印機(jī)數(shù)據(jù)處理能力提供保證。
| 品牌 | 惠普 |
| 型號(hào) | Designjet 111(CQ533A) |
| 產(chǎn)品鏈接 | http://product.pconline.com.cn/largeformat_printers/hp/485374.html |
| IT商城 | 網(wǎng)購實(shí)價(jià) |
| 更多詳細(xì)資料 | 圖片 報(bào)價(jià) 參數(shù) 比較 網(wǎng)友點(diǎn)評(píng) 評(píng)測(cè)·行情 |
在打印速度方面，打印機(jī)打印1份A1/D幅面只需90秒，標(biāo)準(zhǔn)、D 光面紙為14.5分鐘/頁，標(biāo)準(zhǔn)、D 涂料紙為5分鐘/頁。同時(shí)打印機(jī)提供高達(dá)1200×600dpi的最佳分辨率不但可以輸出高精度、無毛刺、無暈染的工程線條，還可以打印色彩鮮艷、色塊均勻的插圖或展示材料，高質(zhì)量地為用戶再現(xiàn)設(shè)計(jì)藍(lán)圖。同時(shí)打印機(jī)還支持多種介質(zhì)，均能提供專業(yè)級(jí)的CAD技術(shù)圖打印效果。
耗材方面，這款惠普111打印機(jī)配置了4色(青色，品紅，黃色，黑色)墨盒，型號(hào)分別為黑色CH565A，青色C4836A，品紅色C4837A，黃色C4838A。容量分別為黑色69ml，彩色28ml ，為用戶提供連續(xù)輸出的能力，打印機(jī)最小墨滴僅為4pl， 也可以保證高質(zhì)量的輸出效果。同時(shí)獨(dú)立的墨盒和打印頭色劑還可減少日常維護(hù)成本，方便維護(hù)，為用戶降低使用成本。
編輯點(diǎn)評(píng)：這款惠普111噴墨大幅面打印機(jī)是專為中小型CAD/GIS工作組設(shè)計(jì)的產(chǎn)品，具有超強(qiáng)輸出、支持多種介質(zhì)、體積小巧等特點(diǎn)，保證了打印的效率。同時(shí)打印機(jī)具有很高的性價(jià)比，非常適合打印大幅面辦公文檔，建筑和機(jī)械設(shè)計(jì)及圖像。
5佳能iPF710回頂部
推薦產(chǎn)品：佳能iPF710
參考售價(jià)：39500元
佳能iPF710是一款針對(duì)CAD/GIS和海報(bào)輸出用戶的大幅面打印機(jī)。無論是產(chǎn)品設(shè)計(jì)、輸出幅面還是色彩的應(yīng)用，佳能iPF710都體現(xiàn)出其在工業(yè)制圖方面的專業(yè)的水平。
佳能 imagePROGRAF iPF710圖片評(píng)測(cè)論壇報(bào)價(jià)網(wǎng)購實(shí)價(jià)
佳能iPF710的外觀采用經(jīng)典的黑白搭配設(shè)計(jì)，并且裝載有大型圖解LCD面板，華麗美觀，便于操作。1507×871×1094mm的機(jī)身尺寸是整體結(jié)構(gòu)簡(jiǎn)約、緊湊，放置于辦公室內(nèi)，雖然占地面積不大，卻能增添一股商務(wù)氣息。
性能方面，佳能iPF710可以在56秒內(nèi)輸出A0尺寸的CAD圖像，令人眼前一亮。它裝載了總計(jì)15,360個(gè)噴嘴(2,560個(gè)噴嘴×C、M、Y、MBK、MBK、BK)的高密度1英寸寬打印頭。此外，它還擁有5色墨水6個(gè)墨盒，而且5色墨水為防滲透染顏料混合墨水，能夠有效地防止在黑色與彩色邊緣產(chǎn)生滲透洇墨的現(xiàn)象。該款大幅面打印機(jī)采用的大尺寸單色液晶顯示屏，能夠?qū)崟r(shí)顯示紙張種類和墨水剩余量等信息，便于監(jiān)測(cè)與操作。同時(shí)，它還可以動(dòng)畫顯示紙張更換順序，處處彰顯人性化理念。
| 品牌 | 佳能 |
| 型號(hào) | imagePROGRAF iPF710 |
| 產(chǎn)品鏈接 | http://product.pconline.com.cn/largeformat_printers/canon/235561.html |
| IT商城 | 網(wǎng)購實(shí)價(jià) |
| 圖片 報(bào)價(jià)參數(shù)比較網(wǎng)友點(diǎn)評(píng)評(píng)測(cè)·行情 |
耗材方面，佳能iPF710采用5色墨水6個(gè)墨盒。其中，PFI-102MBK粗面黑色墨水，市場(chǎng)售價(jià)約為520元;PFI-102BK黑色墨水、PFI-102M品紅墨水、PFI-102Y黃色墨水和PFI-102C青色墨水的市場(chǎng)售價(jià)均約為550元。打印頭采用Print Head PF-03，市場(chǎng)售價(jià)約為6000元。
編輯點(diǎn)評(píng)：佳能iPF710是一款擁有超大幅面打印能力的五色打印機(jī)，應(yīng)對(duì)高標(biāo)準(zhǔn)的工業(yè)制圖不在話下。它的價(jià)格也很適中，操作起來十分便捷，性價(jià)比高，是一款值得擁有的大幅面打印機(jī)。
6惠普510回頂部
推薦產(chǎn)品：惠普510
參考價(jià)格：26500元
惠普510 42英寸大幅面打印機(jī)是惠普旗下的一款打印機(jī)產(chǎn)品，這款打印機(jī)主要針對(duì)CAD領(lǐng)域用戶，滿足用戶對(duì)工程圖紙的專業(yè)打印要求，以出色打印品質(zhì)與超值價(jià)格組合，為用戶提供方便快捷的使用體驗(yàn)，是設(shè)計(jì)院和制造行業(yè)用戶繪制成功藍(lán)圖的首選產(chǎn)品。
惠普 Designjet 510 1067毫米(CH337A) 圖片評(píng)測(cè)論壇報(bào)價(jià)網(wǎng)購實(shí)價(jià)
外觀方面，這款惠普510 整體采用白色的色調(diào)設(shè)計(jì)，搭配下面的墨綠色機(jī)架顯得十分的充滿生機(jī)，整個(gè)機(jī)身由上部的打印機(jī)與下面的支架構(gòu)成，同時(shí)還包括一個(gè)出紙口。因?yàn)槭谴蠓娲蛴C(jī)，所以在設(shè)計(jì)上與傳統(tǒng)的打印機(jī)相比要多一個(gè)出紙的支架。整個(gè)機(jī)身的尺寸相對(duì)而言還是比較輕便的，整機(jī)尺寸為1690×674×1100mm，比較方便用戶的放置。
性能方面，這款全新設(shè)計(jì)的惠普510打印機(jī)標(biāo)配內(nèi)存160MB，可順利處理各種復(fù)雜文件。打印機(jī)的最大處理幅面為42寸，最大打印寬度為1067mm。速度方面，惠普510(42英寸)可以提供多種介質(zhì)的打印服務(wù)，當(dāng)進(jìn)行彩色圖像ISO N5打印時(shí)標(biāo)準(zhǔn)D光面紙速度為7分鐘/頁，草稿D涂料紙速度為2.5分鐘/頁，標(biāo)準(zhǔn)D涂料紙為7分鐘/頁。而采用彩色、黑白線條圖打印速度為38頁/小時(shí)。這款惠普510還為用戶提供了出色的打印品質(zhì)，打印機(jī)擁有高達(dá)2400×1200dpi的最佳分辨率不但可以輸出高精度、無毛刺、無暈染的工程線條，還可以打印色彩鮮艷、色塊均勻的插圖或展示材料。
| 品牌 | 惠普 |
| 型號(hào) | Designjet 510 1067毫米(CH337A) |
| 產(chǎn)品鏈接 | http://product.pconline.com.cn/largeformat_printers/hp/396097.html |
| IT商城 | 網(wǎng)購實(shí)價(jià) |
| 更多詳細(xì)資料 | 圖片 報(bào)價(jià) 參數(shù) 比較 網(wǎng)友點(diǎn)評(píng) 評(píng)測(cè)·行情 |
惠普510打印機(jī)系列打印誤差僅為千分之二，能打印0.04毫米寬的線條，在多種介質(zhì)上均能為您打印出精確的細(xì)節(jié)，這一點(diǎn)對(duì)于CAD打印十分實(shí)用，為用戶提供專業(yè)級(jí)的CAD技術(shù)圖打印效果。打印機(jī)擁有直觀的控制面板和人性化的設(shè)計(jì)，兼容各類應(yīng)用和操作系統(tǒng)，用戶使用起來十分方便。利用惠普510用戶能夠以經(jīng)濟(jì)的價(jià)格、低廉的成本，輕松獲得快捷高效、高品質(zhì)的CAD技術(shù)圖。
此外，這款惠普510(42英寸)大幅面打印機(jī)采用了增強(qiáng)的HP-GL/2專業(yè)打印語言，可以輕松實(shí)現(xiàn)專業(yè)級(jí)CAD圖稿輸出。對(duì)比使用Raster(光柵語言)語言的打印機(jī)，HP-GL/2為用戶提供更加精確的線條定位和曲線形狀輸出，同時(shí)大幅提高圖稿修改之后再出圖速度，特別適合CAD領(lǐng)域經(jīng)常需要進(jìn)行修改的打印工程圖紙。
耗材方面，這款惠普510(42寸)采用HP 82號(hào)墨盒，獨(dú)立的墨盒和打印頭設(shè)計(jì)可以減少日常維護(hù)成本，并提高維護(hù)效率，同時(shí)降低企業(yè)運(yùn)營(yíng)成本。打印機(jī)可以使用證券紙和涂料紙、技術(shù)用紙、膠片、相紙、校樣紙、背膠、橫幅和標(biāo)記、畫布介質(zhì)進(jìn)行打印，用戶擁有豐富的選擇空間。
編輯點(diǎn)評(píng)：HP 510(42英寸)大幅面打印機(jī)是惠普的新一代大幅面打印機(jī)產(chǎn)品，打印機(jī)專為工程圖紙打印設(shè)計(jì)，可讓設(shè)計(jì)院等行業(yè)用戶盡享出色的優(yōu)秀品質(zhì)和可靠性。同時(shí)獨(dú)立的墨盒和打印頭設(shè)計(jì)幫助企業(yè)以更低的成本實(shí)現(xiàn)業(yè)務(wù)目標(biāo)，對(duì)設(shè)計(jì)院和制造行業(yè)用戶來說十分適合。
ebGPU 是即將推出的 Web API，提供了一組訪問 GPU的低級(jí)通用API。
我對(duì)圖形學(xué)不是很有經(jīng)驗(yàn)。我通過閱讀有關(guān)如何使用 OpenGL 構(gòu)建游戲引擎的教程來學(xué)習(xí) WebGL 的知識(shí)點(diǎn)，并通過觀看Inigo Quilez在ShaderToy上僅使用著色器（不使用任何 3D 網(wǎng)格或模型）做令人驚奇的事情來了解有關(guān)著色器的更多信息。這讓我可以在PROXX中構(gòu)建背景動(dòng)畫之類的東西，但我對(duì) WebGL 并不滿意，我將很快解釋原因。
當(dāng) WebGPU 出現(xiàn)在我的視野中時(shí)，我想深入了解它，但很多人警告我，WebGPU 的樣板比 WebGL 還要多。雖然沒有被嚇倒，但我預(yù)見到最壞的情況，教程和規(guī)范并不多，因?yàn)檫€處于 WebGPU 的早期階段。深入以后，我發(fā)現(xiàn)我沒有發(fā)現(xiàn) WebGPU 實(shí)際上是一個(gè)我更熟悉的 API。
所以在這里。我想分享在研究 GPU 和 WebGPU 時(shí)學(xué)到的東西。這篇博文的目標(biāo)是讓 Web 開發(fā)人員可以訪問 WebGPU。但這里有一個(gè)提醒：我不會(huì)使用 WebGPU 來生成圖形。相反，我將使用 WebGPU 來訪問 GPU 提供的原始計(jì)算能力。也許我會(huì)寫一篇后續(xù)博客文章如何使用 WebGPU 渲染到你的屏幕上，但是已經(jīng)有相當(dāng)多的內(nèi)容了。我將盡可能深入地理解 WebGPU，并希望能讓你有效地使用它——雖然不一定是有效的。
WebGL于 2011 年問世，到目前為止，它是唯一可以從 Web 訪問 GPU 的低級(jí) API。WebGL 的 API 實(shí)際上只是 OpenGL ES 2.0，帶有一些瘦包裝器和輔助工具以使其與 Web 兼容。WebGL 和 OpenGL 都由Khronos Group標(biāo)準(zhǔn)化，這基本上是 3D 圖形的 W3C。
OpenGL 的 API 本身可以追溯到更遠(yuǎn)，按照今天的標(biāo)準(zhǔn)，它并不是一個(gè)很好的 API。該設(shè)計(jì)以內(nèi)部的全局狀態(tài)對(duì)象為中心。從這樣的角度來看，這種設(shè)計(jì)是有意義的，因?yàn)樗梢宰畲笙薅鹊販p少任何給定調(diào)用需要傳入和傳出 GPU 的數(shù)據(jù)量。但是，它也引入了很多精神負(fù)擔(dān)。
WebGL 內(nèi)部全局狀態(tài)對(duì)象的可視化。摘自WebGL Fundamentals。
內(nèi)部狀態(tài)對(duì)象基本上是指針的集合。你的 API 調(diào)用會(huì)影響狀態(tài)對(duì)象指向的對(duì)象，但也會(huì)影響狀態(tài)對(duì)象本身。因此，API 調(diào)用的順序非常重要，我總覺得這使得構(gòu)建抽象和庫變得困難。你必須非常細(xì)致地清理所有可能干擾將要進(jìn)行的 API 調(diào)用的指針和狀態(tài)項(xiàng)，還要將指針和值恢復(fù)到它們之前的值，以便你的抽象正確組合。我經(jīng)常發(fā)現(xiàn)自己盯著一個(gè)黑色的畫布（因?yàn)檫@幾乎是你在 WebGL 中報(bào)告錯(cuò)誤的全部?jī)?nèi)容）并且暴力破解當(dāng)前沒有指向正確方向的指針。老實(shí)說，我不知道ThreeJS如何設(shè)法變得如此強(qiáng)大，但它確實(shí)以某種方式管理。我認(rèn)為這是大多數(shù)人直接使用 ThreeJS 而不是 WebGL 的主要原因之一。
不是你，是我：需要明確的是，我無法內(nèi)化 WebGL 可能是我自己的一個(gè)缺點(diǎn)。比我聰明的人已經(jīng)能夠使用 WebGL（以及 Web 之外的 OpenGL）構(gòu)建出令人驚嘆的東西，但它從來沒有真正讓我滿意。
隨著機(jī)器學(xué)習(xí)、神經(jīng)網(wǎng)絡(luò)以及加密貨幣的出現(xiàn)，GPU 已經(jīng)表明它們不僅僅可以用于在屏幕上繪制三角形。使用 GPU 進(jìn)行任何類型的計(jì)算通常被稱為通用 GPU 或 GPGPU，而 WebGL 1 在這方面并不出色。如果你想在 GPU 上處理任意數(shù)據(jù)，則必須將其編碼為紋理，在著色器中對(duì)其進(jìn)行解碼，進(jìn)行計(jì)算，然后將結(jié)果重新編碼為紋理。WebGL 2 使用Transform Feedback讓這件事變得更容易，但直到 2021 年 9 月，Safari 才支持 WebGL2（而大多數(shù)其他瀏覽器自 2017 年 1 月起支持 WebGL2），所以它不是一個(gè)真正的選擇。即便如此，WebGL2 的某些限制仍然讓人感覺有些笨拙。
在 Web 之外，新一代的圖形 API 已經(jīng)建立起來，它們向圖形卡公開了一個(gè)更底層的接口。這些新的 API 適應(yīng)了設(shè)計(jì) OpenGL 時(shí)不存在的新用例和約束。一方面，GPU 現(xiàn)在幾乎無處不在。甚至我們的移動(dòng)設(shè)備也內(nèi)置了功能強(qiáng)大的 GPU。因此，兩者都現(xiàn)代圖形編程（3D 渲染和光線追蹤）和 GPGPU 用例越來越普遍。另一方面，我們的大多數(shù)設(shè)備都有多核處理器，因此能夠從多個(gè)線程與 GPU 交互可能是一個(gè)重要的優(yōu)化向量。當(dāng) WebGPU 人員參與其中時(shí)，他們還重新審視了之前的一些設(shè)計(jì)決策，并預(yù)先加載了 GPU 必須完成的大量驗(yàn)證工作，從而使開發(fā)人員能夠從他們的 GPU 中榨取更多性能。
最受歡迎的下一代 GPU API 是Khronos Group的Vulkan 、 Apple的Metal和微軟的DirectX 12。為了將這些新功能帶入網(wǎng)絡(luò)，WebGPU 應(yīng)運(yùn)而生。雖然 WebGL 只是 OpenGL 的一個(gè)薄包裝層，但 WebGPU 選擇了不同的方法。它引入了自己的抽象，并且不直接反映任何這些原生 API。這部分是因?yàn)闆]有單一的 API 在所有系統(tǒng)上都可用，還因?yàn)樵S多概念（例如極低級(jí)別的內(nèi)存管理）對(duì)于面向 Web 的 API 來說并不慣用。取而代之的是，WebGPU 被設(shè)計(jì)成既能讓人感覺“webby”，又能舒適地坐在任何原生圖形 API 之上，同時(shí)抽象它們的特性。它在 W3C 中被標(biāo)準(zhǔn)化，所有主要的瀏覽器供應(yīng)商都擁有一席之地。由于其相對(duì)低級(jí)的性質(zhì)和強(qiáng)大的功能，WebGPU 有一些學(xué)習(xí)曲線并且在設(shè)置上相對(duì)繁重，
我們接觸到的 WebGPU 的第一個(gè)抽象是適配器和（邏輯）設(shè)備。
抽象層，從物理 GPU 到邏輯設(shè)備
物理設(shè)備是 GPU 本身，通常區(qū)分為內(nèi)置 GPU 和獨(dú)立 GPU。通常，任何給定設(shè)備都只有一個(gè) GPU，但也可能有兩個(gè)或更多 GPU。例如，微軟的 SurfaceBook 以低功耗的集成 GPU 和高性能的獨(dú)立 GPU 著稱，操作系統(tǒng)將根據(jù)需要在它們之間切換。
由 GPU 制造商提供的驅(qū)動(dòng)程序將以操作系統(tǒng)理解和期望的方式向操作系統(tǒng)公開 GPU 的功能。反過來，操作系統(tǒng)可以使用操作系統(tǒng)提供的圖形 API（如 Vulkan 或 Metal）將其暴露給應(yīng)用程序。
GPU 是共享資源。它不僅被許多應(yīng)用程序同時(shí)使用，而且還控制你在顯示器上看到的內(nèi)容。需要有一些東西可以讓多個(gè)進(jìn)程同時(shí)使用 GPU，這樣每個(gè)應(yīng)用程序都可以將自己的 UI 放在屏幕上，而不會(huì)干擾其他應(yīng)用程序，甚至不會(huì)惡意讀取其他應(yīng)用程序的數(shù)據(jù)。對(duì)于每個(gè)進(jìn)程，看起來他們對(duì)物理 GPU 擁有唯一的控制權(quán)，但顯然情況并非如此。這種多路復(fù)用主要由驅(qū)動(dòng)程序和操作系統(tǒng)完成。
反過來，適配器是從操作系統(tǒng)的本機(jī)圖形 API 到 WebGPU 的轉(zhuǎn)換層。由于瀏覽器是可以運(yùn)行多個(gè) Web 應(yīng)用程序的單一 OS 級(jí)應(yīng)用程序，因此再次需要多路復(fù)用，以便每個(gè) Web 應(yīng)用程序感覺就像它擁有對(duì) GPU 的唯一控制權(quán)。這是在 WebGPU 中使用邏輯設(shè)備的概念建模的。
要訪問適配器，請(qǐng)調(diào)用navigator.gpu.requestAdapter(). 在撰寫本文時(shí)，requestAdapter()選擇很少。這些選項(xiàng)允許你請(qǐng)求高性能或低能耗適配器。
軟件渲染：一些實(shí)現(xiàn)還為沒有 GPU 或 GPU 能力不足的系統(tǒng)提供“后備適配器”。后備適配器實(shí)際上是一種純軟件實(shí)現(xiàn)，它不會(huì)很快，但可以保持你的應(yīng)用程序正常運(yùn)行。
如果成功，即返回的適配器不是null，就可以檢查適配器的功能并使用 adapter.requestDevice()向適配器請(qǐng)求邏輯設(shè)備。
if (!navigator.gpu) throw Error("WebGPU not supported.");
const adapter=await navigator.gpu.requestAdapter();
if (!adapter) throw Error("Couldn’t request WebGPU adapter.");
const device=await adapter.requestDevice();
if (!device) throw Error("Couldn’t request WebGPU logical device.");如果沒有任何選項(xiàng)，requestDevice()將返回一個(gè)不一定與物理設(shè)備的功能相匹配的設(shè)備，而是 WebGPU 團(tuán)隊(duì)認(rèn)為合理的、所有 GPU 的最低公分母的設(shè)備。詳細(xì)信息在 WebGPU 標(biāo)準(zhǔn)中指定。例如，即使我的 GPU 能夠輕松處理最大 4GiB 的數(shù)據(jù)緩沖區(qū)，device返回的數(shù)據(jù)緩沖區(qū)也只會(huì)允許最大 1GiB 的數(shù)據(jù)緩沖區(qū)，并且會(huì)拒絕任何更大的數(shù)據(jù)緩沖區(qū)。這可能看起來有限制，但實(shí)際上很有幫助：如果你的 WebGPU 應(yīng)用程序使用默認(rèn)設(shè)備運(yùn)行，它將在絕大多數(shù)設(shè)備上運(yùn)行。如有必要，你可以利用adapter.limits檢查物理 GPU 的實(shí)際限制并通過將選項(xiàng)對(duì)象傳遞給requestDevice() 來請(qǐng)求一個(gè) device 。
如果您曾經(jīng)使用過 WebGL，那么可能熟悉頂點(diǎn)著色器和片段著色器。無需過多深入，傳統(tǒng)設(shè)置的工作原理如下：你將數(shù)據(jù)緩沖區(qū)上傳到 GPU，并告訴它如何將該數(shù)據(jù)解釋為一系列三角形。每個(gè)頂點(diǎn)占據(jù)該數(shù)據(jù)緩沖區(qū)的一塊，描述該頂點(diǎn)在 3D 空間中的位置，但可能還包括顏色、紋理 ID、法線和其他內(nèi)容等輔助數(shù)據(jù)。列表中的每個(gè)頂點(diǎn)都由 GPU 在頂點(diǎn)階段處理，在每個(gè)頂點(diǎn)上運(yùn)行頂點(diǎn)著色器，這將應(yīng)用平移、旋轉(zhuǎn)或透視變形。
著色器： “著色器”這個(gè)詞曾經(jīng)讓我感到困惑，因?yàn)槟憧梢宰?em>的不僅僅是著色。但在過去（即 1980 年代后期！），這個(gè)術(shù)語是恰當(dāng)?shù)模核窃?GPU 上運(yùn)行的一小段代碼，用于決定每個(gè)像素應(yīng)該是什么顏色，這樣你就可以對(duì)正在渲染的對(duì)象進(jìn)行著色，實(shí)現(xiàn)燈光和陰影的錯(cuò)覺。如今，著色器泛指在 GPU 上運(yùn)行的任何程序。
GPU 現(xiàn)在對(duì)三角形進(jìn)行光柵化，這意味著 GPU 會(huì)計(jì)算出每個(gè)三角形在屏幕上覆蓋的像素。然后每個(gè)像素由片段著色器處理，它可以訪問像素坐標(biāo)，也可以訪問輔助數(shù)據(jù)來決定該像素應(yīng)該是哪種顏色。如果使用得當(dāng)，可以使用此過程創(chuàng)建令人驚嘆的 3D 圖形。
這種將數(shù)據(jù)傳遞到頂點(diǎn)著色器，然后到片段著色器，然后將其直接輸出到屏幕上的系統(tǒng)稱為管道，在 WebGPU 中，你必須明確定義管道。
目前，WebGPU 允許你創(chuàng)建兩種類型的管道：渲染管道和計(jì)算管道。顧名思義，渲染管道渲染某些東西，這意味著它創(chuàng)建了一個(gè) 2D 圖像。該圖像不必在屏幕上，而可以只渲染到內(nèi)存（稱為幀緩沖區(qū)）。計(jì)算更通用，因?yàn)樗祷匾粋€(gè)緩沖區(qū)，該緩沖區(qū)可以包含任何類型的數(shù)據(jù)。在這篇博文的其余部分，我將專注于計(jì)算管道，因?yàn)槲蚁矚g將渲染管道視為計(jì)算管道的專業(yè)化/優(yōu)化。現(xiàn)在，這既是歷史上的倒退——計(jì)算管道是作為專門構(gòu)建的渲染管道的泛化而構(gòu)建的——而且還大大低估了這些管道在你的 GPU 中是物理上不同的電路。然而，就 API 而言，我發(fā)現(xiàn)這個(gè)心智模型很有幫助。在未來，似乎更多類型的管道——也許是光線追蹤管道——將被添加到 WebGPU 中。
使用 WebGPU，管道由一個(gè)（或多個(gè)）可編程階段組成，其中每個(gè)階段由一個(gè)著色器和一個(gè)入口點(diǎn)定義。計(jì)算管道只有一個(gè)compute階段，而渲染管道將有一個(gè)vertex和一個(gè)fragment階段：
const module=device.createShaderModule({
code: `
@stage(compute) @workgroup_size(64)
fn main() {
// Pointless!
}
`,
});
const pipeline=device.createComputePipeline({
compute: {
module,
entryPoint: "main",
},
});這是WebGPU著色語言 WGSL（發(fā)音為“wig-sal”）第一次出現(xiàn)。WGSL 對(duì)我來說就像是 Rust 和 GLSL 的交叉。它有很多 Rust-y 語法，帶有 GLSL 的全局函數(shù)（如dot(), norm(), len(), ...），類型（如vec2, mat4x4, ...）和swizzling符號(hào)（如some_vec.xxy, ...）。瀏覽器會(huì)將你的 WGSL 編譯為底層系統(tǒng)所期望的。這可能是 DirectX 12 的 HLSL、Metal 的 MSL 和Vulkan的 SPIR-V。
SPIR-V：SPIR-V很有趣，因?yàn)樗怯?Khronos Group 標(biāo)準(zhǔn)化的開放、二進(jìn)制、中間格式。你可以將 SPIR-V 視為并行編程語言編譯器的 LLVM，并且支持將多種語言編譯為SPIR-V 以及將 SPIR-V 編譯為多種其他語言。
在上面的著色器模塊中，我們只是創(chuàng)建了一個(gè)名為main的函數(shù)，并使用@stage(compute)屬性將其標(biāo)記為計(jì)算階段的入口點(diǎn)。你可以將多個(gè)函數(shù)標(biāo)記為著色器模塊中的入口點(diǎn)，因?yàn)榭梢詾槎鄠€(gè)管道重用相同的著色器模塊，并通過entryPoint選項(xiàng)選擇不同的函數(shù)來調(diào)用。但是那個(gè)@workgroup_size(64)屬性是什么？
GPU 以延遲為代價(jià)針對(duì)吞吐量進(jìn)行了優(yōu)化。要理解這一點(diǎn)，我們必須看一下 GPU 的架構(gòu)。我不想（老實(shí)說，不能）完整地解釋它。我會(huì)盡可能深入。如果你想了解更多信息，F(xiàn)abian Giesen的這個(gè)由13 部分組成的博客文章系列非常棒。
眾所周知，GPU 具有大量?jī)?nèi)核，可以進(jìn)行大規(guī)模并行工作。但是，這些內(nèi)核并不像你在為多核 CPU 編程時(shí)所習(xí)慣的那樣獨(dú)立。首先，GPU 核心是分層分組的。層次結(jié)構(gòu)中不同層的術(shù)語在供應(yīng)商和 API 之間并不一致。英特爾有一個(gè)很好的文檔，提供了對(duì)其架構(gòu)的高級(jí)概述，我被告知可以安全地假設(shè)其他 GPU 至少可以類似地工作，盡管 GPU 的確切架構(gòu)是受 NDA 保護(hù)的機(jī)密。
在英特爾的情況下，層次結(jié)構(gòu)中的最低級(jí)別是“執(zhí)行單元”（EU），它有多個(gè)（在本例中為七個(gè)）SIMT內(nèi)核。這意味著它有七個(gè)以鎖步方式運(yùn)行并始終執(zhí)行相同指令的內(nèi)核。但是，每個(gè)內(nèi)核都有自己的一組寄存器和堆棧指針。因此，雖然他們必須執(zhí)行相同的操作，但他們可以在不同的數(shù)據(jù)上執(zhí)行它。這也是 GPU 性能專家避免分支（如if/else或循環(huán)）的原因：如果 EU 遇到if/ else，所有內(nèi)核都必須同時(shí)執(zhí)行分支，除非所有核心碰巧采用相同的分支。可以告訴每個(gè)核心忽略它正在輸入的指令，但這顯然浪費(fèi)了可以用于計(jì)算的寶貴周期。這同樣適用于循環(huán)！如果一個(gè)核心提前完成了他們的循環(huán)，它將不得不假裝執(zhí)行循環(huán)體，直到所有核心都完成了循環(huán)。
盡管內(nèi)核的頻率很高，但從內(nèi)存（或紋理中的像素）獲取數(shù)據(jù)仍然需要相對(duì)較長(zhǎng)的時(shí)間——Fabian 說這需要幾百個(gè)時(shí)鐘周期。這幾百個(gè)周期可以用于計(jì)算。為了利用這些原本空閑的周期，每個(gè)歐盟的工作都嚴(yán)重超額認(rèn)購。每當(dāng) EU 最終空閑（例如，等待內(nèi)存中的值）時(shí)，它就會(huì)切換到另一個(gè)工作項(xiàng)，并且只有在新的工作項(xiàng)需要等待某事時(shí)才會(huì)切換回來。這是 GPU 如何以延遲為代價(jià)優(yōu)化吞吐量的關(guān)鍵技巧：?jiǎn)蝹€(gè)工作項(xiàng)將花費(fèi)更長(zhǎng)的時(shí)間，因?yàn)榍袚Q到另一個(gè)工作項(xiàng)可能會(huì)停止執(zhí)行的時(shí)間超過必要的時(shí)間，但總體利用率更高并導(dǎo)致更高的吞吐量。
英特爾 Iris Xe 圖形芯片的架構(gòu)
不過，EU 只是層次結(jié)構(gòu)中的最低級(jí)別。多個(gè) EU 被分組為英特爾所謂的“SubSlice”。SubSlice 中的所有 EU 都可以訪問少量共享本地內(nèi)存 (SLM)，在英特爾的情況下約為 64KiB。如果要運(yùn)行的程序有任何同步命令，則必須在同一個(gè) SubSlice 內(nèi)執(zhí)行，因?yàn)橹挥兴鼈冇泄蚕韮?nèi)存進(jìn)行同步。
在最后一層，多個(gè) SubSlice 被組合成一個(gè) Slice，形成 GPU。對(duì)于集成的 Intel GPU，最終總共有 170-700 個(gè)內(nèi)核。離散 GPU 可以輕松擁有 1500 個(gè)或更多內(nèi)核。同樣，這里的命名取自英特爾，其他供應(yīng)商可能使用不同的名稱，但每個(gè) GPU 的總體架構(gòu)都是相似的。
為了充分利用這種架構(gòu)的好處，需要專門為這種架構(gòu)設(shè)置程序，以便純程序化的 GPU 調(diào)度程序可以最大限度地利用。因此，圖形 API 公開了一個(gè)線程模型，自然允許以這種方式剖析工作。在 WebGPU 中，這里重要的原語是“工作組”。
在傳統(tǒng)設(shè)置中，頂點(diǎn)著色器會(huì)為每個(gè)頂點(diǎn)調(diào)用一次，片段著色器會(huì)為每個(gè)像素調(diào)用一次（我知道我在這里略過一些細(xì)節(jié)）。在 GPGPU 設(shè)置中，將為你安排的每個(gè)工作項(xiàng)調(diào)用一次計(jì)算著色器。由你來定義工作項(xiàng)是什么。
所有工作項(xiàng)的集合（我將其稱為“工作負(fù)載”）被分解為工作組。工作組中的所有工作項(xiàng)都計(jì)劃一起運(yùn)行。在 WebGPU 中，工作負(fù)載被建模為一個(gè) 3 維網(wǎng)格，其中每個(gè)“立方體”是一個(gè)工作項(xiàng)，工作項(xiàng)被分組為更大的立方體以形成一個(gè)工作組。
這是一個(gè)工作負(fù)載。白邊立方體是一個(gè)工作項(xiàng)。紅邊長(zhǎng)方體是一個(gè)工作組
最后，我們有足夠的信息來討論這個(gè)@workgroup_size(x, y, z)屬性，在這一點(diǎn)上它甚至可能是不言自明的：這個(gè)屬性允許你告訴 GPU 這個(gè)著色器的工作組的大小應(yīng)該是多少。或者用上圖的語言，@workgroup_size屬性定義了紅邊立方體的大小。 x×y×z 表示每個(gè)工作組的工作項(xiàng)數(shù)。任何跳過的參數(shù)都假定為 1，因此@workgroup_size(64)等價(jià)于@workgroup_size(64, 1, 1)。
當(dāng)然，實(shí)際的 EU 并不排列在芯片上的 3D 網(wǎng)格中。在 3D 網(wǎng)格中建模工作項(xiàng)的目的是增加局部性。假設(shè)相鄰的工作組很可能會(huì)訪問內(nèi)存中的相似區(qū)域，因此當(dāng)順序運(yùn)行相鄰的工作組時(shí)，緩存中已經(jīng)有值的機(jī)會(huì)更高，無需從緩存中抓取它們，從而節(jié)省了幾百個(gè)周期記憶。然而，大多數(shù)硬件似乎只是以串行順序運(yùn)行工作組，因?yàn)檫\(yùn)行著色器@workgroup_size(64)與@workgroup_size(8, 8)之間的差異可以忽略不計(jì)。所以這個(gè)概念被認(rèn)為有點(diǎn)遺留。
但是，工作組受到多種方式的限制：device.limits有許多值得了解的屬性：
// device.limits
{
// ...
maxComputeInvocationsPerWorkgroup: 256,
maxComputeWorkgroupSizeX: 256,
maxComputeWorkgroupSizeY: 256,
maxComputeWorkgroupSizeZ: 64,
maxComputeWorkgroupsPerDimension: 65535,
// ...
}工作組大小的每個(gè)維度的大小都受到限制，但即使 x、y 和 z 分別在限制范圍內(nèi)，它們的乘積 (=x×y×z )可能不是，因?yàn)橛衅渥约旱南拗疲阒荒苁褂眠@么多工作組。
專業(yè)提示：不要產(chǎn)生最大數(shù)量的線程。盡管 GPU 由操作系統(tǒng)和底層調(diào)度程序管理，但你可能會(huì)使用長(zhǎng)時(shí)間運(yùn)行的 GPU 程序凍結(jié)整個(gè)系統(tǒng)。
那么合適的工作組規(guī)模是多少？這實(shí)際上取決于你分配工作項(xiàng)坐標(biāo)的語義。我確實(shí)意識(shí)到這并不是一個(gè)真正有用的答案，所以我想給你如下建議：“使用 [a workgroup size of] 64，除非你知道你的目標(biāo)是什么 GPU 或者你的工作負(fù)載需要不同的東西。” 這似乎是一個(gè)安全的數(shù)字，可以在許多 GPU 上運(yùn)行良好，并允許 GPU 調(diào)度程序讓盡可能多的 EU 保持忙碌。
我們已經(jīng)編寫了著色器并設(shè)置了管道。剩下要做的就是調(diào)用 GPU 來執(zhí)行它。由于 GPU可以是具有自己的內(nèi)存芯片的完全獨(dú)立的卡，因此你可以通過所謂的命令緩沖區(qū)或命令隊(duì)列來控制它。命令隊(duì)列是一塊內(nèi)存，其中包含供 GPU 執(zhí)行的編碼命令。編碼高度特定于 GPU，由驅(qū)動(dòng)程序負(fù)責(zé)。WebGPU 公開了一個(gè)CommandEncoder以利用該功能。
const commandEncoder=device.createCommandEncoder();
const passEncoder=commandEncoder.beginComputePass();
passEncoder.setPipeline(pipeline);
passEncoder.dispatch(1);
passEncoder.end();
const commands=commandEncoder.finish();
device.queue.submit([commands]);commandEncoder有多種方法可讓你將數(shù)據(jù)從一個(gè) GPU 緩沖區(qū)復(fù)制到另一個(gè) GPU 緩沖區(qū)并操作紋理。它還允許你創(chuàng)建PassEncoder，它對(duì)管道的設(shè)置和調(diào)用進(jìn)行編碼。在這種情況下，我們有一個(gè)計(jì)算管道，因此我們必須創(chuàng)建一個(gè)計(jì)算通道，將其設(shè)置為使用我們預(yù)先聲明的管道，最后調(diào)用dispatch(w_x, w_y, w_z)以告訴 GPU 沿每個(gè)維度創(chuàng)建多少個(gè)工作組。換句話說，我們的計(jì)算著色器將被調(diào)用的次數(shù)等于 wx×wy?×wz?×x×y×z 。 順便說一句，pass 編碼器是 WebGPU 的抽象，用于避免我在這篇博文開始時(shí)描述的內(nèi)部全局狀態(tài)對(duì)象。運(yùn)行 GPU 管道所需的所有數(shù)據(jù)和狀態(tài)都通過 pass 編碼器顯式傳遞。
抽象：命令緩沖區(qū)也是驅(qū)動(dòng)程序或操作系統(tǒng)的掛鉤，讓多個(gè)應(yīng)用程序使用 GPU 而不會(huì)相互干擾。當(dāng)你將命令排隊(duì)時(shí)，下面的抽象層將向隊(duì)列中注入額外的命令，以保存先前程序的狀態(tài)并恢復(fù)您的程序狀態(tài)，這樣就感覺沒有其他人在使用 GPU。
運(yùn)行這段代碼，我們實(shí)際上在 GPU 上生成了 64 個(gè)線程，它們完全沒有任何作用。但它有效，所以這很酷。讓我們談?wù)勎覀內(nèi)绾谓o GPU 一些數(shù)據(jù)來工作。
正如所承諾的，我不會(huì)直接將 WebGPU 用于圖形，因此我認(rèn)為在 GPU 上運(yùn)行物理模擬并使用 Canvas2D 將其可視化會(huì)很有趣。也許我自稱是“物理模擬”——我正在做的是生成一大堆圓圈，讓它們?cè)谄矫嫔弦噪S機(jī)方向滾動(dòng)并讓它們發(fā)生碰撞。
為此，我們需要將一些模擬參數(shù)和初始狀態(tài)推送到GPU，在 GPU 上運(yùn)行模擬并從GPU 讀取模擬結(jié)果。這可以說是 WebGPU 最令人毛骨悚然的部分，因?yàn)橛幸欢褦?shù)據(jù)雜技（不是說看似毫無意義的復(fù)制），但這就是讓 WebGPU 成為以最高性能水平運(yùn)行的與設(shè)備無關(guān)的 API 的原因。
為了與 GPU 交換數(shù)據(jù)，我們需要使用綁定組布局?jǐn)U展我們的管道定義。綁定組是在管道執(zhí)行期間可訪問的 GPU 實(shí)體（內(nèi)存緩沖區(qū)、紋理、采樣器等）的集合。綁定組布局預(yù)先定義了這些 GPU 實(shí)體的類型、用途和用途，這使 GPU 可以提前弄清楚如何最有效地運(yùn)行管道。讓我們?cè)谶@個(gè)初始步驟中保持簡(jiǎn)單，并讓我們的管道訪問單個(gè)內(nèi)存緩沖區(qū)：
const bindGroupLayout=device.createBindGroupLayout({
entries: [{
binding: 1,
visibility: GPUShaderStage.COMPUTE,
buffer: {
type: "storage",
},
}],
});
const pipeline=device.createComputePipeline({
layout: device.createPipelineLayout({
bindGroupLayouts: [bindGroupLayout],
}),
compute: {
module,
entryPoint: "main",
},
});該binding數(shù)字可以自由選擇，并用于將 WGSL 代碼中的變量與綁定組布局的此槽中的緩沖區(qū)內(nèi)容聯(lián)系起來。我們bindGroupLayout還定義了每個(gè)緩沖區(qū)的用途，在本例中為"storage". 另一個(gè)選項(xiàng)是"read-only-storage"，它是只讀的，并允許 GPU 在永遠(yuǎn)不會(huì)寫入此緩沖區(qū)并且因此不需要同步的基礎(chǔ)上進(jìn)行進(jìn)一步的優(yōu)化。緩沖區(qū)類型的最后一個(gè)可能值是"uniform"，在計(jì)算管道的上下文中，它在功能上主要等同于存儲(chǔ)緩沖區(qū)。
綁定組布局就位。現(xiàn)在我們可以創(chuàng)建綁定組本身，其中包含綁定組布局所期望的 GPU 實(shí)體的實(shí)際實(shí)例。一旦帶有緩沖區(qū)的綁定組就位，計(jì)算著色器可以用數(shù)據(jù)填充它，我們可以從 GPU 讀取它。但是有一個(gè)障礙：暫存緩沖區(qū)。
我再說一遍：GPU 以延遲為代價(jià)對(duì)吞吐量進(jìn)行了高度優(yōu)化。GPU 需要能夠以令人難以置信的高速率向內(nèi)核提供數(shù)據(jù)，以維持該吞吐量。Fabian 從 2011 年開始在他的博客文章系列中做了一些背后的數(shù)學(xué)運(yùn)算，得出的結(jié)論是 GPU 需要維持 3.3GB/s 的速度，僅用于以 1280x720 分辨率運(yùn)行的著色器的紋理樣本。為了適應(yīng)當(dāng)今的圖形需求，GPU 需要更快地挖掘數(shù)據(jù)。這只有在 GPU 的內(nèi)存與內(nèi)核緊密集成的情況下才能實(shí)現(xiàn)。這種緊密的集成使得很難將相同的內(nèi)存也暴露給主機(jī)進(jìn)行讀寫。
相反，GPU 有額外的內(nèi)存庫，主機(jī)和 GPU 都可以訪問，但集成度不高，無法快速提供數(shù)據(jù)。暫存緩沖區(qū)是在此中間內(nèi)存領(lǐng)域中分配的緩沖區(qū)，可以映射到主機(jī)系統(tǒng)進(jìn)行讀寫。為了從 GPU 讀取數(shù)據(jù)，我們將數(shù)據(jù)從內(nèi)部高性能緩沖區(qū)復(fù)制到暫存緩沖區(qū)，然后將暫存緩沖區(qū)映射到主機(jī)，以便我們可以將數(shù)據(jù)讀回主內(nèi)存。對(duì)于寫作，這個(gè)過程是相同的，但相反。
回到我們的代碼：我們將創(chuàng)建一個(gè)可寫緩沖區(qū)并將其添加到綁定組，以便計(jì)算著色器可以寫入它。我們還將創(chuàng)建一個(gè)大小相同的第二個(gè)緩沖區(qū)，作為暫存緩沖區(qū)。每個(gè)緩沖區(qū)都使用usage位掩碼創(chuàng)建，你可以在其中聲明您打算如何使用該緩沖區(qū)。然后，GPU 將確定緩沖區(qū)的位置以實(shí)現(xiàn)所有這些用例，或者如果標(biāo)志組合無法實(shí)現(xiàn)，則拋出錯(cuò)誤。
const BUFFER_SIZE=1000;
const output=device.createBuffer({
size: BUFFER_SIZE,
usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
});
const stagingBuffer=device.createBuffer({
size: BUFFER_SIZE,
usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST,
});
const bindGroup=device.createBindGroup({
layout: bindGroupLayout,
entries: [{
binding: 1,
resource: {
buffer: output,
},
}],
});請(qǐng)注意，createBuffer()返回一個(gè) GPUBuffer，而不是ArrayBuffer. 暫時(shí)無法讀取或?qū)懭胨鼈儭榇耍鼈冃枰挥成洌@是一個(gè)單獨(dú)的 API 調(diào)用，并且只會(huì)對(duì)具有GPUBufferUsage.MAP_READ或GPUBufferUsage.MAP_WRITE的緩沖區(qū)成功。
TypeScript：我發(fā)現(xiàn) TypeScript 在探索新 API 時(shí)非常有用。幸運(yùn)的是，Chrome 的 WebGPU 團(tuán)隊(duì)維護(hù)@webgpu/types，因此你可以享受準(zhǔn)確的自動(dòng)完成。
現(xiàn)在我們不僅有了綁定組布局，甚至還有實(shí)際的綁定組本身，我們需要更新我們的調(diào)度代碼以使用這個(gè)綁定組。之后，我們映射暫存緩沖區(qū)以將結(jié)果讀回 JavaScript。
const commandEncoder=device.createCommandEncoder();
const passEncoder=commandEncoder.beginComputePass();
passEncoder.setPipeline(pipeline);
passEncoder.setBindGroup(0, bindGroup);
passEncoder.dispatch(1);
passEncoder.dispatch(Math.ceil(BUFFER_SIZE / 64));
passEncoder.end();
commandEncoder.copyBufferToBuffer(
output,
0, // Source offset
stagingBuffer,
0, // Destination offset
BUFFER_SIZE
);
const commands=commandEncoder.finish();
device.queue.submit([commands]);
await stagingBuffer.mapAsync(
GPUMapMode.READ,
0, // Offset
BUFFER_SIZE // Length
);
const copyArrayBuffer=stagingBuffer.getMappedRange(0, BUFFER_SIZE);
const data=copyArrayBuffer.slice();
stagingBuffer.unmap();
console.log(new Float32Array(data));由于我們向管道添加了綁定組布局，因此任何不提供綁定組的調(diào)用現(xiàn)在都會(huì)失敗。在我們定義“pass”之后，我們通過命令編碼器添加一個(gè)額外的命令，將數(shù)據(jù)從輸出緩沖區(qū)復(fù)制到暫存緩沖區(qū)，并將我們的命令緩沖區(qū)提交到隊(duì)列。GPU 將開始通過命令隊(duì)列工作。我們不知道 GPU 何時(shí)會(huì)準(zhǔn)確完成，但我們已經(jīng)可以提交我們的請(qǐng)求stagingBuffer以進(jìn)行映射。這個(gè)函數(shù)是異步的，因?yàn)樗枰却铌?duì)列被完全處理。當(dāng)返回的 promise 解析時(shí)，緩沖區(qū)被映射，但還沒有暴露給 JavaScript。stagingBuffer.getMappedRange()讓我們請(qǐng)求一個(gè)小節(jié)（或整個(gè)緩沖區(qū)）作為一個(gè)好的 ol' 暴露給 JavaScriptArrayBuffer. 這是真實(shí)的、映射的 GPU 內(nèi)存，這意味著數(shù)據(jù)將在stagingBuffer未映射時(shí)消??失（ArrayBuffer將“分離”），因此我在使用slice()創(chuàng)建 JavaScript 擁有的副本。
不是很令人興奮，但我們從 GPU 的內(nèi)存中復(fù)制了這些零
零以外的東西可能會(huì)更有說服力。在我們開始在我們的 GPU 上進(jìn)行任何高級(jí)計(jì)算之前，讓我們將一些手工挑選的數(shù)據(jù)放入我們的緩沖區(qū)中，以證明我們的管道確實(shí)按預(yù)期工作。這是我們新的計(jì)算著色器代碼，為了清晰起見，有額外的間距。
@group(0) @binding(1)
var<storage, write> output: array<f32>;
@stage(compute) @workgroup_size(64)
fn main(
@builtin(global_invocation_id)
global_id : vec3<u32>,
@builtin(local_invocation_id)
local_id : vec3<u32>,
) {
output[global_id.x]=f32(global_id.x) * 1000. + f32(local_id.x);
}
前兩行聲明了一個(gè)名為 的模塊范圍變量output，它是一個(gè)動(dòng)態(tài)大小的數(shù)組f32。屬性聲明數(shù)據(jù)的來源：從我們第一個(gè)（第 0 個(gè)）綁定組中的緩沖區(qū)，binding值為 1 的條目。數(shù)組的長(zhǎng)度將自動(dòng)反映底層緩沖區(qū)的長(zhǎng)度（向下舍入）。
變量： WGSL 與 Rust 的不同之處在于聲明的變量let是不可變的。如果你希望一個(gè)變量是可變的，應(yīng)該使用關(guān)鍵字是var。
我們main()函數(shù)的簽名增加了兩個(gè)參數(shù)：global_id和local_id。我可以選擇任何名稱——它們的值由與它們關(guān)聯(lián)的屬性決定： Theglobal_invocation_id是一個(gè)內(nèi)置值，對(duì)應(yīng)于工作負(fù)載中此著色器調(diào)用的全局 x/y/z 坐標(biāo)。local_invocation_id是工作組中此著色器的 x/y/z坐標(biāo)。
工作量中標(biāo)記的三個(gè)工作項(xiàng) a、b 和 c 的示例
此圖顯示了工作負(fù)載@workgroup_size(4, 4, 4)坐標(biāo)系的一種可能解釋。可以為你的用例定義坐標(biāo)系。如果我們?cè)谏厦胬L制的軸上達(dá)成一致，我們將看到main() 的以下a、b 和 c參數(shù)：
a:
b:
c:
在我們的著色器中，我們有@workgroup_size(64, 1, 1)，因此local_id.x范圍從 0 到 63。為了能夠檢查這兩個(gè)值，我將它們“編碼”為一個(gè)數(shù)字。請(qǐng)注意，WGSL 是嚴(yán)格類型的： local_id和global_id都是 vec3<u32>，因此我們必須顯式地將它們的值轉(zhuǎn)換f32為能夠?qū)⑺鼈兎峙浣o我們的f32輸出緩沖區(qū)。
GPU 填寫的實(shí)際值
這證明了我們的計(jì)算著色器確實(shí)為輸出內(nèi)存中的每個(gè)值調(diào)用并用唯一值填充它。我們不知道這些數(shù)據(jù)是按什么順序填寫的，因?yàn)檫@是故意未指定的，并留給 GPU 的調(diào)度程序。
精明的觀察者可能已經(jīng)注意到，著色器調(diào)用的總數(shù) ( Math.ceil(BUFFER_SIZE / 64) * 64) 將導(dǎo)致global_id.x大于我們數(shù)組的長(zhǎng)度，因?yàn)槊總€(gè)f32占用 4 個(gè)字節(jié)。幸運(yùn)的是，訪問數(shù)組受到隱式鉗位的保護(hù)，因此每次超出數(shù)組末尾的寫入最終都會(huì)寫入數(shù)組的最后一個(gè)元素。這樣可以避免內(nèi)存訪問錯(cuò)誤，但仍可能生成不可用的數(shù)據(jù)。事實(shí)上，如果你檢查返回緩沖區(qū)的最后 3 個(gè)元素，會(huì)發(fā)現(xiàn)數(shù)字 247055、248056 和 608032。我們有責(zé)任通過提前退出來防止在著色器代碼中發(fā)生這種情況：
fn main( /* ... */) {
if(global_id.x >=arrayLength(&output)) {
return;
}
output[global_id.x]=f32(global_id.x) * 100. + f32(local_id.x);
}如果需要，您可以運(yùn)行此演示并檢查完整源代碼。
我們的目標(biāo)是讓整個(gè)樂塔球在 2D 空間中移動(dòng)并進(jìn)行愉快的小碰撞。為此，每個(gè)球都需要有一個(gè)半徑、一個(gè)位置和一個(gè)速度矢量。我們可以繼續(xù)處理array<f32>，并說第一個(gè)浮點(diǎn)數(shù)是第一個(gè)球的 x 位置，第二個(gè)浮點(diǎn)數(shù)是第一個(gè)球的 y 位置，依此類推。這不是我所說的人體工程學(xué)。幸運(yùn)的是，WGSL 允許我們定義自己的結(jié)構(gòu)，將多條數(shù)據(jù)捆綁在一個(gè)整潔的包中。
舊消息：如果你知道什么是內(nèi)存對(duì)齊，則可以跳過本節(jié)（盡管請(qǐng)看一下代碼示例）。如果你還不知道它是什么，我不會(huì)真正解釋原因，而是向你展示它是如何體現(xiàn)的以及如何使用它。
因此，用所有這些組件定義一個(gè)struct Balla 并將我們的array<f32>轉(zhuǎn)換為array<Ball>是有意義的。所有這一切的缺點(diǎn)：我們必須談?wù)搶?duì)齊。
struct Ball {
radius: f32;
position: vec2<f32>;
velocity: vec2<f32>;
}
@group(0) @binding(1)
var<storage, write> output: array<f32>;
var<storage, write> output: array<Ball>;
@stage(compute) @workgroup_size(64)
fn main(
@builtin(global_invocation_id) global_id : vec3<u32>,
@builtin(local_invocation_id) local_id : vec3<u32>,
) {
let num_balls=arrayLength(&output);
if(global_id.x >=num_balls) {
return;
}
output[global_id.x].radius=999.;
output[global_id.x].position=vec2<f32>(global_id.xy);
output[global_id.x].velocity=vec2<f32>(local_id.xy);
}如果運(yùn)行此演示，你將在控制臺(tái)中看到：
由于對(duì)齊約束，該結(jié)構(gòu)在其內(nèi)存布局中有一個(gè)填充
我放置999到結(jié)構(gòu)的第一個(gè)字段，以便于查看結(jié)構(gòu)在緩沖區(qū)中的開始位置。在我們到達(dá)下一個(gè)之前總共有 6 個(gè)數(shù)字999，這有點(diǎn)令人驚訝，因?yàn)樵摻Y(jié)構(gòu)實(shí)際??上只有 5 個(gè)數(shù)字要存儲(chǔ)：radius、position.x、position.y 、velocity.x和velocity.y。仔細(xì)一看，很明顯radius后面的數(shù)字總是0。這是對(duì)齊的原因。
每種 WGSL 數(shù)據(jù)類型都有明確定義的對(duì)齊要求。如果數(shù)據(jù)類型的對(duì)齊方為N，這意味著該數(shù)據(jù)類型的值只能存儲(chǔ)在一個(gè)內(nèi)存地址是N的倍數(shù). f32對(duì)齊為 4，而vec2<f32>對(duì)齊為 8。如果我們假設(shè)我們的結(jié)構(gòu)從地址 0 開始，則該radius字段可以存儲(chǔ)在地址 0，因?yàn)?0 是 4 的倍數(shù)。結(jié)構(gòu)中的下一個(gè)字段是vec2<f32>，對(duì)齊為 8。但是，之后的第一個(gè)空閑地址radius是 4，它不是8 的倍數(shù)。為了解決這個(gè)問題，編譯器添加了 4 個(gè)字節(jié)的填充以到達(dá)下一個(gè) 8 的倍數(shù)的地址。這解釋了我們?cè)?DevTools 控制臺(tái)中看到一個(gè)值為 0 的未使用字段。
WGSL 規(guī)范中的（縮短的）對(duì)齊表
現(xiàn)在知道了結(jié)構(gòu)在內(nèi)存中是如何布局的，我們可以從 JavaScript 填充它以生成我們的初始狀態(tài)球，并將其讀回以可視化它。
我們已經(jīng)成功地從 GPU 讀取數(shù)據(jù)，將其帶到 JavaScript 并“解碼”它。現(xiàn)在是處理另一個(gè)方向的時(shí)候了。我們需要在 JavaScript 中生成所有球的初始狀態(tài)并將其提供給 GPU，以便它可以在其上運(yùn)行計(jì)算著色器。生成初始狀態(tài)相當(dāng)簡(jiǎn)單：
let inputBalls=new Float32Array(new ArrayBuffer(BUFFER_SIZE));
for (let i=0; i < NUM_BALLS; i++) {
inputBalls[i * 6 + 0]=randomBetween(2, 10); // radius
inputBalls[i * 6 + 1]=0; // padding
inputBalls[i * 6 + 2]=randomBetween(0, ctx.canvas.width); // position.x
inputBalls[i * 6 + 3]=randomBetween(0, ctx.canvas.height); // position.y
inputBalls[i * 6 + 4]=randomBetween(-100, 100); // velocity.x
inputBalls[i * 6 + 5]=randomBetween(-100, 100); // velocity.y
}Buffer-backed-object：對(duì)于更復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，從 JavaScript 中操作數(shù)據(jù)會(huì)變得相當(dāng)乏味。雖然最初是為工人用例編寫的，但我的庫buffer-backed-object在這里可以派上用場(chǎng)！
我們也已經(jīng)知道如何將緩沖區(qū)暴露給我們的著色器。只需要調(diào)整我們的管道綁定組布局以期望另一個(gè)緩沖區(qū)：
const bindGroupLayout=device.createBindGroupLayout({
entries: [
{
binding: 0,
visibility: GPUShaderStage.COMPUTE,
buffer: {
type: "read-only-storage",
},
},
{
binding: 1,
visibility: GPUShaderStage.COMPUTE,
buffer: {
type: "storage",
},
},
],
});...并創(chuàng)建一個(gè)我們可以使用綁定組綁定的 GPU 緩沖區(qū)：
const input=device.createBuffer({
size: BUFFER_SIZE,
usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
});
const bindGroup=device.createBindGroup({
layout: bindGroupLayout,
entries: [
{
binding: 0,
resource: {
buffer: input,
},
},
{
binding: 1,
resource: {
buffer: output,
},
},
],
});現(xiàn)在是新的部分：向 GPU 發(fā)送數(shù)據(jù)。就像讀取數(shù)據(jù)一樣，我們?cè)诩夹g(shù)上必須創(chuàng)建一個(gè)可以映射的暫存緩沖區(qū)，將我們的數(shù)據(jù)復(fù)制到暫存緩沖區(qū)，然后發(fā)出命令將我們的數(shù)據(jù)從暫存緩沖區(qū)復(fù)制到存儲(chǔ)緩沖區(qū)。然而，WebGPU 提供了一個(gè)方便的功能，它可以為我們選擇最有效的方式將我們的數(shù)據(jù)放入存儲(chǔ)緩沖區(qū)，即使這涉及動(dòng)態(tài)創(chuàng)建臨時(shí)暫存緩沖區(qū)：
device.queue.writeBuffer(input, 0, inputBalls);這樣就行了？是的！我們甚至不需要命令編碼器。我們可以直接把這個(gè)命令放到命令隊(duì)列中。device.queue還為紋理提供了一些其他類似的便利功能。
現(xiàn)在我們需要將這個(gè)新緩沖區(qū)綁定到 WGSL 中的一個(gè)變量并對(duì)其進(jìn)行處理：
struct Ball {
radius: f32;
position: vec2<f32>;
velocity: vec2<f32>;
}
@group(0) @binding(0)
var<storage, read> input: array<Ball>;
@group(0) @binding(1)
var<storage, write> output: array<Ball>;
let TIME_STEP: f32=0.016;
@stage(compute) @workgroup_size(64)
fn main(
@builtin(global_invocation_id)
global_id : vec3<u32>,
) {
let num_balls=arrayLength(&output);
if(global_id.x >=num_balls) {
return;
}
output[global_id.x].position=input[global_id.x].position +
input[global_id.x].velocity * TIME_STEP;
}我希望這個(gè)著色器代碼的絕大部分在這一點(diǎn)上不會(huì)讓你感到意外。
每一幀更新球的位置并使用 Canvas2D 繪制到屏幕上
最后，我們需要做的就是將output緩沖區(qū)讀回 JavaScript，編寫一些 Canvas2D 代碼來可視化緩沖區(qū)的內(nèi)容并將其全部放入requestAnimationFrame()循環(huán)中。你可以看到這個(gè)演示的結(jié)果。
上一個(gè)演示只是沿著它們的速度矢量移動(dòng)每個(gè)球。不完全令人興奮或計(jì)算復(fù)雜。在我們查看我們的創(chuàng)作的性能特征之前，讓我在著色器中放入一些適當(dāng)?shù)奈锢碛?jì)算。我不會(huì)在這里解釋它們——博客文章已經(jīng)足夠長(zhǎng)了——但我會(huì)說我采取了最幼稚的方法：每個(gè)球都檢查與其他球的碰撞。如果你好奇，你可以看看最終演示的源代碼，其中還包含指向我用來編寫物理-y 位的資源的鏈接。
...現(xiàn)在有彈性墻壁和彈性球！
我不想對(duì)這個(gè)實(shí)驗(yàn)進(jìn)行任何精確的測(cè)量，因?yàn)槲覜]有優(yōu)化物理算法，也沒有優(yōu)化我對(duì) WebGPU 的使用。然而，即使是這種幼稚的實(shí)現(xiàn)也表現(xiàn)得非常好（在我的 M1 MacBook Air 上）這一事實(shí)給我留下了深刻的印象。在我們降到 60fps 以下之前，我可以去大約 2500 個(gè)球。但是，查看軌跡，很明顯，在 2500 個(gè)球時(shí)，瓶頸是 Canvas2D 嘗試?yán)L制場(chǎng)景，而不是 WebGPU 計(jì)算。
在 14000 個(gè)球上，原始 GPU 計(jì)算時(shí)間在 M1 MBA 上達(dá)到約 16 毫秒
為了看看這到底有多快，我禁用了渲染，而是performance.measure()在用盡 16 毫秒的幀預(yù)算之前查看我可以模擬多少個(gè)球。這發(fā)生在我的機(jī)器上大約 14000 個(gè)球。這種未經(jīng)優(yōu)化的快速運(yùn)行真的讓我陶醉于 WebGPU 讓我訪問的計(jì)算能力。
WebGPU 已經(jīng)開發(fā)了一段時(shí)間，我認(rèn)為標(biāo)準(zhǔn)組渴望將 API 聲明為穩(wěn)定的。話雖如此，該 API 僅在 Chrome 和 Firefox 中可用。我對(duì) Safari 提供此 API 持樂觀態(tài)度，但在撰寫本文時(shí)，Safari TP 中還沒有什么可看的。
在穩(wěn)定性方面，即使在我為本文進(jìn)行研究時(shí)，也發(fā)生了一些變化。例如，屬性的語法從 更改[[stage(compute), workgroup_size(64)]]為@stage(compute) @workgroup_size(64)。在撰寫本文時(shí)，F(xiàn)irefox 仍在使用舊語法。passEncoder.end()曾經(jīng)是passEncoder.endPass()。規(guī)范中還有一些內(nèi)容尚未在任何瀏覽器中實(shí)現(xiàn)，例如著色器常量或移動(dòng)設(shè)備上可用的 API。
基本上我想說的是：當(dāng)瀏覽器和標(biāo)準(zhǔn)人員處于這個(gè) API 的 ?stable? 之旅的最后階段時(shí)，預(yù)計(jì)會(huì)發(fā)生更多的重大變化。
擁有一個(gè)現(xiàn)代 API 來與 Web 上的 GPU 對(duì)話將非常有趣。在投入時(shí)間克服最初的學(xué)習(xí)曲線之后，我真的覺得自己有能力使用 JavaScript 在 GPU 上運(yùn)行大規(guī)模并行工作負(fù)載。還有wgpu，它在 Rust 中實(shí)現(xiàn)了 WebGPU API，允許你在瀏覽器之外使用 API。wgpu 還支持將 WebAssembly 作為編譯目標(biāo)，因此可以在瀏覽器外部和通過 WebAssembly 在瀏覽器內(nèi)部本地運(yùn)行 WebGPU 程序。有趣的事實(shí)：Deno是第一個(gè)開箱即用也支持 WebGPU 的運(yùn)行時(shí)（感謝 wgpu）。
原文鏈接：http://www.bimant.com/blog/webgpu-deep-dive/
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
