如何使用javascript获得良好的帧率
How to obtain good framerate using javascript?
我正在尝试在javascript中使用像素操作对全高清视频应用过滤器。
我使用隐藏画布、web worker和transferables创建了一个演示:
http://lab.jure.it/ww/ww.html使用web worker的结果是浏览器的标签在短时间内崩溃,视频的性能非常低(约5fps)。
如果你选择"Web workers: 0"ww不使用,性能会更好(~15fps),并且标签不会崩溃。
我能做什么呢?目标是获得良好的帧率(~30fps),避免使用SVG或CSS过滤器。
谢谢。
遍历所有像素并在CPU上转换它们并不是一个好主意。这就是gpu的作用。在过去,这意味着你必须使用一些讨厌的东西,比如Flash。
幸运的是,新技术正在兴起,大多数流行的浏览器都可以使用图形加速。它叫做WebGL,它允许你使用显卡来做这些事情。
除非你想了解WebGL的所有内部秘密(它相当复杂),否则我建议你使用专为2D动画设计的PixiJS框架。
你可以在这里看到他们的过滤演示:http://www.goodboydigital.com/pixijs/examples/15/indexAll.html
更多演示和示例在这里:https://pixijs.github.io/examples/#/basics/basic.js
相关文章:
- D3/Raphael js 以慢帧率绘制 1000+ 动画圆圈
- BlackBerry PlayBook网络作品:低帧率
- 内帧内容高度.使用父页面滚动 iframe 内容
- "不安全的JavaScript尝试访问URL为..的帧"使用本地文件
- 尝试使用getUserMedia帧率约束
- js:捕捉视频帧供以后使用
- 画布游戏帧率下降
- 用requestAnimationFrame实现一些稳定的帧率
- HTML5 Canvas和JS帧率慢慢下降到0
- 低帧率的JS和CSS动画
- 如何使用javascript获得良好的帧率
- EaselJS性能问题/帧率下降
- Javascript水涟漪效应减慢帧率
- 如何改变精灵帧率
- 动态调整paperjs动画的帧率
- 低帧率嵌套转换元素
- 使用JS和DOM设置多个DIV元素的动画会导致低帧率
- javascript游戏中的异步/可变帧率
- 函数计算函数帧率
- 如何测试关键帧是否支持使用Modernizr