原创 CesiumJS 源碼雜談 - 從光到 Uniform

目錄1. 有什麼光2. 光如何轉換成 Uniform 以及何時被調用2.1. 統一值狀態對象(UniformState)2.2. 上下文(Context)執行 DrawCommand2.3. 對 WebGL Uniform 值的封裝2.4.

原创 教程 - 在 Vue3+Ts 中引入 CesiumJS 的最佳實踐@2023

目錄1. 本篇適用範圍與目的1.1. 適用範圍1.2. 目的2. 牛刀小試 - 先看到地球2.1. 創建 Vue3 - TypeScript 工程並安裝 cesium2.2. 清理不必要的文件並創建三維地球2.3. 中段解疑 - 奇怪的路徑

原创 談談 WMTS 中的 TileMatrix 與 ScaleDenominator

目錄1. WMTS 中的 TileMatrix 是什麼2. ScaleDenominator 是什麼2.1. 一個像素的顯示器物理尺寸是多大2.2. 瓦片圖片的一個像素是多大2.3. 爲什麼是 0.28 毫米 其實有時間琢磨規範文檔的話,

原创 記一次 CesiumJS 中非 4326/3857 WMTS 數據的加載

目錄既有 WMTS 的現狀兵來將擋水來土掩 - 問題解決url 參數tileMatrixSetID 和 layer 參數tileMatrixLabels 參數rectangle 參數tilingScheme 參數小結 記一次 Cesium

原创 CesiumJS PrimitiveAPI 高級着色入門 - 從參數化幾何與 Fabric 材質到着色器 - 下篇

目錄3. 使用 GLSL 着色器3.1. 爲 Fabric 材質添加自定義着色代碼 - Fabric 材質的本質3.2. 社區實現案例 - 泛光牆體和流動線材質3.3. 直接定義外觀對象的兩個着色器3.4. *源碼中如何合併着色器4. 底層

原创 CesiumJS PrimitiveAPI 高級着色入門 - 從參數化幾何與 Fabric 材質到着色器 - 上篇

目錄0. 基礎0.1. 座標系基礎0.2. 合併批次1. 參數化幾何1.1. 幾何類清單1.2. 舉例1.3. 純手搓幾何1.4. *子線程異步生成幾何2. 使用材質2.1. 外觀 API2.2. 材質 API2.3. Fabric 材質初

原创 淺談瀏覽器端 WebGIS 開發可能會用到的、提升效率的 js 庫

目錄前置說明1. 與數據格式轉換解析相關1.1. 解析和轉換 WKT 幾何數據1.2. 前端直接讀取 GeoPackage - @ngageoint/geopackage1.3. 前端直接讀取 Esri Shapefile - ts-sha

原创 如何手動補充陳年老庫(或純 JS 代碼)的 TypeScript 類型?

目錄前置知識 - JavaScript 的各種模塊化情況前置知識2 - 讓你寫的 d.ts 在工程中生效1. 全局模塊的定義2. ES 模塊的定義2.1. 默認導出2.2. 導出類2.3. 注意事項3. CommonJS 模塊定義3.1.

原创 解決 CesiumJS 1.100 源碼開發時 pnpm 不兼容的問題

1.100 版本後, CesiumJS 對源碼進行了分包(也就是 workspaces,又一說法 monorepo,npm@v7、pnpm 都原生支持這種解決方案),使用的是 npm 原生的 workspaces 方案,即在 package

原创 CesiumJS 技術博客:glTF 模型(Model)加載新架構

目錄1. 加載一個 glTF 模型2. 着色器優先的模型渲染設計3. 模型渲染管線3.1. 管線舉例4. 與 3DTiles 集成5. 譯者的話 原文:https://cesium.com/blog/2022/10/05/tour-of

原创 在 WebGPU 中使用時間戳查詢

目錄概述按步教學0. 讓瀏覽器具備時間戳查詢功能1. 創建 Queryset 和緩衝對象2. 寫入時間戳3. 解析時間戳到緩衝對象中4. 讀取查詢結果5. (可選)添加標籤致謝 原文 https://github.com/OmarSheh

原创 如何創建前端 WebGPU 項目?

目錄1. 丐版 HelloWebGPU① 爲什麼是 index.html② 你這個代碼爲什麼瀏覽器沒有顯示東西?③ 爲什麼你不用 HTTP 協議打開 index.html2. 我需要類型提示2.1. 使用 VSCode 的 jsconfig

原创 教程 - 深度探討在 Vue3 中引入 CesiumJS 的最佳方式

目錄1. 你應該先知道的基礎知識1.1. CesiumJS 的庫構成1.2. 選擇 Vite3 和 pnpm 的理由1.3. 使用 External 模式引入靜態庫 - 不打包靜態庫1.4. 切勿什麼都 import - 以及頁面運行的時候

原创 CesiumJS 更新日誌 1.96 與 1.97 - 新構建工具 esbuild 體驗及 Model API 更替完成

目錄1.96 更新情況1.97 更新情況新構建工具 esbuild 和大換血的構建指令使用1. 官方自述構建工具更新的原因2. 選擇使用 esbuild3. 關於 WebWorker 遺留問題4. 重頭戲之舊構建指令移除與新指令用法5. 收

原创 WebGPU 導入[2] - 核心概念與重要機制解讀

目錄1. 核心概念① 適配器和設備② 緩衝、紋理、採樣器③ 綁定組④ 着色器與管線⑤ 編碼器與隊列2. 重要機制① 緩衝映射機制② 時間線 1. 核心概念 這部分不會詳細展開,以後寫教程時會深入。以下只是核心概念,是絕大多數 WebGPU