@mesh3d/cesium-vectortile-gl 0.1.0

package/Source/VectorTileLOD.js

@@ -0,0 +1,494 @@
+import { VectorTileset } from "./VectorTileset";
+import * as MVT from '@mapbox/vector-tile'
+import { IRenderLayer, ILayerVisualizer, RenderLayers, LayerVisualizers } from "./layers";
+import { VectorTileRenderList } from "./VectorTileRenderList";
+import { ISource } from "./sources/ISource";
+import { EXTENT } from "maplibre-gl/src/data/extent";
+import Point from "@mapbox/point-geometry";
+import { subdivideVertexLine } from "maplibre-gl/src/render/subdivision";
+import { granularitySettings } from "./sources/granularitySettings";
+
+let tileDepthRenderSate = null
+let nextTileKey = 0
+let levelZeroMaximumGeometricError = null
+/**
+ * 计算指定LOD层级的最大几何误差，相当于动态计算3DTiles中geometricError，只是形瓦片的几何误差是一个层级的所有瓦片都相同（rectangle大小都一样）
+ * @param {number} z 瓦片层级（整数，不是地图的缩放级别）
+ * @param {Cesium.TilingScheme} tilingScheme 
+ * @returns 
+ */
+function getLevelMaximumGeometricError(z, tilingScheme) {
+    if (levelZeroMaximumGeometricError === null) {
+        levelZeroMaximumGeometricError = Cesium.TerrainProvider.getEstimatedLevelZeroGeometricErrorForAHeightmap(
+            tilingScheme.ellipsoid,
+            128,
+            tilingScheme.getNumberOfXTilesAtLevel(0)
+        );
+    }
+    return levelZeroMaximumGeometricError / (1 << z);
+}
+
+/**
+ * LOD调度重要参数SSE的计算函数，从Cesium地形调度模块中提取出来的代码，调度逻辑和地形瓦片的一致
+ * @param {Cesium.FrameState} frameState 
+ * @param {VectorTileLOD} tile 
+ * @returns 
+ */
+function screenSpaceError(frameState, tile) {
+    const maxGeometricError = getLevelMaximumGeometricError(
+        tile.z, tile.tilingScheme
+    );
+
+    const distance2 = tile.distanceToCamera;
+    const height = frameState.context.drawingBufferHeight;
+    const sseDenominator = frameState.camera.frustum.sseDenominator;
+    let error = maxGeometricError * height / (distance2 * sseDenominator);
+    if (frameState.fog.enabled) {
+        error -= Cesium.Math.fog(distance2, frameState.fog.density) * frameState.fog.sse;
+    }
+    error /= frameState.pixelRatio;
+    return error;
+}
+
+function initConstants() {
+    if (tileDepthRenderSate !== null) return
+
+    tileDepthRenderSate = Cesium.RenderState.fromCache({
+        id: 'vt_tile-depth',
+        blending: Cesium.BlendingState.DISABLED,
+        depthTest: {
+            enabled: true
+        },
+        depthMask: true,
+        cull: {
+            enabled: true
+        },
+        stencilMask: Cesium.StencilConstants.CESIUM_3D_TILE_MASK,
+        stencilTest: {
+            backFunction: 519,
+            backOperation: { fail: 7680, zFail: 7680, zPass: 7681 },
+            enabled: true,
+            frontFunction: 519,
+            frontOperation: { fail: 7680, zFail: 7680, zPass: 7681 },
+            mask: 128,
+            reference: 128
+        },
+        colorMask: {
+            red: false,
+            green: false,
+            blue: false,
+            alpha: false
+        }
+    })
+}
+
+export class VectorTileLOD {
+    constructor(options) {
+        initConstants()
+
+        this.x = options.x
+        this.y = options.y
+        this.z = options.z
+        /**暂时用不到，但是还是记录父级瓦片 */
+        this.parent = options.parent
+        this.children = []
+
+        /**@type {Cesium.TilingScheme} */
+        this.tilingScheme = options.tilingScheme
+        this.rectangle = this.tilingScheme.tileXYToRectangle(this.x, this.y, this.z)
+        /**
+         * Cesium.TileBoundingRegion 不是公开的API，但是可以从Cesium地形调度相关模块源码学习，
+         */
+        this.tileBoundingRegion = new Cesium.TileBoundingRegion({
+            rectangle: this.rectangle,
+            minimumHeight: 0,
+            maximumHeight: 0,
+            ellipsoid: this.tilingScheme.ellipsoid,
+            computeBoundingVolumes: true
+        })
+
+        /**@type {IRenderLayer[]} */
+        this.layers = []
+        /**@type {ILayerVisualizer[]} */
+        this.visualizers = []
+        /**
+         * 保存pbf/mvt文件解析结果，准备创建图层（要素过滤）时候进一步读取要素，创建图层渲染对象时读取要素几何数据
+         * @type {Record<string,MVT.VectorTile>}
+         */
+        this.sources = {}
+
+        this.tileId = null
+        /**
+         * 记录最近一次访问时间（用渲染帧数表示），用于筛选过期瓦片
+         */
+        this.lastVisitTime = 0
+        /**
+         * 瓦片调度状态
+         * @type {'none'|'done'|'error'}
+         */
+        this.state = 'none'
+
+        this.tileId = {
+            x: this.x, y: this.y, z: this.z,
+            key: nextTileKey++,
+            color: Cesium.Color.fromRgba(nextTileKey - 1),
+            tileColor: Cesium.Color.fromRandom({
+                alpha: 1
+            })
+        }
+
+        const size = EXTENT * Math.pow(2, this.z),
+            x0 = EXTENT * this.x,
+            y0 = EXTENT * this.y;
+        this.transformPoint = function (x, y, lonlat) {
+            lonlat[0] = (x + x0) * 360 / size - 180
+            lonlat[1] = 360 / Math.PI * Math.atan(Math.exp((1 - (y + y0) * 2 / size) * Math.PI)) - 90
+            return lonlat //[x, y]
+        }
+    }
+
+    createChildren() {
+        var tiles = [{
+            x: this.x * 2,
+            y: this.y * 2 + 1,
+            z: this.z + 1
+        }, {
+            x: this.x * 2 + 1,
+            y: this.y * 2 + 1,
+            z: this.z + 1,
+        }, {
+            x: this.x * 2,
+            y: this.y * 2,
+            z: this.z + 1,
+        }, {
+            x: this.x * 2 + 1,
+            y: this.y * 2,
+            z: this.z + 1,
+        }]
+
+        for (const { x, y, z } of tiles) {
+            var child = new VectorTileLOD({
+                x, y, z,
+                tilingScheme: this.tilingScheme,
+                parent: this
+            })
+            this.children.push(child)
+        }
+    }
+
+    /**
+     * @param {Cesium.FrameState} frameState 
+     * @param {{visitChildren(child:VectorTileLOD):void;accept(tile:VectorTileLOD):void}} visitor 
+     * @returns 
+     */
+    visit(frameState, visitor) {
+        const tileBoundingRegion = this.tileBoundingRegion
+
+        //相机视锥剔除
+        this.distanceToCamera = tileBoundingRegion.distanceToCamera(frameState)
+        this.visibility = frameState.cullingVolume.computeVisibility(tileBoundingRegion)
+        if (this.visibility == Cesium.Intersect.OUTSIDE) {
+            return
+        }
+
+        //性能优化：还可以进行地平线剔除更多被地球完全遮挡的瓦片
+
+        const maxSSE = frameState.maximumScreenSpaceError
+        const sse = screenSpaceError(frameState, this)
+        if (sse >= maxSSE) {//继续遍历子级瓦片
+            visitor.visitChildren(this)
+        }
+        else {//使用当前瓦片渲染
+            visitor.accept(this)
+        }
+    }
+
+    /**
+     * @param {VectorTileset} tileset 
+     */
+    async getSources(tileset) {
+        /**@type {Record<string,ISource>} */
+        const sourcesToLoad = {}
+        const style = tileset._styleJson
+
+        for (const styleLayer of style.layers) {
+            const sourceId = styleLayer.source
+            const source = tileset.sources[sourceId]
+            if (source && !sourcesToLoad[sourceId]) {
+                sourcesToLoad[sourceId] = source
+            }
+        }
+
+        for (const sourceId in sourcesToLoad) {
+            const source = sourcesToLoad[sourceId]
+            try {
+                const tileData = await source.requestTile(this.x, this.y, this.z, tileset)
+                if (tileData) {
+                    this.sources[sourceId] = tileData
+                }
+            } catch (err) { }
+        }
+
+        tileset.numLoading--
+        this.state = 'loaded'
+    }
+
+    /**
+     * @param {Cesium.FrameRateMonitor} frameState 
+     * @param {VectorTileset} tileset 
+     */
+    async createRenderLayers(frameState, tileset) {
+        const sources = this.sources
+        const styleLayers = tileset._styleLayers
+        const renderLayers = this.layers
+        const visualizers = this.visualizers
+        /**@type {Record<string,ILayerVisualizer>} */
+        const visualizerMap = {}
+
+        for (const styleLayer of styleLayers) {
+            const sourceVectorTile = sources[styleLayer.source]
+            /**
+             * 按图层类型获取对应的渲染图层类
+             * @type {typeof IRenderLayer} 
+             */
+            const RenderLayer = RenderLayers[styleLayer.type]
+            const LayerVisualizer = LayerVisualizers[styleLayer.type]
+            const isBackgroundLayer = styleLayer.type === 'background'
+            if ((!isBackgroundLayer && !sourceVectorTile) || !RenderLayer) continue
+
+            const features = []
+            if (!isBackgroundLayer) {
+                const sourceType = styleLayer.source && tileset.sources[styleLayer.source].type
+                const sourceLayer = sourceType == 'geojson' ? '_geojsonTileLayer' : styleLayer.sourceLayer
+                const vectorTileLayer = sourceVectorTile.layers[sourceLayer]
+                if (!vectorTileLayer) continue
+
+                //读取要素，并根据图层样式filter表达式进行过滤
+                //性能优化：同一帧读取和过滤大量要素，耗时较长，应该将其移到Web Worker
+                const featureCount = vectorTileLayer.length
+                for (let i = 0; i < featureCount; i++) {
+                    //读取要素
+                    const feature = vectorTileLayer.feature(i)
+                    //过滤要素
+                    if (styleLayer.filter && !styleLayer.filter.filter({ zoom: this.z }, feature)) {
+                        continue
+                    }
+                    features.push(feature)
+                }
+                if (!features.length) continue
+            }
+
+            //创建渲染图层
+            const renderLayer = new RenderLayer(features, styleLayer, this)
+            renderLayers.push(renderLayer)
+
+            //将渲染图层分配到对应类型的图层渲染器，图层渲染器应实现如下功能，以提升渲染性能：
+            //1、合批创建几何体、批次表和 DrawCommand；
+            //2、克隆合批DrwaCommand，创建副本，通过offset和count指定图层的绘制范围。
+            if (LayerVisualizer) {
+                let visualizer = visualizerMap[styleLayer.type]
+                if (!visualizer) {
+                    visualizer = new LayerVisualizer(this)
+                    visualizerMap[styleLayer.type] = visualizer
+                    visualizers.push(visualizer)
+                }
+                visualizer.addLayer(features, renderLayer, frameState, tileset)
+            }
+        }
+
+        this.state = 'ready'
+    }
+
+    /**
+     * @param {Cesium.FrameState} frameState 
+     * @param {VectorTileRenderList} renderList 
+     * @param {VectorTileset} tileset 
+     */
+    update(frameState, renderList, tileset) {
+        // 这里构建的 primitive 有如下用途：
+        // 1. showTileColor 设置为 true 时，展示瓦片范围，验证LOD调度效果 
+        // 2. 生成绘制瓦片 id 的 DrawCommand，在 VectorTileset 中实时更新瓦片id纹理，实现瓦片边界精准裁剪
+
+        if (!this.primitive) {
+
+            this.primitive = new Cesium.Primitive({
+                geometryInstances: new Cesium.GeometryInstance({
+                    geometry: new Cesium.RectangleGeometry({
+                        rectangle: this.rectangle
+                    })
+                }),
+                compressVertices: false,
+                asynchronous: false,
+                appearance: new Cesium.MaterialAppearance({
+                    flat: true,
+                    translucent: false,
+                    material: Cesium.Material.fromType('Color', {
+                        color: Cesium.Color.fromAlpha(this.tileId.tileColor, 0.25)
+                    }),
+                    renderState: {
+                        blending: Cesium.BlendingState.ALPHA_BLEND,
+                        depthMask: false,
+                        depthTest: {
+                            enabled: true
+                        },
+                        cull: {
+                            enabled: false
+                        }
+                    }
+                })
+            })
+            this.primitive.name = '_tile-color_'
+        }
+
+        const tileComandList = this.commandList || []
+        const tileIdCommands = this.tileIdCommands || []
+        const tileDepthCommands = this.tileDepthCommands || []
+
+        if (!tileComandList.length) {
+            const preCommandList = frameState.commandList
+            frameState.commandList = tileComandList
+
+            this.primitive.update(frameState)
+
+            if (tileComandList.length) {
+
+                const tileIdColor = this.tileId.color
+                for (const tileComand of tileComandList) {
+                    tileComand.pass = Cesium.Pass.CESIUM_3D_TILE
+
+                    const tileIdCommand = Cesium.DrawCommand.shallowClone(tileComand)
+                    tileIdCommand.renderState = Cesium.RenderState.fromCache({
+                        id: 'tileId',
+                        blending: {
+                            enabled: false
+                        },
+                        depthTest: {
+                            enabled: false
+                        },
+                        depthMask: true,
+                        cull: {
+                            enabled: true
+                        }
+                    })
+                    tileIdCommand.layerType = 'tile-id'
+                    tileIdCommand.uniformMap = {
+                        ...tileComand.uniformMap
+                    }
+                    tileIdCommand.uniformMap.color_0 = function () {
+                        return tileIdColor
+                    }
+                    tileIdCommands.push(tileIdCommand)
+                    // 浅克隆一个副本，renderState替换成只写入深度和开启模板测试的版本，以支持Entity和GroundPrimitive等贴地对象
+                    const tileDepthCommand = Cesium.DrawCommand.shallowClone(tileComand)
+                    tileDepthCommand.pass = Cesium.Pass.CESIUM_3D_TILE
+                    tileDepthCommand.renderState = tileDepthRenderSate
+                    tileDepthCommands.layerType = 'tile-depth'
+                    tileDepthCommands.push(tileDepthCommand)
+                }
+                this.tileIdCommands = tileIdCommands
+                this.tileDepthCommands = tileDepthCommands
+            }
+
+            this.commandList = tileComandList
+            frameState.commandList = preCommandList
+        }
+
+        //瓦片id纹理
+        for (const tileIdCommand of tileIdCommands) {
+            renderList.tileIdCommands.push(tileIdCommand)
+        }
+        //瓦片范围
+        if (tileset.showTileColor && tileComandList.length) {
+            renderList.tileCommands.push(...tileComandList)
+        }
+        //最后将瓦片深度写入主深度缓冲区，这样才能使Entity和GroundPrimitive等贴地对象能贴合瓦片内的矢量要素
+        if (tileDepthCommands.length) {
+            renderList.tileCommands.push(...tileDepthCommands)
+        }
+
+        //更新瓦片状态，根据状态执行不同的处理过程
+
+        //请求瓦片数据，解析pbf/mvt文件
+        if (this.state == 'none' && tileset.numLoading < 1) {
+            tileset.numLoading++
+            this.state = 'loading'
+            this.getSources(tileset)
+        }
+
+        //创建渲染图层实例
+        if (this.state === 'loaded' && tileset.numInitializing < 1) {
+            this.state = 'initializing'
+            tileset.numInitializing++
+            this.createRenderLayers(frameState, tileset)
+        }
+
+        if (this.state === 'ready') {
+            //更新图层渲染器
+            for (const visualizer of this.visualizers) {
+                visualizer.update(frameState, tileset)
+            }
+            //将渲染图层追加到相应的渲染队列（渲染队列内部按图层id分组，确保不同瓦片的同一个id图层都在一组内，然后按图层顺序逐组渲染）
+            for (const layer of this.layers) {
+                renderList.push(layer)
+            }
+        }
+    }
+
+    /**
+     * 卸载瓦片，当瓦片过期（不可见，且符合其他过期规则）时，释放pbf/mvt解析数据、图层渲染对象等资源，重置瓦片状态
+     */
+    unload() {
+        //释放用于展示瓦片范围的primitive
+        if (this.primitive) {
+            this.primitive.destroy()
+            this.primitive = null
+        }
+        this.tileGeometry = null
+
+        //清空瓦片克隆的 DrawCommand，不需要手动释放，相关资源在 primitive.destroy 执行时已经释放
+        if (this.commandList) {
+            this.commandList.length = 0
+        }
+        if (this.tileIdCommands) {
+            this.tileIdCommands.length = 0
+        }
+        if (this.tileDepthCommands) {
+            this.tileDepthCommands.length = 0
+        }
+
+        //销毁渲染图层，释放图层渲染资源
+        for (const visualizer of this.visualizers) {
+            visualizer.destroy()
+        }
+        this.visualizers.length = 0
+
+        for (const layer of this.layers) {
+            layer.destroy()
+        }
+        this.layers.length = 0
+
+        //释放pbf/mvt解析数据
+        this.sources = {}
+
+        //重置瓦片状态
+        this.state = 'none'
+    }
+
+    /**
+     * 销毁瓦片，释放所有资源
+     */
+    destroy() {
+        this.unload()
+
+        this.tileId = null
+        this.tilingScheme = null
+        this.parent = null
+        if (this.children) {
+            for (const child of this.children) {
+                child.destroy()
+            }
+            this.children.length = 0
+            this.children = null
+        }
+    }
+}

package/Source/VectorTileRenderList.js

@@ -0,0 +1,65 @@
+import { IRenderLayer } from "./layers/IRenderLayer"
+
+export class VectorTileRenderList {
+    constructor(styleLayers) {
+        this.styleLayers = styleLayers
+        this.renderLayers = []
+        this.layerIndexMap = {}
+        /**
+         * @type {IRenderLayer[]}
+         * @private
+         */
+        this.list = []
+        /**@type {Cesium.DrawCommand[]} */
+        this.tileIdCommands = []
+        /**@type {Cesium.DrawCommand[]} */
+        this.tileCommands = []
+    }
+
+    init() {
+        const { styleLayers, renderLayers, layerIndexMap } = this
+        for (let layerIndex = 0; layerIndex < styleLayers.length; layerIndex++) {
+            const styleLayer = styleLayers[layerIndex]
+            renderLayers[layerIndex] = []
+            layerIndexMap[styleLayer.id] = layerIndex
+        }
+        this.tileIdCommands.length = 0
+        this.tileCommands.length = 0
+    }
+
+    beginFrame() {
+        const renderLayers = this.renderLayers
+        for (const renderLayer of renderLayers) {
+            renderLayer.length = 0
+        }
+        this.tileIdCommands.length = 0
+        this.tileCommands.length = 0
+    }
+
+    push(renderLayer) {
+        const layerIndex = this.layerIndexMap[renderLayer.id]
+        this.renderLayers[layerIndex].push(renderLayer)
+    }
+
+    /**
+     * @returns {IRenderLayer[]}
+     */
+    getList() {
+        const list = this.list
+        list.length = 0
+        const renderLayers = this.renderLayers
+        for (const renderLayer of renderLayers) {
+            if (renderLayer) {
+                list.push(...renderLayer)
+            }
+        }
+        return list
+    }
+
+    destroy() {
+        this.styleLayers.length = 0
+        this.renderLayers.length = 0
+        this.layerIndexMap = null
+        this.init()
+    }
+}