Closed mankeheaven closed 7 months ago
测试场景如下:
Engine3D初始化
添加渲染物体,开始渲染
等待5秒钟,销毁所有资源
继续一次上述步骤,Engine3D初始化...
same as #125 目前引擎还不支持 Engine3D 全局销毁,后面版本会考虑支持
目前只支持 Object3D 和相关几何、贴图数据的销毁
let box = new Object3D()
let mr = box.addComponent(MeshRenderer)
mr.geometry = new BoxGeometry()
mr.material = new LitMaterial()
...
box.destroy(true) // dispose box and its geometry, material, texture ...
// or
box.destroy() // delete box object only, but the geometry and material resource will not be disposed
但实际上 WebGPU/WebGL 的编程中,很多变量和状态都没有提供手动销毁的方法,依赖于浏览器的 GC 管理,所以想做到彻底销毁最好的办法是利用 iframe 隔离管理一个 Engine3D 实例,当iframe 被移除,浏览器会自动回收所有相关内存和显存资源。
目前主流的多实例演示网站,如 orillusion doc, 官方的 webgpu samples,还包括 WebGL 的引擎,如three doc, babylon doc,还有一些做代码 playground 的网站,如 Codepen 都是以 iframe
进行多实例管理,简单高效,避免复杂的状态和内存管理,不用销毁即可
至于利用 react/vue 封装 iframe 就是常规操作了,这里就不展开了,可以自行搜索先关标准和解决方案
iframe这个思路并不能接受,销毁是个基本操作,iframe只是一种特殊情况,并不能覆盖所有场景。
当产生3d canvas与项目本身的通讯的时候,iframe就是一种阻碍了。
一个最基本的场景:
拉取了ajax数据后,要给3d场景展示这些动态数据?这个数据通讯?
基于 iframe 的数据交换是很成熟技术,e.g postmessage ,如果是同域名下的操作就更简单。
我们后面会提供 Engine3D 层面的销毁,但以目前 webgpu 的标准,很难自动清除所有的内存和显存状态,创建新的示例仍然会有内存或显存溢出的风险。目前主流的引擎无论webgl/webgpu还是native,都需要开发自己管理释放的工作,总体来说是一件很复杂的工程。尤其是在web上,相比较复杂的内存和显存管理,iframe通信的管理要简单很多,这么多web3d项目都不约而同的选择了用 iframe
来管理页面多实例是经过长期实践的结果。
当我离开视图(router), 需要清理Orillusion哪些资源?希望文档能补充对这章的明确说明
我目前用到react,react-router-dom,
orillusion demo代码取自于它 https://www.orillusion.com/guide/getting_start/draw_cube.html
我封装了一个orillusion操作类,当离开react router对应的视图时候(组件销毁),调用dispose,发生了如下截图的错误。