原创 WebGPU 計算管線、計算着色器（通用計算）入門案例：2D 物理模擬
目錄1. WebGL2. WebGPU2.1. 適配器（Adapter）和設備（Device）2.2. 着色器（Shaders）2.3. 管線（Pipeline）2.4. 並行（Parallelism）2.5. 工作組（Workgroup）
2022-03-24 13:58:23
3
原创 WebGL 與 WebGPU比對[7] - 渲染的目的地
1. 綜述 其實，寫到第六篇比對基本上常規的 API 就差不多比對完了（除了 GPGPU、查詢方面的 API 未涉及），但是有一個細節仍然值得我開一篇比對文章進行思考、記錄，那就是渲染到何處。 WebGL 的上下文對象是與 canvas 元
2022-03-14 14:02:04
原创 WebGL 與 WebGPU比對[8] - 系列完結總結與感想
系列完結後記 林林總總寫了一些文章來對比 WebGL 與 WebGPU 的常規功能，興許在 API 的理解上有些業餘，甚至不排除有表述錯誤，但是寫對的部分，我希望對讀者與未來的圖形開發者有所啓迪。 過去，WebGL 給 Web 圖形開發者打
2022-03-14 14:02:04
原创 OpenLayers 6.13 新特性
目錄1 概述2 細節2.1 新方法 - layer.getData()2.2 棄用方法 - map.forEachLayerAtPixel() 1 概述 6.13 版本帶來了一些新特性： 對於每個圖層對象，你可以使用 layer.get
2022-03-14 14:02:04
2
原创 Cesium 1.91 更新日誌 - MSAA 與原生 Promise 來了
目錄不兼容式更新📣新增🎉問題修復🔧個人點評🖊① MSAA② 相機獲取射線③ ModelExperimental④ 逐漸 ES6 不兼容式更新📣 在下一個版本，也就是 Cesium 1.92，第三方庫 when.js 將被原生 Promi
2022-03-14 14:02:04
1
原创 WebGL 與 WebGPU比對[6] - 紋理
目錄1. WebGL 中的紋理1.1. 創建二維紋理與設置採樣參數1.2. 紋理數據寫入與拷貝1.3. 着色器中的紋理1.4. 紋理對象 vs 渲染緩衝對象1.5. 立方體六面紋理1.6. WebGL 2.0 的變化1.7. Mipmapp
2022-03-14 14:02:04
10
原创 爲何在打包工具中導入 Cesium 的 css 失敗了？
目錄1 問題起因2 尋找解決方案2.1. 歷史原因2.2. 增加導出2.3. 耍個花招3 類型提示是哪來的 1 問題起因 我使用 vite2 + vanillajs 模板創建 CesiumJS 項目，其中，main.js 是這樣的： im
2022-03-01 13:58:19
原创 WebGL 與 WebGPU比對[5] - 渲染計算的過程
目錄1. WebGL1.1. 使用 WebGLProgram 表示一個計算過程1.2. WebGL 沒有通道 API2. WebGPU2.1. 使用 Pipeline 組裝管線中各個階段2.2. 使用 PassEncoder 調度管線內的行
2022-02-28 13:58:23
原创 WebGL 與 WebGPU比對[4] - Uniform
目錄1. WebGL 1.0 Uniform1.1. 用 WebGLUniformLocation 尋址1.2. 矩陣賦值用 uniformMatrix[234]fv1.3. 標量與向量用 uniform[1234][fi][v]1.4.
2022-02-19 13:58:41
原创 在 esmodule 環境下使用 jsts
目錄1 說明Geometry 類2 安裝3 使用以 buffer 爲例4 JTS 文檔 1 說明 jsts 完全就是根據其老媽 jts 的 java 包結構移植的，除了部分分析功能需要額外注意外，基本上所有的子模塊的根路徑位於 jsts/
2022-02-15 13:59:19
原创 WebGL 與 WebGPU比對[3] - 頂點緩衝
目錄1. WebGL 中的 VBO1.1. 創建 WebGLBuffer1.2. 頂點着色器2. WebGPU2.1. 創建 GPUBuffer 與傳遞數據2.2. 將頂點緩衝的格式信息傳遞給頂點着色器2.3. 在渲染通道中設置頂點緩衝2.
2022-02-14 13:59:01
原创 WebGPU 中消失的 FBO 和 RBO
目錄1 WebGL 中的 FBO 與 RBO1.1 幀緩衝對象（FramebufferObject）1.2 顏色附件與深度模板附件的真正載體1.3 FBO/RBO/WebGLTexture 相關方法收集2 WebGPU 中的對等概念2.1
2022-02-14 13:59:01
原创 WebGPU 中的緩衝映射機制
1. 什麼是緩衝映射 就不給定義了，直接簡單的說，映射（Mapping）後的某塊顯存，就能被 CPU 訪問。 三大圖形 API（D3D12、Vulkan、Metal）的 Buffer（指顯存）映射後，CPU 就能訪問它了，此時注意，GPU
2022-02-12 13:58:47
原创 WebGL 與 WebGPU 比對[2] - 初始化篇
1. 獲取高頻操作對象 1.1 WebGL 獲取上下文對象 WebGL 獲取的是 WebGLRenderingContext/WebGLRenderingContext2 對象，必須依賴於有合適寬度和高度的 HTMLCanvasElemen
2022-02-10 13:57:54
2
原创 WebGPU 的幾個最佳實踐
目錄1 在能用的地方都用 label 屬性2 使用調試組3 從 Blob 中載入紋理圖像更推薦使用壓縮格式的紋理資源4 使用 glTF 處理庫 gltf-transform5 緩衝數據上載6 推薦異步創建 pipeline7 慎用隱式管線佈
2022-01-26 13:57:57