Update 4.8.0

Author: nimadez

README.md

@@ -4,7 +4,6 @@
 
 ### **Voxel-based 3D Modeling Application**
 **Model . Render . Export**<br>
-This application is suitable for rapid prototyping, speed modeling, creating small assets in large numbers, loading and saving MagicaVoxel VOX format, or simply playing around and learning 3D modeling.
 
 [https://nimadez.github.io/voxel-builder/](https://nimadez.github.io/voxel-builder/)
 
@@ -30,7 +29,7 @@ This application is suitable for rapid prototyping, speed modeling, creating sma
 - Interactive modeling toolsets
 - Symmetric drawing and painting
 - Voxel transforms and manipulation
-- Color groups and visibility options
+- Color groups and layering options
 
 **Rendering**
 - Three.js Sandbox
@@ -129,7 +128,7 @@ Also, the FPS depends on many factors, such as the material (CEL is faster) and
 ## FAQ
 
 #### Why isn't there a layering feature and a layer list?
-> There is, you can have 16,777,216 layers (groups or color groups), because the layering system in this app is determined by colors, even a change in the brightness of a color creates a new group that can contain hundreds of voxels.<br>
+> You can have 16,777,216 layers (color groups), the layering system in this app is determined by colors, even a change in the brightness of a color creates a new group that can contain hundreds of voxels.<br>
 > So groups are automatically created, merged, or deleted based on color. You can even hide, delete, select, paint, transform, or duplicate color groups.
 
 #### Why can't I freely transform 3D objects like in other 3D software?
@@ -142,10 +141,10 @@ Also, the FPS depends on many factors, such as the material (CEL is faster) and
 > GLB has a special use in this application, you can save and retrieve voxel data using baked meshes, exporting raw voxels to GLB leads to interference and errors when loading it using the "Load Bakes" option.
 
 #### What are the methods for saving and loading voxel data?
-> -- **Save to JSON** *(primary, human-readable, fastest)*<br>
-> -- **Export baked meshes to GLB** *(and 'Load Bakes', supports Blender and other 3D apps, slower)*<br>
+> -- **Save to JSON** *(includes scene configs, human-readable, fastest)*<br>
+> -- **Export baked meshes to GLB** *(uses 'Load Bakes', supports Blender and other 3D software, slower)*<br>
 > -- **Save snapshots to ZIP archive** *(easy to share, browser storage limits, speed is variable)*<br>
-> -- **Save to VOX format** *(supported by many 3D apps and engines, very fast)*
+> -- **Save to VOX format** *(supports MagicaVoxel, very fast)*
 
 #### How to merge vertices after export to GLB?
 > 1- Open exported GLB file in Blender<br>
@@ -167,9 +166,12 @@ git log -2 (copy the hash of the previous commit)
 git reset --hard $HASH
 ```
 
+#### Will WebGPU be supported?
+> It was supported to some extent before, but was removed due to unnecessary complexity. But once it matures enough to be enabled by default in browsers, this upgrade will be possible with a few simple changes.
+
 ## History
 ```
-↑ Advancing to the Renaissance Bubble
+↑ Advancing in the Renaissance Bubble
 ↑ A fundamental overhaul of the core
 ↑ Core initialization!
 ↑ Rendering was left to Three and three-gpu-pathtracer

media/screenshot.png

@@ -1,6 +1,6 @@
 {
     "name": "voxel-builder",
-    "version": "4.7.9",
+    "version": "4.8.0",
     "description": "Voxel-based 3D modeling application",
     "main": "electron.js",
     "scripts": {
@@ -12,9 +12,9 @@
     "devDependencies": {
         "electron": "^38.0.0",
         "babylonjs": "8.50.0",
-        "three": "0.182.0",
+        "three": "0.183.0",
         "three-mesh-bvh": "0.9.7",
-        "three-gpu-pathtracer": "0.0.23",
+        "three-gpu-pathtracer": "0.0.24",
         "@tweenjs/tween.js": "25.0.0",
         "reinvented-color-wheel": "0.4.0",
         "jszip": "3.10.1"

package.json

@@ -12,21 +12,13 @@ const PORT = 8011;
 
 let filePath = undefined;
 const mimeTypes = {
-    'txt': 'text/plain',
     'html': 'text/html',
-    'xml': 'application/xml',
     'js': 'text/javascript',
-    'py': 'text/x-python',
-    'css': 'text/css',
     'json': 'application/json',
     'png': 'image/png',
     'jpg': 'image/jpg',
-    'jpeg': 'image/jpeg',
     'svg': 'image/svg+xml',
-    'gif': 'image/gif',
-    'ico': 'image/x-icon',
     'ttf': 'font/ttf',
-    'woff': 'font/woff',
     'woff2': 'font/woff2'
 };
 

server.js

@@ -304,7 +304,7 @@
             <li class="category">ABOUT</li>
             <li class="about">
                 <div><span style="color: orange">V</span>OXEL BUILDER</div>
-                &#8627; 4.7.9 BETA
+                &#8627; 4.8.0 BETA
                 <br>&#8627; <a href="https://github.com/nimadez/voxel-builder/" target="_blank">GitHub</a>
                 <br>&#8627; <a href="https://github.com/nimadez/voxel-builder/releases" target="_blank">Changelog</a>
                 <br>DEVELOPER
@@ -353,6 +353,7 @@
             <li title="Less battery drain (&#60;100 ms startup)"><input type="checkbox" id="pref_minimal"> <label for="pref_minimal">Minimal UIX</label></li>
             <li title="Enabled in self-hosted desktop mode"><input type="checkbox" id="pref_user_startup"> <label for="pref_user_startup">User Startup</label></li>
             <li class="spacer"></li>
+            <li title="Rendering is also affected" class="row_input"><label>Max FPS</label> <input type="number" id="pref_fps_max" class="ignorekeys" value="60" min="30" max="120" step="1"></li>
             <li class="row_input"><label>Start Box</label> <input type="number" id="pref_startbox_size" class="ignorekeys" value="20" min="1" max="40" step="1"></li>
             <li class="row_input"><label>Palette</label> <input type="number" id="pref_palette_size" class="ignorekeys" value="1" min="1" max="20" step="1"></li>
             <li class="row_input" title="Maximum 100 Storages"><label>Snapshot</label> <input type="number" id="pref_snapshot_num" class="ignorekeys" value="6" min="1" max="100" step="1"></li>
@@ -365,7 +366,7 @@
             <li class="row_input"><label>UI Opacity</label> <input type="range" id="pref_ui_opacity" class="ignorekeys" value="0.8" min="0.6" max="0.9" step="0.05"></li>
             <li class="category">SCENE</li>
             <li class="row_color"><label for="pref_background_check">BG</label> <input type="color" id="pref_background_color" value="#151515"> <input type="checkbox" id="pref_background_check" style="width: 57px;"></li>
-            <li class="row_color" title="General shade color is widely distributed throughout the app."><label>Shade</label><input type="color" id="pref_render_shade" value="#90A0B3"><button style="width: 52px; height: 20px;" title="Reset" onclick="this.previousElementSibling.value = '#90A0B3'; this.previousElementSibling.dispatchEvent(new Event('input', { bubbles: true }));">R</button></li>
+            <li class="row_color" title="General shade color is widely distributed throughout the app"><label>Shade</label><input type="color" id="pref_render_shade" value="#90A0B3"><button style="width: 52px; height: 20px;" title="Reset" onclick="this.previousElementSibling.value = '#90A0B3'; this.previousElementSibling.dispatchEvent(new Event('input', { bubbles: true }));">R</button></li>
             <li><input type="checkbox" id="pref_scene_pointcloud"> <label for="pref_scene_pointcloud">Point Cloud</label></li>
             <li class="category">RENDER</li>
             <li class="row">
@@ -513,7 +514,7 @@
 
         <ul class="menu panel" id="menu-voxelize">
             <li class="category">MODELS</li>
-            <li class="row"><label style="margin-right: 10px">Scale</label><input type="number" class="ignorekeys" id="input-voxelizer-scale" value="50" min="1"></li>
+            <li class="row"><label style="margin-right: 10px">Scale</label><input type="number" class="ignorekeys" id="input-voxelizer-scale" value="50" min="1" step="1"></li>
             <li class="spacer"></li>
             <li><button onclick="document.getElementById('openfile_voxelizer').click()">Upload Model</button></li>
             <li><label class="help">? GLB | OBJ | STL | PLY</label></li>
@@ -538,9 +539,9 @@
         <ul class="menu panel" id="menu-create">
             <li class="category">BOX</li>
             <li>
-                <div class="row">&nbsp;<label style="margin-right: 4px">X</label>&nbsp;<input id="create_grid_x" type="number" class="ignorekeys" value="20" min="1"></div>
-                <div class="row">&nbsp;<label style="margin-right: 4px">Y</label>&nbsp;<input id="create_grid_y" type="number" class="ignorekeys" value="20" min="1"></div>
-                <div class="row">&nbsp;<label class="Z">Z</label>&nbsp;<input id="create_grid_z" type="number" class="ignorekeys" value="20" min="1"></div>
+                <div class="row">&nbsp;<label style="margin-right: 4px">X</label>&nbsp;<input id="create_grid_x" type="number" class="ignorekeys" value="20" min="1" step="1"></div>
+                <div class="row">&nbsp;<label style="margin-right: 4px">Y</label>&nbsp;<input id="create_grid_y" type="number" class="ignorekeys" value="20" min="1" step="1"></div>
+                <div class="row">&nbsp;<label class="Z">Z</label>&nbsp;<input id="create_grid_z" type="number" class="ignorekeys" value="20" min="1" step="1"></div>
                 <div class="spacer"></div>
                 <input type="checkbox" id="create_grid_fill" checked> <label for="create_grid_fill">Fill Box</label><br>
                 <div class="spacer"></div>
@@ -552,18 +553,18 @@
             </li>
             <li class="category">SPHERE</li>
             <li>
-                <div class="row">&nbsp;<label style="margin-right: 6px">Outer</label>&nbsp;<input id="create_sphere_outer" type="number" class="ignorekeys" value="20" min="3"></div>
-                <div class="row">&nbsp;<label style="margin-right: 8px">Inner</label>&nbsp;<input id="create_sphere_inner" type="number" class="ignorekeys" value="10" min="0"></div>
+                <div class="row">&nbsp;<label style="margin-right: 6px">Outer</label>&nbsp;<input id="create_sphere_outer" type="number" class="ignorekeys" value="20" min="3" step="1"></div>
+                <div class="row">&nbsp;<label style="margin-right: 8px">Inner</label>&nbsp;<input id="create_sphere_inner" type="number" class="ignorekeys" value="10" min="0" step="1"></div>
                 <div class="spacer"></div>
                 <div title="Adds inner voxels and paints them using the selected color"><input type="checkbox" id="create_sphere_inner_color" checked> <label for="create_sphere_inner_color">Colored Inner</label></div>
                 <div class="spacer"></div>
                 <button id="btn_action_create_sphere">Sphere</button>
             </li>
             <li class="category">TERRAIN</li>
             <li>
-                <div class="row">&nbsp;<label style="margin-right: 4px">X</label>&nbsp;<input id="create_terrain_x" type="number" class="ignorekeys" value="100" min="3"></div>
-                <div class="row">&nbsp;<label style="margin-right: 4px">Y</label>&nbsp;<input id="create_terrain_y" type="number" class="ignorekeys" value="5" min="1"></div>
-                <div class="row">&nbsp;<label class="Z">Z</label>&nbsp;<input id="create_terrain_z" type="number" class="ignorekeys" value="100" min="3"></div>
+                <div class="row">&nbsp;<label style="margin-right: 4px">X</label>&nbsp;<input id="create_terrain_x" type="number" class="ignorekeys" value="100" min="3" step="1"></div>
+                <div class="row">&nbsp;<label style="margin-right: 4px">Y</label>&nbsp;<input id="create_terrain_y" type="number" class="ignorekeys" value="5" min="1" step="1"></div>
+                <div class="row">&nbsp;<label class="Z">Z</label>&nbsp;<input id="create_terrain_z" type="number" class="ignorekeys" value="100" min="3" step="1"></div>
                 <div class="spacer"></div>
                 <input type="checkbox" id="create_terrain_grad" checked> <label for="create_terrain_grad">Height Gradient</label><br>
                 <div class="spacer"></div>
@@ -919,8 +920,10 @@
 
         float amb = 1.0;
         float dif = max(dot(N, L), 0.0);
+        if (dot(N, L) < 0.0)
+            dif = 0.5 * min(dot(N, -L), 1.0);
 
-        float NdotV = max(dot(N, V), 0.0);
+        float NdotV = max(dot(N, V), 1.0);
         float ao = pow(NdotV, 0.5);
         float curvature = abs(NdotV);
         ao = mix(ao, 0.5, curvature * 0.5);
@@ -982,7 +985,7 @@
         vec3 sb = sobel(textureSampler, vUV);
         float mx = max(max(sb.r, sb.g), sb.b);
         float aa = smoothstep(1.0, 0.0, mx);
-    	float edge = step(mx, 0.5);
+    	float edge = step(mx, 1.0);
 
         vec3 col = texture2D(textureSampler, vUV).rgb;
         col = mix(col, col * edge * aa, 1.0);

src/index.html

@@ -1852,12 +1852,12 @@ class GLTFWriter {
 				! ( array instanceof Uint8Array ) ) {
 
 				console.warn( 'GLTFExporter: Attribute "skinIndex" converted to type UNSIGNED_SHORT.' );
-				modifiedAttribute = new BufferAttribute( new Uint16Array( array ), attribute.itemSize, attribute.normalized );
+				modifiedAttribute = GLTFExporter.Utils.toTypedBufferAttribute( attribute, Uint16Array );
 
 			} else if ( ( array instanceof Uint32Array || array instanceof Int32Array ) && ! attributeName.startsWith( '_' ) ) {
 
 				console.warn( `GLTFExporter: Attribute "${ attributeName }" converted to type FLOAT.` );
-				modifiedAttribute = GLTFExporter.Utils.toFloat32BufferAttribute( attribute );
+				modifiedAttribute = GLTFExporter.Utils.toTypedBufferAttribute( attribute, Float32Array );
 
 			}
 
@@ -2355,6 +2355,13 @@ class GLTFWriter {
 
 		if ( ! json.nodes ) json.nodes = [];
 
+		// Handle pivot by creating a container node
+		if ( object.pivot !== null ) {
+
+			return await this._processNodeWithPivotAsync( object );
+
+		}
+
 		const nodeDef = {};
 
 		if ( options.trs ) {
@@ -2451,6 +2458,126 @@ class GLTFWriter {
 
 	}
 
+	/**
+	 * Process Object3D node with pivot using container approach
+	 * @param {THREE.Object3D} object Object3D with pivot
+	 * @return {Promise<number>} Index of the container node
+	 */
+	async _processNodeWithPivotAsync( object ) {
+
+		const json = this.json;
+		const options = this.options;
+		const nodeMap = this.nodeMap;
+
+		const pivot = object.pivot;
+
+		// Container node: holds position + pivot offset, rotation, scale
+		// Animations will target this node
+		const containerDef = {};
+
+		const rotation = object.quaternion.toArray();
+		const position = [
+			object.position.x + pivot.x,
+			object.position.y + pivot.y,
+			object.position.z + pivot.z
+		];
+		const scale = object.scale.toArray();
+
+		if ( ! equalArray( rotation, [ 0, 0, 0, 1 ] ) ) {
+
+			containerDef.rotation = rotation;
+
+		}
+
+		if ( ! equalArray( position, [ 0, 0, 0 ] ) ) {
+
+			containerDef.translation = position;
+
+		}
+
+		if ( ! equalArray( scale, [ 1, 1, 1 ] ) ) {
+
+			containerDef.scale = scale;
+
+		}
+
+		// Store pivot in extras for round-trip reconstruction
+		containerDef.extras = { pivot: pivot.toArray() };
+
+		if ( object.name !== '' ) containerDef.name = String( object.name );
+
+		this.serializeUserData( object, containerDef );
+
+		const containerIndex = json.nodes.push( containerDef ) - 1;
+
+		// Map original object to container so animations target it
+		nodeMap.set( object, containerIndex );
+
+		// Child node: holds mesh with -pivot offset
+		const childDef = {};
+
+		const childPosition = [ - pivot.x, - pivot.y, - pivot.z ];
+
+		if ( ! equalArray( childPosition, [ 0, 0, 0 ] ) ) {
+
+			childDef.translation = childPosition;
+
+		}
+
+		if ( object.isMesh || object.isLine || object.isPoints ) {
+
+			const meshIndex = await this.processMeshAsync( object );
+
+			if ( meshIndex !== null ) childDef.mesh = meshIndex;
+
+		} else if ( object.isCamera ) {
+
+			childDef.camera = this.processCamera( object );
+
+		}
+
+		if ( object.isSkinnedMesh ) this.skins.push( object );
+
+		const childIndex = json.nodes.push( childDef ) - 1;
+
+		// Build children array for container
+		const containerChildren = [ childIndex ];
+
+		// Process object's children as children of the child node
+		if ( object.children.length > 0 ) {
+
+			const grandchildren = [];
+
+			for ( let i = 0, l = object.children.length; i < l; i ++ ) {
+
+				const child = object.children[ i ];
+
+				if ( child.visible || options.onlyVisible === false ) {
+
+					const childNodeIndex = await this.processNodeAsync( child );
+
+					if ( childNodeIndex !== null ) grandchildren.push( childNodeIndex );
+
+				}
+
+			}
+
+			if ( grandchildren.length > 0 ) childDef.children = grandchildren;
+
+		}
+
+		containerDef.children = containerChildren;
+
+		await this._invokeAllAsync( function ( ext ) {
+
+			ext.writeNode && ext.writeNode( object, containerDef );
+
+		} );
+
+		return containerIndex;
+
+	}
+
 	/**
 	 * Process Scene
 	 * @param {Scene} scene Scene to process
@@ -3538,9 +3665,9 @@ GLTFExporter.Utils = {
 
 	},
 
-	toFloat32BufferAttribute: function ( srcAttribute ) {
+	toTypedBufferAttribute: function ( srcAttribute, TypedArray ) {
 
-		const dstAttribute = new BufferAttribute( new Float32Array( srcAttribute.count * srcAttribute.itemSize ), srcAttribute.itemSize, false );
+		const dstAttribute = new BufferAttribute( new TypedArray( srcAttribute.count * srcAttribute.itemSize ), srcAttribute.itemSize, false );
 
 		if ( ! srcAttribute.normalized && ! srcAttribute.isInterleavedBufferAttribute ) {