在文章“ Web -end AR美容特殊效果技术”中，已经讨论了一些实施AR功能以实现AR功能的技术。
XR字段中缺乏Web技术的是，其性能瓶颈也在实际开发过程中遇到。在本文中，这些技术将探索如何优化Web端的AR应用程序中的性能，以实现更快的渲染速度和更高的渲染速度帧速率。
1.线程块JavaScript是单个线程语言。所有任务均在一个线程上完成，并计划执行一个任务。这意味着当线程忙碌时，将阻止许多任务，而前端经验则在切断。
作为提供AR渲染的SDK，实时渲染意味着将检测和翻新每个帧。尽管检测使用WebAssembly技术来加快速度，但WebAssembly的执行仍在阻止主线程。
可以看出，在运行60fps的状态下，检测+渲染几乎充满了整个线程，这意味着，当客户访问SDK并实施一些高频业务互动时线程。导致诸如响应延迟之类的问题。
2.渲染帧速率GPU加速度的WebGL渲染性能非常好。您可以在毫秒级完成抽奖电话。同时，该方案中使用的渲染库减少了抽奖呼叫的极端降低。但是，在实际的性能观察过程中，发现帧速率随着渲染质地的增加和颜色的复杂性而增加设备。调查后，发现AI检测的控制框架是在中间您需要调用readpixels方法中进行通信。readpixels方法将向GPU发送信息，并等待GPU返回。此过程通常可能会被WebGL渲染管道阻止，并导致太长，从而降低渲染速率。
3.当进行加载性能时，如果用户上传高分辨率和多帧框架材料，则可能导致大量资源包，这会导致网络端渲染时的预加载时间太高。影响用户体验。
1. Webworker的独立线程渲染，以免阻止，整个渲染过程需要转移到不影响主线程的另一个线程中，因为使用了Worker。工作人员是用于运行到Web的多线程的简单解决方案。工人在背景中独立执行，而不会干扰主界面。
工人也有一些局限性。
首先，Worker无法访问DOM元素，无法直接获得视频或图像标签进行渲染，也无法直接在屏幕画布上渲染。
其次，工作人员和主线程的数据隔离以及与主线程的数据交互需要异步处理。
最后一个是工人的兼容性。例如，野生动物园与工人的兼容性不好。因此，它用于在不支持Worker渲染的浏览器中渲染原始主线程渲染。
基于这些要点，最终改善了使用工人进行独立线程渲染的解决方案。
工作人员无法直接访问DOM元素或主线程的数据，并且主线程需要在渲染每个帧时手动将当前帧发送到工作。
直接将文本数据传输到工人时，是将文本数据的副本发送给工人。大量数据的效率非常低，因此不能通过传输屏幕缓冲区来传输它。
经过一些研究，发现有两种方案可以实现图像线之间的传播。一个是共享的数组缓冲区（SAB），另一个是ImageBitMap。
SAB的兼容性较差，并且需要背景与BackTP头（交叉启动 - opener-Policy和Cross-Origin-Embedder-Policy）合作。访问成本是不可见的。ImageBitMap是一种纯粹的前端实施方案，同时进行传输方便。同时，性能开销也较低。您可以通过CreateMageBitMap方法将常见的HTMLMediaElement转换为ImageBitMap。因此，最终选择了使用ImageBitMap的数据传输方案。
工人中的渲染不能直接输出到画布的屏幕上，您可以将画布的控制转移到免费的屏幕画布上，然后将工人输出到Offscreencanvas。目前，画布屏幕也将同时更新。
OffScreencanvas基本上与屏幕画布上的WebGL渲染接口相同。没有事件回调，只能进行渲染操作。再次，您只需要对渲染库做出兼容的判断并删除AddeventListener的相关逻辑。
完成工人渲染的转换后，SDK的大多数执行过程都进入了工作人员，主线程没有90％。
2.在“ Web -end AR美容特殊效果技术”中合并的层渲染提到，意识到美的技术基于网格网格+着色器以实现混合模式。此方案可以完美地对齐Photoshop中的混合模式效应。同时，当用户分别生产用户时，它还需要渲染导入的每一层。每一层都对应于网格+着色器，这会导致性能消耗。
实际上，仔细观察发现，在多层美的网格中，其峰位置完全相同，但是输入材料（即网格上的颜色的质地）和混合模式。可以首先重复使用，然后可以通过材料的着色器集成到网格中的不同层纹理，以实现实际渲染层的还原。
集成了混合模式的相同数据后，您可以动态生成相应的着色设备代码：
3.资源加载优化的材料包装：制作和包装材料时，序列框架的资源均匀地散布在精灵中。Sprite不仅可以减少整个包装的体积，而且可以有效地减少纹理的时间消耗上传和WebGL渲染过程中GPU缓存刷新的次数。在同时，当序列帧被包装时，序列帧会适当压缩。
网络传输：当前端用资源拉动前端时，打开GZIP压缩，HTTP缓存以及传输过程的时间消耗。创建前端的纹理和资源缓存以减少远程绘图资源的数量。此类应用程序的资源主要是分开的WASM，图片和配置文件，很难单独管理，并且在顺序问题中很容易出现并引起错误。因此，资源用于使用统一的包装方法收敛并加载了整体负载。对于相对较大的资源包，进行合理的拆分和包装以满足并行加载。压缩软件包的加载和分析不仅可以减少加载数据的大小和请求的数量，虽然更方便地实施管理和后续前端 - 端高速缓存策略。78m，然后根据资源结构进行拆分。拆分后的最大包装仅为3m。％以上。
工人异步加载：下载资源软件包后，输入解析阶段，直到返回解析的结果为止。此过程可能会阻止接口的渲染。WORKER支持获取接口，并将此过程迁移到工作人员进行执行。
前端纹理缓存：资源存储将打开HTTP缓存，当第一次加载资源时，它可以快速从浏览器中获取缓存资源。但是，当求解页面停留时，用户会重复单击。资源实际上可能具有重复加载和分析的过程。为了避免这种浪费，第一次加载时间后，根据缓存数据结构读取相应的纹理缓存。在同一时间，纹理的缓存同时带来了问题，这是质地缓存过多的缓存将会占据更大的记忆。因此，引入了LRU缓存管理机制。当纹理占据很多内存时，它将破坏尚未使用的最长纹理。
实际上，经过一系列的优化，还有更多极端的探索空间，并且还将继续在随后的迭代中进行探索和优化。
压缩纹理：当浏览器加载1024*1024 JPEG的图片时，图片本身可能只有100kb，但是当对待GL.Teximage2d处理时，应将其视为位图以占用近4m。提供压缩纹理的扩展并支持加载压缩纹理。按照WebGL的地址优化了压缩纹理的压缩方法，这可以大大减少WebGL解析纹理的时间和内存职业的消耗。
WebGPU：作为下一代Web Graphics API，WebGPU直接封装了本机的DX12，Vulkan，Metal，以实现交叉平台，同时允许与基础级别进行直接互动而无需首先具有强大的计算能力和更多的效果。改善AI模型的计算性能。
作者认为，随着Web技术的持续发展，AR应用程序的体验将变得更接近本地体验，并将有更多的可能性。让我们拭目以待。
原始：https：//juejin.cn/post/7097126160747724814