feat: 🎸 WebGPU & WebGL renderers

LottieFiles · Jan 24, 2025 · 0d39dcb · 0d39dcb
1 parent 9d67d22
commit 0d39dcb
Show file tree

Hide file tree

Showing 12 changed files with 5,225 additions and 1,581 deletions.
diff --git a/apps/dotlottie-viewer/src/pages/perf.tsx b/apps/dotlottie-viewer/src/pages/perf.tsx
@@ -124,9 +124,11 @@ const countOptions = [
 
 const playerOptions = [
   { id: 0, name: 'dotlottie-web' },
-  { id: 1, name: 'dotlottie-web/worker' },
-  { id: 2, name: 'lottie-web' },
-  { id: 3, name: 'skia/skottie' },
+  { id: 1, name: 'dotlottie-web/wg' },
+  { id: 2, name: 'dotlottie-web/gl' },
+  { id: 3, name: 'dotlottie-web/worker' },
+  { id: 4, name: 'lottie-web' },
+  { id: 5, name: 'skia/skottie' },
 ];
 
 export const Perf = (): JSX.Element => {
@@ -315,7 +317,32 @@ export const Perf = (): JSX.Element => {
                   useFrameInterpolation={useFrameInterpolation}
                 />
               )}
+
               {player.id === 1 && (
+                <DotLottieReact
+                  src={anim.lottieURL}
+                  style={size}
+                  loop
+                  autoplay
+                  useFrameInterpolation={useFrameInterpolation}
+                  renderConfig={{
+                    renderer: 'wg',
+                  }}
+                />
+              )}
+              {player.id === 2 && (
+                <DotLottieReact
+                  src={anim.lottieURL}
+                  style={size}
+                  loop
+                  autoplay
+                  useFrameInterpolation={useFrameInterpolation}
+                  renderConfig={{
+                    renderer: 'gl',
+                  }}
+                />
+              )}
+              {player.id === 3 && (
                 <DotLottieWorkerReact
                   src={anim.lottieURL}
                   style={size}
@@ -324,8 +351,8 @@ export const Perf = (): JSX.Element => {
                   useFrameInterpolation={useFrameInterpolation}
                 />
               )}
-              {player.id === 2 && <LottieWeb src={anim.lottieURL} style={size} loop autoplay />}
-              {player.id === 3 && <SkottiePlayer lottieURL={anim.lottieURL} width={size.width} height={size.height} />}
+              {player.id === 4 && <LottieWeb src={anim.lottieURL} style={size} loop autoplay />}
+              {player.id === 5 && <SkottiePlayer lottieURL={anim.lottieURL} width={size.width} height={size.height} />}
               <h3 className="mt-6 text-lg font-semibold text-white">{anim.name}</h3>
               <p className="text-sm text-gray-500">{anim.location}</p>
             </li>

diff --git a/apps/dotlottie-web-example/src/main.ts b/apps/dotlottie-web-example/src/main.ts
@@ -164,6 +164,7 @@ allCanvas.forEach((canvas) => {
     backgroundColor,
     renderConfig: {
       autoResize: true,
+      renderer: 'gl',
     },
     useFrameInterpolation: false,
   });
@@ -205,6 +206,9 @@ fetch(
       speed: 1,
       backgroundColor: '#800080ff',
       themeId: 'animated_light',
+      renderConfig: {
+        renderer: 'wg',
+      },
       // useFrameInterpolation: false,
     });
 

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -46,6 +46,7 @@
     "@types/node": "^20.14.11",
     "@vitest/browser": "2.1.0-beta.5",
     "@vitest/coverage-istanbul": "2.1.0-beta.5",
+    "@webgpu/types": "^0.1.53",
     "cross-env": "7.0.3",
     "esbuild": "^0.23.0",
     "esbuild-plugin-replace": "^1.4.0",