Adding webgpu bundle to read-size and report-size workflows (#29251)

* Adding webgpu bundle to read-size and report-size workflows.

* no message

* no message

* no message

.github/workflows/read-size.yml

@@ -35,16 +35,24 @@ jobs:
       - name: Read bundle sizes
         id: read-size
         run: |
-          FILESIZE=$(stat --format=%s build/three.module.min.js)
+          WEBGL_FILESIZE=$(stat --format=%s build/three.module.min.js)
           gzip -k build/three.module.min.js
-          FILESIZE_GZIP=$(stat --format=%s build/three.module.min.js.gz)
-          TREESHAKEN=$(stat --format=%s test/treeshake/index.bundle.min.js)
+          WEBGL_FILESIZE_GZIP=$(stat --format=%s build/three.module.min.js.gz)
+          WEBGL_TREESHAKEN=$(stat --format=%s test/treeshake/index.bundle.min.js)
           gzip -k test/treeshake/index.bundle.min.js
-          TREESHAKEN_GZIP=$(stat --format=%s test/treeshake/index.bundle.min.js.gz)
+          WEBGL_TREESHAKEN_GZIP=$(stat --format=%s test/treeshake/index.bundle.min.js.gz)
+
+          WEBGPU_FILESIZE=$(stat --format=%s build/three.webgpu.min.js)
+          gzip -k build/three.webgpu.min.js
+          WEBGPU_FILESIZE_GZIP=$(stat --format=%s build/three.webgpu.min.js.gz)
+          WEBGPU_TREESHAKEN=$(stat --format=%s test/treeshake/index.webgpu.bundle.min.js)
+          gzip -k test/treeshake/index.webgpu.bundle.min.js
+          WEBGPU_TREESHAKEN_GZIP=$(stat --format=%s test/treeshake/index.webgpu.bundle.min.js.gz)
+
           PR=${{ github.event.pull_request.number }}
 
           # write the output in a json file to upload it as artifact
-          node -pe "JSON.stringify({ filesize: $FILESIZE, gzip: $FILESIZE_GZIP, treeshaken: $TREESHAKEN, treeshakenGzip: $TREESHAKEN_GZIP, pr: $PR })" > sizes.json
+          node -pe "JSON.stringify({ filesize: $WEBGL_FILESIZE, gzip: $WEBGL_FILESIZE_GZIP, treeshaken: $WEBGL_TREESHAKEN, treeshakenGzip: $WEBGL_TREESHAKEN_GZIP, filesize2: $WEBGPU_FILESIZE, gzip2: $WEBGPU_FILESIZE_GZIP, treeshaken2: $WEBGPU_TREESHAKEN, treeshakenGzip2: $WEBGPU_TREESHAKEN_GZIP, pr: $PR })" > sizes.json
       - name: Upload artifact
         uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4
         with:

.github/workflows/report-size.yml

@@ -71,59 +71,106 @@ jobs:
       - name: Read sizes
         id: read-size
         run: |
-          FILESIZE_BASE=$(stat --format=%s build/three.module.min.js)
+          WEBGL_FILESIZE_BASE=$(stat --format=%s build/three.module.min.js)
           gzip -k build/three.module.min.js
-          FILESIZE_BASE_GZIP=$(stat --format=%s build/three.module.min.js.gz)
-          TREESHAKEN_BASE=$(stat --format=%s test/treeshake/index.bundle.min.js)
+          WEBGL_FILESIZE_BASE_GZIP=$(stat --format=%s build/three.module.min.js.gz)
+          WEBGL_TREESHAKEN_BASE=$(stat --format=%s test/treeshake/index.bundle.min.js)
           gzip -k test/treeshake/index.bundle.min.js
-          TREESHAKEN_BASE_GZIP=$(stat --format=%s test/treeshake/index.bundle.min.js.gz)
+          WEBGL_TREESHAKEN_BASE_GZIP=$(stat --format=%s test/treeshake/index.bundle.min.js.gz)
 
-          # log to console
-          echo "FILESIZE_BASE=$FILESIZE_BASE"
-          echo "FILESIZE_BASE_GZIP=$FILESIZE_BASE_GZIP"
-          echo "TREESHAKEN_BASE=$TREESHAKEN_BASE"
-          echo "TREESHAKEN_BASE_GZIP=$TREESHAKEN_BASE_GZIP"
+          WEBGPU_FILESIZE_BASE=$(stat --format=%s build/three.webgpu.min.js)
+          gzip -k build/three.webgpu.min.js
+          WEBGPU_FILESIZE_BASE_GZIP=$(stat --format=%s build/three.webgpu.min.js.gz)
+          WEBGPU_TREESHAKEN_BASE=$(stat --format=%s test/treeshake/index.webgpu.bundle.min.js)
+          gzip -k test/treeshake/index.webgpu.bundle.min.js
+          WEBGPU_TREESHAKEN_BASE_GZIP=$(stat --format=%s test/treeshake/index.webgpu.bundle.min.js.gz)
 
-          echo "FILESIZE_BASE=$FILESIZE_BASE" >> $GITHUB_OUTPUT
-          echo "FILESIZE_BASE_GZIP=$FILESIZE_BASE_GZIP" >> $GITHUB_OUTPUT
-          echo "TREESHAKEN_BASE=$TREESHAKEN_BASE" >> $GITHUB_OUTPUT
-          echo "TREESHAKEN_BASE_GZIP=$TREESHAKEN_BASE_GZIP" >> $GITHUB_OUTPUT
+          # log to console
+          echo "WEBGL_FILESIZE_BASE=$WEBGL_FILESIZE_BASE"
+          echo "WEBGL_FILESIZE_BASE_GZIP=$WEBGL_FILESIZE_BASE_GZIP"
+          echo "WEBGL_TREESHAKEN_BASE=$WEBGL_TREESHAKEN_BASE"
+          echo "WEBGL_TREESHAKEN_BASE_GZIP=$WEBGL_TREESHAKEN_BASE_GZIP"
+
+          echo "WEBGL_FILESIZE_BASE=$WEBGL_FILESIZE_BASE" >> $GITHUB_OUTPUT
+          echo "WEBGL_FILESIZE_BASE_GZIP=$WEBGL_FILESIZE_BASE_GZIP" >> $GITHUB_OUTPUT
+          echo "WEBGL_TREESHAKEN_BASE=$WEBGL_TREESHAKEN_BASE" >> $GITHUB_OUTPUT
+          echo "WEBGL_TREESHAKEN_BASE_GZIP=$WEBGL_TREESHAKEN_BASE_GZIP" >> $GITHUB_OUTPUT
+
+          echo "WEBGPU_FILESIZE_BASE=$WEBGPU_FILESIZE_BASE"
+          echo "WEBGPU_FILESIZE_BASE_GZIP=$WEBGPU_FILESIZE_BASE_GZIP"
+          echo "WEBGPU_TREESHAKEN_BASE=$WEBGPU_TREESHAKEN_BASE"
+          echo "WEBGPU_TREESHAKEN_BASE_GZIP=$WEBGPU_TREESHAKEN_BASE_GZIP"
+
+          echo "WEBGPU_FILESIZE_BASE=$WEBGPU_FILESIZE_BASE" >> $GITHUB_OUTPUT
+          echo "WEBGPU_FILESIZE_BASE_GZIP=$WEBGPU_FILESIZE_BASE_GZIP" >> $GITHUB_OUTPUT
+          echo "WEBGPU_TREESHAKEN_BASE=$WEBGPU_TREESHAKEN_BASE" >> $GITHUB_OUTPUT
+          echo "WEBGPU_TREESHAKEN_BASE_GZIP=$WEBGPU_TREESHAKEN_BASE_GZIP" >> $GITHUB_OUTPUT
 
       - name: Format sizes
         id: format
         # It's important these are passed as env variables.
         # https://securitylab.github.com/research/github-actions-untrusted-input/
         env:
-          FILESIZE: ${{ fromJSON(steps.download-artifact.outputs.result).filesize }}
-          FILESIZE_GZIP: ${{ fromJSON(steps.download-artifact.outputs.result).gzip }}
-          FILESIZE_BASE: ${{ steps.read-size.outputs.FILESIZE_BASE }}
-          FILESIZE_BASE_GZIP: ${{ steps.read-size.outputs.FILESIZE_BASE_GZIP }}
-          TREESHAKEN: ${{ fromJSON(steps.download-artifact.outputs.result).treeshaken }}
-          TREESHAKEN_GZIP: ${{ fromJSON(steps.download-artifact.outputs.result).treeshakenGzip }}
-          TREESHAKEN_BASE: ${{ steps.read-size.outputs.TREESHAKEN_BASE }}
-          TREESHAKEN_BASE_GZIP: ${{ steps.read-size.outputs.TREESHAKEN_BASE_GZIP }}
+          WEBGL_FILESIZE: ${{ fromJSON(steps.download-artifact.outputs.result).filesize }}
+          WEBGL_FILESIZE_GZIP: ${{ fromJSON(steps.download-artifact.outputs.result).gzip }}
+          WEBGL_FILESIZE_BASE: ${{ steps.read-size.outputs.WEBGL_FILESIZE_BASE }}
+          WEBGL_FILESIZE_BASE_GZIP: ${{ steps.read-size.outputs.WEBGL_FILESIZE_BASE_GZIP }}
+          WEBGL_TREESHAKEN: ${{ fromJSON(steps.download-artifact.outputs.result).treeshaken }}
+          WEBGL_TREESHAKEN_GZIP: ${{ fromJSON(steps.download-artifact.outputs.result).treeshakenGzip }}
+          WEBGL_TREESHAKEN_BASE: ${{ steps.read-size.outputs.WEBGL_TREESHAKEN_BASE }}
+          WEBGL_TREESHAKEN_BASE_GZIP: ${{ steps.read-size.outputs.WEBGL_TREESHAKEN_BASE_GZIP }}
+          WEBGPU_FILESIZE: ${{ fromJSON(steps.download-artifact.outputs.result).filesize2 }}
+          WEBGPU_FILESIZE_GZIP: ${{ fromJSON(steps.download-artifact.outputs.result).gzip2 }}
+          WEBGPU_FILESIZE_BASE: ${{ steps.read-size.outputs.WEBGPU_FILESIZE_BASE }}
+          WEBGPU_FILESIZE_BASE_GZIP: ${{ steps.read-size.outputs.WEBGPU_FILESIZE_BASE_GZIP }}
+          WEBGPU_TREESHAKEN: ${{ fromJSON(steps.download-artifact.outputs.result).treeshaken2 }}
+          WEBGPU_TREESHAKEN_GZIP: ${{ fromJSON(steps.download-artifact.outputs.result).treeshakenGzip2 }}
+          WEBGPU_TREESHAKEN_BASE: ${{ steps.read-size.outputs.WEBGPU_TREESHAKEN_BASE }}
+          WEBGPU_TREESHAKEN_BASE_GZIP: ${{ steps.read-size.outputs.WEBGPU_TREESHAKEN_BASE_GZIP }}
         run: |
-          FILESIZE_FORM=$(node ./test/treeshake/utils/format-size.js "$FILESIZE")
-          FILESIZE_GZIP_FORM=$(node ./test/treeshake/utils/format-size.js "$FILESIZE_GZIP")
-          FILESIZE_BASE_FORM=$(node ./test/treeshake/utils/format-size.js "$FILESIZE_BASE")
-          FILESIZE_BASE_GZIP_FORM=$(node ./test/treeshake/utils/format-size.js "$FILESIZE_BASE_GZIP")
-          FILESIZE_DIFF=$(node ./test/treeshake/utils/format-diff.js "$FILESIZE" "$FILESIZE_BASE")
-          TREESHAKEN_FORM=$(node ./test/treeshake/utils/format-size.js "$TREESHAKEN")
-          TREESHAKEN_GZIP_FORM=$(node ./test/treeshake/utils/format-size.js "$TREESHAKEN_GZIP")
-          TREESHAKEN_BASE_FORM=$(node ./test/treeshake/utils/format-size.js "$TREESHAKEN_BASE")
-          TREESHAKEN_BASE_GZIP_FORM=$(node ./test/treeshake/utils/format-size.js "$TREESHAKEN_BASE_GZIP")
-          TREESHAKEN_DIFF=$(node ./test/treeshake/utils/format-diff.js "$TREESHAKEN" "$TREESHAKEN_BASE")
-
-          echo "FILESIZE=$FILESIZE_FORM" >> $GITHUB_OUTPUT
-          echo "FILESIZE_GZIP=$FILESIZE_GZIP_FORM" >> $GITHUB_OUTPUT
-          echo "FILESIZE_BASE=$FILESIZE_BASE_FORM" >> $GITHUB_OUTPUT
-          echo "FILESIZE_BASE_GZIP=$FILESIZE_BASE_GZIP_FORM" >> $GITHUB_OUTPUT
-          echo "FILESIZE_DIFF=$FILESIZE_DIFF" >> $GITHUB_OUTPUT
-          echo "TREESHAKEN=$TREESHAKEN_FORM" >> $GITHUB_OUTPUT
-          echo "TREESHAKEN_GZIP=$TREESHAKEN_GZIP_FORM" >> $GITHUB_OUTPUT
-          echo "TREESHAKEN_BASE=$TREESHAKEN_BASE_FORM" >> $GITHUB_OUTPUT
-          echo "TREESHAKEN_BASE_GZIP=$TREESHAKEN_BASE_GZIP_FORM" >> $GITHUB_OUTPUT
-          echo "TREESHAKEN_DIFF=$TREESHAKEN_DIFF" >> $GITHUB_OUTPUT
+          WEBGL_FILESIZE_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGL_FILESIZE")
+          WEBGL_FILESIZE_GZIP_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGL_FILESIZE_GZIP")
+          WEBGL_FILESIZE_BASE_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGL_FILESIZE_BASE")
+          WEBGL_FILESIZE_BASE_GZIP_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGL_FILESIZE_BASE_GZIP")
+          WEBGL_FILESIZE_DIFF=$(node ./test/treeshake/utils/format-diff.js "$WEBGL_FILESIZE" "$WEBGL_FILESIZE_BASE")
+          WEBGL_TREESHAKEN_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGL_TREESHAKEN")
+          WEBGL_TREESHAKEN_GZIP_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGL_TREESHAKEN_GZIP")
+          WEBGL_TREESHAKEN_BASE_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGL_TREESHAKEN_BASE")
+          WEBGL_TREESHAKEN_BASE_GZIP_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGL_TREESHAKEN_BASE_GZIP")
+          WEBGL_TREESHAKEN_DIFF=$(node ./test/treeshake/utils/format-diff.js "$WEBGL_TREESHAKEN" "$WEBGL_TREESHAKEN_BASE")
+
+          WEBGPU_FILESIZE_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGPU_FILESIZE")
+          WEBGPU_FILESIZE_GZIP_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGPU_FILESIZE_GZIP")
+          WEBGPU_FILESIZE_BASE_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGPU_FILESIZE_BASE")
+          WEBGPU_FILESIZE_BASE_GZIP_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGPU_FILESIZE_BASE_GZIP")
+          WEBGPU_FILESIZE_DIFF=$(node ./test/treeshake/utils/format-diff.js "$WEBGPU_FILESIZE" "$WEBGPU_FILESIZE_BASE")
+          WEBGPU_TREESHAKEN_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGPU_TREESHAKEN")
+          WEBGPU_TREESHAKEN_GZIP_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGPU_TREESHAKEN_GZIP")
+          WEBGPU_TREESHAKEN_BASE_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGPU_TREESHAKEN_BASE")
+          WEBGPU_TREESHAKEN_BASE_GZIP_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGPU_TREESHAKEN_BASE_GZIP")
+          WEBGPU_TREESHAKEN_DIFF=$(node ./test/treeshake/utils/format-diff.js "$WEBGPU_TREESHAKEN" "$WEBGPU_TREESHAKEN_BASE")
+
+          echo "WEBGL_FILESIZE=$WEBGL_FILESIZE_FORM" >> $GITHUB_OUTPUT
+          echo "WEBGL_FILESIZE_GZIP=$WEBGL_FILESIZE_GZIP_FORM" >> $GITHUB_OUTPUT
+          echo "WEBGL_FILESIZE_BASE=$WEBGL_FILESIZE_BASE_FORM" >> $GITHUB_OUTPUT
+          echo "WEBGL_FILESIZE_BASE_GZIP=$WEBGL_FILESIZE_BASE_GZIP_FORM" >> $GITHUB_OUTPUT
+          echo "WEBGL_FILESIZE_DIFF=$WEBGL_FILESIZE_DIFF" >> $GITHUB_OUTPUT
+          echo "WEBGL_TREESHAKEN=$WEBGL_TREESHAKEN_FORM" >> $GITHUB_OUTPUT
+          echo "WEBGL_TREESHAKEN_GZIP=$WEBGL_TREESHAKEN_GZIP_FORM" >> $GITHUB_OUTPUT
+          echo "WEBGL_TREESHAKEN_BASE=$WEBGL_TREESHAKEN_BASE_FORM" >> $GITHUB_OUTPUT
+          echo "WEBGL_TREESHAKEN_BASE_GZIP=$WEBGL_TREESHAKEN_BASE_GZIP_FORM" >> $GITHUB_OUTPUT
+          echo "WEBGL_TREESHAKEN_DIFF=$WEBGL_TREESHAKEN_DIFF" >> $GITHUB_OUTPUT
+
+          echo "WEBGPU_FILESIZE=$WEBGPU_FILESIZE_FORM" >> $GITHUB_OUTPUT
+          echo "WEBGPU_FILESIZE_GZIP=$WEBGPU_FILESIZE_GZIP_FORM" >> $GITHUB_OUTPUT
+          echo "WEBGPU_FILESIZE_BASE=$WEBGPU_FILESIZE_BASE_FORM" >> $GITHUB_OUTPUT
+          echo "WEBGPU_FILESIZE_BASE_GZIP=$WEBGPU_FILESIZE_BASE_GZIP_FORM" >> $GITHUB_OUTPUT
+          echo "WEBGPU_FILESIZE_DIFF=$WEBGPU_FILESIZE_DIFF" >> $GITHUB_OUTPUT
+          echo "WEBGPU_TREESHAKEN=$WEBGPU_TREESHAKEN_FORM" >> $GITHUB_OUTPUT
+          echo "WEBGPU_TREESHAKEN_GZIP=$WEBGPU_TREESHAKEN_GZIP_FORM" >> $GITHUB_OUTPUT
+          echo "WEBGPU_TREESHAKEN_BASE=$WEBGPU_TREESHAKEN_BASE_FORM" >> $GITHUB_OUTPUT
+          echo "WEBGPU_TREESHAKEN_BASE_GZIP=$WEBGPU_TREESHAKEN_BASE_GZIP_FORM" >> $GITHUB_OUTPUT
+          echo "WEBGPU_TREESHAKEN_DIFF=$WEBGPU_TREESHAKEN_DIFF" >> $GITHUB_OUTPUT
 
       - name: Find existing comment
         uses: peter-evans/find-comment@3eae4d37986fb5a8592848f6a574fdf654e61f9e # v3
@@ -145,7 +192,8 @@ jobs:
 
             | Filesize `${{ github.ref_name }}` | Filesize PR | Diff |
             |----------|---------|------|
-            | ${{ steps.format.outputs.FILESIZE_BASE }} (${{ steps.format.outputs.FILESIZE_BASE_GZIP }}) | ${{ steps.format.outputs.FILESIZE }} (${{ steps.format.outputs.FILESIZE_GZIP }}) | ${{ steps.format.outputs.FILESIZE_DIFF }} |
+            | ${{ steps.format.outputs.WEBGL_FILESIZE_BASE }} (${{ steps.format.outputs.WEBGL_FILESIZE_BASE_GZIP }}) | ${{ steps.format.outputs.WEBGL_FILESIZE }} (${{ steps.format.outputs.WEBGL_FILESIZE_GZIP }}) | ${{ steps.format.outputs.WEBGL_FILESIZE_DIFF }} |
+            | ${{ steps.format.outputs.WEBGPU_FILESIZE_BASE }} (${{ steps.format.outputs.WEBGPU_FILESIZE_BASE_GZIP }}) | ${{ steps.format.outputs.WEBGPU_FILESIZE }} (${{ steps.format.outputs.WEBGPU_FILESIZE_GZIP }}) | ${{ steps.format.outputs.WEBGPU_FILESIZE_DIFF }} |
 
             ### 🌳 Bundle size after tree-shaking
 
@@ -153,4 +201,5 @@ jobs:
 
             | Filesize `${{ github.ref_name }}` | Filesize PR | Diff |
             |----------|---------|------|
-            | ${{ steps.format.outputs.TREESHAKEN_BASE }} (${{ steps.format.outputs.TREESHAKEN_BASE_GZIP }}) | ${{ steps.format.outputs.TREESHAKEN }} (${{ steps.format.outputs.TREESHAKEN_GZIP }}) | ${{ steps.format.outputs.TREESHAKEN_DIFF }} |
+            | ${{ steps.format.outputs.WEBGL_TREESHAKEN_BASE }} (${{ steps.format.outputs.WEBGL_TREESHAKEN_BASE_GZIP }}) | ${{ steps.format.outputs.WEBGL_TREESHAKEN }} (${{ steps.format.outputs.WEBGL_TREESHAKEN_GZIP }}) | ${{ steps.format.outputs.WEBGL_TREESHAKEN_DIFF }} |
+            | ${{ steps.format.outputs.WEBGPU_TREESHAKEN_BASE }} (${{ steps.format.outputs.WEBGPU_TREESHAKEN_BASE_GZIP }}) | ${{ steps.format.outputs.WEBGPU_TREESHAKEN }} (${{ steps.format.outputs.WEBGPU_TREESHAKEN_GZIP }}) | ${{ steps.format.outputs.WEBGPU_TREESHAKEN_DIFF }} |

.gitignore

@@ -10,6 +10,8 @@ npm-debug.log
 test/unit/build
 test/treeshake/index.bundle.js
 test/treeshake/index.bundle.min.js
+test/treeshake/index.webgpu.bundle.js
+test/treeshake/index.webgpu.bundle.min.js
 test/treeshake/index-src.bundle.min.js
 test/treeshake/stats.html
 test/e2e/chromium

test/rollup.treeshake.config.js

@@ -69,4 +69,32 @@ export default [
 			}
 		]
 	},
+	{
+		input: 'test/treeshake/index.webgpu.js',
+		plugins: [
+			resolve(),
+		],
+		output: [
+			{
+				format: 'esm',
+				file: 'test/treeshake/index.webgpu.bundle.js'
+			}
+		]
+	},
+	{
+		input: 'test/treeshake/index.webgpu.js',
+		plugins: [
+			resolve(),
+			terser(),
+			filesize( {
+				showMinifiedSize: false,
+			} ),
+		],
+		output: [
+			{
+				format: 'esm',
+				file: 'test/treeshake/index.webgpu.bundle.min.js'
+			}
+		]
+	},
 ];

test/treeshake/index.webgpu.js

@@ -0,0 +1,24 @@
+import * as THREE from '../../src/Three.WebGPU.js';
+
+let camera, scene, renderer;
+
+init();
+
+function init() {
+
+	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
+
+	scene = new THREE.Scene();
+
+	renderer = new THREE.WebGPURenderer( { antialias: true } );
+	renderer.setSize( window.innerWidth, window.innerHeight );
+	renderer.setAnimationLoop( animation );
+	document.body.appendChild( renderer.domElement );
+
+}
+
+function animation( ) {
+
+	renderer.render( scene, camera );
+
+}