关于webGpu的 Label 层的设计

一、现有 Label 设计

image2021-9-26_13-58-5.png

常用术语：

Label：标签

Panel：面板

Anchor：锚点

Billboard：3d 中始终面向屏幕的公告牌

此处的 Label，本质是一个 UIBinder(targetElementId, UIContent, extraProps)，希望用于创建始终面向屏幕的 UI 信息看板

绑定 UI 后，UI 会有两种渲染存在的形式，1. canvas 内渲染，看板跟随 camera 距离，同步缩放，2. canvas 外基于 dom（position:absolute, left:xxx, right:xxx)，与 canvas 内部坐标同步，看板不跟随场景缩放。

1. canvas 内渲染 UI 的典型应用场景
   待补完
2. canvas 外渲染 UI 的典型应用场景
   待补充

建立信息看板与模型 id 对应的技术难点

1. 面向 canvas 内渲染，看板内容的技术开发链路是什么？
   链路一、基于 html dom，可以最大化借力 h5 前端的技术生态解决展示问题，但不擅长增加交互热区问题。在 dom2canvas 后，3d 材质贴图上，面临计算成本。当 dom 数据有频繁更新时，是否有优化空间？
   链路二、基于 3DGUI，使用命令式编程语言，完成对文本、图片、容器的基础布局。对文本的边界尺寸计算、数据视图的二次更新等具备一定的开发复杂度。
2. 面向 canvas 外渲染，看板内容的技术开发链路是什么？
   基于 html dom，需要解决 3D 引擎与 dom 数据看板的同步渲染问题，

二、业界参考设计

2.1 thingjs

thing.png

参考链接 https://docs.thingjs.com/cn/apidocs/THING.UIAnchor.html#pivot

2.2 51world superJs

112.png

参考链接：http://superapi.51hitech.com/apifunc

三、设计方案建议

实现类似 UIBinder 的接口，实现 UI 针对模型 id 的绑定。细节待补