Day04] 為什麼WebGL 的效能這麼強？ - iT 邦幫忙

所以，WebGL 是什麼？ 引述部分wiki: WebGL 程式由JavaScript 編寫的控制代碼和 OpenGL Shading Language（GLSL）編寫的著色器程式碼 ... 第11屆iThome鐵人賽 DAY 4 1 ModernWeb 寫給工程師的WebGL學習心得系列第 4篇 [WebGL-Day04]為什麼WebGL的效能這麼強？ 11th鐵人賽 angelliya00 2019-09-2019:05:514203瀏覽 「網頁用了WebGL技術，所以很快！」 嗯...所以WebGL是阿斯拉的加速器還是什麼呼吸法嗎? 所以，WebGL是什麼？ 引述部分wiki: WebGL程式由JavaScript編寫的控制代碼和 OpenGLShadingLanguage（GLSL）編寫的著色器程式碼組成 這段話敘述了兩件事： JavaScript控制 GLSL Shader是在GPU上跑的指令， 而WebGL讓開發者可以用JavaScript操作Shader 因此寫WebGL時，很多時候是寫GPU執行的指令 需要同時寫JavaScript與Shader 為什麼GPU處理的效果這麼驚豔？： 一個令我印象深刻的影片： MythbustersDemoGPUversusCPU CPU-dsignedforserialoperations 舉例來說，如果CPU是射速快的機關槍 GPU-dsignedforparalleloperations GPU相對來說就是射速慢，但彈丸數量相當多的霰彈槍 GPUisaprocessingunitoracircuitspeciallydesignedfor fasterandefficientcomputergraphicsoperationimagemanipulation 引用自01-Whatisashader?(Shaderdev.com) 總之，GPU是用來運算影像的(CPU並不是喔!) GPU一次處理一整片啊... 所以，寫Shader時的思考邏輯幾乎完全不同 聽來是個大問號，我會在後文說明 有趣，但也是相當困難的部分 瀏覽器對WebGL的支援性： 目前大部分主流瀏覽器、手機瀏覽器對WebGL的支援性夠高 (在一些in-AppBrowser也可以瀏覽WebGL網頁) 約略2012~2013年附近，熱烈討論HTML5 當時瀏覽器對canvas標籤的支援性不夠高 WebGL是在canvas上實現二維及三維渲染， 因此不支援canvas的瀏覽器也一定不支援WebGL 註：IE10可使用WebGL，但效果不是很好 幾年前使用WebGL技術的網頁，最多會有三種頁面： WebGL畫面 不支援WebGL時，顯示canvas版畫面 不支援WebGL與canvas時的畫面 GPU一定比CPU快嗎? 不一定，由於CPU與GPU的設計方式不同 少量矩陣運算時，GPU耗時高於CPU 大量矩陣運算時，CPU耗時遠高於GPU 另一個討論WebGL的影片： WebGL+GPU=AmazingResults! 影片討論WebGL，稍微硬了一些 不知道讀到這後是覺得有趣還是想放棄呢? 總結本篇重點： WebGL是用JavaScript控制GLSL GLSL一次處理大量運算 留言3 追蹤 檢舉 上一篇 [WebGL-Day03]WebGL學習資源 下一篇 [WebGL-Day05]學習經驗1/2-有點不得其門而入的碰壁期 系列文 寫給工程師的WebGL學習心得 共30篇 目錄 RSS系列文 訂閱系列文 59人訂閱 26 [WebGL-Day26]DisplacementFilter(1/3)原理 27 [WebGL-Day27]DisplacementFilter(2/3)在Shadertoy上模擬與互動 28 [WebGL-Day28]DisplacementFilter(3/3)在PixiJS上完成互動 29 [WebGL-Day29]WebGL的一些討論 30 [WebGL-Day30]後記與完賽 完整目錄 3則留言 舊至新 新至舊 最高Like數 0 KingTzeng iT邦新手4級‧ 2019-09-2020:47:37 每天準時拜讀 PS:前輩後面好像打錯了"wegGL" 回應 1 檢舉 angelliya00 iT邦新手4級‧ 2019-09-2101:57:08 檢舉 感謝小幫手校正！ 直接改囉 感謝小幫手校正！ 直接改囉 修改 登入發表回應 0 lb01910483 iT邦新手5級‧ 2019-09-2021:37:16 少量矩陣運算時，GPU耗時低於CPU 這段是不是打反了 回應 1 檢舉 angelliya00 iT邦新手4級‧ 2019-09-2101:33:14 檢舉 對...Orz，我就直接改囉 感謝校正！ 對...Orz，我就直接改囉 感謝校正！ 修改 登入發表回應 0 阿展展展 iT邦好手1級‧ 2020-01-2900:19:26 霰彈槍XDDD 回應 1 檢舉 angelliya00 iT邦新手4級‧ 2020-02-0722:17:51 檢舉 看過就會記得很久XD 看過就會記得很久XD 修改 登入發表回應 我要留言 立即登入留言 iT邦幫忙鐵人賽 參賽組數 1087組 團體組數 52組 累計文章數 20447篇 完賽人數 572人 鐵人賽最新文章 淺談DevOps&Observability 以Ardiuno控制CPU散熱器呼吸燈 超深度鐵人賽後自我審視 建立表與表之間的關聯(Day28) 【Day?(31)】測試環境無法登入 使用程式來管理資料庫(DBMigrate)(Day27) Day31-遲來的鐵人賽心得 STM32CubeMX專案配置詳細教學，點亮LED 撰寫httprequest的複雜一點的測試(Day26) 2022/02/12更新 前往鐵人賽 技術推廣專區 [Day2]抓取每日收盤價 [Day1]基本工具安裝 利用python取得永豐銀行API的Nonce [Day03]tinyML開發板介紹 [Day01]在享受tinyML這道美食之前 永豐金融API測試員 [Day3]使用ta-lib製作指標 [Day4]函數打包與買進持有報酬率試算 計算API所需要的參數:HashID 計算API所需要的參數:IV 前往鐵人賽 熱門問題 抽獎程式怎麼都沒被告呢?? 將現有系統中心化架構改為去中心化 Windows10設定遠端多人多工要怎麼弄壓 請問怎麼把C:\Users\XXXXX使用者目錄移到D槽捏 手提電腦加入DOMAIN後,回家幾日後就不能LOGIN 加入網域後的筆電，登入問題。

關於UPS及停電大樓柴油緊急發電接法的問題 求各位大大幫我 關於Python與Excel Vmware4.0上的VM要轉移至Vmware7.0無法轉移 IT邦幫忙 熱門tag 看更多 13th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 windows python php windowsserver linux c# 資訊安全 程式設計 css vue.js sql mysql 熱門回答 請問怎麼把C:\Users\XXXXX使用者目錄移到D槽捏 抽獎程式怎麼都沒被告呢?? 將現有系統中心化架構改為去中心化 VBA只複製數字 Vue3+VueRouter如何在Composables中互相傳值? SQL2000升級SQL2008R2資料庫發生錯誤? 3combaseline2250plus交換器預設IP和初始連接 HPP4300G2系統重灌 O365SMTP寄發系統信件 工作管理員記錄程序cpu問題 熱門文章 計算機概論-網路通訊與網際網路Networkingandtheinternet(上) 【HTML】【CSS】如何處理inline-block元素之間的空白 DeepLink/DeferredDeepLink深度連結 ISO27001資訊安全管理系統【解析】(十二) Python入門Day6:#WhileTrue的用法 YouTube轉換為MP3 桌面端YouTube影片下載器-10款最佳 OpenProject安裝在ubuntu20.04LTS 【JavaScript】檢查Array陣列的各種方式 Apple音樂下載到電腦5個方法輕鬆做到【必學】 一週點數排行 更多點數排行 ㊣浩瀚星空㊣(yoching) 居然解出來了(partyyaya) raytracy(raytracy) 天黑(horace_work) 尼克(nickliao1) 海綿寶寶(antijava) Han(c0952199517) juck30808(juck30808) cloudeasy(cloudeasy) haward79(haward79) × At 輸入對方的帳號或暱稱 Loading 找不到結果。

標記 {{result.label}} {{result.account}} 關閉