Yuns

输出一个 24 秒的视频，内部会连续渲染三个不同的视频，我本机的渲染时间是 180 秒左右，但是累计的 seeked 时间大概在 160 秒左右 😂

现在有个思路是在导出视频的时候把 Video 元素换成一个自定义的 VideoImg 的元素，这个元素 load 的时候会通过 mp4box 解析得到所有的视频帧，在 tick 的时候通过时间戳再选择合适的图片 texture 来更新。 核心逻辑都写完了，但是发现 pixi.js@v8 加载 base64 和 blob url 形式的图片都报错，自定义 format 和 loader 也试过了 😅 这就很尴尬了，看了 pixi.js 相关 issues，理论上应该支持的，看起来还得先解决...

- https://github.com/pixijs/pixijs/issues/8529 - https://github.com/pixijs/pixijs/issues/9568 理论上应该官方就支持了吧，我怎么测试都报错 😂 那我先看看 https://github.com/vnve/vnve/blob/5e57b8f6167c80c553b4ec48ff8fc020bff07e9e/packages/core/src/Assets/BlobExt.ts#L13-L36

看了 v8 源码才知道怎么用了，官方确实是支持了，不过配置得整对，我昨天疯狂调试都没成功，看起来是排列组合配置的时候出了问题 ```ts Assets.load({ src: 'blob:http://localhost:3000/3e9f04ea-4309-4e39-b13b-d32be0e1d563', format: 'png', loadParser: 'loadTextures', }) ``` 顺便把 BlobExt 移除了 😂

VideoImg 逻辑跑通了，本地 3 分钟到 30 秒了，剩下的是处理视频背景透明了 🫠 参考 https://github.com/bilibili/WebAV/issues/30 看看怎么用 pixi.js 实现

要合成呀 😂 现在研究怎么去绿幕

> VideoImg 逻辑跑通了，本地 3 分钟到 30 秒了 尬住了，目前发现内存占用爆高，seek 的方案内存基本没啥变化 😂 VideoImg tick 处理即使调用了 this.texture.source.unload() 卸载上次加载的资源内存占用还是需要好几个 G，不卸载甚至能到十几个 G 😅 导出完成内存也不会降下来，好像 unload 资源没有完全生效的感觉……

最后测试发现不能直接使用 this.texture.source.unload()，这个好像不能稳定保证卸载之前的资源，Assets.load 的通过 Assets.unload 来处理内存就没啥变化了 🫠

> 内存上其实也还有挺多优化空间的 目前我把我能优化的都优化了，框架层面还有挺多优化空间？能具体说说吗？ > 目前最终视频也是直接存在内存里的，有点受限 这是 mp4-muxer 决定了吧，视频还能不存到内存里的吗？有点硬核了

单场景下，比如说同一个位置我需要渲染多个文本或者图片等，就需要先渲染一个，等前一个到了设定的时间再渲染下一个，这时候对于第二个要渲染出来的元素我是用动画来做的，比如说 FadeIn 延迟一定的时间再执行 😂 > 退出动画的延迟时间需要叠加上之前的进入动画加上需要等待的时间 那就是要把之前消耗的时间都叠加到后一个动画的开始和结束状态上咯？