feat: 🎸 WebGPU & WebGL renderers

.changeset/pre.json

@@ -0,0 +1,22 @@
+{
+  "mode": "pre",
+  "tag": "pre",
+  "initialVersions": {
+    "dotlottie-next-example": "0.0.0",
+    "dotlottie-react-example": "0.0.0",
+    "dotlottie-solid-example": "0.0.0",
+    "dotlottie-viewer": "0.0.1",
+    "dotlottie-vue-example": "0.0.0",
+    "dotlottie-wc-example": "0.0.0",
+    "dotlottie-web-example": "0.0.0",
+    "dotlottie-web-node-example": "0.0.0",
+    "with-parcel-example": "0.0.0",
+    "@lottiefiles/dotlottie-react": "0.12.1",
+    "@lottiefiles/dotlottie-solid": "0.1.5",
+    "@lottiefiles/dotlottie-svelte": "0.4.4",
+    "@lottiefiles/dotlottie-vue": "0.5.4",
+    "@lottiefiles/dotlottie-wc": "0.4.2",
+    "@lottiefiles/dotlottie-web": "0.39.0"
+  },
+  "changesets": ["moody-otters-sniff", "thirty-cobras-perform"]
+}

.changeset/thirty-cobras-perform.md

@@ -0,0 +1,5 @@
+---
+'@lottiefiles/dotlottie-web': minor
+---
+
+feat: 🎸 WebGPU & WebGL renderers

.github/workflows/main.yml

@@ -3,7 +3,8 @@ on:
   push:
     branches:
       - main
-  pull_request:
+      - feat/web-gpu-gl
+  # pull_request:
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -218,9 +219,7 @@ jobs:
     name: publish-viewer
     needs: validate
     runs-on: ubuntu-latest
-    if:
-      ${{ github.repository == 'LottieFiles/dotlottie-web' && github.event_name == 'push' && github.ref ==
-      'refs/heads/main' }}
+    if: ${{ github.repository == 'LottieFiles/dotlottie-web' && github.event_name == 'push' }}
 
     permissions:
       contents: write

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>

apps/dotlottie-web-example/src/main.ts

@@ -164,13 +164,14 @@
     backgroundColor,
     renderConfig: {
       autoResize: true,
+      renderer: 'gl',
     },
     useFrameInterpolation: false,
   });
 
   dotLottie.addEventListener('loadError', console.error);
   dotLottie.addEventListener('freeze', console.log);
   dotLottie.addEventListener('unfreeze', console.log);
 
   // window.addEventListener('resize', () => {
   //   dotLottie.resize();
@@ -205,6 +206,9 @@
       speed: 1,
       backgroundColor: '#800080ff',
       themeId: 'animated_light',
+      renderConfig: {
+        renderer: 'wg',
+      },
       // useFrameInterpolation: false,
     });
 
@@ -223,7 +227,7 @@
       dotLottie.postPointerDownEvent(0, 0);
     });
 
     dotLottie.addEventListener('loadError', console.error);
 
     const playPauseButton = document.getElementById('playPause') as HTMLButtonElement;
     const stopButton = document.getElementById('stop') as HTMLButtonElement;
@@ -344,9 +348,9 @@
 
     themeSelect.addEventListener('change', () => {
       if (themeSelect.value) {
         console.log(dotLottie.setTheme(themeSelect.value));
       } else {
         console.log(dotLottie.resetTheme());
       }
     });
 
@@ -419,7 +423,7 @@
     });
 
     dotLottie.addEventListener('ready', (event) => {
       console.log(event, dotLottie.isReady);
     });
 
     dotLottie.addEventListener('load', (event) => {

apps/with-parcel-example/package.json

@@ -4,7 +4,6 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "build": "parcel build index.html --no-cache",
     "dev": "parcel index.html --no-cache --open"
   },
   "dependencies": {

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",