cesium使用显卡绘制线,而不是使用cpu绘制

Question

使用cesium提供的画线的api生成的线,数量较少的时候网页不会卡,当画线数量达到2000+的时候,网页就卡得不行,仔细研究了一下,发现cesium画线使用的cpu来绘制的,能不能有一个使用显卡绘图绘制线的功能啊,显卡绘图才能发挥显卡的性能,绘制2000+的线才不会卡

Answer 1

已经实现了,这是对外暴露的类,需要引用文件可以联系我

import XPrimitive from "./XPrimitive.js"
import XLinesMaterial from "./XLinesMaterial.js"
import XTransform from "./XTransform.js"
import XLinesMeshData from "./XLinesMeshData.js"
import get_test_data from "./TestData.js"
import _XEarth from "../_XEarth"
export default class XLines extends XPrimitive
{
    constructor() 
    {
        super();
        this.init();
    }
    init()
    {
        this.set_mesh_data(this.create_mesh_data());
        this.set_material(this.create_material());
        this.set_transform(this.create_transform());
    }
    
    create_mesh_data()
    {
        let mesh_data = new XLinesMeshData();
        mesh_data.set_lines_position(0,
            get_test_data(),
            [new _XEarth.Cesium.Cartesian4(1, 0, 0, 1)],
            XLinesMaterial.EffectType.SOLID,
            true
        );
        
        return mesh_data;
    }

    create_material()
    {
        let material = new XLinesMaterial();
        return material;
    }
    create_transform()
    {
        let transform = new XTransform();
        return transform;
    }

    
    update(frame_state)
    {
    // demo begin
    // Demo,这里重载父类的Update,为了找到一个每帧都执行的时机来修改顶点属性,这里可以用自己的Update触发
    // 并不建议每帧都执行此更新,尤其是创建弧线(即 arc_line=true),因为会触发构造顶点
        // {
        //     COUNTER += 1;
        //     this.get_mesh_data().set_lines_position(2,
        //         [
        //             new _XEarth.Cesium.Cartesian3(6378137, COUNTER * 5000, 0),
        //             new _XEarth.Cesium.Cartesian3(COUNTER * 1000, 6378137, 6378137)
        //         ],
        //         [new _XEarth.Cesium.Cartesian4(1, 0, 0, 1), new _XEarth.Cesium.Cartesian4(0, 1, 0, 1)],
        //         XLinesMaterial.EffectType.DASHED, true
        //     );

        //     this.get_mesh_data().set_lines_cartographic("CustomKey",
        //         [
        //             _XEarth.Cesium.Cartographic.fromDegrees(COUNTER, 0, 100, new _XEarth.Cesium.Cartographic()),
        //             _XEarth.Cesium.Cartographic.fromDegrees(0, 90, 100, new _XEarth.Cesium.Cartographic()),
        //         ],
        //         [new _XEarth.Cesium.Cartesian4(1, 0, 1, 1), new _XEarth.Cesium.Cartesian4(1, 1, 0, 1)],
        //         XLinesMaterial.EffectType.SOLID, true
        //     );

        //     this.get_material().set_flow_len(Math.sin(COUNTER * 0.2 / 180 * 3.14) * 0.5 + 0.5);
        // }
    //demo end
        COUNTER+=1;
        //by zh 如果不更新矩阵,删除就正常
        this.get_transform().set_model_translation_quaternion_scale(new _XEarth.Cesium.Cartesian3(0, 0, COUNTER*10000));
        super.update(frame_state);
    }

}
let COUNTER = 0;