Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

考虑放弃对canvas图层的支持 (Consider to drop support of canvas layers ) #2471

Open
fuzhenn opened this issue Nov 29, 2024 · 2 comments

Comments

@fuzhenn
Copy link
Member

fuzhenn commented Nov 29, 2024

原因

为何是 canvas?

maptalks于2012年启动开发,2014年第一次在商用环境中部署,那时浏览器对webgl的支持并不普遍,当时canvas和svg是webgis的主流渲染技术,作者也还没没掌握webgl技术。

webgl技术的引入

2017年,maptalks作为开源软件正式发布到github上,那时靠着远超canvas的渲染能力,webgl已经逐渐成为webgis的新兴主流开发技术,maptalks也是从那时开始探索转用webgl进行渲染,并于2018年开始webgl图层功能的开发。但同时,maptalks仍然保留对canvas图层的支持,其原因有二:

  • 因为webgl图层的开发难度很大,成熟前难以代替更稳定的canvas图层(主要是VectorLayer)
  • canvas开发简单方便,方便基于canvas技术开发各类插件

向WebGL前进吧

目前canvas图层已经成为maptalks最大的技术债:

性能不如webgl

canvas的渲染性能在通常情况下,都远远不如webgl,一些用户一开始使用VectorLayer,随着数据的膨胀,又不得不转为使用VectorTileLayer/PointLayer/LineStringLayer/PolygonLayer/ThreeLayer等webgl图层。

渲染架构复杂

目前maptalks底层需要一个复杂的架构来协调webgl与canvas的渲染,因为canvas的性能问题,又有不少因为canvas优化存在的魔法代码,难以维护

性能瓶颈

目前为了不同渲染技术共存,每个图层都在自己的独立的canvas中渲染绘制,map会负责所有图层canvas的合并。但这也会带来无法消除的性能瓶颈,一旦map上layer数量一多,canvas合并就会占用大量浏览器gpu从而显著的降低渲染帧率。

canvas插件潜力有限

业界对WebGIS的技术探索已经进入平稳期,maptalks基于canvas的插件不再有潜力可挖,且不存在无法被webgl替代的插件

当前架构对webgpu升级不友好

因为webgpu本身不支持preserveDrawingBuffer,导致需要额外的手动保存绘制结果,导致额外的性能损失

文档示例变复杂

目前文档和示例都需要为Canvas图层单独准备一套,特别是VectorLayer,symbol样式与WebGL图层存在不同,很容易让用户产生疑惑。

是时候前进了

maptalks即将推出1.0正式版,也是时候趁此机会,考虑去掉对canvas图层的支持,转变为纯webgl(webgpu)的渲染引擎:

  • VectorLayer的 WebGL替代品(PointLayer/LineStringLayer/PolygonLayer)已经稳定,且支持一些canvas无法实现的高级样式
  • 消除掉图层canvas机制造成的性能瓶颈
  • API结构更简单清晰易用
  • 大大减少文档和示例的工作量
  • 团队未来维护起来更简单

兼容问题

升级后,目前确实会存在一些兼容问题,但都是易于解决的。

VectorLayer的退休

基于VectorLayer会正式退休,但你可以很容易改用PointLayer/LineStringLayer/PolygonLayer来替换它。

常用插件的升级

目前还存在数个基于canvas开发的常用插件,需要升级为webgl渲染。

  • HeatmapLayer
  • MarkerClusterLayer

一些插件不再兼容

某些基于canvas渲染的插件不会在兼容,你可以选择继续使用老版本的maptalks,或者改用webgl图层来替换掉他们。


Why

Why canvas?

maptalks started development in 2012 and was first deployed in a commercial environment in 2014, when browser support for webgl was not widespread, when canvas and svg were the dominant rendering technologies for webgis, and when the authors had not yet mastered webgl technology.

The introduction of webgl technology

In 2017, maptalks was officially released as open source software on github, at that time, by relying on the rendering ability far beyond canvas, webgl has gradually become the emerging mainstream development technology of webgis, maptalks also started to explore switching to webgl for rendering at that time, and in 2018, it started the development of the webgl layer function development. But at the same time, maptalks still retains support for canvas layers for two reasons:

  • Because webgl layers are difficult to develop, it is difficult to replace the more stable canvas layers (mainly VectorLayer) before maturity.
  • canvas development is simple and convenient, easy to develop all kinds of plug-ins based on canvas technology

Move on to WebGL!

Currently canvas layers have become the biggest technical debt of maptalks:

Performance is not as good as webgl.

The rendering performance of canvas is, in general, far inferior to webgl. Some users start with VectorLayer and then, as the data swells, have to switch to VectorTileLayer/PointLayer/LineStringLayer/PolygonLayer/ThreeLayer and other webgl layers. ThreeLayer and other webgl layers.

Complex rendering architecture

Currently, maptalks requires a complex architecture to coordinate the rendering of webgl and canvas, because of the performance issues of canvas, and there is a lot of magic code due to the existence of canvas optimization, which is difficult to maintain.

Performance bottlenecks

Currently, in order for different rendering technologies to coexist, each layer is rendered and drawn in its own separate canvas, and map takes care of merging all layer canvas. However, this also brings a performance bottleneck that can't be eliminated, once the number of layers on the map is high, the canvas merge will take up a lot of the browser's gpu, thus significantly lowering the rendering frame rate.

canvas plugins have limited potential

The industry's exploration of WebGIS technology has reached a plateau, maptalks canvas-based plugins no longer have the potential to be tapped, and there are no plugins that cannot be replaced by webgl.

Not friendly to webgpu upgrade

Because the webgpu itself does not support preserveDrawingBuffer, resulting in the need for additional manual preservation of drawing results, leading to additional performance loss

Documentation and examples become complex

Currently, documentation and examples need to be prepared separately for Canvas layers, especially VectorLayer, the symbol style is different from WebGL layers, it is easy to make users confused.

It's time to move forward

With the upcoming 1.0 release of maptalks, it's also time to take the opportunity to consider removing support for canvas layers and shift to a pure webgl (webgpu) rendering engine:

  • WebGL alternatives to VectorLayer (PointLayer/LineStringLayer/PolygonLayer) have been stabilized and support some advanced styles that can't be achieved with canvas.
  • Eliminate the performance bottleneck caused by the layer canvas mechanism.
  • API structure is more simple and clear to use
  • greatly reduce the workload of documentation and examples
  • The team will be able to maintain it more easily in the future.

Compatibility issues

After the upgrade, some compatibility issues do exist at the moment, but they are easy to solve.

Retirement of VectorLayer

The VectorLayer based model will be officially retired, but you can easily replace it with PointLayer/LineStringLayer/PolygonLayer.

Upgrades to common used plugins

There are still several common used plugins for canvas-based development that need to be upgraded for webgl rendering.

  • HeatmapLayer
  • MarkerClusterLayer

Some plugins that are no longer compatible

Certain canvas-based rendering plugins will no longer be compatible, you can choose to continue using older versions of maptalks, or replace them with webgl layers instead.

@fuzhenn fuzhenn pinned this issue Nov 29, 2024
@wordgold
Copy link
Contributor

wordgold commented Dec 5, 2024

现在 VectorLayer 的方便之处是一个layer可以同时添加 marker,lineString,polygon,如果使用 PointLayer/LineStringLayer/PolygonLayer 代替的话,每种数据就需要创建一个图层,对于混合数据的控制会麻烦很多,或者使用 GeoJSONVectorTileLayer?
还有之前提过,貌似现在 PointLayer 里 text 和 marker 不在同一层级上,所有 text 会统一浮在 marker 上,这样对于我们来说还是无法抛弃 VectorLayer。

@fuzhenn
Copy link
Member Author

fuzhenn commented Dec 17, 2024

现在 VectorLayer 的方便之处是一个layer可以同时添加 marker,lineString,polygon,如果使用 PointLayer/LineStringLayer/PolygonLayer 代替的话,每种数据就需要创建一个图层,对于混合数据的控制会麻烦很多,或者使用 GeoJSONVectorTileLayer? 还有之前提过,貌似现在 PointLayer 里 text 和 marker 不在同一层级上,所有 text 会统一浮在 marker 上,这样对于我们来说还是无法抛弃 VectorLayer。

text和marker层级问题算是一个bug,我会记录解决一下。
当然你也可以仍然使用原有的maptalks库

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants