skottie-wasm-perf.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Skottie-WASM Perf</title>
  5. <meta charset="utf-8" />
  6. <meta http-equiv="X-UA-Compatible" content="IE=egde,chrome=1">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <script src="res/canvaskit.js" type="text/javascript" charset="utf-8"></script>
  9. <style type="text/css" media="screen">
  10. body {
  11. margin: 0;
  12. padding: 0;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <main>
  18. <canvas id=anim width=1000 height=1000 style="height: 1000px; width: 1000px;"></canvas>
  19. </main>
  20. <script type="text/javascript" charset="utf-8">
  21. (function() {
  22. const PATH = '/res/lottie.json';
  23. let lottieJSON = null;
  24. let CK = null;
  25. CanvasKitInit({
  26. locateFile: (file) => '/res/'+file,
  27. }).ready().then((CanvasKit) => {
  28. CK = CanvasKit;
  29. Bench(CK, lottieJSON);
  30. });
  31. fetch(PATH).then((resp) => {
  32. resp.text().then((json) => {
  33. lottieJSON = json;
  34. Bench(CK, lottieJSON);
  35. });
  36. });
  37. })();
  38. const maxFrames = 25;
  39. const maxLoops = 3;
  40. function Bench(CK, json) {
  41. if (!CK || !json) {
  42. return;
  43. }
  44. const animation = CK.MakeManagedAnimation(json, null);
  45. if (!animation) {
  46. console.error('Could not process JSON');
  47. return
  48. }
  49. const surface = CK.MakeCanvasSurface("anim");
  50. if (!surface) {
  51. console.error('Could not make surface');
  52. return;
  53. }
  54. const canvas = surface.getCanvas();
  55. let c = document.getElementById('anim');
  56. // If CanvasKit was unable to instantiate a WebGL context, it will fallback
  57. // to CPU and add a ck-replaced class to the canvas element.
  58. window._gpu = CK.gpu && !c.classList.contains('ck-replaced');
  59. const t_rate = 1.0 / (maxFrames-1);
  60. let seek = 0;
  61. let frame = 0;
  62. let loop = 0;
  63. const drawFrame = () => {
  64. if (frame >= maxFrames) {
  65. // Reached the end of one loop.
  66. loop++;
  67. if (loop == maxLoops) {
  68. // These are global variables to talk with puppeteer.
  69. window._skottieDone = true;
  70. return;
  71. }
  72. // Reset frame and seek to restart the loop.
  73. frame = 0;
  74. seek = 0;
  75. }
  76. let damage = animation.seek(seek);
  77. if (damage.fRight > damage.fLeft && damage.fBottom > damage.fTop) {
  78. animation.render(canvas, {
  79. fLeft: 0,
  80. fTop: 0,
  81. fRight: 1000,
  82. fBottom: 1000
  83. });
  84. surface.flush();
  85. }
  86. console.log("Used seek: " + seek);
  87. seek += t_rate;
  88. frame++;
  89. window.requestAnimationFrame(drawFrame);
  90. };
  91. window.requestAnimationFrame(drawFrame);
  92. }
  93. </script>
  94. </body>
  95. </html>