[{"data":1,"prerenderedAt":701},["ShallowReactive",2],{"navigation_docs":3,"-web-dev-graphics-webgl":352,"-web-dev-graphics-webgl-surround":696},[4,54,83,116,125,161,179,200],{"title":5,"path":6,"stem":7,"children":8},"Ai","/ai","ai",[9,12,42,46,50],{"title":10,"path":6,"stem":11},"AI 技術探索","ai/index",{"title":13,"path":14,"stem":15,"children":16,"page":41},"Rag","/ai/rag","ai/RAG",[17,21,25,29,33,37],{"title":18,"path":19,"stem":20},"BM25 演算法深入解析：從 TF-IDF 到現代搜尋引擎的核心技術","/ai/rag/bm25-deep-dive-from-tf-idf-to-rag","ai/RAG/bm25-deep-dive-from-tf-idf-to-rag",{"title":22,"path":23,"stem":24},"Dense Retrieval（向量檢索）深入解析","/ai/rag/dense-retrieval-deep-dive","ai/RAG/dense-retrieval-deep-dive",{"title":26,"path":27,"stem":28},"RAG（Retrieval-Augmented Generation）原理與實作入門","/ai/rag/rag-intro-principles-and-implementation","ai/RAG/rag-intro-principles-and-implementation",{"title":30,"path":31,"stem":32},"RAG Retrieval Strategy 深入解析","/ai/rag/rag-retrieval-strategy-deep-dive","ai/RAG/rag-retrieval-strategy-deep-dive",{"title":34,"path":35,"stem":36},"Reciprocal Rank Fusion（RRF）教學：打造更穩定的檢索融合策略","/ai/rag/rrf-reciprocal-rank-fusion-guide","ai/RAG/rrf-reciprocal-rank-fusion-guide",{"title":38,"path":39,"stem":40},"TF-IDF（Term Frequency–Inverse Document Frequency）深入解析","/ai/rag/tf-idf-deep-dive","ai/RAG/tf-idf-deep-dive",false,{"title":43,"path":44,"stem":45},"Docus AI 功能完整實作指南","/ai/docus-ai-implementation","ai/docus-ai-implementation",{"title":47,"path":48,"stem":49},"llms.txt 是什麼？在 Nuxt 中控制 AI 與搜尋引擎爬蟲的新方式","/ai/llms-txt","ai/llms-txt",{"title":51,"path":52,"stem":53},"MCP（Model Context Protocol）是什麼？用「AI 的 USB-C」理解模型如何安全連接工具與資料","/ai/mcp_concept","ai/mcp_concept",{"title":55,"path":56,"stem":57,"children":58,"page":41},"Data Analysis","/data-analysis","data-analysis",[59,63,67,71,75,79],{"title":60,"path":61,"stem":62},"Exploratory Data Analysis（EDA）資料探索分析入門","/data-analysis/exploratory-data-analysis-eda","data-analysis/exploratory-data-analysis-eda",{"title":64,"path":65,"stem":66},"PR-AUC 深入解析：不平衡分類問題的重要評估指標","/data-analysis/pr-auc-for-imbalanced-classification","data-analysis/pr-auc-for-imbalanced-classification",{"title":68,"path":69,"stem":70},"ROC-AUC 深入解析：理解分類模型的判斷能力","/data-analysis/roc-auc-complete-guide","data-analysis/roc-auc-complete-guide",{"title":72,"path":73,"stem":74},"SHAP（SHapley Additive exPlanations）模型解釋方法深入解析","/data-analysis/shap-model-interpretation-complete-guide","data-analysis/shap-model-interpretation-complete-guide",{"title":76,"path":77,"stem":78},"Social Network Analysis（SNA）深入解析","/data-analysis/social-network-analysis-sna","data-analysis/social-network-analysis-sna",{"title":80,"path":81,"stem":82},"Time-based Split：為什麼時間序列資料不能使用 Random Split？","/data-analysis/time-based-split-vs-random-split","data-analysis/time-based-split-vs-random-split",{"title":84,"path":85,"stem":86,"children":87,"page":41},"MachineLearning","/machine_learning","machine_learning",[88,92,96,100,104,108,112],{"title":89,"path":90,"stem":91},"Confusion Matrix（混淆矩陣）完整解析","/machine_learning/confusion-matrix","machine_learning/confusion-matrix",{"title":93,"path":94,"stem":95},"Decision Tree 模型完整教學：從原理到 Python 實作","/machine_learning/decision-tree-complete-guide","machine_learning/decision-tree-complete-guide",{"title":97,"path":98,"stem":99},"為什麼 Decision Tree 在 Tabular Data 上常常勝過 Deep Learning？","/machine_learning/decision-tree-vs-deep-learning-on-tabular-data","machine_learning/decision-tree-vs-deep-learning-on-tabular-data",{"title":101,"path":102,"stem":103},"LightGBM 模型入門：理解高效能的 Gradient Boosting 演算法","/machine_learning/lightgbm-intro-for-tabular-data","machine_learning/lightgbm-intro-for-tabular-data",{"title":105,"path":106,"stem":107},"Logistic Regression（Logit 回歸）完整教學","/machine_learning/logistic-regression-complete-guide","machine_learning/logistic-regression-complete-guide",{"title":109,"path":110,"stem":111},"為什麼模型訓練需要 Train / Validation / Test Dataset？","/machine_learning/train-validation-test-dataset","machine_learning/train-validation-test-dataset",{"title":113,"path":114,"stem":115},"XGBoost 原理與實務教學","/machine_learning/xgboost-complete-guide","machine_learning/xgboost-complete-guide",{"title":117,"path":118,"stem":119,"children":120,"page":41},"Network","/network","network",[121],{"title":122,"path":123,"stem":124},"DNS 設定入門：CNAME vs A Record 完整解析","/network/dns-cname-vs-a-record-guide","network/dns-cname-vs-a-record-guide",{"title":126,"path":127,"stem":128,"children":129},"Nuxt","/nuxt","nuxt",[130,133,137,141,145,149,153,157],{"title":131,"path":127,"stem":132},"Nuxt 實戰指南","nuxt/index",{"title":134,"path":135,"stem":136},"Abstraction Layer 與 Adapter 的差別，一次搞懂設計角色","/nuxt/adapter_abstraction_layer","nuxt/adapter_abstraction_layer",{"title":138,"path":139,"stem":140},"Nuxt 4 全面理解 — 專案檔案結構解析","/nuxt/directory_structure","nuxt/directory_structure",{"title":142,"path":143,"stem":144},"Nuxt 前端 build 流程完整解析","/nuxt/frontend_build","nuxt/frontend_build",{"title":146,"path":147,"stem":148},"Nitro 是什麼？從 Nuxt 專案到 Server 與 Edge 的關鍵引擎","/nuxt/nitro","nuxt/nitro",{"title":150,"path":151,"stem":152},"深入理解 Nuxt 的 .nuxt 與 .output：為什麼部署時一定要分清楚？","/nuxt/nuxt_and_output","nuxt/nuxt_and_output",{"title":154,"path":155,"stem":156},"Nuxt 中 dev、build、preview 的差異一次搞懂","/nuxt/nuxt_dev_build_preview","nuxt/nuxt_dev_build_preview",{"title":158,"path":159,"stem":160},"Nuxt Image vs \u003Cimg>：為什麼 Nuxt 3 專案幾乎都該用 \u003CNuxtImg>？","/nuxt/nuxt_image","nuxt/nuxt_image",{"title":162,"path":163,"stem":164,"children":165},"Python 程式開發","/python","python/index",[166,167,171,175],{"title":162,"path":163,"stem":164},{"title":168,"path":169,"stem":170},"如何在 FastAPI 中調用記憶體 Buffer 回傳圖片 (附實例)","/python/memory_buffer","python/memory_buffer",{"title":172,"path":173,"stem":174},"Python 單元測試教學：如何為你的程式撰寫 Test","/python/python-unit-testing-unittest-pytest","python/python-unit-testing-unittest-pytest",{"title":176,"path":177,"stem":178},"如何使用 uv 取代 pip：改善 Python 專案的開發流程","/python/uv","python/uv",{"title":180,"path":181,"stem":182,"children":183,"page":41},"Statistic","/statistic","statistic",[184,188,192,196],{"title":185,"path":186,"stem":187},"卡方檢定（Chi-Square Test）入門教學","/statistic/chi-square-test-intro","statistic/chi-square-test-intro",{"title":189,"path":190,"stem":191},"常見抽樣方法（Sampling Methods）教學：Stratified、Quota、Convenience、Systematic、Simple Random","/statistic/common-sampling-methods-guide","statistic/common-sampling-methods-guide",{"title":193,"path":194,"stem":195},"Cramér’s V 指標介紹：如何衡量兩個類別變數之間的關聯","/statistic/cramers-v-for-categorical-association","statistic/cramers-v-for-categorical-association",{"title":197,"path":198,"stem":199},"Mann–Whitney U 與 Kolmogorov–Smirnov（KS）檢定：非參數統計檢定的入門指南","/statistic/mann-whitney-u-and-ks-test-intro","statistic/mann-whitney-u-and-ks-test-intro",{"title":201,"path":202,"stem":203,"children":204},"WebDev","/web_dev","web_dev",[205,208,234,248,282,312,334],{"title":206,"path":202,"stem":207},"Web 前端開發","web_dev/index",{"title":209,"path":210,"stem":211,"children":212},"瀏覽器與渲染","/web_dev/browser","web_dev/browser/index",[213,214,218,222,226,230],{"title":209,"path":210,"stem":211},{"title":215,"path":216,"stem":217},"瀏覽器儲存空間完整解析：Cookie、localStorage、IndexedDB 到 Cache Storage","/web_dev/browser/browser-storage-comprehensive-guide","web_dev/browser/browser-storage-comprehensive-guide",{"title":219,"path":220,"stem":221},"DOM (Document Object Model) 深入解析","/web_dev/browser/dom","web_dev/browser/dom",{"title":223,"path":224,"stem":225},"Service Worker Request Flow 深入解析","/web_dev/browser/service-worker-request-flow","web_dev/browser/service-worker-request-flow",{"title":227,"path":228,"stem":229},"CSR、SSR 與 SSG 是什麼？前端渲染策略完整比較","/web_dev/browser/ssr_csr_ssg","web_dev/browser/ssr_csr_ssg",{"title":231,"path":232,"stem":233},"Virtual DOM 深入解析：為什麼它能優化前端效能？","/web_dev/browser/virtual_dom","web_dev/browser/virtual_dom",{"title":235,"path":236,"stem":237,"children":238},"圖形技術","/web_dev/graphics","web_dev/graphics/index",[239,240,244],{"title":235,"path":236,"stem":237},{"title":241,"path":242,"stem":243},"為什麼 Three.js 專案幾乎都選擇 CSR？從 SSR 問題談起","/web_dev/graphics/threejs_csr","web_dev/graphics/threejs_csr",{"title":245,"path":246,"stem":247},"WebGL 是什麼？為什麼前端 3D 幾乎都靠它？","/web_dev/graphics/webgl","web_dev/graphics/webGL",{"title":249,"path":250,"stem":251,"children":252},"架構與配置","/web_dev/infrastructure","web_dev/infrastructure/index",[253,254,258,262,266,270,274,278],{"title":249,"path":250,"stem":251},{"title":255,"path":256,"stem":257},"Zeabur + K3s + Nuxt 部署架構完整解析","/web_dev/infrastructure/k3s-zeabur","web_dev/infrastructure/K3s-zeabur",{"title":259,"path":260,"stem":261},"ECS vs Docker vs Kubernetes：從部署堆疊理解三層架構","/web_dev/infrastructure/ecs-docker-kubernetes-stack","web_dev/infrastructure/ecs-docker-kubernetes-stack",{"title":263,"path":264,"stem":265},"ECS vs VPS 是什麼？從部署網站的角度一次搞懂差別","/web_dev/infrastructure/ecs-vs-vps","web_dev/infrastructure/ecs-vs-vps",{"title":267,"path":268,"stem":269},"Zeabur 內網服務連線完整入門指南","/web_dev/infrastructure/k3s-internal-networking","web_dev/infrastructure/k3s-internal-networking",{"title":271,"path":272,"stem":273},"使用 Microservices 架構設計系統的優勢解析","/web_dev/infrastructure/microservices-architecture-advantages","web_dev/infrastructure/microservices-architecture-advantages",{"title":275,"path":276,"stem":277},"Nginx 入門教學：從反向代理到與 Kubernetes 的架構比較","/web_dev/infrastructure/nginx-intro","web_dev/infrastructure/nginx-intro",{"title":279,"path":280,"stem":281},"YAML 配置是什麼？為什麼現代開發都在用它","/web_dev/infrastructure/yaml-configuration","web_dev/infrastructure/yaml-configuration",{"title":283,"path":284,"stem":285,"children":286},"網絡與通訊","/web_dev/network","web_dev/network/index",[287,288,292,296,300,304,308],{"title":283,"path":284,"stem":285},{"title":289,"path":290,"stem":291},"HTTP Request 結構完整解析：從 Request Line 到 Header 一次看懂","/web_dev/network/http-request-structure","web_dev/network/http-request-structure",{"title":293,"path":294,"stem":295},"OSI 模型（Open Systems Interconnection Model）完整解析","/web_dev/network/osi-model","web_dev/network/osi-model",{"title":297,"path":298,"stem":299},"RESTful API 設計原則與實務解析","/web_dev/network/restful-api","web_dev/network/restful-api",{"title":301,"path":302,"stem":303},"RESTful API 五大設計原則深入解析","/web_dev/network/restful-api-principles","web_dev/network/restful-api-principles",{"title":305,"path":306,"stem":307},"Server-Sent Events (SSE) 深入解析與實作教學","/web_dev/network/sse-introduction","web_dev/network/sse-introduction",{"title":309,"path":310,"stem":311},"WebSocket 入門教學：從概念到 Node.js 實作","/web_dev/network/websocket-introduction","web_dev/network/websocket-introduction",{"title":313,"path":314,"stem":315,"children":316},"認證與安全","/web_dev/security","web_dev/security/index",[317,318,322,326,330],{"title":313,"path":314,"stem":315},{"title":319,"path":320,"stem":321},"使用 Cookie 與 Session 建立使用者驗證（完整新手教學）","/web_dev/security/cookie-session-authentication","web_dev/security/cookie-session-authentication",{"title":323,"path":324,"stem":325},"JWT 驗證機制完整解析：從登入流程到實務應用","/web_dev/security/jwt-authentication","web_dev/security/jwt-authentication",{"title":327,"path":328,"stem":329},"Secret Key 簽名是什麼？從零理解資料簽名的本質","/web_dev/security/secret-key-signing","web_dev/security/secret-key-signing",{"title":331,"path":332,"stem":333},"SSH（Secure Shell）是什麼？從遠端登入到安全通道的核心概念","/web_dev/security/ssh","web_dev/security/ssh",{"title":335,"path":336,"stem":337,"children":338},"SEO 與規範","/web_dev/seo","web_dev/seo/index",[339,340,344,348],{"title":335,"path":336,"stem":337},{"title":341,"path":342,"stem":343},"Canonical URL 是什麼？用生活化方式搞懂前端 SEO 的基本保命符","/web_dev/seo/canonical_link","web_dev/seo/canonical_link",{"title":345,"path":346,"stem":347},"robots.txt 是什麼？SEO 的第一道守門員","/web_dev/seo/robot_txt","web_dev/seo/robot_txt",{"title":349,"path":350,"stem":351},"Nuxt SEO 中的 Meta 與 SEO 工具是如何運作的？","/web_dev/seo/seo","web_dev/seo/seo",{"id":353,"title":245,"body":354,"description":682,"extension":683,"links":684,"meta":685,"navigation":693,"path":246,"seo":694,"stem":247,"__hash__":695},"docs/web_dev/graphics/webGL.md",{"type":355,"value":356,"toc":669},"minimark",[357,362,366,372,380,388,391,394,398,401,404,407,410,412,416,419,438,445,448,460,463,465,469,475,478,483,486,503,506,513,515,519,522,525,539,542,545,547,551,554,560,563,566,580,583,585,589,592,595,598,600,603,606,612,614,617,667],[358,359,361],"h2",{"id":360},"從瀏覽器為什麼能跑-3d開始說起","從「瀏覽器為什麼能跑 3D」開始說起",[363,364,365],"p",{},"當你第一次看到瀏覽器裡可以直接顯示 3D 模型、即時光影、甚至像小型遊戲一樣的畫面時，直覺反應通常會是：",[367,368,369],"blockquote",{},[363,370,371],{},"「這不是應該要裝什麼外掛，或是用 Unity 才能做到的嗎？」",[363,373,374,375,379],{},"但事實上，這一切的核心技術只有一個：",[376,377,378],"strong",{},"WebGL","。",[363,381,382,383,387],{},"WebGL 是一套讓瀏覽器能夠直接使用顯示卡（GPU）進行繪圖的標準 API。只要使用者的瀏覽器支援 WebGL，就可以在「不安裝任何外掛」的情況下，直接在 ",[384,385,386],"code",{},"\u003Ccanvas>"," 裡畫出高效能的 2D / 3D 圖形。",[363,389,390],{},"這也是為什麼現在越來越多互動式網站、資料視覺化、3D 展示頁，會選擇直接在 Web 上完成，而不是另外做成獨立應用程式。",[392,393],"hr",{},[358,395,397],{"id":396},"webgl-到底在做什麼","WebGL 到底在做什麼？",[363,399,400],{},"從技術層面來看，WebGL 是 JavaScript 與 GPU 之間的一座橋樑。",[363,402,403],{},"當你用 JavaScript 呼叫 WebGL API 時，實際上是在告訴瀏覽器：「請把這些頂點資料、顏色、貼圖，交給顯示卡去計算，然後把結果畫在畫布上。」",[363,405,406],{},"這和一般用 DOM 操作畫面是完全不同的概念。\nDOM 操作是「改變元素 → 重新排版 → 重繪」，而 WebGL 則是「資料丟給 GPU → 並行計算 → 直接輸出畫面」。",[363,408,409],{},"也正因為如此，WebGL 非常適合處理大量幾何計算與即時渲染的場景。",[392,411],{},[358,413,415],{"id":414},"為什麼很少人直接寫-webgl","為什麼很少人「直接寫 WebGL」？",[363,417,418],{},"如果你曾經打開過 WebGL 的官方教學，大概很快就會遇到以下名詞：",[420,421,422,426,429,432,435],"ul",{},[423,424,425],"li",{},"Vertex Shader",[423,427,428],{},"Fragment Shader",[423,430,431],{},"GLSL",[423,433,434],{},"Buffer、Attribute、Uniform",[423,436,437],{},"Projection Matrix、View Matrix",[363,439,440,441,444],{},"這些概念本身並沒有錯，但問題在於：\n",[376,442,443],{},"它們幾乎完全是「顯示卡工程師的語言」","，而不是一般前端工程師熟悉的抽象層級。",[363,446,447],{},"即便只是想畫一個「會旋轉的立方體」，用原生 WebGL 也往往需要：",[449,450,451,454,457],"ol",{},[423,452,453],{},"自己撰寫 shader 程式碼",[423,455,456],{},"手動處理相機投影與矩陣運算",[423,458,459],{},"自行管理物件的幾何資料與生命週期",[363,461,462],{},"對大多數開發者來說，這樣的學習成本過高，也不符合實務開發的效率需求。",[392,464],{},[358,466,468],{"id":467},"threejs-出現的真正意義","Three.js 出現的真正意義",[363,470,471,472,379],{},"Three.js 並不是取代 WebGL，而是",[376,473,474],{},"建立在 WebGL 之上的高階抽象層",[363,476,477],{},"你可以把它理解成：",[367,479,480],{},[363,481,482],{},"「Three.js = 幫你把 WebGL 那一整套底層流程包裝成好理解的物件模型」",[363,484,485],{},"在 Three.js 中，你不再需要直接操作 shader 或 buffer，而是改用更直覺的概念：",[420,487,488,491,494,497,500],{},[423,489,490],{},"Scene：整個 3D 世界",[423,492,493],{},"Camera：觀看這個世界的視角",[423,495,496],{},"Mesh：畫面中的物體",[423,498,499],{},"Geometry + Material：物體的形狀與外觀",[423,501,502],{},"Renderer：負責把場景畫出來",[363,504,505],{},"底層依然是 WebGL，但開發者不需要再碰那些繁瑣的細節。",[363,507,508],{},[509,510],"img",{"alt":511,"src":512},"Image","https://giridhar7632.github.io/Three.js/assests/04-scenegraph.png",[392,514],{},[358,516,518],{"id":517},"threejs-是怎麼利用-webgl的","Three.js 是怎麼「利用 WebGL」的？",[363,520,521],{},"從實際流程來看，Three.js 在背後幫你做了幾件非常重要的事：",[363,523,524],{},"第一，它自動建立並管理 WebGL context。\n你只需要告訴它「畫到哪個 canvas」，剩下的初始化流程都由它完成。",[363,526,527,528,531,532,531,535,538],{},"第二，它將常見的數學與圖形概念封裝成物件。\n你操作的是 ",[384,529,530],{},"Vector3","、",[384,533,534],{},"PerspectiveCamera",[384,536,537],{},"Mesh","，而不是一堆低階數值與矩陣。",[363,540,541],{},"第三，它在 render loop 中，負責把場景狀態轉換成 GPU 能理解的指令。\n你只需要更新物件的位置或旋轉，Three.js 會自動幫你同步到 WebGL。",[363,543,544],{},"這讓前端工程師可以專注在「場景邏輯與互動設計」，而不是「顯示卡溝通細節」。",[392,546],{},[358,548,550],{"id":549},"那我還需要懂-webgl-嗎","那我還需要懂 WebGL 嗎？",[363,552,553],{},"這是一個很常見、也很實際的問題。",[363,555,556,557],{},"答案是：",[376,558,559],{},"不需要一開始就懂，但懂一點會讓你走得更遠。",[363,561,562],{},"在使用 Three.js 的初期，你完全可以把 WebGL 當成黑盒子，只要理解 Three.js 的 API 與概念，就能做出非常完整的作品。",[363,564,565],{},"但當你開始遇到以下情境時，WebGL 的基礎知識就會變得非常有幫助：",[420,567,568,571,574,577],{},[423,569,570],{},"效能瓶頸分析",[423,572,573],{},"自訂 shader（例如特殊光影或視覺效果）",[423,575,576],{},"理解為什麼某些效果在行動裝置上特別吃效能",[423,578,579],{},"Debug 渲染異常或黑畫面問題",[363,581,582],{},"這時候，你會發現 Three.js 並不是魔法，而是一層你「可以往下理解」的工具。",[392,584],{},[358,586,588],{"id":587},"webglthreejs-與現代前端的關係","WebGL、Three.js 與現代前端的關係",[363,590,591],{},"在現代前端生態中，WebGL 扮演的是「底層圖形引擎」的角色，而 Three.js 則是讓這個引擎真正被大量開發者使用的關鍵。",[363,593,594],{},"你可以在 Vue、Nuxt、React 這類框架中，把 Three.js 當成一個純 client-side 的渲染層，負責處理所有 3D 與動畫，而框架本身則專注在資料流與 UI 結構。",[363,596,597],{},"這種分工模式，也正是現在多數互動式 3D 網站的實際做法。",[392,599],{},[358,601,602],{"id":602},"結論",[363,604,605],{},"WebGL 是瀏覽器中負責高效能繪圖的核心技術，但它的使用門檻相對較高。Three.js 則透過良好的抽象設計，讓前端工程師可以用更直覺的方式，站在 WebGL 之上建立 3D 世界。",[363,607,608,609],{},"理解這層關係，會讓你在學 Three.js 時不再只是「照範例貼」，而是清楚知道：\n",[376,610,611],{},"你操作的每一個物件，最後都是交由 WebGL 與 GPU 去完成畫面的。",[392,613],{},[358,615,616],{"id":616},"參考資料",[449,618,619,631,640,649,658],{},[423,620,621,622,625],{},"Khronos Group, WebGL Overview",[623,624],"br",{},[626,627,628],"a",{"href":628,"rel":629},"https://www.khronos.org/webgl/",[630],"nofollow",[423,632,633,634,636],{},"MDN Web Docs, WebGL API",[623,635],{},[626,637,638],{"href":638,"rel":639},"https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API",[630],[423,641,642,643,645],{},"Three.js Documentation",[623,644],{},[626,646,647],{"href":647,"rel":648},"https://threejs.org/docs/",[630],[423,650,651,652,654],{},"Three.js Examples",[623,653],{},[626,655,656],{"href":656,"rel":657},"https://threejs.org/examples/",[630],[423,659,660,661,663],{},"WebGL Fundamentals",[623,662],{},[626,664,665],{"href":665,"rel":666},"https://webglfundamentals.org/",[630],[392,668],{},{"title":670,"searchDepth":671,"depth":671,"links":672},"",2,[673,674,675,676,677,678,679,680,681],{"id":360,"depth":671,"text":361},{"id":396,"depth":671,"text":397},{"id":414,"depth":671,"text":415},{"id":467,"depth":671,"text":468},{"id":517,"depth":671,"text":518},{"id":549,"depth":671,"text":550},{"id":587,"depth":671,"text":588},{"id":602,"depth":671,"text":602},{"id":616,"depth":671,"text":616},"從新手角度理解 WebGL 的角色，以及 Three.js 如何站在 WebGL 之上，讓前端也能輕鬆開發 3D 圖形與互動場景。","md",null,{"tags":686,"category":203,"date":692},[687,688,689,690,691],"webgl","threejs","javascript","frontend","3d","2026-02-04",true,{"title":245,"description":682},"M6pcTCHvR9MJWOofxdJ9z8GKzFpQrIRaNXgdIZMpihI",[697,699],{"title":241,"path":242,"stem":243,"description":698,"children":-1},"從 Three.js 的運作原理出發，說明為什麼高度互動、基於 Canvas/WebGL 的應用不適合 SSR，以及為何純 CSR 或 client-only 會是更合理的選擇。",{"title":249,"path":250,"stem":251,"description":700,"children":-1},"涵蓋 Docker, Kubernetes (EKS/ECS) 等容器化架構技術，以及 YAML 配置管理。",1776690846052]