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

文章推薦指數: 80 %
投票人數:10人

任何人只要有瀏覽器,就能進入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如今賺翻了



請為這篇文章評分?