不用安裝軟體也能用網頁測顯卡？WebGL 水族館用瀏覽器養魚

任何人只要有瀏覽器，就能進入WebGL 3D 水族館. 一開始要先正名一下。

與其說是測顯示卡，「測試瀏覽器的GPU 操作能力及能使用的GPU 效能 ... 登入 註冊 新聞評測處理器主機板顯示卡記憶體儲存機殼/電源網通電腦/周邊遊戲/電競活動專區業界動態 零組件儲存網通電腦/周邊遊戲/電競軟體技術研究 關於電腦王| 隱私權政策 著作權聲明| 廣告合作 ADVERTISEMENT 說到測顯示卡效能，大家第一個想到的一定是3DMark或是跑遊戲。

其實現在測顯示卡也可以不用裝軟體，只要有瀏覽器，不管在任何平台幾乎都能透過WebGL來顯示2D及3D圖像，或者是用它來運行遊戲。

最近在手機的測試上，就很流行「你的手機能養幾條魚」，透過虛擬的3D水族館來看看瀏覽器運行WebGL的效能是如何。

任何人只要有瀏覽器，就能進入WebGL3D水族館 一開始要先正名一下。

與其說是測顯示卡，「測試瀏覽器的GPU操作能力及能使用的GPU效能」會來得更精準一些。

怎麼個測法呢？websamples.org這個網頁提供了不少範例可以直接在瀏覽器上執行，「Aquarium」就是網頁中的一個項目，它甚至可以「跨螢幕、跨機器」建立起一個3D水族館，讓你決定要開啟或關閉哪些光影特效，以及最重要的：要養幾條魚，來看看電腦的整體效能是否能有效承載。

如果有好幾台投影機跟顯示屏幕，甚至還能營造一個以假亂真的大水池，讓人以為自己置身在海生館呢！ 測試的方式也很簡單，打開網頁，預設會填滿一個1024x1024像素的畫面，畫面中就是一個養滿500條魚的大水族箱。

你可以切換不同的視角，從水族箱的內外看魚，或者是置身於魚群裡看魚，調整魚群的速度及隻數等，看看對硬體的效能會產生什麼波動。

  ▲這是在水族箱外看魚群，比較沒有那麼震憾。

▲拉近看的話，有密集恐懼症的人就要注意了。

▲更近一點看，還能看到魚群身上的紋理。

▲或是當個潛水伕，想像自己在水族箱裡打坐放空。

▲畫面左方可以調整光影及細項參數。

▲畫面右方則是調整物理特性，比如讓魚遊得跟快艇一樣快。

▲專案官網還有更詳細的設定說明，比如魚的數量、解析度等。

中低階顯示卡小心了，有可能會跑不動 別以為透過網頁來顯示的3D畫面吃不了多少GPU效能。

利用NVIDIAGeForceRTX308010GB來測試，養20,000隻魚時還能有60fps的表現，25,000隻會變成只有50fps，30,000隻則剩下40fps，更狠一點調高到100,000隻時，fps甚至會掉到個位數。

只是，此測試仍有其限制。

打開工作管理員觀看，GPU的使用率頂多吃到40%，不管網頁裡的數值再怎麼調，fps再怎麼降，就是這個數字。

不論它有沒有辦法優化、或是透過其它作法把GPU吃滿，至少都能呈現相關應用對於GPU的控制能力。

不少App其實也是以網頁為基底，這會是一個有效的、評估圖形或遊戲在瀏覽器中顯示效能的作法。

畢竟愈來愈多的應用或遊戲都是直接透過瀏覽器執行，這種作法的效能需要不斷地被優化，包括開發的方式，WebGL就扮演著很重要的角色。

▲webglsamples.org還有不少範例可玩，大多都是3D互動介面。

什麼是WebGL？ 要讓電腦繪製2D或3D圖形，尤其是透過GPU硬體加速，OpenGL與DirectX是最常見的兩種框架，不少遊戲或應用軟體都是利用這些框架來顯示畫面，在影像輸出層面繪製圖形。

DirectX是微軟出品，對自家的Windows當然是最友善，至於Linux及MacOS、手機應用環境，則大多會透過OpenGL來達成。

就像Windows通常會自帶DirectX最基本的函式庫，其它作業系統出廠時也會內建OpenGL的支援，來當作繪製畫面的基準。

（當然了，Windows也能使用OpenGL） 透過本機端的應用程式或手機上的App，要呼叫OpenGL來繪圖很方便，OpenGL可以跟GPU直接溝通，所以很輕鬆的就能發揮GPU的原生效能。

換作是網頁的話，在十幾年前WebGL還沒問世時就麻煩得多。

WebGL是一個JavascriptAPI，不必透過任何外掛就能在現今主流的瀏覽器上與GPU溝通，利用Javascript與OpenGL自己的語法繪製2D或3D圖形，而且還帶有互動能力。

只要是對網頁編寫有點概念的玩家，應該就清楚用Javascript就能畫出3D物件是一件有多麼酷的事。

事實上，不少開發者也提供了一些經過整合的Javascript函式庫，比如three.js等，把這件事的門檻再行降低，自己甚至不必寫幾行程式就能繪製出3D物件，非常方便。

▲three.js用WebGL實現3D文字的應用，你也可以自己試試。

跟外掛比差在哪？ 要在網頁上顯示3D圖形、尤其是動態的3D互動圖形有不少作法，透過不同的外掛，可以實現的複雜程度也不一。

然而，除非是為了顯示特殊格式，不然裝外掛的作法會愈來愈少見，一來容易影響瀏覽器效能及穩定性，二來會增加解決方案的開發難度，三來要這麼做不如用獨立App來處理就好了，何必徒增麻煩。

現在是2021年，網頁的開發及應用早就已經從二十年前的「有外掛好厲害」演化成了盡可能標準化、跨平台化，不然很容易失去其它應用裝置及作業系統的市場，而且二十年前大多數人都還是用IE加Windows上網，如今已不可同日而語。

WebGL在某種層面上也得益於HTML5的普及，幾大瀏覽器裡面，IE11是最晚支援的，而這已經是2014年的事兒。

現在網頁前端的設計愈來愈花俏，處理器的顯示核心也愈來愈強，有朝一日3D網頁取代2D成為市場新寵也不會讓人意外，以後瀏覽網站可能要靠三維的方向鍵，而非單純上下或左右捲動了。

這概念絕對不會是天方夜譚，疫情之下不少實體展覽或商業活動被迫取消，開發出比傳統VR更平易近人的內容呈現作法只是指日可待。

標籤：電腦王,趨勢 使用Facebook留言 謹慎發言，尊重彼此。

按此展開留言規則 留言板發文規則： 請注意！留言要自負法律責任，相關案例層出不窮，請慎重發文！ 請勿一文多貼灌水洗板或發表無意義字串，違者直接刪除留言。

請勿張貼廣告，不允許任何形式的商業廣告行為，包含頭像、簽名檔等。

禁止發表非官方所舉辦的團購性質活動，違者直接刪除留言。

發言時請勿涉及人身攻擊、侮辱、色情或其他有違社會善良風俗之內容，違者直接刪除留言。

嚴禁發表討論破解軟體、註冊碼、音樂、影片、軟體複製等違反智慧財產權之留言。

請尊重他人之文章著作權，轉載者請標明來源。

1 2奈米晶片研發遭遇瓶頸，沒ASML下一代NAEUV曝光機搞不定、但價格也是天價 2 用自製硬體在90秒內解鎖特斯拉汽車的駭客，這回花25元美金就駭掉馬斯克的星鏈終端 3 AR隱形眼鏡正式開啟人體佩戴測試，價格約一部高階智慧型手機 4 RTX40兩個月後降臨，那麼RTX30還值得買嗎？ 5 一行程式碼讓Intel顯示卡光線追蹤性能大幅提升「100倍」？ 6 電動汽車真的夠「綠色」嗎？拆解特斯拉看看 7 CrossHubTB4PowerDockingStation提供16組擴充端子與固態硬碟，還內建狀態小螢幕 8 AAEON推出EPIC-TGH7迷你單板電腦，最高可選Xeon處理器 9 MINISFORUM推出TH60、TH80迷你電腦，最高搭載Corei7-11800H處理器 10 曾為索尼PS4/PS5設計處理器狂虧數億，AMD如今賺翻了