click-create voxels

smoothing limiter exact clip
surface smoothing started
2021-07-15 14:41:17 -04:00 · 2021-07-12 10:40:31 -04:00 · 2021-07-12 09:05:15 -04:00 · 2021-07-11 18:28:00 -04:00 · 2021-07-11 16:44:34 -04:00 · 2021-07-11 10:00:38 -04:00
3 changed files with 367 additions and 162 deletions
--- a/index.html
+++ b/index.html
@ -20,121 +20,181 @@
    <body>
        <canvas></canvas>
 <script type="module">
-import * as T from            'http://esm.sh/three';
-import { OrbitControls } from 'http://esm.sh/three/examples/jsm/controls/OrbitControls.js';
-import { Region, Kernel } from "./region.js";
+import { Scene, THREE } from './scene.js';
+import { Region } from "./region.js";

-const renderer = new T.WebGLRenderer({canvas:document.querySelector("canvas")});
-const scene = new T.Scene();
-const camera = new T.PerspectiveCamera(80, 2, 0.1, 10);
-const light = new T.DirectionalLight(0xFFFFFF, 1);
-const geometry = new T.BoxGeometry(0.8, 0.8, 0.8);
-const shader = new T.MeshPhongMaterial({color:0xFFCC00});
-const shaderBlue = new T.MeshPhongMaterial({color:0x0033FF});
-const object = new T.Mesh(geometry, shader);
+let surfaceTest = () =>
+{
+    let limit = (x, y, z, ax, ay, az) =>
+    {
+        let centerX = Math.round(x);
+        let centerY = Math.round(y);
+        let centerZ = Math.round(z);

-const controls = new OrbitControls(camera, renderer.domElement);
-controls.update();
+        let deltaX = ax-centerX;
+        let deltaY = ay-centerY;
+        let deltaZ = az-centerZ;

-scene.add(light);
-scene.add(object);
-scene.add(new T.GridHelper(10, 10));
+        let absDeltaX = Math.abs(deltaX);
+        let absDeltaY = Math.abs(deltaY);
+        let absDeltaZ = Math.abs(deltaZ);

+        let max = absDeltaX;
+        if(absDeltaY > max){ max = absDeltaY; }
+        if(absDeltaZ > max){ max = absDeltaZ; }

-const geoBuff = new T.BufferGeometry();
-geoBuff.setAttribute("position", new T.BufferAttribute(new Float32Array(
-[
-    0, 0, 0,
-    1, 0, 0,
-    1, 1, 0,
-    0, 1, 0,
-    2, 0, 1,
-    2, 1, 1
-]
-), 3));
+        let lerp = 0.49/max;
+
+        if(lerp <= 1)
+        {
+            return [
+                centerX + deltaX*lerp,
+                centerY + deltaY*lerp,
+                centerZ + deltaZ*lerp
+            ];
+        }
+        else
+        {
+            return [ax, ay, az];
+        }
+    }
+    let average = (inArray, inPointInd, inOthersIndArray) =>
+    {
+        let sum = [0, 0, 0];
+        for(let i=0; i<inOthersIndArray.length; i++)
+        {
+            let otherInd = inOthersIndArray[i]*3;
+            sum[0] += inArray[otherInd+0];
+            sum[1] += inArray[otherInd+1];
+            sum[2] += inArray[otherInd+2];
+        }
+        
+        let pointX = inPointInd*3 + 0;
+        let pointY = inPointInd*3 + 1;
+        let pointZ = inPointInd*3 + 2;
+        let reducer = inOthersIndArray.length;
+
+        let limited = limit(inArray[pointX], inArray[pointY], inArray[pointZ], sum[0]/reducer, sum[1]/reducer, sum[2]/reducer);
+
+        inArray[pointX] = limited[0];
+        inArray[pointY] = limited[1];
+        inArray[pointZ] = limited[2];
+    };
+    let smooth = (inVertsArray, inNeighborsArray, inTimes) =>
+    {
+        let count = inVertsArray.length/3;
+        for(let t=0; t<inTimes; t++)
+        {
+            for(let i=0; i<count; i++)
+            {
+                average(inVertsArray, i, inNeighborsArray[i]);
+            }
+        }
+        return inVertsArray;
+    }
+
+    let voxels = [];
+    voxels[Region.I(0, 0, 0)] = true;
+    voxels[Region.I(1, 0, 0)] = true;
+    voxels[Region.I(2, 0, 0)] = true;
+    voxels[Region.I(0, 1, 0)] = true;
+    voxels[Region.I(1, 1, 0)] = true;
+    voxels[Region.I(0, 2, 0)] = true;
+
+    /*
+    voxels[Region.I(0, 0, 1)] = true;
+    voxels[Region.I(1, 0, 1)] = true;
+    voxels[Region.I(2, 0, 1)] = true;
+    voxels[Region.I(0, 1, 1)] = true;
+    voxels[Region.I(1, 1, 1)] = true;
+    voxels[Region.I(0, 2, 1)] = true;
+
+    voxels[Region.I(0, 0, 2)] = true;
+    voxels[Region.I(1, 0, 2)] = true;
+    voxels[Region.I(2, 0, 2)] = true;
+    voxels[Region.I(0, 1, 2)] = true;
+    voxels[Region.I(1, 1, 2)] = true;
+    voxels[Region.I(0, 2, 2)] = true;
+
+    voxels[Region.I(0, 0, 3)] = true;
+    voxels[Region.I(1, 0, 3)] = true;
+    voxels[Region.I(2, 0, 3)] = true;
+    voxels[Region.I(0, 1, 3)] = true;
+    voxels[Region.I(1, 1, 3)] = true;
+    voxels[Region.I(0, 2, 3)] = true;
+    */

-geoBuff.setIndex(
-[
-    0, 1, 2,
-    2, 3, 0,
-    1, 4, 5,
-    5, 2, 1
-]
-);
-geoBuff.computeVertexNormals();
-const geoObj = new T.Mesh(geoBuff, shader);
-shader.shading = T.FlatShading;
-scene.add(geoObj);

 /*
-let r = Region.Create();
-let filler = (x, y, z) => 
-{
-    r.Voxels[Region.CoordsToIndex(x, y, z)] = true;
-};
-filler(1, 1, 1);
-Kernel.Loop(Kernel.Corners, [1, 1, 1], filler);
-Kernel.Loop(Kernel.Cardinal, [1, 1, 1], filler);
-Region.Update(r);
+    let testGeometry = new THREE.BufferGeometry();
+    let testAttribute = new THREE.BufferAttribute(new Float32Array(0));
+    testGeometry.setAttribute("position", testAttribute, 3);

-r.Filled.forEach((inIndexMap) =>
-{
-    let coords = Region.IndexToCoords(inIndexMap);
-    let cube = new T.Mesh(geometry, shader);
-    cube.position.set(...coords);
-    scene.add(cube);
-});
-
-r.Surface.forEach((inIndexMap) =>
-{
-    let coords = Region.IndexToCoords(inIndexMap);
-    let cube = new T.Mesh(geometry, shaderBlue);
-    cube.position.set(...coords);
-    scene.add(cube);
-});
+    console.log(testGeometry);
+    testAttribute.array = new Float32Array([1, 2, 3]);
+    testAttribute.needsUpdate = true;
+    console.log(testGeometry);
 */

-light.position.set(-1, 2, 4);
-camera.position.set(0, 0, 2);
+    let surfaceCubeGeometry = new THREE.BufferGeometry();
+    let surfaceCubeObject = new THREE.Mesh(
+        surfaceCubeGeometry,
+        new THREE.MeshPhongMaterial({color:0x666666, wireframe:false, flatShading:true, side:THREE.DoubleSide})
+    );
    
-let dirty = false;
-const update = inTime =>
-{
-    let timeNew = new Date();
-    let timeDelta = timeNew - inTime;
-
-    let delta = timeDelta * 0.001;
-    object.rotation.x += delta;
-
-    controls.update();
-
-    dirty = true;
-
-    setTimeout(()=>update(timeNew), 100);
-}
-
-const render = inTime =>
-{
-    if(dirty)
+    let rebuildSurface = inVoxels =>
    {
-        renderer.render(scene, camera);
-        dirty = false;
+        let surface = Region.Surface(inVoxels);
+        let vertsCube = new Float32Array(surface.vertices.flat());
+        
+        surfaceCubeGeometry.setAttribute("position", new THREE.BufferAttribute(vertsCube, 3));
+        surfaceCubeGeometry.setIndex(surface.triPointVert);
+        surfaceCubeGeometry.computeVertexNormals(true);
+    };
+    rebuildSurface(voxels);
+
+    return {
+        DOM:"canvas",
+        Init(inScene)
+        {   
+            let light = new THREE.PointLight(0xffffff, 1, 100)
+            light.position.set(5, 5, -5);
+            inScene.add(light)
+            inScene.add(surfaceCubeObject);
+            //inScene.add(surfaceSmoothObject);
+
+            inScene.add(new THREE.GridHelper(10, 10));
+            inScene.add(new THREE.AxesHelper( 5 ));
+        },
+        Update(inScene, inScreen, inDelta)
+        {
+            var i, hits, hit, index;
+            if(inScreen.Drag > 0)
+            {
+                hits = inScreen.Ray.intersectObject(surfaceCubeObject);
+                if(hits.length)
+                {
+                    hit = hits[0];
+                    for(i=1; i<hits.length; i++)
+                    {
+                        if(hits[i].distance < hit.distance)
+                        {
+                            hit = hits[i];
                        }
-    requestAnimationFrame(render);
+                    }
+                    index = Region.I(Math.floor(hit.point.x), Math.floor(hit.point.y), Math.floor(hit.point.z));
+                    voxels[index] = true;
+                    rebuildSurface(voxels);
+                    console.log(hit);
+                }
+            }
+        }
+    };
+
 }

-const resize = () =>
-{
-    let canvas = renderer.domElement;
-    camera.aspect = canvas.clientWidth / canvas.clientHeight;
-    camera.updateProjectionMatrix();
-    renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
-};
+Scene(surfaceTest());

-window.addEventListener("resize", resize);
-resize();
-render(0);
-update(new Date());
 </script>

    </body>
--- a/region.js
+++ b/region.js
@ -1,53 +1,10 @@
-export const Kernel = 
-{
-    Corners:
-    [
-        [ 1,  1, -1],
-        [ 1, -1, -1],
-        [-1,  1, -1],
-        [-1, -1, -1],
-        [ 1,  1,  1],
-        [ 1, -1,  1],
-        [-1,  1,  1],
-        [-1, -1,  1]
-    ],
-    Cardinal:
-    [
-        [ 1,  0,  0],
-        [ 0,  1,  0],
-        [-1,  0,  0],
-        [ 0, -1,  0],
-        [ 0,  0,  1],
-        [ 0,  0, -1]
-    ],
-
-    Loop(inList, inVector, inHandler)
-    {
-        for(let i=0; i<inList.length; i++)
-        {
-            let delta = inList[i];
-            if(inHandler(inVector[0]+delta[0], inVector[1]+delta[1], inVector[2]+delta[2]))
-            {
-                return;
-            }
-        }
-    }
-};
 export const Region = 
 {
-    Create()
-    {
-        return {
-            Voxels:[],
-            Filled:[],
-            Surface:[]
-        };
-    },
-    CoordsToIndex(inX, inY, inZ)
+    I(inX, inY, inZ)
    {
        return inX + inY*16 + inZ*256;
    },
-    IndexToCoords(inI)
+    XYZ(inI)
    {
        let zWhole = Math.floor(inI / 256);
        let zPart = inI % 256;
@ -55,27 +12,117 @@ export const Region =
        let yPart = zPart % 16;
        return [yPart, yWhole, zWhole];
    },
-    Update(inRegion)
+    Surface(inVoxels)
    {
-        inRegion.Filled = [];
-        inRegion.Surface = [];
+        var vertices = []; // array of surface vertices
+        var voxPointVert = []; // vox array, contains integer pointers to vertices
+        var triPointVert = []; // triangle array, contains integer pointers to vertices
+        var vertPointNeighbors = []; // vertex array, contains arrays of integer pointers to vertices
+
+        function Vert(inVoxIndex)
+        {
+            /*
+                If not preexisting, create a vertex with the coordinates of the voxel at `voxPointVert[inVoxIndex]`.
+                Add the new vertex to `vertices`.
+                Initialize empty neighbor connections.
+                Put the *index* of new vertex back in the voxel array at `inVoxIndex`
+                Return the vertex *index*, plus a flag if a vertex was already there.
+
+                Impure refs: voxPointVert, vertPointNeighbors, vertices
+            */
+            var vertPointer = voxPointVert[inVoxIndex]
+            if(vertPointer === undefined)
+            {
+                let vert = Region.XYZ(inVoxIndex);
+                vertPointer = vertices.length;
+                voxPointVert[inVoxIndex] = vertPointer;
+                vertPointNeighbors.push([]);
+                vertices.push(vert);
+
+                return [vertPointer, false];
+            }
+            else
+            {
+                return [vertPointer, true];
+            }
+        }
+        function Edge(vert1, vert1WasFull, vert2, vert2WasFull)
+        {
+            /*
+                Sets up neighbor relationships between vert1 and vert2.
+                Contains a check for if they have already been connected.
+
+                Impure refs: vertPointNeighbors
+            */
+
+            let p1Neighbors = vertPointNeighbors[vert1];
+            let p2Neighbors = vertPointNeighbors[vert2];
+
+            // if the two verts were already filled
+            if((vert1WasFull && vert2WasFull))
+            {
+                // it's possible that they are already connected
+                if(p1Neighbors.indexOf(vert2) !== -1)
+                {
+                    // quit if they are
+                    return;
+                }
+            }
+
+            p1Neighbors.push(vert2);
+            p2Neighbors.push(vert1);
+        }
+        function Face(a, b, c, d /* vox indices */)
+        {
+            let [p1, p1WasFull] = Vert(a);
+            let [p2, p2WasFull] = Vert(b);
+            let [p3, p3WasFull] = Vert(c);
+            let [p4, p4WasFull] = Vert(d);
+
+            triPointVert.push(p1, p2, p3, p3, p4, p1);
+
+            Edge(p1, p1WasFull, p2, p2WasFull);
+            Edge(p2, p2WasFull, p3, p3WasFull);
+            Edge(p3, p3WasFull, p4, p4WasFull);
+            Edge(p4, p4WasFull, p1, p1WasFull);
+        }
+
        var i;
-        for(i=0; i<inRegion.Voxels.length; i++)
+        var x, y, z;
+        var BA, BU, BC, BR,  TA, TU, TC, TR,  CL, CD, CB;
+        for(i=0; i<inVoxels.length; i++)
        {
-            if(inRegion.Voxels[i])
+            if(inVoxels[i])
            {
-                let coords = Region.IndexToCoords(i);
-                Kernel.Loop(Kernel.Corners, coords, (inX, inY, inZ)=>
-                {
-                    let offsetIndex = Region.CoordsToIndex(inX, inY, inZ);
-                    if(!inRegion.Voxels[offsetIndex])
-                    {
-                        inRegion.Surface.push(i);
-                        return true;
-                    }
-                });
+                [x, y, z] = Region.XYZ(i);
+
+                // bottom: at, "up", corner, right
+                BA = i;
+                BU = Region.I(x,   y+1, z  );
+                BC = Region.I(x+1, y+1, z  );
+                BR = Region.I(x+1, y,   z  );
+
+                // top: at, "up" corner, right
+                TA = Region.I(x,   y,   z+1);
+                TU = Region.I(x,   y+1, z+1);
+                TC = Region.I(x+1, y+1, z+1);
+                TR = Region.I(x+1, y,   z+1);
+
+                // check: left, "down", below
+                CL = Region.I(x-1, y,   z  );
+                CD = Region.I(x,   y-1, z  );
+                CB = Region.I(x,   y,   z-1);
+
+                if(!inVoxels[BU]){ Face(BU, BC, TC, TU); }
+                if(!inVoxels[BR]){ Face(BC, BR, TR, TC); }
+                if(!inVoxels[TA]){ Face(TA, TU, TC, TR); }
+
+                if(!inVoxels[CL]){ Face(BA, BU, TU, TA); }
+                if(!inVoxels[CD]){ Face(BR, BA, TA, TR); }
+                if(!inVoxels[CB]){ Face(BA, BU, BC, BR); }
            }
        }
-        console.log("looped over", i);
+
+        return {vertices, triPointVert, vertPointNeighbors};
    }
 };
--- a/scene.js
+++ b/scene.js
@ -0,0 +1,98 @@
+import * as T from            'http://esm.sh/three';
+import { OrbitControls } from 'http://esm.sh/three/examples/jsm/controls/OrbitControls.js';
+
+export { T as THREE };
+export function Scene(inSettings)
+{
+    const renderer = new T.WebGLRenderer({canvas:document.querySelector(inSettings.DOM)});
+    const scene = new T.Scene();
+    const camera = new T.PerspectiveCamera(80, 2, 0.1, 100);
+    const light = new T.DirectionalLight(0xFFFFFF, 1);
+    const controls = new OrbitControls(camera, renderer.domElement);
+    let dirty = false;
+
+    const Screen = {
+        Dirty:false,
+        Drag:0,
+        Down:false,
+        Ray:new T.Raycaster(),
+        Mouse:new T.Vector2(),
+        Camera:camera,
+        Event:null,
+        Update:e=>
+        {
+            Screen.Event = e;
+            Screen.Dirty = true;
+            Screen.Mouse.x = ( e.clientX / renderer.domElement.clientWidth ) * 2 - 1;
+            Screen.Mouse.y = - ( e.clientY / renderer.domElement.clientHeight ) * 2 + 1;
+            Screen.Ray.setFromCamera( Screen.Mouse, Screen.Camera );
+        },
+        HandleMove:e=>
+        {
+            Screen.Drag = Screen.Down ? 2 : 0;
+            Screen.Update(e);
+        },
+        HandlePress:e=>
+        {
+            Screen.Down = true;
+            Screen.Drag = 1;
+            Screen.Update(e);
+        },
+        HandleRelease:e=>
+        {
+            Screen.Down = false;
+            Screen.Drag = 0;
+            Screen.Update(e);
+        }
+    };
+    renderer.domElement.addEventListener("pointermove", Screen.HandleMove);
+    renderer.domElement.addEventListener("pointerdown", Screen.HandlePress);
+    renderer.domElement.addEventListener("pointerup", Screen.HandleRelease);
+
+
+    const update = inTime =>
+    {
+        let timeNew = new Date();
+        let timeDelta = timeNew - inTime;
+        let delta = timeDelta * 0.001;
+        
+        inSettings.Update(scene, Screen, delta);
+        Screen.Dirty = false;
+
+        controls.update();
+        dirty = true;
+        setTimeout(()=>update(timeNew), 50);
+    }
+
+    const render = inTime =>
+    {
+        if(dirty)
+        {
+            renderer.render(scene, camera);
+            dirty = false;
+        }
+        requestAnimationFrame(render);
+    }
+
+    const resize = () =>
+    {
+        let canvas = renderer.domElement;
+        camera.aspect = canvas.clientWidth / canvas.clientHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
+    };
+    
+    scene.add(light);
+    //scene.add(new T.GridHelper(10, 10));
+    light.position.set(-1, 2, 4);
+    camera.position.set(-1, 2, -1);
+    camera.lookAt(new T.Vector3(0,0,0));
+    controls.update();
+
+    inSettings.Init(scene);
+
+    window.addEventListener("resize", resize);
+    resize();
+    render(0);
+    update(new Date());
+};
Author	SHA1	Message	Date
TreetopFlyer	45a482e5e1	click-create voxels	2021-07-15 14:41:17 -04:00
TreetopFlyer	b630e26cfd	smoothing limiter exact clip	2021-07-12 10:40:31 -04:00
TreetopFlyer	9dc5b911fa	surface smoothing started	2021-07-12 09:05:15 -04:00
TreetopFlyer	f77b50cac9	fixed missing neighbor bug	2021-07-11 18:28:00 -04:00
TreetopFlyer	20e8d90ec3	add light to show back	2021-07-11 16:44:34 -04:00
TreetopFlyer	4078e026ef	fix incorrect fills	2021-07-11 10:00:38 -04:00
TreetopFlyer	56147ed325	surface rendering	2021-07-11 09:24:39 -04:00
TreetopFlyer	13b0384c54	face and neighbor creation	2021-07-10 11:34:01 -04:00
TreetopFlyer	72e33a6256	only neighbors	2021-07-10 10:11:56 -04:00
TreetopFlyer	7611192683	direct modification	2021-07-07 15:01:21 -04:00
TreetopFlyer	c419dca58f	constraints working	2021-07-07 12:09:52 -04:00
TreetopFlyer	9e5ea8098c	smoothing works	2021-07-07 07:26:21 -04:00
TreetopFlyer	dc2f826688	averaging started	2021-07-07 07:00:50 -04:00