Webgpu!

esbuild.mjs

@@ -11,7 +11,7 @@ import { build } from 'esbuild'
 //@ts-ignore
 try { await import('./localSettings.mjs') } catch { }
 
-fs.writeFileSync('dist/index.html', fs.readFileSync('index.html', 'utf8').replace('<!-- inject script -->', '<script src="index.js"></script>'), 'utf8')
+fs.writeFileSync('dist/index.html', fs.readFileSync('index.html', 'utf8').replace('<!-- inject script -->', '<script type="module" src="index.js"></script>'), 'utf8')
 
 const watch = process.argv.includes('--watch') || process.argv.includes('-w')
 const prod = process.argv.includes('--prod')
@@ -30,8 +30,9 @@ const buildingVersion = new Date().toISOString().split(':')[0]
 /** @type {import('esbuild').BuildOptions} */
 const buildOptions = {
   bundle: true,
+  format: 'esm',
   entryPoints: ['src/index.ts'],
-  target: ['es2020'],
+  // target: ['es2020'],
   jsx: 'automatic',
   jsxDev: dev,
   // logLevel: 'debug',

experiments/vite.config.ts

@@ -2,4 +2,16 @@ import { defineConfig } from 'vite';
 
 export default defineConfig({
   root: 'experiments',
+  // set latest target
+  esbuild: {
+    target: 'esnext',
+  },
+  build: {
+    target: 'esnext',
+  },
+  optimizeDeps: {
+    esbuildOptions: {
+      target: 'esnext',
+    },
+  },
 })

package.json

@@ -85,8 +85,7 @@
     "@types/lodash-es": "^4.17.9",
     "@types/react-transition-group": "^4.4.7",
     "@types/stats.js": "^0.17.1",
-    "@types/three": "0.128.0",
-    "@types/ua-parser-js": "^0.7.39",
+    "@types/three": "0.161.2",
     "@xmcl/installer": "^5.1.0",
     "assert": "^2.0.0",
     "browserify-zlib": "^0.2.0",
@@ -115,7 +114,7 @@
     "rimraf": "^5.0.1",
     "storybook": "^7.4.6",
     "stream-browserify": "^3.0.0",
-    "three": "0.128.0",
+    "three": "0.161.0",
     "timers-browserify": "^2.0.12",
     "typescript": "^5.2.2",
     "use-typed-event-listener": "^4.0.2",
@@ -127,17 +126,14 @@
   },
   "pnpm": {
     "overrides": {
-      "three": "0.128.0",
+      "three": "0.161.0",
       "diamond-square": "github:zardoy/diamond-square",
       "prismarine-block": "github:zardoy/prismarine-block#next-era",
       "prismarine-world": "github:zardoy/prismarine-world#next-era",
       "minecraft-data": "3.61.2",
       "prismarine-provider-anvil": "github:zardoy/prismarine-provider-anvil#everything",
       "minecraft-protocol": "github:zardoy/minecraft-protocol#everything",
       "react": "^18.2.0"
-    },
-    "patchedDependencies": {
-      "[email protected]": "patches/[email protected]"
     }
   }
 }

prismarine-viewer/esbuild.mjs

@@ -30,6 +30,7 @@ const buildOptions = {
   // logLevel: 'debug',
   logLevel: 'info',
   platform: 'browser',
+  format: 'esm',
   sourcemap: dev ? 'inline' : false,
   minify: !dev,
   outfile: join(__dirname, 'public/playground.js'),
@@ -47,6 +48,7 @@ const buildOptions = {
     http: 'http-browserify',
     stream: 'stream-browserify',
     net: 'net-browserify',
+    // three: 'three-latest'
   },
   inject: [],
   metafile: true,
@@ -56,7 +58,7 @@ const buildOptions = {
   plugins: [
     {
       name: 'minecraft-data',
-      setup (build) {
+      setup(build) {
         build.onLoad({
           filter: /minecraft-data[\/\\]data.js$/,
         }, () => {

prismarine-viewer/examples/playground.ts

@@ -12,10 +12,15 @@ import { loadScript } from '../viewer/lib/utils'
 import JSZip from 'jszip'
 import { TWEEN_DURATION } from '../viewer/lib/entities'
 import Entity from '../viewer/lib/entity/Entity'
+// import * as _THREE from 'three-latest'
+import { render } from './scene1'
+import WebGpuRendererJs from 'three/examples/jsm/renderers/webgpu/WebGPURenderer.js'
 
+// const THREE = _THREE as typeof import('three')
 globalThis.THREE = THREE
 //@ts-ignore
-require('three/examples/js/controls/OrbitControls')
+// require('three/examples/js/controls/OrbitControls')
+import { OrbitControls } from 'three-stdlib'
 
 const gui = new GUI()
 
@@ -60,6 +65,7 @@ const setQs = () => {
 let ignoreResize = false
 
 async function main () {
+  //  = await import('THREE/examples/jsm/renderers/webgpu/WebGPURenderer.js')
   let continuousRender = false
 
   const { version } = params
@@ -127,7 +133,9 @@ async function main () {
   const worldView = new WorldDataEmitter(world, viewDistance, targetPos)
 
   // Create three.js context, add to page
-  const renderer = new THREE.WebGLRenderer({ alpha: true, ...localStorage['renderer'] })
+  const renderer = new WebGpuRendererJs({
+    ...localStorage['renderer']
+  })
   renderer.setPixelRatio(window.devicePixelRatio || 1)
   renderer.setSize(window.innerWidth, window.innerHeight)
   document.body.appendChild(renderer.domElement)
@@ -144,9 +152,18 @@ async function main () {
   viewer.listen(worldView)
   // Load chunks
   await worldView.init(targetPos)
+  // render(viewer.scene)
   window['worldView'] = worldView
   window['viewer'] = viewer
 
+  const box = new THREE.Mesh(
+    new THREE.BoxGeometry(1, 1, 1),
+    new THREE.MeshBasicMaterial({ color: 0x00ff00 })
+  )
+  box.occlusionTest = true
+  box.position.set(0, 90, 1)
+  viewer.world.scene.add(box)
+
   params.blockIsomorphicRenderBundle = () => {
     const canvas = renderer.domElement
     const onlyCurrent = !confirm('Ok - render all blocks, Cancel - render only current one')
@@ -291,7 +308,7 @@ async function main () {
 
 
   //@ts-ignore
-  const controls = new globalThis.THREE.OrbitControls(viewer.camera, renderer.domElement)
+  const controls = new OrbitControls(viewer.camera, renderer.domElement)
   controls.target.set(targetPos.x + 0.5, targetPos.y + 0.5, targetPos.z + 0.5)
 
   const cameraPos = targetPos.offset(2, 2, 2)
@@ -315,7 +332,7 @@ async function main () {
       id: 'id', name: params.entity, pos: targetPos.offset(0.5, 1, 0.5), width: 1, height: 1, username: localStorage.testUsername, yaw: Math.PI, pitch: 0
     })
     const enableSkeletonDebug = (obj) => {
-      const {children, isSkeletonHelper} = obj
+      const { children, isSkeletonHelper } = obj
       if (!Array.isArray(children)) return
       if (isSkeletonHelper) {
         obj.visible = true