# 監控方式-篡改猴 （Tampermonkey）
- [下載連結](https://www.tampermonkey.net/index.php?browser=edge)
- 找一個參考數值來量化
- 就由竄改猴安裝腳本來監控預覽的幀數
- https://greasyfork.org/zh-TW#google_vignette
- 下載網站找不到對應的腳本檢測工具
- CalderInspector
- 加載完好像應該要有這樣的面板
# 輕量化的方式
## FVS
- 反射倒影
- 數量，
- 模型:可以Join的還是Join起來
- 材質:可以Bake成貼圖
- LINK Data
- 好像真的可以減輕加載點面數的負擔
- 原本的模型
| STL | OBJ | GLB |
| ---- | --- | ---- |
| 64.5KB | 113KB | ==18.4KB== |

## 第一篇
[原文連結](https://www.linkedin.com/pulse/improving-web-performance-strategies-efficient-3d-bujes-garrido-zgfmf?trk=article-ssr-frontend-pulse_more-articles_related-content-card)
1. Optimized Geometry 🎨Efficient 3D rendering starts with optimized geometry. Minimize the number of vertices and triangles in your models to reduce computational overhead during rendering. Utilize techniques like mesh simplification, LOD (Level of Detail) management, mesh and texture compression to streamline geometry data.
優化的幾何體 🎨 高效的 3D 渲染從優化的幾何體開始。盡量減少模型中的頂點和三角形的數量，以減少渲染期間的計算開銷。==利用網格簡化、LOD（細節級別）管理、網格和紋理壓縮等技術來簡化幾何數據==。

2. GPU Acceleration 💻Harness the power of the GPU (Graphics Processing Unit) for rendering-intensive tasks. Leverage WebGL, a JavaScript API for rendering interactive 3D graphics within any compatible web browser, to offload rendering tasks to the GPU, enabling faster and smoother performance.
GPU 加速 💻 利用 GPU（圖形處理單元）的強大功能來執行渲染密集型任務。利用 WebGL（一種用於在任何相容的 Web 瀏覽器中渲染互動式 3D 圖形的 JavaScript API），將渲染任務卸載到 GPU，從而實現更快、更流暢的性能。
3. Batching and Instancing 📦Reduce draw calls by batching similar objects together and utilizing instancing techniques. Grouping objects with similar materials or properties allows for more efficient rendering by minimizing state changes and optimizing GPU usage.
批處理和實例化 📦 通過將相似物件批處理在一起並利用實例化技術來減少繪製調用。通過對具有相似材質或屬性的對象進行分組，可以最大限度地減少狀態更改並優化 GPU 使用率，從而實現更高效的渲染。
4. Texture Compression 🖼️Optimize texture assets by compressing them to reduce memory usage and bandwidth requirements. Utilize modern texture compression formats like ETC2, ASTC, and WebP to maintain visual quality while minimizing file size and improving loading times.
紋理壓縮 🖼️ 通過壓縮紋理資源來優化紋理資源，以減少記憶體使用量和頻寬要求。利用 ETC2、ASTC 和 WebP 等現代紋理壓縮格式來保持視覺品質，同時最大限度地減少檔大小並縮短載入時間。
5. Texture Atlasing and Sprite Sheets 🎨Combine multiple textures into texture atlases or sprite sheets to reduce the number of texture switches and improve rendering performance. Grouping textures together reduces memory overhead and optimizes GPU texture sampling.
紋理圖集和精靈工作表 🎨 將多個紋理組合到紋理圖集或精靈工作表中，以減少紋理切換次數並提高渲染性能。將紋理組合在一起可減少記憶體開銷並優化 GPU 紋理採樣。
6. Baking Lighting and Shadows ☀️🌑Implement lighting and shadow effects more efficiently by precomputing them offline and baking them into textures or lightmaps. By precalculating lighting and shadow information, you can reduce runtime computations and improve rendering performance, particularly in scenes with static lighting.
烘焙光照和陰影 通過離線預計算照明和陰影效果並將它們烘焙到紋理或光照貼圖中，更有效地實現光照和陰影☀️🌑效果。通過預先計算光照和陰影資訊，可以減少運行時計算並提高渲染性能，尤其是在具有靜態光照的場景中。
7. Asynchronous Loading ⏳Implement asynchronous loading techniques to improve perceived performance and minimize latency. Load 3D assets dynamically as needed, utilizing techniques like lazy loading, prefetching, and progressive asset loading to prioritize essential resources and enhance user experience.
異步載入 ⏳ 實施異步載入技術，以提高感知性能並最大程度地減少延遲。根據需要動態載入 3D 資產，利用延遲載入、預取和漸進式資產載入等技術來確定重要資源的優先順序並增強用戶體驗。
8. Progressive Loading 📶Implement progressive loading techniques to prioritize essential assets and render basic scenes quickly while gradually loading additional content in the background. Enhance user engagement by providing a seamless experience as assets load progressively.
漸進式載入 📶 實施漸進式載入技術，以優先處理基本資產並快速渲染基本場景，同時逐漸在後台載入其他內容。通過在資產逐步載入時提供無縫體驗來增強用戶參與度。
9. Level of Detail (LOD) Management 🔍Implement dynamic LOD systems to adjust the level of detail based on factors like distance from the camera or object importance. By dynamically reducing detail for distant objects, you can optimize rendering performance without sacrificing visual quality.
細節級別 （LOD） 管理 🔍 實施動態 LOD 系統，根據與攝像機的距離或物體重要性等因素調整細節級別。通過動態減少遠處對象的細節，可以在不犧牲視覺質量的情況下優化渲染性能。
10. Culling Techniques 🕵️Implement frustum culling and occlusion culling to eliminate rendering unnecessary objects outside the view frustum or occluded by other objects. By selectively rendering only visible objects, you can reduce GPU workload and improve overall performance.
剔除技術 🕵️ 實現視錐體剔除和遮擋剔除，以消除在視錐體之外或被其他物件遮擋的不必要物件。通過有選擇地僅渲染可見物件，可以減少 GPU 工作負載並提高整體性能。
11. Shader Optimization ✨Optimize shaders for efficiency by minimizing instruction counts, reducing texture lookups, and avoiding unnecessary computations. Profile and fine-tune shaders to ensure they run efficiently on a variety of hardware configurations.
著色器優化 ✨ 通過最小化指令計數、減少紋理查找和避免不必要的計算來優化著色器以提高效率。對著色器進行分析和微調，以確保它們在各種硬體配置上高效運行。
12. Dynamic Shader Compilation 🛠️Implement dynamic shader compilation to generate shaders at runtime based on the specific requirements of the scene or device capabilities. This allows for more efficient shader utilization and optimization tailored to the current context.
動態著色器編譯 🛠️ 實現動態著色器編譯，根據場景或設備功能的特定要求在運行時生成著色器。這樣可以更有效地利用著色器，並針對當前上下文進行優化。
13. GPU-Driven Animations 🔄Offload animation calculations to the GPU using techniques like vertex shader animations or compute shaders. By leveraging the parallel processing power of the GPU, you can achieve smoother animations and reduce CPU overhead.
GPU 驅動的動畫 🔄 使用頂點著色器動畫或計算著色器等技術將動畫計算卸載到 GPU。通過利用 GPU 的並行處理能力，您可以實現更流暢的動畫並減少 CPU 開銷。
14. Runtime Performance Monitoring 📊Implement performance monitoring tools to identify bottlenecks and optimize rendering performance in real-time. Utilize browser developer tools, performance profiling libraries, and custom metrics to diagnose and address performance issues as they arise.
運行時性能監控 📊 \-\- 實施性能監控工具，實時識別瓶頸並優化渲染性能。利用瀏覽器開發人員工具、性能分析庫和自定義指標來診斷和解決出現的性能問題。
15. Browser Compatibility and Polyfills 🌐Ensure compatibility across different web browsers by testing and optimizing your 3D rendering code for various platforms. Utilize polyfills and fallbacks to provide consistent experiences across a wide range of devices and browsers.
瀏覽器相容性和 Polyfills 🌐 透過針對各種平台測試和優化 3D 渲染代碼，確保不同 Web 瀏覽器之間的相容性。利用 polyfills 和回退，在各種設備和瀏覽器上提供一致的體驗。
16. Hardware Acceleration Detection ⚙️Detect hardware capabilities and adjust rendering settings dynamically to leverage hardware acceleration where available. Provide fallbacks for devices with limited GPU capabilities to ensure a consistent experience across different platforms.
硬體加速檢測 ⚙️ 檢測硬體功能並動態調整渲染設置，以在可用時利用硬體加速。為具有有限 GPU 功能的設備提供回退，以確保跨不同平臺的一致體驗。
17. Web Workers for Parallel Processing 🧑💻Offload CPU-intensive tasks such as physics simulations and AI calculations to web workers to utilize multi-threaded processing and improve overall performance. Parallelize tasks to maximize CPU utilization and enhance rendering efficiency.
用於並行處理🧑💻的 Web Worker 將 CPU 密集型任務（如物理類比和 AI 計算）卸載給 Web Worker，以利用多線程處理並提高整體性能。並行化任務，最大限度地提高CPU利用率並提高渲染效率。
18. Resource Pooling 🔄Manage resources such as textures, buffers, and shaders efficiently by implementing resource pooling techniques. Reuse allocated resources where possible to minimize memory overhead and improve performance.
資源池 🔄 通過實施資源池技術，有效地管理紋理、緩衝區和著色器等資源。盡可能重用分配的資源，以最大程度地減少記憶體開銷並提高性能。
19. Dynamic Rendering Techniques 🌈Employ dynamic rendering techniques such as procedural generation and dynamic tessellation to generate complex 3D content on-the-fly. These techniques allow for the creation of dynamic and interactive scenes while optimizing performance.
動態渲染技術 🌈 採用動態渲染技術（如程式生成和動態曲面細分）即時生成複雜的 3D 內容。這些技術允許創建動態和互動式場景，同時優化性能。
20. Network Optimization 📡Optimize network communication by minimizing asset sizes, leveraging HTTP/2 or HTTP/3 for efficient multiplexing, and utilizing content delivery networks (CDNs) for global distribution. Reduce latency and improve loading times for 3D assets.
網路優化 📡 通過最小化資產大小、利用 HTTP/2 或 HTTP/3 進行高效多路復用以及利用內容交付網路 （CDN） 進行全球分發來優化網路通信。減少延遲並縮短 3D 資產的載入時間。
21. Lightweight UI and Overlays 💡Keep user interface elements and overlays lightweight to minimize their impact on rendering performance. Utilize efficient UI frameworks and techniques to ensure smooth interaction without compromising rendering speed.
輕量級UI和疊加層💡保持使用者介面元素和疊加層的輕量級，以最大程度地減少它們對渲染性能的影響。利用高效的UI框架和技術，在不影響渲染速度的情況下確保流暢的交互。
22. Efficient Animation Techniques 🔄Optimize animation playback by utilizing techniques such as skeletal animation blending, keyframe reduction, and motion compression. Streamline animation data to minimize memory usage and enhance playback performance.
高效的動畫技術 🔄 利用骨骼動畫混合、關鍵幀縮減和運動壓縮等技術優化動畫播放。簡化動畫數據，以最大程度地減少記憶體使用並增強播放性能。
23. State Management Optimization 📊Optimize state management by minimizing redundant state changes and efficiently updating rendering state only when necessary. Utilize techniques like state batching and state sorting to reduce GPU driver overhead and improve rendering performance.
狀態管理優化 📊 通過最小化冗餘狀態更改並僅在必要時高效更新渲染狀態來優化狀態管理。利用狀態批處理和狀態排序等技術來減少 GPU 驅動程式開銷並提高渲染性能。
24. Cross-Platform Optimization 🌐Optimize your 3D rendering codebase for cross-platform compatibility, including desktop, mobile, and VR/AR devices. Consider platform-specific optimizations and performance tweaks to ensure consistent performance across diverse hardware environments.
跨平臺優化 🌐 優化 3D 渲染代碼庫以實現跨平臺相容性，包括桌面、行動裝置和 VR/AR 設備。考慮特定於平臺的優化和性能調整，以確保在各種硬體環境中實現一致的性能。
25. Progressive Enhancement 📈Employ progressive enhancement techniques to provide basic 3D experiences to all users while enhancing the experience for devices and browsers that support advanced features. Gracefully degrade functionality for older or less capable devices to ensure broad accessibility.
漸進式增強 📈 採用漸進式增強技術為所有使用者提供基本的 3D 體驗，同時增強支援高級功能的設備和瀏覽器的體驗。為較舊或功能較差的設備正常降級功能，以確保廣泛的可訪問性。
26. Continuous Profiling and Optimization 🛠️Continuously profile and optimize your 3D rendering codebase to identify performance bottlenecks and implement targeted optimizations. Regularly review and refine performance-critical sections to ensure optimal rendering performance over time.
持續分析和優化 🛠️ 持續分析和優化 3D 渲染代碼庫，以識別性能瓶頸並實施有針對性的優化。定期審查和優化性能關鍵部分，以確保隨著時間的推移實現最佳渲染性能。
# 第二篇
https://www.vectary.com/3d-modeling-blog/optimizing-3d-models-for-the-web/
https://www.youtube.com/watch?v=Qx5SYW2F92M
- It is best to keep the number of objects below 100 and the polygon count up to 100K
- Don't exceed the maximum limit of **200,000 points**
- Try to keep the number of textures below 100