cesium 实时更新canvas，避免使用toDataURL

### Cesium 中实时更新 Canvas 的替代方案

在 Cesium 中实现实时更新 `Canvas` 而不依赖于 `toDataURL()` 方法，可以采用直接操作 WebGL 上下文的方式。这种方式能够显著提高性能并减少内存占用。

#### 使用自定义着色器和纹理传递数据

一种高效的方法是利用 Cesium 提供的自定义材质功能来创建动态 billboard 或者其他图形对象。具体来说：

- 创建一个 `Canvas` 对象用于绘制需要展示的内容。
- 将此 `Canvas` 作为纹理源绑定到 GPU 级别的资源上。
- 利用 GLSL 编写片段着色器，在渲染过程中读取该纹理的信息完成最终图像呈现。

这种方法避免了频繁调用 `toDataURL()` 所带来的开销，并允许更灵活地处理像素级的数据变化。

// 假设有一个已经存在的 cesium viewer 实例名为 'viewer'
const scene = viewer.scene;
let canvasElement = document.createElement('canvas');
let context = canvasElement.getContext('2d');

function updateCanvasContent(data) {
    // 更新 canvas 内容逻辑...
}

// 定义材质选项
var materialOptions = {
    fabric : {
        type : 'Custom',
        source : `
            uniform sampler2D imageTexture;

            void main(void) {
                vec4 color = texture2D(imageTexture, uv);
                gl_FragColor = color;
            }
        `,
        uniforms : {
            imageTexture : function() {
                return new Cesium.Texture({
                    context: scene.context,
                    source: canvasElement
                });
            }()
        }
    },
    translucent : false
};

// 应用材质至实体或 billboards 集合项中
entity.material = new Cesium.Material(materialOptions);

setInterval(() => {
    // 动态改变 canvas 数据
    updateCanvasContent(/* 新数据 */);
}, 1000 / 60); // 每秒刷新60次以保持流畅度[^4]

上述代码展示了如何设置一个周期性的回调函数去修改 `Canvas` 上面的内容，而这些更改会立即反映在对应的三维模型之上，无需显式转换为 base64 字符串再重新加载新图元。