voxel/index.html

<!doctype html>
<html>
    <head>
        <style>
            html, body
            {
                margin:0;
            }
            canvas
            {
                position:absolute;
                top:0;
                left:0;
                display:block;
                width:100%;
                height:100%;
            }
        </style>
    </head>
    <body>
        <canvas></canvas>
<script type="module">
import { Scene, THREE } from './scene.js';
import { Region } from "./region.js";

let surfaceTest = () =>
{
    let voxels = [];
    voxels[Region.I(0, 0, 0)] = true;
    voxels[Region.I(1, 0, 0)] = true;
    let surface = Region.Surface(voxels)
    console.log(surface);

    let surfaceGeometry = new THREE.BufferGeometry();
    surfaceGeometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(surface.vertices.flat()), 3) );
    surfaceGeometry.setIndex(surface.triPointVert);
    surfaceGeometry.computeVertexNormals(true);

    let surfaceObject = new THREE.Mesh(
        surfaceGeometry,
        new THREE.MeshPhongMaterial({color:0xaa9900, side:THREE.DoubleSide, shading:THREE.FlatShading})
    );

    return {
        DOM:"canvas",
        Init(inScene)
        {   
            let light = new THREE.PointLight(0xffffff, 1, 100)
            light.position.set(0, 2, -4);
            inScene.add(light)
            inScene.add(surfaceObject);
            inScene.add(new THREE.GridHelper(10, 10));
            inScene.add(new THREE.AxesHelper( 5 ));
        },
        Update(inScene, inDelta){}
    };

}

let smoothTest = () =>
{
    let average = (inArray, inPointInd, ...inOthersInd) =>
    {
        let sum = [0, 0, 0];
        for(let i=0; i<inOthersInd.length; i++)
        {
            let otherInd = inOthersInd[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 = inOthersInd.length;
        let limit = (inCenter, inPoint) => 
        {
            var limit;
            limit = inCenter-0.49;
            if(inPoint <= limit)
            {
                return limit;
            }
            limit = inCenter + 0.49;
            if(inPoint >= limit)
            {
                return limit;
            }

            return inPoint;
        }
        inArray[pointX] = limit(Math.round(inArray[pointX]), sum[0]/reducer);
        inArray[pointY] = limit(Math.round(inArray[pointY]), sum[1]/reducer);
        inArray[pointZ] = limit(Math.round(inArray[pointZ]), sum[2]/reducer);
    };
    let smooth = (inArray, inTimes) =>
    {
        let count = inArray.length/3;
        for(let t=0; t<inTimes; t++)
        {
            for(let i=0; i<count; i++)
            {
                if(i==0)
                {
                    average(inArray,  i, count-1, i+1);
                }
                else
                {
                    if(i==count-1)
                    {
                        average(inArray,  i, i-1, 0);
                    }
                    else
                    {
                        average(inArray,  i, i-1, i+1);
                    }
                }
            }
        }
    }
    let path = (inPoints, inSmoothing, inColor) =>
    {
        let clone = [...inPoints];
        smooth(clone, inSmoothing);
        const geometry = new THREE.BufferGeometry();
        geometry.setAttribute('position', new THREE.Float32BufferAttribute( clone, 3 ));
        const materialLine = new THREE.LineBasicMaterial( { color: inColor, linewidth: 3 } );
        const materialPoint = new THREE.PointsMaterial( { color:inColor, size: 0.05 } );
        const output = new THREE.Group();
        
        output.add( new THREE.Line( geometry, materialLine ) );
        output.add( new THREE.Points( geometry, materialPoint ) );
        return output;
    }
    const points =
    [
            4,  0,  0,
            3,  0,  0,
            2,  0,  0,
            1,  0,  0,
        //
            0,  0,  0,
            0,  1,  0,
            1,  1,  0,
            2,  1,  0,
            2,  2,  0,
            3,  2,  0,
            4,  2,  0,
            4,  3,  0,
            //
            5,  3,  0,
            5,  2,  0,
            5,  1,  0,
            5,  0,  0,
    ];

    return {
        DOM:"canvas",
        Init(inScene)
        {
            inScene.add(path(points, 0, 0xFF0000));
            inScene.add(path(points, 10, 0x00ff00));
        },
        Update(scene, delta)
        {

        }
    }
};

Scene(surfaceTest());

</script>

    </body>
</html>
setup 2021-07-05 20:51:08 -04:00			`<!doctype html>`
			`<html>`
			`<head>`
			`<style>`
			`html, body`
			`{`
			`margin:0;`
			`}`
			`canvas`
			`{`
			`position:absolute;`
			`top:0;`
			`left:0;`
			`display:block;`
			`width:100%;`
			`height:100%;`
			`}`
			`</style>`
			`</head>`
			`<body>`
			`<canvas></canvas>`
face and neighbor creation 2021-07-10 11:27:44 -04:00			`<script type="module">`
surface rendering 2021-07-11 09:24:39 -04:00			`import { Scene, THREE } from './scene.js';`
face and neighbor creation 2021-07-10 11:27:44 -04:00			`import { Region } from "./region.js";`

surface rendering 2021-07-11 09:24:39 -04:00			`let surfaceTest = () =>`
			`{`
			`let voxels = [];`
fixed missing neighbor bug 2021-07-11 18:28:00 -04:00			`voxels[Region.I(0, 0, 0)] = true;`
			`voxels[Region.I(1, 0, 0)] = true;`
surface rendering 2021-07-11 09:24:39 -04:00			`let surface = Region.Surface(voxels)`
			`console.log(surface);`
setup 2021-07-05 20:51:08 -04:00
surface rendering 2021-07-11 09:24:39 -04:00			`let surfaceGeometry = new THREE.BufferGeometry();`
fixed missing neighbor bug 2021-07-11 18:28:00 -04:00			`surfaceGeometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(surface.vertices.flat()), 3) );`
surface rendering 2021-07-11 09:24:39 -04:00			`surfaceGeometry.setIndex(surface.triPointVert);`
add light to show back 2021-07-11 16:44:34 -04:00			`surfaceGeometry.computeVertexNormals(true);`
surface rendering 2021-07-11 09:24:39 -04:00
			`let surfaceObject = new THREE.Mesh(`
			`surfaceGeometry,`
add light to show back 2021-07-11 16:44:34 -04:00			`new THREE.MeshPhongMaterial({color:0xaa9900, side:THREE.DoubleSide, shading:THREE.FlatShading})`
surface rendering 2021-07-11 09:24:39 -04:00			`);`

			`return {`
			`DOM:"canvas",`
			`Init(inScene)`
add light to show back 2021-07-11 16:44:34 -04:00			`{`
fixed missing neighbor bug 2021-07-11 18:28:00 -04:00			`let light = new THREE.PointLight(0xffffff, 1, 100)`
			`light.position.set(0, 2, -4);`
			`inScene.add(light)`
surface rendering 2021-07-11 09:24:39 -04:00			`inScene.add(surfaceObject);`
			`inScene.add(new THREE.GridHelper(10, 10));`
fixed missing neighbor bug 2021-07-11 18:28:00 -04:00			`inScene.add(new THREE.AxesHelper( 5 ));`
surface rendering 2021-07-11 09:24:39 -04:00			`},`
			`Update(inScene, inDelta){}`
			`};`
setup 2021-07-05 20:51:08 -04:00
surface rendering 2021-07-11 09:24:39 -04:00			`}`

			`let smoothTest = () =>`
			`{`
direct modification 2021-07-07 15:01:21 -04:00			`let average = (inArray, inPointInd, ...inOthersInd) =>`
setup 2021-07-05 20:51:08 -04:00			`{`
only neighbors 2021-07-07 15:12:39 -04:00			`let sum = [0, 0, 0];`
direct modification 2021-07-07 15:01:21 -04:00			`for(let i=0; i<inOthersInd.length; i++)`
averaging started 2021-07-07 07:00:50 -04:00			`{`
direct modification 2021-07-07 15:01:21 -04:00			`let otherInd = inOthersInd[i]*3;`
only neighbors 2021-07-07 15:12:39 -04:00			`sum[0] += inArray[otherInd+0];`
			`sum[1] += inArray[otherInd+1];`
			`sum[2] += inArray[otherInd+2];`
averaging started 2021-07-07 07:00:50 -04:00			`}`

only neighbors 2021-07-07 15:12:39 -04:00			`let pointX = inPointInd*3 + 0;`
			`let pointY = inPointInd*3 + 1;`
			`let pointZ = inPointInd*3 + 2;`
			`let reducer = inOthersInd.length;`
constraints working 2021-07-07 12:09:52 -04:00			`let limit = (inCenter, inPoint) =>`
averaging started 2021-07-07 07:00:50 -04:00			`{`
constraints working 2021-07-07 12:09:52 -04:00			`var limit;`
direct modification 2021-07-07 15:01:21 -04:00			`limit = inCenter-0.49;`
			`if(inPoint <= limit)`
			`{`
			`return limit;`
			`}`
			`limit = inCenter + 0.49;`
			`if(inPoint >= limit)`
			`{`
			`return limit;`
			`}`
constraints working 2021-07-07 12:09:52 -04:00
smoothing works 2021-07-07 07:26:21 -04:00			`return inPoint;`
averaging started 2021-07-07 07:00:50 -04:00			`}`
only neighbors 2021-07-07 15:12:39 -04:00			`inArray[pointX] = limit(Math.round(inArray[pointX]), sum[0]/reducer);`
			`inArray[pointY] = limit(Math.round(inArray[pointY]), sum[1]/reducer);`
			`inArray[pointZ] = limit(Math.round(inArray[pointZ]), sum[2]/reducer);`
averaging started 2021-07-07 07:00:50 -04:00			`};`
constraints working 2021-07-07 12:09:52 -04:00			`let smooth = (inArray, inTimes) =>`
smoothing works 2021-07-07 07:26:21 -04:00			`{`
direct modification 2021-07-07 15:01:21 -04:00			`let count = inArray.length/3;`
constraints working 2021-07-07 12:09:52 -04:00			`for(let t=0; t<inTimes; t++)`
smoothing works 2021-07-07 07:26:21 -04:00			`{`
constraints working 2021-07-07 12:09:52 -04:00			`for(let i=0; i<count; i++)`
			`{`
			`if(i==0)`
			`{`
direct modification 2021-07-07 15:01:21 -04:00			`average(inArray, i, count-1, i+1);`
constraints working 2021-07-07 12:09:52 -04:00			`}`
			`else`
			`{`
			`if(i==count-1)`
			`{`
direct modification 2021-07-07 15:01:21 -04:00			`average(inArray, i, i-1, 0);`
constraints working 2021-07-07 12:09:52 -04:00			`}`
			`else`
			`{`
direct modification 2021-07-07 15:01:21 -04:00			`average(inArray, i, i-1, i+1);`
constraints working 2021-07-07 12:09:52 -04:00			`}`
			`}`
			`}`
smoothing works 2021-07-07 07:26:21 -04:00			`}`
			`}`
constraints working 2021-07-07 12:09:52 -04:00			`let path = (inPoints, inSmoothing, inColor) =>`
smoothing works 2021-07-07 07:26:21 -04:00			`{`
direct modification 2021-07-07 15:01:21 -04:00			`let clone = [...inPoints];`
			`smooth(clone, inSmoothing);`
smoothing works 2021-07-07 07:26:21 -04:00			`const geometry = new THREE.BufferGeometry();`
direct modification 2021-07-07 15:01:21 -04:00			`geometry.setAttribute('position', new THREE.Float32BufferAttribute( clone, 3 ));`
constraints working 2021-07-07 12:09:52 -04:00			`const materialLine = new THREE.LineBasicMaterial( { color: inColor, linewidth: 3 } );`
			`const materialPoint = new THREE.PointsMaterial( { color:inColor, size: 0.05 } );`
			`const output = new THREE.Group();`

			`output.add( new THREE.Line( geometry, materialLine ) );`
			`output.add( new THREE.Points( geometry, materialPoint ) );`
			`return output;`
smoothing works 2021-07-07 07:26:21 -04:00			`}`
averaging started 2021-07-07 07:00:50 -04:00			`const points =`
			`[`
surface rendering 2021-07-11 09:24:39 -04:00			`4, 0, 0,`
			`3, 0, 0,`
			`2, 0, 0,`
			`1, 0, 0,`
constraints working 2021-07-07 12:09:52 -04:00			`//`
surface rendering 2021-07-11 09:24:39 -04:00			`0, 0, 0,`
			`0, 1, 0,`
			`1, 1, 0,`
			`2, 1, 0,`
			`2, 2, 0,`
			`3, 2, 0,`
			`4, 2, 0,`
			`4, 3, 0,`
			`//`
			`5, 3, 0,`
			`5, 2, 0,`
			`5, 1, 0,`
			`5, 0, 0,`
averaging started 2021-07-07 07:00:50 -04:00			`];`
smoothing works 2021-07-07 07:26:21 -04:00
surface rendering 2021-07-11 09:24:39 -04:00			`return {`
averaging started 2021-07-07 07:00:50 -04:00			`DOM:"canvas",`
			`Init(inScene)`
			`{`
constraints working 2021-07-07 12:09:52 -04:00			`inScene.add(path(points, 0, 0xFF0000));`
only neighbors 2021-07-07 15:12:39 -04:00			`inScene.add(path(points, 10, 0x00ff00));`
averaging started 2021-07-07 07:00:50 -04:00			`},`
			`Update(scene, delta)`
			`{`

			`}`
setup 2021-07-05 20:51:08 -04:00			`}`
surface rendering 2021-07-11 09:24:39 -04:00			`};`

			`Scene(surfaceTest());`
setup 2021-07-05 20:51:08 -04:00
			`</script>`
geometry buffer 2021-07-06 16:50:26 -04:00
setup 2021-07-05 20:51:08 -04:00			`</body>`
			`</html>`