diff --git a/esbuild.mjs b/esbuild.mjs index 2d18ae3a0..536735d6a 100644 --- a/esbuild.mjs +++ b/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('', ''), 'utf8') +fs.writeFileSync('dist/index.html', fs.readFileSync('index.html', 'utf8').replace('', ''), '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', diff --git a/experiments/vite.config.ts b/experiments/vite.config.ts index e0a30beff..c1cd95eb1 100644 --- a/experiments/vite.config.ts +++ b/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', + }, + }, }) diff --git a/package.json b/package.json index 4fe5a2d57..7a20537fb 100644 --- a/package.json +++ b/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" } } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8896d703c..dec08c52c 100644 --- a/pnpm-lock.yaml +++ b/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==} diff --git a/prismarine-viewer/esbuild.mjs b/prismarine-viewer/esbuild.mjs index 91b787db9..773226b24 100644 --- a/prismarine-viewer/esbuild.mjs +++ b/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$/, }, () => { diff --git a/prismarine-viewer/examples/playground.ts b/prismarine-viewer/examples/playground.ts index b31c082e5..c4dd0fd40 100644 --- a/prismarine-viewer/examples/playground.ts +++ b/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 diff --git a/prismarine-viewer/examples/scene1.ts b/prismarine-viewer/examples/scene1.ts new file mode 100644 index 000000000..3977802df --- /dev/null +++ b/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)) + }) +} diff --git a/prismarine-viewer/playground.html b/prismarine-viewer/playground.html index fd92009a4..f571c9866 100644 --- a/prismarine-viewer/playground.html +++ b/prismarine-viewer/playground.html @@ -31,6 +31,6 @@ - + diff --git a/prismarine-viewer/viewer/lib/viewer.ts b/prismarine-viewer/viewer/lib/viewer.ts index 02888293a..59eb5e465 100644 --- a/prismarine-viewer/viewer/lib/viewer.ts +++ b/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 () { diff --git a/prismarine-viewer/viewer/lib/worldrenderer.ts b/prismarine-viewer/viewer/lib/worldrenderer.ts index 4f16671b4..5c2489664 100644 --- a/prismarine-viewer/viewer/lib/worldrenderer.ts +++ b/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') diff --git a/src/index.ts b/src/index.ts index 620b55974..518ab6e60 100644 --- a/src/index.ts +++ b/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' diff --git a/src/worldInteractions.ts b/src/worldInteractions.ts index 9353670cf..9777d8f0f 100644 --- a/src/worldInteractions.ts +++ b/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