Update 4.7.6

Author: nimadez

README.md

@@ -121,34 +121,77 @@ Also, the FPS depends on many factors, such as the material (CEL is faster) and
 > Warning: BJS - Max number of touches exceeded. Ignoring touches in excess of 2.<br>This problem is related to Babylon.js and nothing can be done.
 
 ## FAQ
-Why can't I freely transform 3D objects like in other 3D software?
+
+#### 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>
+> So groups are automatically created, merged, or deleted based on color. You can even hide, delete, select, paint, transform, or duplicate color groups.
+
+> *Note, however, that you can only have 255 colors to send and receive from MagicaVoxel.*
+
+#### Why can't I freely transform 3D objects like in other 3D software?
+> There are no objects, you work with a grid of voxels, the XFORM feature only mimics the transformation of 3D objects, you just grab a piece of connected voxels and move them.
+
+#### Can two voxels be in the same position?
+> Never, even if they have different colors, the system will automatically delete one.
+
+#### Why isn't there an option to export raw voxels as GLB?
+> 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?
 ```
-There are no objects, you work with a grid of voxels,
-the XFORM feature only mimics the transformation of 3D objects,
-you just grab a piece of connected voxels and move them.
+There are currently 4 methods to store voxel data:
+
+1- Save to JSON (primary, human-readable, fastest)
+2- Export baked meshes to GLB (and Load Bakes, supports Blender and other 3D apps, slower)
+3- Save snapshots to ZIP archive (easy to share, browser storage limits, speed is variable)
+4- Save to VOX format (supported by many 3D apps and engines, very fast)
 ```
-Why isn't there an option to export raw voxels as GLB?
+
+#### How to add more post-processing shaders?
+> Post-process shaders are automatically recognized, so all the work is done in the "**index.html**" file, just create a script tag called "fx{**Example**}FragmentShader", and add the value "**fxExample**" to "**pref_scene_postfx**". *(the prefix "**fx**" is required)*
 ```
-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.
+<label style="margin-right: 10px">PostFX</label> <select id="pref_scene_postfx">
+    <option value="none">None</option>
+    <option value="fxOutline">Outline</option>
+    <option value="fxExample">Example</option>
+    ...
+</select>
+
+<script type="x-shader/x-fragment" id="fxExampleFragmentShader">
+    #ifdef GL_ES
+        precision highp float;
+    #endif
+
+    varying vec2 vUV;
+
+    uniform vec2 uRes;
+    uniform float uTime;
+    uniform int uSamples;
+    uniform vec3 uCamPos;
+    uniform vec3 uLightPos;
+    uniform sampler2D textureSampler;
+
+    // shader content
+</script>
 ```
-How to merge vertices after export to GLB?
+
+#### How to merge vertices after export to GLB?
 ```
 1- Open exported GLB file in Blender
 2- Go to "Modeling" tab and choose vertex selection mode
 3- Select all vertices (Ctrl + A)
 4- Mesh > Clean Up > Merge by Distance
 ```
-How to run Blender importer script?
+
+#### How to run Blender importer script?
 ```
 1- Save project to JSON
 2- Open Blender and go to "Scripting" tab
 3- Click "Open" and select "blender-importer.py"
 4- Run the script and select a JSON file
 ```
-How to go back to the previous version?
+
+#### How to go back to the previous version?
 ```
 git clone https://github.com/nimadez/voxel-builder
 cd voxel-builder

media/screenshot.png

@@ -1,6 +1,6 @@
 {
     "name": "voxel-builder",
-    "version": "4.7.5",
+    "version": "4.7.6",
     "description": "Voxel-based 3D modeling application",
     "main": "electron.js",
     "scripts": {
@@ -11,7 +11,7 @@
     "license": "MIT",
     "devDependencies": {
         "electron": "^38.0.0",
-        "babylonjs": "8.49.6",
+        "babylonjs": "8.50.0",
         "three": "0.182.0",
         "three-mesh-bvh": "0.9.7",
         "three-gpu-pathtracer": "0.0.23",

package.json

@@ -1,8 +1,9 @@
 #!/usr/bin/env python3
 #
-# Blender 4.x.x
+# Blender 4.x.x / 5.x.x
 # Run script inside Blender and select .JSON file
 
+
 import os
 import json
 import bpy

scripts/blender-importer.py

@@ -313,7 +313,7 @@
             <li class="category">ABOUT</li>
             <li class="about">
                 <div><span style="color: orange">V</span>OXEL BUILDER</div>
-                &#8627; 4.7.5 BETA
+                &#8627; 4.7.6 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
@@ -382,6 +382,13 @@
                     <option value="2">Checker</option>
                 </select>
             </li>
+            <li class="row">
+                <label style="margin-right: 10px">PostFX</label> <select id="pref_scene_postfx">
+                    <option value="none">None</option>
+                    <option value="fxOutline">Outline</option>
+                </select>
+            </li>
+            <li class="row_input" title="PostFX Samples"><label>Samples</label> <input type="range" id="pref_scene_postfx_samples" class="ignorekeys" value="2" min="1" max="8" step="1"></li>
             <li class="spacer"></li>
             <li><input type="checkbox" id="pref_scene_pointcloud"> <label for="pref_scene_pointcloud">Point Cloud</label></li>
             <li class="spacer"></li>
@@ -854,5 +861,141 @@
 </script>
 <script src="main.js" type="module"></script>
 <script src="libs/utils/jszip.min.js"></script>
+<script type="x-shader/x-vertex" id="uniVertexShader">
+    precision highp float;
+
+    attribute vec3 position;
+    attribute vec3 normal;
+    attribute vec2 uv;
+    attribute vec4 color;
+
+    varying vec3 vPosition;
+    varying vec3 vPositionW;
+    varying vec3 vNormalW;
+    varying vec2 vUv;
+    varying vec4 vColor;
+
+    uniform mat4 viewProjection;
+
+    #include<instancesDeclaration>
+
+    void main() {
+        #include<instancesVertex>
+        
+        vec4 worldPos = finalWorld * vec4(position, 1.0);
+        gl_Position = viewProjection * worldPos;
+        
+        #include<vertexColorMixing>
+        
+        vPosition = normalize(gl_Position.xyz);
+        vPositionW = vec3(worldPos);
+        vNormalW = normalize(vec3(finalWorld * vec4(normal, 0.0)));
+        vUv = uv;
+    }
+</script>
+<script type="x-shader/x-fragment" id="celFragmentShader">
+    precision highp float;
+
+    varying vec3 vPosition;
+    varying vec3 vPositionW;
+    varying vec3 vNormalW;
+    varying vec2 vUv;
+    varying vec4 vColor;
+
+    uniform vec3 uCamPos;
+    uniform vec3 uLightPos;
+    uniform vec3 uLightCol;
+    uniform int uTextureId;
+    uniform sampler2D uTexture;
+
+    void main() {
+        vec3 N = normalize(vNormalW);
+        vec3 V = normalize(uCamPos - vPositionW);
+        vec3 L = normalize(uLightPos - vPositionW);
+
+        vec2 grid = abs(fract(vUv - 0.5) - 0.5) / fwidth(vUv);
+        float line = min(grid.x, grid.y);
+        line = 1.0 - min(line, 1.0);
+
+        float amb = clamp(0.9 + 0.25 * N.y, 0.0, 1.0);
+        if (dot(N, L) < 0.0)
+            amb *= 1.2;
+
+        float dif = 1.0 * max(0.5, dot(N, L));
+        dif += 0.5 * max(0.0, dot(N, -L));
+
+        float ao = pow(max(0.0, dot(N, L)) + 0.05, 4.0);
+        float curvature = abs(dot(N, vPosition));
+        ao = mix(0.5, 1.0, ao);
+        ao = mix(ao, 0.25, curvature * 0.5);
+
+        vec3 brdf = vec3(0);
+        brdf += 1.0 * amb * ao;
+        brdf += 1.0 * dif * uLightCol;
+
+        vec3 col = vColor.rgb;
+        col *= brdf;
+
+        if (uTextureId == 1) 
+            col = mix(col, vec3(0), line * 0.22);
+
+        col = pow(col, vec3(0.4545));
+
+        if (uTextureId > 1)
+            col *= texture2D(uTexture, vUv).rgb;
+
+        gl_FragColor = vec4(col, 1.0);
+    }
+</script>
+<script type="x-shader/x-fragment" id="fxOutlineFragmentShader">
+    #ifdef GL_ES
+        precision highp float;
+    #endif
+
+    varying vec2 vUV;
+
+    uniform vec2 uRes;
+    uniform sampler2D textureSampler;
+    
+    // image based edge detection
+    vec3 sobel(sampler2D tex, vec2 uv) {
+        vec3 Gx = vec3(0);
+        vec3 Gy = vec3(0);
+        vec3 e = vec3(0.0, 1.0, -1.0);
+        vec2 tx = 1.0 / uRes.xy;
+        
+        Gx += texture(tex, uv + tx * e.zz).rgb * 1.0;
+        Gx += texture(tex, uv + tx * e.zx).rgb * 2.0;
+        Gx += texture(tex, uv + tx * e.zy).rgb * 1.0;
+
+        Gx += texture(tex, uv + tx * e.yy).rgb * -1.0;
+        Gx += texture(tex, uv + tx * e.yx).rgb * -2.0;
+        Gx += texture(tex, uv + tx * e.yz).rgb * -1.0;
+        
+        Gy += texture(tex, uv + tx * e.zy).rgb * 1.0;
+        Gy += texture(tex, uv + tx * e.xy).rgb * 2.0;
+        Gy += texture(tex, uv + tx * e.yy).rgb * 1.0;
+
+        Gy += texture(tex, uv + tx * e.zz).rgb * -1.0;
+        Gy += texture(tex, uv + tx * e.xz).rgb * -2.0;
+        Gy += texture(tex, uv + tx * e.yz).rgb * -1.0;
+        
+        return sqrt(Gx*Gx + Gy*Gy);
+    }
+
+    void main(void) {
+        vec2 uv = gl_FragCoord.xy / uRes.xy;
+
+        vec3 sb = sobel(textureSampler, uv);
+        float mx = max(max(sb.r, sb.g), sb.b);
+        float aa = smoothstep(1.0, 0.0, mx);
+    	float edge = step(mx, 0.5);
+
+        vec3 col = texture2D(textureSampler, vUV).rgb;
+        col = mix(col, col * edge * aa, 1.0);
+
+        gl_FragColor = vec4(col, 1.0);
+    }
+</script>
 </body>
 </html>

src/assets/tex_checker.svg

@@ -66,6 +66,14 @@ export const EffectShadersStore = BABYLON.Effect.ShadersStore;
 export const CounterClockWiseSideOrientation = BABYLON.Material.CounterClockWiseSideOrientation;
 
 
+// Vector2
+
+
+export function Vector2(x = 0, y = 0) {
+    return new BABYLON.Vector2(x, y);
+}
+
+
 // Vector3
 
 
@@ -230,6 +238,10 @@ export function RenderTargetTexture(name, width, height, scene) {
         }, scene);
 }
 
+export function PostProcess(name, camera, parameters) {
+    return new BABYLON.PostProcess(name, name, parameters, null, 1, camera);
+}
+
 
 // Nodes and Gizmos