- - - + + - - - - - - - - - + + + + + + + + +
- - - - - - - - + + + + + + +
-
@@ -269,8 +268,7 @@
- REDO
-
-
- exit_to_app ABOUT +
- HELP
- EXAMPLES @@ -303,15 +301,14 @@
-
- 4.3.4 Beta 2024
+ 4.3.5 Beta 2024
↳ GitHub
Developer
↳ @nimadez
made with favorite - exit_to_app PREFERENCES +
- GENERAL
- @@ -331,8 +328,7 @@
- exit_to_app FILE +
- PROJECT @@ -361,8 +357,7 @@
- CAPTURE
- exit_to_app GENERATOR +
- BOX
-
@@ -393,8 +388,7 @@
- exit_to_app VOXELIZER +
- 3D MODELS @@ -414,8 +408,7 @@
- exit_to_app SYMMETRY +
- AXIS
- @@ -434,8 +427,7 @@
- PIVOT CENTER
- exit_to_app MODELING +
- FREEFORM @@ -451,8 +443,7 @@
- COORDINATE
- exit_to_app PAINTING +
- PAINT COLOR @@ -464,8 +455,7 @@
- exit_to_app VOXELS +
- TRANSFORM @@ -480,8 +470,7 @@
- CLEANUP
- exit_to_app BAKERY +
- ADD BAKE @@ -493,8 +482,7 @@
- exit_to_app MESHES +
- REPLICATE
- MERGE @@ -510,8 +498,7 @@
- exit_to_app RENDER (PT) +
- SETTINGS
- @@ -569,8 +556,7 @@
- exit_to_app CAMERA +
- VIEW @@ -582,8 +568,7 @@
- exit_to_app ENVIRONMENT +
- BACKGROUND
- @@ -614,8 +599,7 @@
- exit_to_app MATERIAL +
- COLORS
- @@ -629,8 +613,7 @@
- VERTEX COLORS
- exit_to_app TEXTURE +
- PATTERNS
-
@@ -646,8 +629,7 @@ -
-
-
- exit_to_app STORAGE +
- SNAPSHOTS
- exit_to_app COLOR GROUPS +
- HIDE @@ -700,7 +681,7 @@
-
-
- +diff --git a/libs/addons/WorkerPool.js b/libs/addons/WorkerPool.js new file mode 100644 index 00000000..c8d19160 --- /dev/null +++ b/libs/addons/WorkerPool.js @@ -0,0 +1,102 @@ +/** + * @author Deepkolos / https://github.com/deepkolos + */ + +export class WorkerPool { + + constructor( pool = 4 ) { + + this.pool = pool; + this.queue = []; + this.workers = []; + this.workersResolve = []; + this.workerStatus = 0; + + } + + _initWorker( workerId ) { + + if ( ! this.workers[ workerId ] ) { + + const worker = this.workerCreator(); + worker.addEventListener( 'message', this._onMessage.bind( this, workerId ) ); + this.workers[ workerId ] = worker; + + } + + } + + _getIdleWorker() { + + for ( let i = 0; i < this.pool; i ++ ) + if ( ! ( this.workerStatus & ( 1 << i ) ) ) return i; + + return - 1; + + } + + _onMessage( workerId, msg ) { + + const resolve = this.workersResolve[ workerId ]; + resolve && resolve( msg ); + + if ( this.queue.length ) { + + const { resolve, msg, transfer } = this.queue.shift(); + this.workersResolve[ workerId ] = resolve; + this.workers[ workerId ].postMessage( msg, transfer ); + + } else { + + this.workerStatus ^= 1 << workerId; + + } + + } + + setWorkerCreator( workerCreator ) { + + this.workerCreator = workerCreator; + + } + + setWorkerLimit( pool ) { + + this.pool = pool; + + } + + postMessage( msg, transfer ) { + + return new Promise( ( resolve ) => { + + const workerId = this._getIdleWorker(); + + if ( workerId !== - 1 ) { + + this._initWorker( workerId ); + this.workerStatus |= 1 << workerId; + this.workersResolve[ workerId ] = resolve; + this.workers[ workerId ].postMessage( msg, transfer ); + + } else { + + this.queue.push( { resolve, msg, transfer } ); + + } + + } ); + + } + + dispose() { + + this.workers.forEach( ( worker ) => worker.terminate() ); + this.workersResolve.length = 0; + this.workers.length = 0; + this.queue.length = 0; + this.workerStatus = 0; + + } + +} diff --git a/package.json b/package.json index 97df3512..02eb8cad 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "voxel-builder", - "version": "4.3.4", + "version": "4.3.5", "description": "Voxel-based 3D modeling application", "main": "electron.js", "scripts": { diff --git a/scripts/blender-importer.py b/scripts/blender-importer.py index af4c70f7..68b6d713 100644 --- a/scripts/blender-importer.py +++ b/scripts/blender-importer.py @@ -1,7 +1,7 @@ -""" - # Blender 4.x.x - # Run script inside Blender and select .JSON file -""" +#!/usr/bin/env python3 +# +# Blender 4.x.x +# Run script inside Blender and select .JSON file import os import json diff --git a/scripts/ws-connect.py b/scripts/ws-connect.py old mode 100755 new mode 100644 index 35a082a5..b21bfc40 --- a/scripts/ws-connect.py +++ b/scripts/ws-connect.py @@ -1,48 +1,80 @@ #!/usr/bin/env python3 -# Aug 2024 https://nimadez.github.io/ # # Websockets Server # This script can be used to connect with machine learning models # $ python3 ws-connect.py -import os, sys, json, random, time -import asyncio +import os, sys, json, random, time, asyncio sys.path.insert(1, os.path.dirname(os.path.dirname(os.path.realpath(__file__))) + '/libs') -from websockets.asyncio.server import serve +from websockets.server import serve + +if __import__('platform').system == 'Windows': # fix [WinError 10054] + asyncio.set_event_loop_policy(asyncio.WindowsSelectorEventLoopPolicy()) PORT = 8014 -TOTAL = 100 -CLEAR = False # clear scene or add voxel +CLEAR = True # clear scene or add a voxel +POST = True # test in send mode? + + +def generator(): + data = [] + for x in range(20): + for y in range(20): + for z in range(20): + if random.randint(0,9) < 5: + hex = "#%06X" % random.randint(0, 0xFFFFFF) + data.append({ + "position": { "x": x, "y": y, "z": z }, + "color": hex, #.upper() + "visible": True + }) + return data + + +class Server(): + def __init__(self): + pass + + + async def handler(self, ws): + async for msg in ws: + msg = json.loads(msg) + if not POST: + match msg['key']: + case 'init': + print("Connection established.") + case 'get': + print(f"Received: {str(msg['voxels'])[:40]}...") + else: + voxel_data = generator() + payload = { "voxels": voxel_data, "is_clear": CLEAR } + await ws.send(json.dumps(payload)) + print("Sent") + time.sleep(0.2) + time.sleep(0.1) -async def handler(ws): - while True: - data = [] - for i in range(TOTAL): - hex = "#%06x" % random.randint(0, 0xFFFFFF) - data.append({ - "position": { "x": random.randint(-20,20), "y": random.randint(0,20), "z": random.randint(-20,20) }, - "color": hex.upper(), - "visible": True - }) - payload = { "voxels": data, "is_clear": CLEAR } + async def main(self): + try: + async with serve(self.handler, "localhost", PORT, max_queue=1, max_size=2 ** 25): + print(f"Running websockets server at ws://localhost:{PORT}") + await asyncio.get_running_loop().create_future() + except Exception as err: + print(err) - await ws.send(json.dumps(payload)) - print('sent') - message = await ws.recv() - print('receive', message[:40], '...') - time.sleep(0.1) + def start(self): + try: + asyncio.run(self.main()) + except KeyboardInterrupt: + print('Shutdown.') + finally: + pass -async def main(): - async with serve(handler, "", PORT): - print(f"Websockets server is ready on port {PORT}") - await asyncio.get_running_loop().create_future() - if __name__ == "__main__": - asyncio.run(main()) + Server().start() diff --git a/server.js b/server.js new file mode 100644 index 00000000..2caa4e50 --- /dev/null +++ b/server.js @@ -0,0 +1,48 @@ +#!/usr/bin/env node +// Aug 2024 https://nimadez.github.io/ +// Voxel Builder Server + +const http = require('http'); +const url = require('url'); +const fs = require('fs'); + +const PORT = 8011; + +http.createServer((req, res) => { + const parsedUrl = url.parse(req.url, true); + let filePath = `.${parsedUrl.pathname}`; + + if (parsedUrl.pathname == '/') + filePath = './index.html'; + + fs.readFile(filePath, (err, data) => { + if (err) { + console.log(`GET ${filePath} 404 NOT FOUND`) + res.writeHead(404, { 'Content-Type': 'text/html' }); + return res.end("404 Not Found"); + } + + console.log(`GET ${filePath} 200 OK`) + res.writeHead(200, { 'Content-Type': getContentType(filePath) }); + res.write(data); + return res.end(); + }); +}).listen(PORT, () => { + console.log('Voxel Builder') + console.log(`Server running at http://localhost:${PORT}`); +}); + +function getContentType(filePath) { + const extname = String(filePath).split('.').pop().toLowerCase(); + const mimeTypes = { + 'html': 'text/html', + 'js': 'text/javascript', + 'css': 'text/css', + 'json': 'application/json', + 'png': 'image/png', + 'jpg': 'image/jpg', + 'jpeg': 'image/jpeg', + 'gif': 'image/gif' + }; + return mimeTypes[extname] || 'application/octet-stream'; +} diff --git a/src/main.js b/src/main.js index ab642e1e..6a3ac7d1 100644 --- a/src/main.js +++ b/src/main.js @@ -53,6 +53,7 @@ const TEX_PRESETS = [ "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5N0FGQjBBMjg5NEUxMUVFOENENEIwRjFFNjE3NzY0QSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5N0FGQjBBMzg5NEUxMUVFOENENEIwRjFFNjE3NzY0QSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk3QUZCMEEwODk0RTExRUU4Q0Q0QjBGMUU2MTc3NjRBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjk3QUZCMEExODk0RTExRUU4Q0Q0QjBGMUU2MTc3NjRBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+lZLONgAAABJQTFRFupp5gmFZz66CspJ1jnFhooJpmRnR4QAAAHdJREFUeNo0j8ERADEIAkG0/5YPNJePQ0YXwLBK7aeq5gxYAqbb39KQsJ4ZtvVOdAZ9MqsbakuFQxpX0ISHnb4PMAsIcDnRXgmRywH3PsANYluvO0eAOg5ejlrM5TjOXQHxfzn0athWuj64QH+PLOD3z0jhT4ABAJa7Av1CV1nPAAAAAElFTkSuQmCC" ]; +const CSS_ROOT = document.querySelector(':root'); const COL_ORANGE = '#FFA500'; const COL_ORANGE_RGB = BABYLON.Color3.FromHexString(COL_ORANGE); const COL_ORANGE_RGBA = BABYLON.Color4.FromHexString(COL_ORANGE + 'FF'); @@ -112,7 +113,8 @@ const bvhWhiteList = [ const isMobile = isMobileDevice(); -const canvas = document.getElementById('canvas_render'); +const canvas = document.getElementById('canvas'); +const canvasRender = document.getElementById('canvas_render'); const canvasPalette = document.getElementById('canvas_palette'); const engine = new BABYLON.Engine(canvas, true, {}); @@ -388,8 +390,8 @@ function Camera() { this.camera0.pinchPrecision = 30; //def: 12 this.camera0.panningSensibility = 300; //def: 1000 this.camera0.inertia = 0.9; //def: 0.9 - this.camera0.minZ = 0.1; - this.camera0.maxZ = 2000; + //this.camera0.minZ = 0.1; + //this.camera0.maxZ = 2000; this.camera0.fov = parseFloat(document.getElementById('input-camera-fov').value); //def: 0.8 this.camera1.setPosition(new BABYLON.Vector3(73, 73, 73)); @@ -402,8 +404,8 @@ function Camera() { this.camera1.pinchPrecision = 30; this.camera1.panningSensibility = 300; this.camera1.inertia = 0.9; - this.camera1.minZ = 0.1; - this.camera1.maxZ = 2000; + //this.camera1.minZ = 0.1; + //this.camera1.maxZ = 2000; this.camera1.fov = parseFloat(document.getElementById('input-camera-fov').value); } @@ -412,7 +414,7 @@ function Camera() { if (MODE == 0) { scene.activeCamera = this.camera0; } else if (MODE == 1) { - scene.activeCamera = (document.getElementById('input-pt-source').value == 'model') ? this.camera0 : this.camera1; + scene.activeCamera = (ui.domRenderSource.value == 'model') ? this.camera0 : this.camera1; } else if (MODE == 2) { scene.activeCamera = this.camera1; } @@ -1125,8 +1127,7 @@ function Builder(scene) { helper.setFloor(); helper.setSymmPivot(); - if (preferences.getWebsocket()) - client.sendMessage(this.voxels); + client.sendMessage(this.voxels, 'get'); }, 10); } @@ -1423,19 +1424,24 @@ function Builder(scene) { this.reduceVoxels = async function() { if (!await ui.showConfirm('reducing voxels, continue?')) return; + engine.displayLoadingUI(); const last = this.voxels.length; - - window.worker.start('findInnerVoxels', [ this.voxels, this.positionsMap ], (data) => { + const msg = await window.workerPool.postMessage({ id: 'findInnerVoxels', data: [ this.voxels, this.positionsMap ] }); + if (msg) { this.voxels = []; - for (let i = 0; i < data.length; i++) { + for (let i = 0; i < msg.data.length; i++) { this.add(new BABYLON.Vector3( - data[i].position._x, data[i].position._y, data[i].position._z), - data[i].color, data[i].visible); + msg.data[i].position._x, msg.data[i].position._y, msg.data[i].position._z), + msg.data[i].color, msg.data[i].visible); } this.create(); this.update(); ui.notification(`${ last - this.voxels.length } voxels removed`); - }); + engine.hideLoadingUI(); + } else { + ui.notification('unable to reduce voxels'); + engine.hideLoadingUI(); + } } this.removeDuplicates = function() { @@ -3566,7 +3572,7 @@ function Bakery(scene) { }; this.bakeToMesh = function(voxels = builder.voxels) { - const baked = window.baker('_mesh', voxels); + const baked = window.bakery('_mesh', voxels); resetPivot(baked); @@ -4160,7 +4166,7 @@ function Memory() { function Project(scene) { function serializeScene(voxels, meshes) { const json = { - version: "Voxel Builder 4.3.4", + version: "Voxel Builder 4.3.5", project: { name: "name", voxels: builder.voxels.length, @@ -4385,13 +4391,15 @@ function Project(scene) { }); } - this.loadMagicaVoxel = function(buffer) { - window.worker.start('parseMagicaVoxel', buffer, (data) => { + this.loadMagicaVoxel = async function(buffer) { + engine.displayLoadingUI(); + const msg = await window.workerPool.postMessage({ id: 'parseMagicaVoxel', data: buffer }); + if (msg) { const voxels = []; - for (let i = 0; i < data.length; i++) { + for (let i = 0; i < msg.data.length; i++) { voxels.push({ - position: new BABYLON.Vector3(data[i].x, data[i].y, data[i].z), - color: data[i].color, + position: new BABYLON.Vector3(msg.data[i].x, msg.data[i].y, msg.data[i].z), + color: msg.data[i].color, visible: true }); } @@ -4399,9 +4407,11 @@ function Project(scene) { builder.normalizeVoxelPositions(false); clearSceneAndReset(); ui.domProjectName.value = 'untitled'; - }, () => { + engine.hideLoadingUI(); + } else { ui.notification('incompatible vox file'); - }); + engine.hideLoadingUI(); + } } function setProjectValues(uiDom, iniKey, defVal) { @@ -4415,28 +4425,6 @@ function Project(scene) { function UserInterface(scene) { - this.domMenusRight = [ - document.getElementById('menu-about'), - document.getElementById('menu-prefs'), - document.getElementById('menu-file'), - document.getElementById('menu-generator'), - document.getElementById('menu-voxelizer'), - document.getElementById('menu-symmetry'), - document.getElementById('menu-model'), - document.getElementById('menu-paint'), - document.getElementById('menu-voxels'), - document.getElementById('menu-bakery'), - document.getElementById('menu-meshes'), - ]; - this.domMenusLeft = [ - document.getElementById('menu-pathtracer'), - document.getElementById('menu-camera'), - document.getElementById('menu-env'), - document.getElementById('menu-material'), - document.getElementById('menu-texture'), - document.getElementById('menu-storage'), - document.getElementById('menu-groups') - ]; this.domToolbarR = document.getElementById('toolbar_R'); this.domToolbarL = document.getElementById('toolbar_L'); this.domToolbarC = document.getElementById('toolbar_C'); @@ -4492,6 +4480,24 @@ function UserInterface(scene) { this.domExportFormat = document.getElementById('input-export-format'); this.domExportSelectedBake = document.getElementById('input-export-selbake'); this.domOrthoBtn = document.getElementById('btn-ortho'); + this.domPathtracer = document.getElementById('pathtracer'); + this.domRenderSource = document.getElementById('input-pt-source'); + this.domRenderShade = document.getElementById('input-pt-shade'); + this.domRenderPause = document.getElementById('btn-pt-pause'); + this.domRenderShot = document.getElementById('btn-pt-shot'); + this.domRenderFast = document.getElementById('btn-pt-fast'); + this.domRenderMaxSamples = document.getElementById('input-pt-maxsamples'); + this.domRenderPasses = document.getElementById('input-pt-passes'); + this.domRenderBounces = document.getElementById('input-pt-bounces'); + this.domRenderEnvPower = document.getElementById('input-pt-envpower'); + this.domRenderDirectLight = document.getElementById('input-pt-directlight'); + this.domRenderBackground = document.getElementById('input-pt-background'); + this.domRenderMaterial = document.getElementById('input-pt-material'); + this.domRenderEmissive = document.getElementById('input-pt-emissive'); + this.domRenderRoughness = document.getElementById('input-pt-roughness'); + this.domRenderFloor = document.getElementById('input-pt-floor'); + this.domRenderFloorColor = document.getElementById('input-pt-floorcolor'); + this.domRenderGrid = document.getElementById('input-pt-grid'); this.domConfirm = document.getElementById('confirm'); this.domConfirmBlocker = document.getElementById('confirmblocker'); this.domNotifier = document.getElementById('notifier'); @@ -4501,17 +4507,13 @@ function UserInterface(scene) { this.domInfoRender = document.getElementById('info_render'); this.domProgressBar = document.getElementById('progressbar'); this.domWebSocketStatus = document.getElementById('ws_status'); - const styleMenuR = '-200px'; - const styleMenuL = '-200px'; - const styleMenuR_open = '75px'; - const styleMenuL_open = '75px'; - const hoverOffsets = []; + this.panels = []; + let lastIndex = 1000; let notificationTimer = null; this.init = function() { - document.querySelectorAll('.panel').forEach(() => { - hoverOffsets.push({ x: 0, y: 0 }); - }, false); + this.registerPanels(); + this.registerToolbarButtons(); this.domCameraFov.addEventListener('change', (ev) => { if (ev.target.value > 0) { @@ -4591,7 +4593,6 @@ function UserInterface(scene) { window.pt.deactivate(); if (mode == 0) { - if (preferences.isInitialized && preferences.getWebsocket()) client.connect(); builder.setMeshVisibility(true); bakery.setBakesVisibility(false); helper.displayGridPlane(helper.isFloorPlaneActive, true); @@ -4605,7 +4606,6 @@ function UserInterface(scene) { if (!hdri.isLoaded) // forced reload if user hits Render within 1 second of launch! hdri.loadHDR(ENVMAP) } else if (mode == 2) { - client.disconnect(); builder.setMeshVisibility(false); bakery.setBakesVisibility(true); bakery.createBakeryList(); @@ -4691,10 +4691,10 @@ function UserInterface(scene) { if (scene.activeCamera.mode == BABYLON.Camera.PERSPECTIVE_CAMERA) { this.domOrthoBtn.innerHTML = 'Perspective'; - ui.domInScreenOrtho.innerHTML = 'P'; + this.domInScreenOrtho.innerHTML = 'P'; } else { this.domOrthoBtn.innerHTML = 'Orthographic'; - ui.domInScreenOrtho.innerHTML = 'O'; + this.domInScreenOrtho.innerHTML = 'O'; } } @@ -4710,7 +4710,7 @@ function UserInterface(scene) { this.domToolbarC_mem.children[4].innerHTML = 'REDO'; } else if (mode == 1) { this.domToolbarC_mem.children[0].onclick = () => { window.pt.fastMode() }; - this.domToolbarC_mem.children[1].onclick = () => { window.pt.domShade.checked = !window.pt.domShade.checked; window.pt.updateAttributeColors() }; + this.domToolbarC_mem.children[1].onclick = () => { ui.domRenderShade.checked = !ui.domRenderShade.checked; window.pt.updateAttributeColors() }; this.domToolbarC_mem.children[3].onclick = () => { window.pt.pause() }; this.domToolbarC_mem.children[4].onclick = () => { window.pt.shot() }; this.domToolbarC_mem.children[0].innerHTML = 'FAST'; @@ -4729,88 +4729,122 @@ function UserInterface(scene) { } } - this.toggleMenuAbout = function() { this.switchMenus(this.domMenusRight[0], 'right') } - this.toggleMenuPrefs = function() { this.switchMenus(this.domMenusRight[1], 'right') } - this.toggleMenuFile = function() { this.switchMenus(this.domMenusRight[2], 'right') } - this.toggleMenuGenerator = function() { this.switchMenus(this.domMenusRight[3], 'right') } - this.toggleMenuVoxelizer = function() { this.switchMenus(this.domMenusRight[4], 'right') } - this.toggleMenuSymmetry = function() { this.switchMenus(this.domMenusRight[5], 'right') } - this.toggleMenuModel = function() { this.switchMenus(this.domMenusRight[6], 'right') } - this.toggleMenuPaint = function() { this.switchMenus(this.domMenusRight[7], 'right') } - this.toggleMenuVoxels = function() { this.switchMenus(this.domMenusRight[8], 'right') } - this.toggleMenuBakery = function() { this.switchMenus(this.domMenusRight[9], 'right') } - this.toggleMenuMeshes = function() { this.switchMenus(this.domMenusRight[10], 'right') } - - this.toggleMenuPathtracer = function() { this.switchMenus(this.domMenusLeft[0], 'left') } - this.toggleMenuCamera = function() { this.switchMenus(this.domMenusLeft[1], 'left') } - this.toggleMenuEnv = function() { this.switchMenus(this.domMenusLeft[2], 'left') } - this.toggleMenuMaterial = function() { this.switchMenus(this.domMenusLeft[3], 'left') } - this.toggleMenuTexture = function() { this.switchMenus(this.domMenusLeft[4], 'left') } - this.toggleMenuStorage = function() { this.switchMenus(this.domMenusLeft[5], 'left') } - this.toggleMenuGroups = function() { this.switchMenus(this.domMenusLeft[6], 'left') } - - let arrL = []; - let arrR = []; - this.setMenuModes = function(mode) { // exclude menus in certain modes - arrL = []; - arrR = []; + // exclude menus in certain modes + let excluded = []; + this.setMenuModes = function(mode) { if (mode == 0) { - arrL = [ 3, 4 ]; - arrR = [ 10 ]; + excluded = [ 10, 14, 15 ]; } else if (mode == 1) { - arrL = [ 3, 4, 5, 6 ]; - arrR = [ 2, 3, 4, 5, 6, 7, 8, 9, 10 ]; + excluded = [ 2, 3, 4, 5, 6, 7, 8, 9, 10, 14, 15, 16, 17 ]; } else if (mode == 2) { - arrL = [ 5, 6 ]; - arrR = [ 3, 4, 5, 6, 7, 8 ]; + excluded = [ 3, 4, 5, 6, 7, 8, 16, 17 ]; } - for (let i = 0; i < arrL.length; i++) { - if (this.domMenusLeft[arrL[i]].style.marginLeft == styleMenuL_open) - this.switchMenus(this.domMenusLeft[arrL[i]], 'left'); - } + this.panels.forEach((panel) => { + if (excluded.includes(panel.idx) && panel.elem !== this.domHover) + if (panel.elem.style.display == 'unset') + this.switchPanel(panel); + }); + } - for (let i = 0; i < arrR.length; i++) { - if (this.domMenusRight[arrR[i]].style.marginRight == styleMenuR_open) - this.switchMenus(this.domMenusRight[arrR[i]], 'right'); + this.registerToolbarButtons = function() { + // find and match a toolbar button for a panel by id name + const toolbarButtons = document.querySelectorAll("button[id^='toolbar_btn_']"); + for (let i = 0; i < this.panels.length; i++) { + for (let b = 0; b < toolbarButtons.length; b++) { + if (toolbarButtons[b].id.split('_')[2] === this.panels[i].elem.id.split('-')[1]) { + toolbarButtons[b].onclick = () => { this.switchPanel(this.panels[i], toolbarButtons[b]) }; + this.panels[i].button = toolbarButtons[b]; + } + } } } - this.clearAllMenus = function(side, exclude = null) { - if (side == 'right' || side == 'both') { - for (let i = 0; i < this.domMenusRight.length; i++) { - if (this.domMenusRight[i] !== exclude) - this.domMenusRight[i].style.marginRight = styleMenuR; - } - } else if (side == 'left' || side == 'both') { - for (let i = 0; i < this.domMenusLeft.length; i++) { - if (this.domMenusLeft[i] !== exclude) - this.domMenusLeft[i].style.marginLeft = styleMenuL; - } + this.registerPanels = function() { + const panels = document.querySelectorAll('.panel'); + for (let i = 0; i < panels.length; i++) { + this.addToolbarToPanels(i, panels[i]); + this.panels.push({ + idx: i, + elem: panels[i], + x: 0, y: 0, + detach: false + }); + } + } + + this.addToolbarToPanels = function(idx, elem) { + if (elem !== this.domHover) { + const li = document.createElement('li'); + li.classList.add('row_panel'); + + const div_move = document.createElement('div'); + const div_hide = document.createElement('div'); + const div_reset = document.createElement('div'); + div_move.innerHTML = 'open_with'; + div_hide.innerHTML = 'remove_red_eye'; + div_reset.innerHTML = 'exit_to_app'; + div_move.onpointerdown = (ev) => { + elem.style.borderRadius = '6px'; + elem.style.borderTop = 'solid 1px steelblue'; + elem.style.zIndex = lastIndex + 1; + ui.dragElement(idx, ev.target, elem); + lastIndex += 1; + }; + div_hide.onpointerdown = () => { this.switchPanel(this.panels[idx]) }; + div_reset.onpointerdown = () => { this.resetPanel(idx) }; + li.appendChild(div_move); + li.appendChild(div_hide); + li.appendChild(div_reset); + + elem.classList.add('panel'); + elem.insertBefore(li, elem.firstChild); + } + } + + this.clearAllPanels = function(exclude, isForceAll = false) { + if (isForceAll) { + this.panels.forEach((panel) => { + if (panel.elem !== this.domHover && panel.elem !== exclude) { + panel.elem.style.display = 'none'; + if (panel.button) + panel.button.style.fontStyle = 'normal'; + } + }); + } else { + this.panels.forEach((panel) => { + if (!panel.detach && panel.elem !== this.domHover && panel.elem !== exclude) { + panel.elem.style.display = 'none'; + if (panel.button) + panel.button.style.fontStyle = 'normal'; + } + }); } } - this.switchMenus = function(dom, side) { - this.clearAllMenus(side, dom); - if (side == 'right') { - if (dom.style.marginRight === styleMenuR_open) { - dom.style.marginRight = styleMenuR; - } else { - dom.style.marginRight = styleMenuR_open; - if (isMobile) - this.clearAllMenus('left', dom); - } - } else if (side == 'left') { - if (dom.style.marginLeft === styleMenuL_open) { - dom.style.marginLeft = styleMenuL; - } else { - dom.style.marginLeft = styleMenuL_open; - if (isMobile) - this.clearAllMenus('right', dom); - } + this.switchPanel = function(panel) { + this.clearAllPanels(panel.elem); + if (panel.elem.style.display === 'unset') { + panel.elem.style.display = 'none'; + panel.button.style.fontStyle = 'normal'; + } else { + panel.elem.style.display = 'unset'; + panel.button.style.fontStyle = 'italic'; } } + this.resetPanel = function(idx) { + this.panels[idx].elem.style.transform = 'none'; + this.panels[idx].x = 0; + this.panels[idx].y = 0; + this.panels[idx].detach = false; + this.panels[idx].elem.style.borderTop = 'none'; + this.panels[idx].elem.style.borderRadius = '3px'; + this.panels[idx].elem.style.borderTopLeftRadius = '0'; + this.panels[idx].elem.style.borderTopRightRadius = '0'; + this.switchPanel(this.panels[idx]); + } + this.toggleHover = function(isEnabled) { if (isEnabled) { for (let i = 1; i < this.domHover.children.length; i++) @@ -4889,7 +4923,6 @@ function UserInterface(scene) { this.hideInterface = function(isEnabled) { if (isEnabled) { - this.clearAllMenus('both'); this.domMenus.style.display = 'none'; this.domHover.style.display = 'none'; this.domPalette.style.display = 'none'; @@ -4949,11 +4982,11 @@ function UserInterface(scene) { function dragStart(e) { if (e.type === "touchstart") { - initialX = e.touches[0].clientX - hoverOffsets[hIndex].x; - initialY = e.touches[0].clientY - hoverOffsets[hIndex].y; + initialX = e.touches[0].clientX - ui.panels[hIndex].x; + initialY = e.touches[0].clientY - ui.panels[hIndex].y; } else { - initialX = e.clientX - hoverOffsets[hIndex].x; - initialY = e.clientY - hoverOffsets[hIndex].y; + initialX = e.clientX - ui.panels[hIndex].x; + initialY = e.clientY - ui.panels[hIndex].y; } if (e.target === elem) active = true; } @@ -4968,6 +5001,7 @@ function UserInterface(scene) { document.body.removeEventListener("touchstart", dragStart, false); document.body.removeEventListener("touchend", dragEnd, false); document.body.removeEventListener("touchmove", drag, false); + ui.panels[hIndex].detach = true; } function drag(e) { @@ -4979,8 +5013,8 @@ function UserInterface(scene) { currentX = e.clientX - initialX; currentY = e.clientY - initialY; } - hoverOffsets[hIndex].x = currentX; - hoverOffsets[hIndex].y = currentY; + ui.panels[hIndex].x = currentX; + ui.panels[hIndex].y = currentY; setTranslate(currentX, currentY, target); } } @@ -4992,8 +5026,8 @@ function UserInterface(scene) { this.hoverTranslate = function(elem, idx, x, y) { elem.style.transform = "translate(" + x + "px, " + y + "px)"; - hoverOffsets[idx].x = 0; - hoverOffsets[idx].y = 0; + this.panels[idx].x = 0; + this.panels[idx].y = 0; } this.isHoverOffScreen = function(elem, minPad = 20) { @@ -5002,6 +5036,18 @@ function UserInterface(scene) { (rect.y + minPad) < 0 || (rect.y + minPad) > window.innerHeight); } + this.offscreenCheck = function() { + this.panels.forEach((panel) => { + if (panel.elem === this.domHover) { + if (this.isHoverOffScreen(panel.elem)) + ui.hoverTranslate(panel.elem, panel.idx, 0, 0); + } else { + if (this.isHoverOffScreen(panel.elem, 60)) + ui.hoverTranslate(panel.elem, panel.idx, 0, 0); + } + }); + } + this.init(); } @@ -5236,14 +5282,13 @@ function Preferences() { initPrefCheck(KEY_POWERSAVER, (chk) => { if (chk) { FPS = 1000 / 30; - document.getElementById('input-pt-bounces').value = 3; + ui.domRenderBounces.value = 3; } else { FPS = 1000 / 60; - document.getElementById('input-pt-bounces').value = 4; - } - if (window.pt.isActive && window.pt.isLoaded) { - window.pt.updateUniformBounces(document.getElementById('input-pt-bounces').value); + ui.domRenderBounces.value = 4; } + if (window.pt.isActive && window.pt.isLoaded) + window.pt.updateUniformBounces(ui.domRenderBounces.value); }); initPrefCheck(KEY_WEBSOCKET, (chk) => { (chk && MODE == 0) ? client.connect() : client.disconnect(); @@ -5254,10 +5299,10 @@ function Preferences() { this.finish = function() { if (this.getPowerSaver()) { FPS = 1000 / 30; - document.getElementById('input-pt-bounces').value = 3; + ui.domRenderBounces.value = 3; } else { FPS = 1000 / 60; - document.getElementById('input-pt-bounces').value = 4; + ui.domRenderBounces.value = 4; } palette.expand(this.getPaletteSize()); ui.toggleHover(!this.getNoHover()); @@ -5270,39 +5315,45 @@ function Preferences() { ui.hideInterface(false); engine.hideLoadingUI(); clearInterval(interval); - this.isInitialized = true; - console.log(`initialized in ${performance.now()-startTime} ms.`); + console.log(`startup: ${(performance.now()-startTime).toFixed(2)} ms`); + this.postFinish(); }); } else { project.newProjectStartup(); ui.hideInterface(false); engine.hideLoadingUI(); clearInterval(interval); - this.isInitialized = true; - console.log(`initialized in ${performance.now()-startTime} ms.`); + console.log(`startup: ${(performance.now()-startTime).toFixed(2)} ms`); + this.postFinish(); } - - // inject the user modules entry point - const scriptUserModules = document.createElement('script'); - scriptUserModules.type = 'module'; - scriptUserModules.src = 'user/user.js'; - document.body.appendChild(scriptUserModules); - - setTimeout(() => { - hdri.preload(); - - // inject extra babylon libs - const scriptSerializers = document.createElement('script'); - scriptSerializers.src = 'libs/babylonjs.serializers.min.js'; - document.body.appendChild(scriptSerializers); - const scriptInspector = document.createElement('script'); - scriptInspector.src = 'libs/babylon.inspector.bundle.js'; - document.body.appendChild(scriptInspector); - }, 1000); // no less, major startup time ratio } }, 100); } + this.postFinish = function() { + // inject the user modules entry point + const scriptUserModules = document.createElement('script'); + scriptUserModules.type = 'module'; + scriptUserModules.src = 'user/user.js'; + document.body.appendChild(scriptUserModules); + + setTimeout(() => { + hdri.preload(); + + // inject extra babylon libs + const scriptSerializers = document.createElement('script'); + scriptSerializers.src = 'libs/babylonjs.serializers.min.js'; + document.body.appendChild(scriptSerializers); + const scriptInspector = document.createElement('script'); + scriptInspector.src = 'libs/babylon.inspector.bundle.js'; + document.body.appendChild(scriptInspector); + + console.log(`WebGPU capability: ${ navigator.gpu !== undefined }`); + console.log('initialized.') + this.isInitialized = true; + }, 1000); // no less, major startup time ratio + } + this.setStartup = function(isEnabled) { localStorage.setItem(KEY_STARTUP, isEnabled); } @@ -5358,9 +5409,9 @@ function Preferences() { } function initPref(key, callback = undefined) { - if (localStorage.getItem(key)) { + if (localStorage.getItem(key)) document.getElementById(key).value = localStorage.getItem(key); - } + document.getElementById(key).addEventListener("input", (ev) => { localStorage.setItem(key, ev.target.value); if (callback) callback(ev.target.value); @@ -5368,9 +5419,9 @@ function Preferences() { } function initPrefCheck(key, callback = undefined) { - if (localStorage.getItem(key)) { + if (localStorage.getItem(key)) document.getElementById(key).checked = parseBool(localStorage.getItem(key)); - } + document.getElementById(key).addEventListener("input", (ev) => { localStorage.setItem(key, ev.target.checked); if (callback) callback(ev.target.checked); @@ -5468,7 +5519,7 @@ document.addEventListener("keydown", (ev) => { break; case 'r': if (window.pt && window.pt.isActive()) { - (window.pt.source.value == 'model') ? ui.setMode(0) : ui.setMode(2); + (ui.domRenderSource.value == 'model') ? ui.setMode(0) : ui.setMode(2); } else { ui.setMode(1); } @@ -5600,8 +5651,7 @@ window.addEventListener("resize", () => { if (MODE == 0) palette.create(); if (MODE == 2) bakery.createBakeryList(); - if (ui.isHoverOffScreen(ui.domHover)) - ui.hoverTranslate(ui.domHover, 0, 0, 0); + ui.offscreenCheck(); }, false); @@ -5619,6 +5669,11 @@ function WebsocketClient() { let data = []; this.connect = function() { + if (!preferences.getWebsocket()) { + this.disconnect(); + return; + } + this.ws = new WebSocket("ws://" + preferences.getWebsocketUrl()); this.ws.onopen = () => { @@ -5626,8 +5681,7 @@ function WebsocketClient() { ui.domWebSocketStatus.innerHTML = 'Connected'; ui.domWebSocketStatus.style.color = 'limegreen'; retry = 0; - if (MODE == 0) - this.sendMessage(JSON.stringify({ voxels: builder.voxels })); + this.sendMessage('Initialized.', 'init'); }; this.ws.onmessage = (ev) => { @@ -5657,27 +5711,30 @@ function WebsocketClient() { }; this.ws.onerror = () => { - this.retryConnection(); + //this.retryConnection(); }; } this.retryConnection = function() { clearInterval(interval); - interval = setInterval(() => { - if (retry < maxRetry) { - this.connect(); - retry++; - ui.domWebSocketStatus.innerHTML = `Retry ${retry}/${maxRetry} ...`; - ui.domWebSocketStatus.style.color = 'slategray'; - } else { - this.disconnect(); - } - }, retryDelay); + if (preferences.getWebsocket()) { + interval = setInterval(() => { + if (retry < maxRetry) { + retry++; + ui.domWebSocketStatus.innerHTML = `Retry ${retry}/${maxRetry} ...`; + ui.domWebSocketStatus.style.color = 'slategray'; + this.connect(); + } else { + this.disconnect(); + } + }, retryDelay); + } } - this.sendMessage = function(voxels) { - if (MODE == 0 && this.ws && this.ws.readyState === WebSocket.OPEN) - this.ws.send(JSON.stringify({ voxels: voxels })); + this.sendMessage = function(voxels, key) { + if (MODE == 0 && preferences.getWebsocket()) + if (this.ws && this.ws.readyState === WebSocket.OPEN) + this.ws.send(JSON.stringify({ key: key, voxels: voxels })); } this.disconnect = function() { diff --git a/src/modules/bakery/baker.js b/src/modules/bakery/bakery.js similarity index 98% rename from src/modules/bakery/baker.js rename to src/modules/bakery/bakery.js index b8595ff4..924fbeef 100644 --- a/src/modules/bakery/baker.js +++ b/src/modules/bakery/bakery.js @@ -23,7 +23,7 @@ const nearPositions = [ new BABYLON.Vector3(0, 0, -1) ]; -export function baker(name, voxels, isAddCap = true) { +export function bakery(name, voxels, isAddCap = true) { const planes = []; function constructFace(index, position, nearby, rotX, rotY) { diff --git a/src/modules/loaders/magicavoxel.js b/src/modules/loaders/magicavoxel.js index fda67b0e..06cdb1e6 100644 --- a/src/modules/loaders/magicavoxel.js +++ b/src/modules/loaders/magicavoxel.js @@ -1,5 +1,5 @@ // -// original source: https://github.com/mrdoob/three.js/blob/dev/examples/jsm/loaders/VOXLoader.js +// source: https://github.com/mrdoob/three.js/blob/dev/examples/jsm/loaders/VOXLoader.js // const DEFAULT_PALETTE = [ diff --git a/src/modules/modules.js b/src/modules/modules.js index e9738d91..42cf8713 100644 --- a/src/modules/modules.js +++ b/src/modules/modules.js @@ -3,16 +3,23 @@ @nimadez */ -import { baker } from './bakery/baker.js'; +import { bakery } from './bakery/bakery.js'; import { pt } from './pathtracer/pathtracer.js'; import { rc, voxelizeMesh, voxelizeBake } from './raycaster/raycaster.js'; -import { worker } from './worker/worker.js'; +import { WorkerPool } from '../../libs/addons/WorkerPool.js'; import { SimplexNoise } from '../../libs/addons/SimplexNoise.js'; -window.baker = baker; +const workerPool = new WorkerPool(); +workerPool.setWorkerCreator(() => { + const worker = new Worker('src/modules/worker/worker.js', { type: "module" }); + worker.postMessage({ id: 'init' }); + return worker; +}); + +window.bakery = bakery; window.pt = pt; window.rc = rc; window.voxelizeMesh = voxelizeMesh; window.voxelizeBake = voxelizeBake; -window.worker = worker; +window.workerPool = workerPool; window.SimplexNoise = SimplexNoise; diff --git a/src/modules/pathtracer/pathtracer.js b/src/modules/pathtracer/pathtracer.js index 3c564085..97365478 100644 --- a/src/modules/pathtracer/pathtracer.js +++ b/src/modules/pathtracer/pathtracer.js @@ -17,6 +17,7 @@ import { shaderStructs, shaderIntersectFunction } from '../three.js'; + const DPR = 1; const DPR_FASTMODE = 0.6; const CAM_FAR = 1000; @@ -52,18 +53,12 @@ class Pathtracer { this.framed = undefined; this.maxSamples = 0; this.samples = 0; - - this.container = document.getElementById('pathtracer'); - this.canvas = document.getElementById('canvas_pt'); - this.source = document.getElementById('input-pt-source'); - this.domShade = document.getElementById('input-pt-shade'); - this.domPause = document.getElementById('btn-pt-pause'); this.init(); } init() { - this.renderer = new THREE.WebGLRenderer({ canvas: this.canvas, antialias: false, preserveDrawingBuffer: true }); + this.renderer = new THREE.WebGLRenderer({ canvas: canvasRender, antialias: false, preserveDrawingBuffer: true }); this.renderer.setSize(window.innerWidth, window.innerHeight); this.renderer.setPixelRatio(window.devicePixelRatio * DPR); this.renderer.setClearColor(0x000000, 0); @@ -104,27 +99,27 @@ class Pathtracer { this.update(); this.updateHDR(hdri.hdrMap.url); this.updateUniformMaxSamples(this.maxSamples); - this.updateUniformBounces(document.getElementById('input-pt-bounces').value); - this.updateUniformRenderPassId(document.getElementById('input-pt-passes').value); + this.updateUniformBounces(ui.domRenderBounces.value); + this.updateUniformRenderPassId(ui.domRenderPasses.value); this.updateUniformCameraAperture(ui.domCameraAperture.value); this.updateUniformCameraFocalLength(ui.domCameraFocalLength.value); - this.updateUniformEnvPower(document.getElementById('input-pt-envpower').value); - this.updateUniformDirectLight(document.getElementById('input-pt-directlight').checked); + this.updateUniformEnvPower(ui.domRenderEnvPower.value); + this.updateUniformDirectLight(ui.domRenderDirectLight.checked); this.updateUniformLightDir(-light.getDirection().x, -light.getDirection().y, -light.getDirection().z); this.updateUniformLightCol(ui.domColorPickerLightColor.value); - this.updateUniformBackground(document.getElementById('input-pt-background').checked); - this.updateUniformMaterialId(document.getElementById('input-pt-material').value); - this.updateUniformMaterialEmissive(document.getElementById('input-pt-emissive').value); - this.updateUniformMaterialRoughness(document.getElementById('input-pt-roughness').value); - this.updateUniformGrid(document.getElementById('input-pt-grid').checked); + this.updateUniformBackground(ui.domRenderBackground.checked); + this.updateUniformMaterialId(ui.domRenderMaterial.value); + this.updateUniformMaterialEmissive(ui.domRenderEmissive.value); + this.updateUniformMaterialRoughness(ui.domRenderRoughness.value); + this.updateUniformGrid(ui.domRenderGrid.checked); } update() { - this.maxSamples = document.getElementById('input-pt-maxsamples').value; + this.maxSamples = ui.domRenderMaxSamples.value; } updateCamera() { - if (this.source.value == 'model') { + if (ui.domRenderSource.value == 'model') { this.camera.position.set(camera.camera0.position.x, camera.camera0.position.y, camera.camera0.position.z); this.camera.fov = camera.camera0.fov * RAD2DEG_STATIC; this.controls.target = new THREE.Vector3(camera.camera0.target.x, camera.camera0.target.y, camera.camera0.target.z); @@ -202,7 +197,7 @@ class Pathtracer { this.geom.dispose() }; - if (this.source.value == 'model') { + if (ui.domRenderSource.value == 'model') { builder.fillArrayBuffers(); this.geom = new THREE.BufferGeometry(); this.geom.setAttribute('position', new THREE.BufferAttribute(builder.positions, 3)); @@ -223,14 +218,14 @@ class Pathtracer { this.framed = camera.getFramed(mesh); mesh.dispose(); } else { - this.source.selectedIndex = 0; + ui.domRenderSource.selectedIndex = 0; this.createGeometry(); // revert to voxels } } this.geom.computeVertexNormals(); - if (document.getElementById('input-pt-floor').checked) + if (ui.domRenderFloor.checked) this.geom = this.createPlaneGeometry(this.geom); this.geom.computeBoundsTree({ @@ -255,7 +250,7 @@ class Pathtracer { const plane = new THREE.PlaneGeometry(r, r, 1, 1); plane.rotateX(Math.PI / 2); plane.translate(0, -0.5, 0); - const color = new THREE.Color(document.getElementById('input-pt-floorcolor').value); + const color = new THREE.Color(ui.domRenderFloorColor.value); const colors = new Float32Array(plane.attributes.position.count * 4); for (let i = 0; i < colors.length / 4; i++) { colors[4 * i + 0] = color.r; @@ -278,7 +273,7 @@ class Pathtracer { } */ updateAttributeColors() { - if (this.domShade.checked) { + if (ui.domRenderShade.checked) { const colors = new Float32Array(this.geom.attributes.position.count * 4); colors.fill(GRAY / 1.5); this.uniRender['colorAttribute'].value.updateFrom(new THREE.BufferAttribute(colors, 4)); @@ -360,7 +355,7 @@ class Pathtracer { updateUniformLightCol(hex) { if (!this.uniRender) return; const col = new THREE.Color(hex); - const brightness = document.getElementById('input-pt-envpower').value / 3; + const brightness = ui.domRenderEnvPower.value / 3; col.r = (col.r * col.r) * (ui.domLightIntensity.value * brightness); col.g = (col.g * col.g) * (ui.domLightIntensity.value * brightness); col.b = (col.b * col.b) * (ui.domLightIntensity.value * brightness); @@ -394,21 +389,21 @@ class Pathtracer { pause() { this.isProgressing = !this.isProgressing; if (this.isProgressing) { - this.domPause.innerHTML = 'Pause'; - this.domPause.classList.remove('btn_select_pt'); - this.canvas.style.pointerEvents = 'unset'; + ui.domRenderPause.innerHTML = 'Pause'; + ui.domRenderPause.classList.remove('btn_select_pt'); + canvasRender.style.pointerEvents = 'unset'; } else { - this.domPause.innerHTML = 'Continue'; - this.domPause.classList.add('btn_select_pt'); - this.canvas.style.pointerEvents = 'none'; + ui.domRenderPause.innerHTML = 'Continue'; + ui.domRenderPause.classList.add('btn_select_pt'); + canvasRender.style.pointerEvents = 'none'; } } fastMode() { this.isFastMode = !this.isFastMode; (this.isFastMode) ? - document.getElementById('btn-pt-fast').classList.add('btn_select_pt') : - document.getElementById('btn-pt-fast').classList.remove('btn_select_pt'); + ui.domRenderFast.classList.add('btn_select_pt') : + ui.domRenderFast.classList.remove('btn_select_pt'); if (this.isLoaded) this.resize(); } @@ -511,14 +506,14 @@ class Pathtracer { this.isProgressing = true; this.create(); - this.canvas.style.pointerEvents = 'unset'; - this.container.style.display = 'unset'; + ui.domPathtracer.style.display = 'unset'; + canvasRender.style.pointerEvents = 'unset'; } deactivate() { if (!this.isLoaded) return; - if (this.source.value == 'model') { + if (ui.domRenderSource.value == 'model') { camera.camera0.position = new BABYLON.Vector3(this.camera.position.x, this.camera.position.y, this.camera.position.z); camera.camera0.target = new BABYLON.Vector3(this.controls.target.x, this.controls.target.y, this.controls.target.z); } else { @@ -533,10 +528,10 @@ class Pathtracer { isRendering = true; ui.domProgressBar.style.width = 0; - this.domPause.innerHTML = 'Pause'; - this.domPause.classList.remove('btn_select_pt'); - this.canvas.style.pointerEvents = 'none'; - this.container.style.display = 'none'; + ui.domRenderPause.innerHTML = 'Pause'; + ui.domRenderPause.classList.remove('btn_select_pt'); + ui.domPathtracer.style.display = 'none'; + canvasRender.style.pointerEvents = 'none'; } dispose() { @@ -582,14 +577,14 @@ await loadTexture('assets/bluenoise256.png').then(tex => { // Register events -document.getElementById('input-pt-source').onchange = () => { +ui.domRenderSource.onchange = () => { if (pt.isLoaded) { pt.createGeometry(); pt.resetSamples(); } }; -document.getElementById('input-pt-maxsamples').onchange = (ev) => { +ui.domRenderMaxSamples.onchange = (ev) => { if (ev.target.value < 8) ev.target.value = 8; if (pt.isLoaded) { pt.update(); @@ -597,78 +592,78 @@ document.getElementById('input-pt-maxsamples').onchange = (ev) => { } }; -document.getElementById('input-pt-passes').onchange = (ev) => { +ui.domRenderPasses.onchange = (ev) => { if (pt.isLoaded) pt.updateUniformRenderPassId(ev.target.value); }; -document.getElementById('input-pt-bounces').onchange = (ev) => { +ui.domRenderBounces.onchange = (ev) => { if (pt.isLoaded) pt.updateUniformBounces(ev.target.value); }; -document.getElementById('input-pt-envpower').onchange = (ev) => { +ui.domRenderEnvPower.onchange = (ev) => { if (ev.target.value < 1) ev.target.value = 1; if (pt.isLoaded) pt.updateUniformEnvPower(ev.target.value); }; -document.getElementById('input-pt-envpower').onwheel = (ev) => { +ui.domRenderEnvPower.onwheel = (ev) => { if (pt.isLoaded) pt.updateUniformEnvPower(ev.target.value); }; -document.getElementById('input-pt-directlight').oninput = (ev) => { +ui.domRenderDirectLight.oninput = (ev) => { if (pt.isLoaded) pt.updateUniformDirectLight(ev.target.checked); }; -document.getElementById('input-pt-background').oninput = (ev) => { +ui.domRenderBackground.oninput = (ev) => { if (pt.isLoaded) pt.updateUniformBackground(ev.target.checked); }; -document.getElementById('input-pt-material').onchange = (ev) => { +ui.domRenderMaterial.onchange = (ev) => { if (pt.isLoaded) pt.updateUniformMaterialId(ev.target.value); }; -document.getElementById('input-pt-emissive').oninput = (ev) => { +ui.domRenderEmissive.oninput = (ev) => { if (pt.isLoaded) pt.updateUniformMaterialEmissive(ev.target.value); }; -document.getElementById('input-pt-roughness').oninput = (ev) => { +ui.domRenderRoughness.oninput = (ev) => { if (pt.isLoaded && ev.target.value > 0) pt.updateUniformMaterialRoughness(ev.target.value); }; -document.getElementById('input-pt-grid').oninput = (ev) => { +ui.domRenderGrid.oninput = (ev) => { if (pt.isLoaded) pt.updateUniformGrid(ev.target.checked); }; -document.getElementById('input-pt-shade').oninput = () => { +ui.domRenderShade.oninput = () => { if (pt.isLoaded) pt.updateAttributeColors(); }; -document.getElementById('input-pt-floor').oninput = () => { +ui.domRenderFloor.oninput = () => { if (pt.isLoaded) pt.createGeometry(false); }; -document.getElementById('btn-pt-pause').onclick = () => { +ui.domRenderPause.onclick = () => { if (pt.isLoaded) pt.pause(); }; -document.getElementById('btn-pt-shot').onclick = () => { +ui.domRenderShot.onclick = () => { if (pt.isLoaded) pt.shot(); }; -document.getElementById('btn-pt-fast').onclick = () => { +ui.domRenderFast.onclick = () => { pt.fastMode(); }; diff --git a/src/modules/raycaster/raycaster.js b/src/modules/raycaster/raycaster.js index 12981154..00758630 100644 --- a/src/modules/raycaster/raycaster.js +++ b/src/modules/raycaster/raycaster.js @@ -99,18 +99,6 @@ class Raycaster { return this.geom.boundsTree.intersectsBox(this.box, this.invMat); } - debug(isHit, ray = this.ray, dist = 1) { - if (isHit) { - const org = new BABYLON.Vector3(ray.origin.x, ray.origin.y, ray.origin.z); - const dir = new BABYLON.Vector3(ray.direction.x, ray.direction.y, ray.direction.z); - const helper = new BABYLON.RayHelper(new BABYLON.Ray(org, dir, dist)); - helper.show(uix.utilLayer.utilityLayerScene, BABYLON.Color3.Teal()); - setTimeout(() => { - helper.dispose(); - }, 5000); - } - } - dispose() { if (this.geom) { this.geom.boundsTree.geometry.dispose(); diff --git a/src/modules/three.js b/src/modules/three.js index 52fa57ef..d242e389 100644 --- a/src/modules/three.js +++ b/src/modules/three.js @@ -3,31 +3,22 @@ @nimadez */ -import * as THREE from 'three'; -import { OrbitControls } from '../../libs/addons/OrbitControls.js'; -import { FullScreenQuad } from '../../libs/addons/Pass.js'; -import { mergeGeometries } from '../../libs/addons/BufferGeometryUtils.js'; -import { RGBELoader } from '../../libs/addons/RGBELoader.js'; - +import { BufferGeometry, Mesh } from 'three'; import { - MeshBVHUniformStruct, //MeshBVH - computeBoundsTree, disposeBoundsTree, acceleratedRaycast, - FloatVertexAttributeTexture, //UIntVertexAttributeTexture, - shaderStructs, shaderIntersectFunction, //shaderDistanceFunction, - //CENTER, SAH + computeBoundsTree, disposeBoundsTree, acceleratedRaycast } from '../../libs/three-mesh-bvh.module.js'; -THREE.BufferGeometry.prototype.computeBoundsTree = computeBoundsTree; -THREE.BufferGeometry.prototype.disposeBoundsTree = disposeBoundsTree; -THREE.Mesh.prototype.raycast = acceleratedRaycast; +BufferGeometry.prototype.computeBoundsTree = computeBoundsTree; +BufferGeometry.prototype.disposeBoundsTree = disposeBoundsTree; +Mesh.prototype.raycast = acceleratedRaycast; +export * as THREE from 'three'; +export { OrbitControls } from '../../libs/addons/OrbitControls.js'; +export { FullScreenQuad } from '../../libs/addons/Pass.js'; +export { mergeGeometries } from '../../libs/addons/BufferGeometryUtils.js'; +export { RGBELoader } from '../../libs/addons/RGBELoader.js'; export { - THREE, - OrbitControls, - FullScreenQuad, - mergeGeometries, - RGBELoader, - MeshBVHUniformStruct, - FloatVertexAttributeTexture, - shaderStructs, shaderIntersectFunction -} + MeshBVHUniformStruct, //MeshBVH, CENTER, SAH + FloatVertexAttributeTexture, //UIntVertexAttributeTexture + shaderStructs, shaderIntersectFunction //shaderDistanceFunction +} from '../../libs/three-mesh-bvh.module.js'; diff --git a/src/modules/worker/processor.js b/src/modules/worker/processor.js deleted file mode 100644 index 2eca49d1..00000000 --- a/src/modules/worker/processor.js +++ /dev/null @@ -1,54 +0,0 @@ -/* - Dec 2023 - @nimadez - - Web worker processor -*/ - -import { parseMagicaVoxel } from '../loaders/magicavoxel.js'; - -let arr = []; - -onmessage = (ev) => { - switch (ev.data.id) { - - case 'findInnerVoxels': - arr = []; - const idx = []; - for (let i = 0; i < ev.data.data[0].length; i++) { - const pos = ev.data.data[0][i].position; - idx[0] = ev.data.data[1][`${pos._x + 1}_${pos._y}_${pos._z}`]; - idx[1] = ev.data.data[1][`${pos._x - 1}_${pos._y}_${pos._z}`]; - idx[2] = ev.data.data[1][`${pos._x}_${pos._y + 1}_${pos._z}`]; - idx[3] = ev.data.data[1][`${pos._x}_${pos._y - 1}_${pos._z}`]; - idx[4] = ev.data.data[1][`${pos._x}_${pos._y}_${pos._z + 1}`]; - idx[5] = ev.data.data[1][`${pos._x}_${pos._y}_${pos._z - 1}`]; - if (idx[0] > -1 && idx[1] > -1 && idx[2] > -1 && idx[3] > -1 && idx[4] > -1 && idx[5] > -1) - continue; - else - arr.push(ev.data.data[0][i]); - } - postMessage(arr); - arr = []; - break; - - case 'parseMagicaVoxel': - const chunks = parseMagicaVoxel(ev.data.data); - if (!chunks) { - throw new TypeError("Parse MagicaVoxel, chunk not found."); - } - arr = []; - for (let i = 0; i < chunks[0].data.length; i+=4) { - const x = chunks[0].data[ i + 0 ]; - const y = chunks[0].data[ i + 1 ]; - const z = chunks[0].data[ i + 2 ]; - const c = chunks[0].data[ i + 3 ]; - const hex = chunks[0].palette[ c ]; - const color = '#' + ("000000" + (((hex & 0xFF) << 16) + (hex & 0xFF00) + ((hex >> 16) & 0xFF)).toString(16)).slice(-6); - arr.push({ x: x, y: z, z: -y, color: color.toUpperCase() }); - } - postMessage(arr); - arr = []; - break; - } -} diff --git a/src/modules/worker/worker.js b/src/modules/worker/worker.js index 9341ff1e..1de3d8d4 100644 --- a/src/modules/worker/worker.js +++ b/src/modules/worker/worker.js @@ -2,67 +2,57 @@ Dec 2023 @nimadez - Web worker + Web worker processor */ -class WebWorker { - constructor() { - this.worker = new Worker("src/modules/worker/processor.js", { type: "module" }); - } +import { parseMagicaVoxel } from '../loaders/magicavoxel.js'; - start(id, data, onmessage, onerror) { - engine.displayLoadingUI(); - - this.worker.postMessage({ - id: id, - data: data - }); - - this.worker.onmessage = (ev) => { - onmessage(ev.data); - engine.hideLoadingUI(); - }; - - this.worker.onerror = (err) => { - onerror(err); - console.log(err); - engine.hideLoadingUI(); - }; - } +let arr = []; - startBackground(id, data, onmessage, onerror) { - this.worker.postMessage({ - id: id, - data: data - }); - - this.worker.onmessage = (ev) => { - onmessage(ev.data); - }; - - this.worker.onerror = (err) => { - onerror(err); - console.log(err); - }; - } +onmessage = (ev) => { + switch (ev.data.id) { - async startAsync(id, data) { - return new Promise((resolve, reject) => { - this.worker.postMessage({ - id: id, - data: data - }); - - this.worker.onmessage = (ev) => { - resolve(ev.data); - }; - - this.worker.onerror = (err) => { - reject(err); - console.log(err); - }; - }); + case 'init': + console.log('worker initialized.'); + break; + + case 'findInnerVoxels': + arr = []; + const idx = []; + for (let i = 0; i < ev.data.data[0].length; i++) { + const pos = ev.data.data[0][i].position; + idx[0] = ev.data.data[1][`${pos._x + 1}_${pos._y}_${pos._z}`]; + idx[1] = ev.data.data[1][`${pos._x - 1}_${pos._y}_${pos._z}`]; + idx[2] = ev.data.data[1][`${pos._x}_${pos._y + 1}_${pos._z}`]; + idx[3] = ev.data.data[1][`${pos._x}_${pos._y - 1}_${pos._z}`]; + idx[4] = ev.data.data[1][`${pos._x}_${pos._y}_${pos._z + 1}`]; + idx[5] = ev.data.data[1][`${pos._x}_${pos._y}_${pos._z - 1}`]; + if (idx[0] > -1 && idx[1] > -1 && idx[2] > -1 && idx[3] > -1 && idx[4] > -1 && idx[5] > -1) + continue; + else + arr.push(ev.data.data[0][i]); + } + postMessage(arr); + arr = []; + break; + + case 'parseMagicaVoxel': + const chunks = parseMagicaVoxel(ev.data.data); + if (!chunks) { + throw new TypeError("Parse MagicaVoxel, chunk not found."); + } + arr = []; + for (let i = 0; i < chunks[0].data.length; i+=4) { + const x = chunks[0].data[ i + 0 ]; + const y = chunks[0].data[ i + 1 ]; + const z = chunks[0].data[ i + 2 ]; + const c = chunks[0].data[ i + 3 ]; + const hex = chunks[0].palette[ c ]; + const color = '#' + ("000000" + (((hex & 0xFF) << 16) + (hex & 0xFF00) + ((hex >> 16) & 0xFF)).toString(16)).slice(-6); + arr.push({ x: x, y: z, z: -y, color: color.toUpperCase() }); + } + postMessage(arr); + arr = []; + break; } } - -export const worker = new WebWorker();0 | SL 0 / 0 | 0 | BOUNCE 0
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-