New realisation of renderer on WebGPU (webgpu.mcraft.fun)

.eslintrc.json

@@ -10,6 +10,7 @@
         "@stylistic"
     ],
     "rules": {
+        "unicorn/no-typeof-undefined": "off",
         // style
         "@stylistic/space-infix-ops": "error",
         "@stylistic/no-multi-spaces": "error",

.vscode/launch.json

@@ -35,7 +35,25 @@
             "outFiles": [
                 "${workspaceFolder}/dist/**/*.js",
                 // "!${workspaceFolder}/dist/**/*vendors*",
-                "!${workspaceFolder}/dist/**/*mc-data*",
+                "!**/node_modules/**"
+            ],
+            "skipFiles": [
+                // "<node_internals>/**/*vendors*"
+                "<node_internals>/**/*mc-data*"
+            ],
+        },
+        {
+            // not recommended as in most cases it will slower as it launches from extension host so it slows down extension host, not sure why
+            "type": "chrome",
+            "name": "Launch Chrome (playground)",
+            "request": "launch",
+            "url": "http://localhost:9090/",
+            "pathMapping": {
+                "/": "${workspaceFolder}/prismarine-viewer/dist"
+            },
+            "outFiles": [
+                "${workspaceFolder}/prismarine-viewer/dist/**/*.js",
+                // "!${workspaceFolder}/dist/**/*vendors*",
                 "!**/node_modules/**"
             ],
             "skipFiles": [

.vscode/tasks.json

@@ -25,10 +25,20 @@
             },
         },
         {
-            "label": "viewer server+esbuild",
+            "label": "webgl-worker",
+            "type": "shell",
+            "command": "node buildWorkers.mjs -w",
+            "problemMatcher": "$esbuild-watch",
+            "presentation": {
+                "reveal": "silent"
+            },
+        },
+        {
+            "label": "viewer server+esbuild+workers",
             "dependsOn": [
                 "viewer-server",
-                "viewer-esbuild"
+                "viewer-esbuild",
+                "webgl-worker"
             ],
             "dependsOrder": "parallel",
         }

buildWorkers.mjs

@@ -0,0 +1,109 @@
+//@ts-check
+// main worker file intended for computing world geometry is built using prismarine-viewer/buildWorker.mjs
+import { build, context } from 'esbuild'
+import fs from 'fs'
+import path, { join } from 'path'
+import { polyfillNode } from 'esbuild-plugin-polyfill-node'
+
+const watch = process.argv.includes('-w')
+
+const result = await (watch ? context : build)({
+    bundle: true,
+    platform: 'browser',
+    // entryPoints: ['prismarine-viewer/examples/webgpuRendererWorker.ts', 'src/worldSaveWorker.ts'],
+    entryPoints: ['prismarine-viewer/examples/webgpuRendererWorker.ts'],
+    outdir: 'prismarine-viewer/dist/',
+    sourcemap: watch ? 'inline' : 'external',
+    minify: !watch,
+    treeShaking: true,
+    logLevel: 'info',
+    alias: {
+        'three': './node_modules/three/src/Three.js',
+        events: 'events', // make explicit
+        buffer: 'buffer',
+        'fs': 'browserfs/dist/shims/fs.js',
+        http: 'http-browserify',
+        perf_hooks: './src/perf_hooks_replacement.js',
+        crypto: './src/crypto.js',
+        stream: 'stream-browserify',
+        net: 'net-browserify',
+        assert: 'assert',
+        dns: './src/dns.js'
+    },
+    plugins: [
+        {
+            name: 'writeOutput',
+            setup (build) {
+                build.onEnd(({ outputFiles }) => {
+                    fs.mkdirSync('prismarine-viewer/public', { recursive: true })
+                    fs.mkdirSync('dist', { recursive: true })
+                    for (const file of outputFiles) {
+                        for (const dir of ['prismarine-viewer/dist', 'dist']) {
+                            const baseName = path.basename(file.path)
+                            fs.mkdirSync(dir, { recursive: true })
+                            fs.writeFileSync(path.join(dir, baseName), file.contents)
+                        }
+                    }
+                })
+            }
+        },
+        {
+            name: 'fix-dynamic-require',
+            setup (build) {
+              build.onResolve({
+                filter: /1\.14\/chunk/,
+              }, async ({ resolveDir, path }) => {
+                if (!resolveDir.includes('prismarine-provider-anvil')) return
+                return {
+                  namespace: 'fix-dynamic-require',
+                  path,
+                  pluginData: {
+                    resolvedPath: `${join(resolveDir, path)}.js`,
+                    resolveDir
+                  },
+                }
+              })
+              build.onLoad({
+                filter: /.+/,
+                namespace: 'fix-dynamic-require',
+              }, async ({ pluginData: { resolvedPath, resolveDir } }) => {
+                const resolvedFile = await fs.promises.readFile(resolvedPath, 'utf8')
+                return {
+                  contents: resolvedFile.replace("require(`prismarine-chunk/src/pc/common/BitArray${noSpan ? 'NoSpan' : ''}`)", "noSpan ? require(`prismarine-chunk/src/pc/common/BitArray`) : require(`prismarine-chunk/src/pc/common/BitArrayNoSpan`)"),
+                  resolveDir,
+                  loader: 'js',
+                }
+              })
+            }
+        },
+        polyfillNode({
+            polyfills: {
+              fs: false,
+              dns: false,
+              crypto: false,
+              events: false,
+              http: false,
+              stream: false,
+              buffer: false,
+              perf_hooks: false,
+              net: false,
+              assert: false,
+            },
+          })
+    ],
+    loader: {
+        '.vert': 'text',
+        '.frag': 'text',
+        '.wgsl': 'text',
+    },
+    mainFields: [
+        'browser', 'module', 'main'
+    ],
+    keepNames: true,
+    write: false,
+})
+
+if (watch) {
+    //@ts-ignore
+    await result.watch()
+}

config.json

@@ -2,7 +2,7 @@
   "version": 1,
   "defaultHost": "<from-proxy>",
   "defaultProxy": "proxy.mcraft.fun",
-  "mapsProvider": "https://maps.mcraft.fun/",
+  "mapsProvider": "https://maps.mcraft.fun/?label=webgpu",
   "peerJsServer": "",
   "peerJsServerFallback": "https://p2p.mcraft.fun",
   "promoteServers": [

cypress/e2e/performance.spec.ts

@@ -0,0 +1,25 @@
+import { cleanVisit, setOptions } from './shared'
+
+it('Loads & renders singleplayer', () => {
+  cleanVisit('/?singleplayer=1')
+  setOptions({
+    renderDistance: 2
+  })
+  // wait for .initial-loader to disappear
+  cy.get('.initial-loader', { timeout: 20_000 }).should('not.exist')
+  cy.window()
+    .its('performance')
+    .invoke('mark', 'worldLoad')
+
+  cy.document().then({ timeout: 20_000 }, doc => {
+    return new Cypress.Promise(resolve => {
+      doc.addEventListener('cypress-world-ready', resolve)
+    })
+  }).then(() => {
+    const duration = cy.window()
+      .its('performance')
+      .invoke('measure', 'modalOpen')
+      .its('duration')
+    cy.log('Duration', duration)
+  })
+})

package.json

@@ -5,12 +5,13 @@
   "scripts": {
     "dev-rsbuild": "rsbuild dev",
     "dev-proxy": "node server.js",
-    "start": "run-p dev-proxy dev-rsbuild watch-mesher",
-    "start2": "run-p dev-rsbuild watch-mesher",
+    "start": "run-p dev-rsbuild dev-proxy watch-mesher watch-other-workers",
+    "start2": "run-p dev-rsbuild watch-mesher watch-other-workers",
     "build": "pnpm build-other-workers && rsbuild build",
     "build-analyze": "BUNDLE_ANALYZE=true rsbuild build && pnpm build-other-workers",
     "check-build": "tsx scripts/genShims.ts && tsc && pnpm build",
     "test:cypress": "cypress run",
+    "test:cypress:perf": "cypress run --spec cypress/e2e/perf.spec.ts --browser edge",
     "test-unit": "vitest",
     "test:e2e": "start-test http-get://localhost:8080 test:cypress",
     "prod-start": "node server.js --prod",
@@ -19,12 +20,13 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build && node scripts/build.js moveStorybookFiles",
     "start-experiments": "vite --config experiments/vite.config.ts --host",
-    "watch-other-workers": "echo NOT IMPLEMENTED",
-    "build-other-workers": "echo NOT IMPLEMENTED",
+    "watch-other-workers": "node buildWorkers.mjs -w",
+    "build-other-workers": "node buildWorkers.mjs",
     "build-mesher": "node prismarine-viewer/buildMesherWorker.mjs",
     "watch-mesher": "pnpm build-mesher -w",
     "run-playground": "run-p watch-mesher watch-other-workers watch-playground",
     "run-all": "run-p start run-playground",
+    "run-all2": "run-p start2 run-playground",
     "build-playground": "rsbuild build --config prismarine-viewer/rsbuild.config.ts",
     "watch-playground": "rsbuild dev --config prismarine-viewer/rsbuild.config.ts"
   },
@@ -47,11 +49,13 @@
     "@nxg-org/mineflayer-auto-jump": "^0.7.12",
     "@nxg-org/mineflayer-tracker": "1.2.1",
     "@react-oauth/google": "^0.12.1",
+    "@rsbuild/plugin-basic-ssl": "^1.1.1",
     "@stylistic/eslint-plugin": "^2.6.1",
     "@types/gapi": "^0.0.47",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@types/wicg-file-system-access": "^2023.10.2",
+    "@webgpu/types": "^0.1.44",
     "@xmcl/text-component": "^2.1.3",
     "@zardoy/react-util": "^0.2.4",
     "@zardoy/utils": "^0.0.11",
@@ -102,6 +106,7 @@
     "stats.js": "^0.17.0",
     "tabbable": "^6.2.0",
     "title-case": "3.x",
+    "twgl.js": "^5.5.4",
     "ua-parser-js": "^1.0.37",
     "use-typed-event-listener": "^4.0.2",
     "valtio": "^1.11.1",
@@ -142,7 +147,7 @@
     "http-browserify": "^1.7.0",
     "http-server": "^14.1.1",
     "https-browserify": "^1.0.0",
-    "mc-assets": "^0.2.23",
+    "mc-assets": "^0.2.25",
     "minecraft-inventory-gui": "github:zardoy/minecraft-inventory-gui#next",
     "mineflayer": "github:zardoy/mineflayer",
     "mineflayer-pathfinder": "^2.4.4",