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 { Scene, THREE } from './scene.js';
-import { OrbitControls } from 'http://esm.sh/three/examples/jsm/controls/OrbitControls.js';
+import { Region } from "./region.js";
 import { Region, Kernel } from "./region.js";
-const renderer = new T.WebGLRenderer({canvas:document.querySelector("canvas")});
+let surfaceTest = () =>
-const scene = new T.Scene();
+{
-const camera = new T.PerspectiveCamera(80, 2, 0.1, 10);
+    let limit = (x, y, z, ax, ay, az) =>
-const light = new T.DirectionalLight(0xFFFFFF, 1);
+    {
-const geometry = new T.BoxGeometry(0.8, 0.8, 0.8);
+        let centerX = Math.round(x);
-const shader = new T.MeshPhongMaterial({color:0xFFCC00});
+        let centerY = Math.round(y);
-const shaderBlue = new T.MeshPhongMaterial({color:0x0033FF});
+        let centerZ = Math.round(z);
 const object = new T.Mesh(geometry, shader);
-const controls = new OrbitControls(camera, renderer.domElement);
+        let deltaX = ax-centerX;
-controls.update();
+        let deltaY = ay-centerY;
        let deltaZ = az-centerZ;
-scene.add(light);
+        let absDeltaX = Math.abs(deltaX);
-scene.add(object);
+        let absDeltaY = Math.abs(deltaY);
-scene.add(new T.GridHelper(10, 10));
+        let absDeltaZ = Math.abs(deltaZ);
        let max = absDeltaX;
        if(absDeltaY > max){ max = absDeltaY; }
        if(absDeltaZ > max){ max = absDeltaZ; }
-const geoBuff = new T.BufferGeometry();
+        let lerp = 0.49/max;
-geoBuff.setAttribute("position", new T.BufferAttribute(new Float32Array(
+
-[
+        if(lerp <= 1)
-    0, 0, 0,
+        {
-    1, 0, 0,
+            return [
-    1, 1, 0,
+                centerX + deltaX*lerp,
-    0, 1, 0,
+                centerY + deltaY*lerp,
-    2, 0, 1,
+                centerZ + deltaZ*lerp
-    2, 1, 1
+            ];
-]
+        }
-), 3));
+        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 testGeometry = new THREE.BufferGeometry();
-let filler = (x, y, z) => 
+    let testAttribute = new THREE.BufferAttribute(new Float32Array(0));
-{
+    testGeometry.setAttribute("position", testAttribute, 3);
    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);
-r.Filled.forEach((inIndexMap) =>
+    console.log(testGeometry);
-{
+    testAttribute.array = new Float32Array([1, 2, 3]);
-    let coords = Region.IndexToCoords(inIndexMap);
+    testAttribute.needsUpdate = true;
-    let cube = new T.Mesh(geometry, shader);
+    console.log(testGeometry);
    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);
 });
 */
-light.position.set(-1, 2, 4);
+    let surfaceCubeGeometry = new THREE.BufferGeometry();
-camera.position.set(0, 0, 2);
+    let surfaceCubeObject = new THREE.Mesh(
        surfaceCubeGeometry,
        new THREE.MeshPhongMaterial({color:0x666666, wireframe:false, flatShading:true, side:THREE.DoubleSide})
    );
-let dirty = false;
+    let rebuildSurface = inVoxels =>
 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)
    {
-        renderer.render(scene, camera);
+        let surface = Region.Surface(inVoxels);
-        dirty = false;
+        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 = () =>
+Scene(surfaceTest());
 {
    let canvas = renderer.domElement;
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
 };
 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()
+    I(inX, inY, inZ)
    {
        return {
            Voxels:[],
            Filled:[],
            Surface:[]
        };
    },
    CoordsToIndex(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 = [];
+        var vertices = []; // array of surface vertices
-        inRegion.Surface = [];
+        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);
+                [x, y, z] = Region.XYZ(i);
-                Kernel.Loop(Kernel.Corners, coords, (inX, inY, inZ)=>
+
-                {
+                // bottom: at, "up", corner, right
-                    let offsetIndex = Region.CoordsToIndex(inX, inY, inZ);
+                BA = i;
-                    if(!inRegion.Voxels[offsetIndex])
+                BU = Region.I(x,   y+1, z  );
-                    {
+                BC = Region.I(x+1, y+1, z  );
-                        inRegion.Surface.push(i);
+                BR = Region.I(x+1, y,   z  );
-                        return true;
+
-                    }
+                // 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