also fix in playground

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,7 +126,7 @@
   },
   "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",
@@ -135,9 +134,6 @@
       "prismarine-provider-anvil": "github:zardoy/prismarine-provider-anvil#everything",
       "minecraft-protocol": "github:zardoy/minecraft-protocol#everything",
       "react": "^18.2.0"
-    },
-    "patchedDependencies": {
-      "source-map-js@1.0.2": "patches/source-map-js@1.0.2.patch"
     }
   }
 }

pnpm-lock.yaml

@@ -5,7 +5,7 @@ settings:
   excludeLinksFromLockfile: false
 
 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
@@ -14,11 +14,6 @@ overrides:
   minecraft-protocol: github:zardoy/minecraft-protocol#everything
   react: ^18.2.0
 
-patchedDependencies:
-  source-map-js@1.0.2:
-    hash: 64rmfibsvq4yinbp7ki2vnrrau
-    path: patches/source-map-js@1.0.2.patch
-
 importers:
 
   .:
@@ -139,7 +134,7 @@ importers:
         version: 3.0.1
       source-map-js:
         specifier: ^1.0.2
-        version: 1.0.2(patch_hash=64rmfibsvq4yinbp7ki2vnrrau)
+        version: 1.0.2
       stats-gl:
         specifier: ^1.0.5
         version: 1.0.5
@@ -197,11 +192,8 @@ importers:
         specifier: ^0.17.1
         version: 0.17.1
       '@types/three':
-        specifier: 0.128.0
-        version: 0.128.0
-      '@types/ua-parser-js':
-        specifier: ^0.7.39
-        version: 0.7.39
+        specifier: 0.161.2
+        version: 0.161.2
       '@xmcl/installer':
         specifier: ^5.1.0
         version: 5.1.0
@@ -287,8 +279,8 @@ importers:
         specifier: ^3.0.0
         version: 3.0.0
       three:
-        specifier: 0.128.0
-        version: 0.128.0
+        specifier: 0.161.0
+        version: 0.161.0
       timers-browserify:
         specifier: ^2.0.12
         version: 2.0.12
@@ -360,7 +352,7 @@ importers:
         version: 4.7.2
       three-stdlib:
         specifier: ^2.26.11
-        version: 2.28.5(three@0.128.0)
+        version: 2.28.5(three@0.161.0)
       three.meshline:
         specifier: ^1.3.0
         version: 1.4.0
@@ -5239,10 +5231,6 @@ packages:
   /@types/stats.js@0.17.1:
     resolution: {integrity: sha512-OgfYE1x2w1jRUXzzKABX+kOdwz2y9PE0uSwnZabkWfJTWOzm7Pvfm4JI2xqRE0q2nwUe2jZLWcrcnhd9lQU63w==}
 
-  /@types/three@0.128.0:
-    resolution: {integrity: sha512-Jwq5XYUkzAcPTo34hlGAQGUyAI0b2F3aCCFWG/v7ZhJBEG5HGcusMSr70GhDlT8Gs0f02QnSPZ2RCA1MrCOa/w==}
-    dev: true
-
   /@types/three@0.156.0:
     resolution: {integrity: sha512-733bXDSRdlrxqOmQuOmfC1UBRuJ2pREPk8sWnx9MtIJEVDQMx8U0NQO5MVVaOrjzDPyLI+cFPim2X/ss9v0+LQ==}
     dependencies:
@@ -5252,20 +5240,24 @@ packages:
       meshoptimizer: 0.18.1
     dev: false
 
+  /@types/three@0.161.2:
+    resolution: {integrity: sha512-DazpZ+cIfBzbW/p0zm6G8CS03HBMd748A3R1ZOXHpqaXZLv2I5zNgQUrRG//UfJ6zYFp2cUoCQaOLaz8ubH07w==}
+    dependencies:
+      '@types/stats.js': 0.17.1
+      '@types/webxr': 0.5.7
+      fflate: 0.6.10
+      meshoptimizer: 0.18.1
+    dev: true
+
   /@types/trusted-types@2.0.3:
     resolution: {integrity: sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==}
 
-  /@types/ua-parser-js@0.7.39:
-    resolution: {integrity: sha512-P/oDfpofrdtF5xw433SPALpdSchtJmY7nsJItf8h3KXqOslkbySh8zq4dSWXH2oTjRvJ5PczVEoCZPow6GicLg==}
-    dev: true
-
   /@types/unist@2.0.8:
     resolution: {integrity: sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw==}
     dev: true
 
   /@types/webxr@0.5.7:
     resolution: {integrity: sha512-Rcgs5c2eNFnHp53YOjgtKfl/zWX1Y+uFGUwlSXrWcZWu3yhANRezmph4MninmqybUYT6g9ZE0aQ9QIdPkLR3Kg==}
-    dev: false
 
   /@types/wicg-file-system-access@2023.10.2:
     resolution: {integrity: sha512-nSiK8qt0O7sQmDcW3HYfvya7GDoD6ipgdcUFzk3QN+UBIqXeNg38Nh6VnKv7EIPfkVETRiquyMskCbpxUzgX1Q==}
@@ -8749,7 +8741,6 @@ packages:
 
   /fflate@0.6.10:
     resolution: {integrity: sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==}
-    dev: false
 
   /figures@3.2.0:
     resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
@@ -10852,7 +10843,6 @@ packages:
 
   /meshoptimizer@0.18.1:
     resolution: {integrity: sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==}
-    dev: false
 
   /methods@1.1.2:
     resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
@@ -11967,7 +11957,7 @@ packages:
     dependencies:
       nanoid: 3.3.6
       picocolors: 1.0.0
-      source-map-js: 1.0.2(patch_hash=64rmfibsvq4yinbp7ki2vnrrau)
+      source-map-js: 1.0.2
 
   /postcss@8.4.35:
     resolution: {integrity: sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==}
@@ -11975,7 +11965,7 @@ packages:
     dependencies:
       nanoid: 3.3.7
       picocolors: 1.0.0
-      source-map-js: 1.0.2(patch_hash=64rmfibsvq4yinbp7ki2vnrrau)
+      source-map-js: 1.0.2
     dev: true
 
   /potpack@1.0.2:
@@ -13360,7 +13350,7 @@ packages:
     dependencies:
       '@types/three': 0.156.0
       skinview-utils: 0.7.1
-      three: 0.128.0
+      three: 0.161.0
     dev: false
 
   /slash@3.0.0:
@@ -13528,10 +13518,9 @@ packages:
     dev: false
     optional: true
 
-  /source-map-js@1.0.2(patch_hash=64rmfibsvq4yinbp7ki2vnrrau):
+  /source-map-js@1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
-    patched: true
 
   /source-map-support@0.5.21:
     resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
@@ -13982,10 +13971,10 @@ packages:
       any-promise: 1.3.0
     dev: false
 
-  /three-stdlib@2.28.5(three@0.128.0):
+  /three-stdlib@2.28.5(three@0.161.0):
     resolution: {integrity: sha512-JdLMhkpT+1ZWeQPyKQNW1zqUwISI2hsUljS6u3vB9lp5EvwsayaAzGnbVeR35895udOF+zxcTiQY3psk+qqlxg==}
     peerDependencies:
-      three: 0.128.0
+      three: 0.161.0
     dependencies:
       '@types/draco3d': 1.4.7
       '@types/offscreencanvas': 2019.7.2
@@ -13993,15 +13982,15 @@ packages:
       draco3d: 1.5.6
       fflate: 0.6.10
       potpack: 1.0.2
-      three: 0.128.0
+      three: 0.161.0
     dev: false
 
   /three.meshline@1.4.0:
     resolution: {integrity: sha512-A8IsiMrWP8zmHisGDAJ76ZD7t/dOF/oCe/FUKNE6Bu01ZYEx8N6IlU/1Plb2aOZtAuWM2A8s8qS3hvY0OFuvOw==}
     dev: false
 
-  /three@0.128.0:
-    resolution: {integrity: sha512-i0ap/E+OaSfzw7bD1TtYnPo3VEplkl70WX5fZqZnfZsE3k3aSFudqrrC9ldFZfYFkn1zwDmBcdGfiIm/hnbyZA==}
+  /three@0.161.0:
+    resolution: {integrity: sha512-LC28VFtjbOyEu5b93K0bNRLw1rQlMJ85lilKsYj6dgTu+7i17W+JCCEbvrpmNHF1F3NAUqDSWq50UD7w9H2xQw==}
 
   /throttle-debounce@3.0.1:
     resolution: {integrity: sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==}

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

prismarine-viewer/examples/scene1.ts

@@ -0,0 +1,71 @@
+import * as THREE from 'three';
+import { Vec3 } from 'vec3';
+// import states from '../public/blocksStates/1.20.2.json'
+
+export const render = (scene: THREE.Scene) => {
+    const texture = 'https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.9/blocks/stone.png'
+    const loader = new THREE.TextureLoader()
+    const stoneUv = {
+        "u": 0.515625,
+        "v": 0.1875,
+        "su": -0.015625,
+        "sv": 0.015625
+    }
+
+    loader.load(texture, (texture) => {
+        // const material = new THREE.MeshLambertMaterial({ vertexColors: true, transparent: true, alphaTest: 0.1 })
+        // material.map = texture
+        // texture.magFilter = THREE.NearestFilter
+        // texture.minFilter = THREE.NearestFilter
+
+        const addBufferGeometry = (pos) => {
+            const vertices = new Float32Array([
+                -0.5, -0.5, 0.5, // v0
+                0.5, -0.5, 0.5, // v1
+                0.5, 0.5, 0.5, // v2
+                -0.5, 0.5, 0.5, // v3
+            ]);
+            const colors = new Float32Array([
+                1, 1, 1,
+                1, 1, 1,
+                1, 1, 1,
+                1, 1, 1
+            ]);
+            const normals = new Float32Array([
+                0, 0, 1,
+                0, 0, 1,
+                0, 0, 1,
+                0, 0, 1
+            ]);
+            // const indices = new Uint16Array([
+            //   0, 1, 2, 0, 2, 3
+            // ])
+            const indices = [
+                0, 1, 2,
+                2, 3, 0,
+            ];
+            const bufferGeometry = new THREE.BufferGeometry()
+            bufferGeometry.setIndex(indices)
+            bufferGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
+            bufferGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3))
+            bufferGeometry.setAttribute('normal', new THREE.BufferAttribute(normals, 3))
+            //   set uv
+            const uvs = new Float32Array([
+                stoneUv.u, stoneUv.v,
+                stoneUv.u + stoneUv.su, stoneUv.v,
+                stoneUv.u + stoneUv.su, stoneUv.v + stoneUv.sv,
+                stoneUv.u, stoneUv.v + stoneUv.sv
+            ])
+            // explain: https://threejsfundamentals.org/threejs/lessons/threejs-custom-buffergeometry.html
+            bufferGeometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2))
+            //@ts-ignore
+            const mesh = new THREE.Mesh(bufferGeometry, viewer.world.material)
+            mesh.position.set(pos.x+0.5, pos.y+0.5, pos.z+0.5)
+            scene.add(mesh)
+        }
+
+        const targetPos = new Vec3(2, 90, 2)
+        addBufferGeometry(new Vec3(2, 90, 2))
+        addBufferGeometry(new Vec3(1, 90, 2))
+    })
+}

prismarine-viewer/playground.html

@@ -31,6 +31,6 @@
     </style>
   </head>
   <body>
-    <script type="text/javascript" src="playground.js"></script>
+    <script type="module" src="playground.js"></script>
   </body>
 </html>

prismarine-viewer/viewer/lib/viewer.ts

@@ -192,9 +192,9 @@ export class Viewer {
       this.renderPass.camera = this.camera
       this.composer.render()
     } else {
-      this.renderer.render(this.scene, this.camera)
+      this.renderer.renderAsync(this.scene, this.camera)
     }
-    this.entities.render()
+    // this.entities.render()
   }
 
   async waitForChunksToRender () {

prismarine-viewer/viewer/lib/worldrenderer.ts

@@ -114,7 +114,12 @@ export class WorldRenderer {
           }
           this.sectionObjects[data.key] = object
           this.updatePosDataChunk(data.key)
+          // mesh.occlusionTest = true
           this.scene.add(object)
+          // mesh.onBeforeRender = (renderer, scene, camera, geometry) => {
+          //   //@ts-ignore
+          //   object.occluded = renderer.isOccluded(mesh)
+          // }
         } else if (data.type === 'sectionFinished') {
           this.sectionsOutstanding.delete(data.key)
           this.renderUpdateEmitter.emit('update')

src/index.ts

@@ -27,6 +27,7 @@ import 'core-js/features/array/at'
 import 'core-js/features/promise/with-resolvers'
 import { initWithRenderer, statsEnd, statsStart } from './topRightStats'
 import PrismarineBlock from 'prismarine-block'
+import WebGpuRenderer from 'three/examples/jsm/renderers/webgpu/WebGPURenderer.js'
 
 import { options, watchValue } from './optionsStorage'
 import './reactUi.jsx'
@@ -105,21 +106,15 @@ watchFov()
 initCollisionShapes()
 
 // Create three.js context, add to page
-let renderer: THREE.WebGLRenderer
-try {
-  renderer = new THREE.WebGLRenderer({
-    powerPreference: options.gpuPreference,
-  })
-} catch (err) {
-  console.error(err)
-  throw new Error(`Failed to create WebGL context, not possible to render (restart browser): ${err.message}`)
-}
-
-// renderer.localClippingEnabled = true
+const renderer = new WebGpuRenderer({
+  forceWebGL: true,
+  // powerPreference: options.gpuPreference === 'default' ? undefined : options.gpuPreference,
+  // alpha: true,
+}) as any
 initWithRenderer(renderer.domElement)
 window.renderer = renderer
 let pixelRatio = window.devicePixelRatio || 1 // todo this value is too high on ios, need to check, probably we should use avg, also need to make it configurable
-if (!renderer.capabilities.isWebGL2) pixelRatio = 1 // webgl1 has issues with high pixel ratio (sometimes screen is clipped)
+// if (!renderer.capabilities.isWebGL2) pixelRatio = 1 // webgl1 has issues with high pixel ratio (sometimes screen is clipped)
 renderer.setPixelRatio(pixelRatio)
 renderer.setSize(window.innerWidth, window.innerHeight)
 renderer.domElement.id = 'viewer-canvas'

src/worldInteractions.ts

@@ -114,6 +114,7 @@ class WorldInteraction {
     })
 
     const upLineMaterial = () => {
+      return
       const inCreative = bot.game.gameMode === 'creative'
       const pixelRatio = viewer.renderer.getPixelRatio()
       this.lineMaterial = new LineMaterial({
@@ -129,6 +130,7 @@ class WorldInteraction {
   }
 
   updateBlockInteractionLines (blockPos: Vec3 | null, shapePositions?: Array<{ position; width; height; depth }>) {
+    return
     assertDefined(viewer)
     if (blockPos && this.interactionLines && blockPos.equals(this.interactionLines.blockPos)) {
       return