Compare commits
13 Commits
master
...
orientatio
Author | SHA1 | Date | |
---|---|---|---|
bded36b307 | |||
b630e26cfd | |||
9dc5b911fa | |||
f77b50cac9 | |||
20e8d90ec3 | |||
4078e026ef | |||
56147ed325 | |||
13b0384c54 | |||
72e33a6256 | |||
7611192683 | |||
c419dca58f | |||
9e5ea8098c | |||
dc2f826688 |
238
index.html
238
index.html
@ -20,121 +20,161 @@
|
||||
<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);
|
||||
|
||||
const controls = new OrbitControls(camera, renderer.domElement);
|
||||
controls.update();
|
||||
|
||||
scene.add(light);
|
||||
scene.add(object);
|
||||
scene.add(new T.GridHelper(10, 10));
|
||||
|
||||
|
||||
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));
|
||||
|
||||
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) =>
|
||||
let surfaceTest = () =>
|
||||
{
|
||||
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 limit = (x, y, z, ax, ay, az) =>
|
||||
{
|
||||
let centerX = Math.round(x);
|
||||
let centerY = Math.round(y);
|
||||
let centerZ = Math.round(z);
|
||||
|
||||
r.Filled.forEach((inIndexMap) =>
|
||||
{
|
||||
let coords = Region.IndexToCoords(inIndexMap);
|
||||
let cube = new T.Mesh(geometry, shader);
|
||||
cube.position.set(...coords);
|
||||
scene.add(cube);
|
||||
});
|
||||
let deltaX = ax-centerX;
|
||||
let deltaY = ay-centerY;
|
||||
let deltaZ = az-centerZ;
|
||||
|
||||
r.Surface.forEach((inIndexMap) =>
|
||||
{
|
||||
let coords = Region.IndexToCoords(inIndexMap);
|
||||
let cube = new T.Mesh(geometry, shaderBlue);
|
||||
cube.position.set(...coords);
|
||||
scene.add(cube);
|
||||
});
|
||||
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; }
|
||||
|
||||
let lerp = 0.45/max;
|
||||
|
||||
if(lerp <= 1)
|
||||
{
|
||||
return [
|
||||
centerX + deltaX*lerp,
|
||||
centerY + deltaY*lerp,
|
||||
centerZ + deltaZ*lerp
|
||||
];
|
||||
}
|
||||
else
|
||||
{
|
||||
return [ax, ay, az];
|
||||
}
|
||||
}
|
||||
let average = (inArray, inPointInd, inOthersIndArray, inOriginals) =>
|
||||
{
|
||||
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(inOriginals[pointX], inOriginals[pointY], inOriginals[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;
|
||||
let originals = [...inVertsArray];
|
||||
for(let t=0; t<inTimes; t++)
|
||||
{
|
||||
for(let i=0; i<count; i++)
|
||||
{
|
||||
average(inVertsArray, i, inNeighborsArray[i][0], originals);
|
||||
}
|
||||
}
|
||||
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(2, 1, 3)] = true;
|
||||
voxels[Region.I(0, 2, 3)] = true;
|
||||
voxels[Region.I(1, 2, 3)] = true;
|
||||
voxels[Region.I(2, 2, 3)] = true;
|
||||
*/
|
||||
|
||||
light.position.set(-1, 2, 4);
|
||||
camera.position.set(0, 0, 2);
|
||||
|
||||
let dirty = false;
|
||||
const update = inTime =>
|
||||
{
|
||||
let timeNew = new Date();
|
||||
let timeDelta = timeNew - inTime;
|
||||
let surface = Region.Surface(voxels);
|
||||
let vertsCube = new Float32Array(surface.vertices.flat());
|
||||
let surfaceCubeGeometry = new THREE.BufferGeometry();
|
||||
surfaceCubeGeometry.setAttribute('position', new THREE.BufferAttribute(vertsCube, 3) );
|
||||
surfaceCubeGeometry.setIndex(surface.triPointVert);
|
||||
surfaceCubeGeometry.computeVertexNormals(true);
|
||||
let surfaceCubeObject = new THREE.Mesh(
|
||||
surfaceCubeGeometry,
|
||||
new THREE.MeshBasicMaterial({color:0x666666, wireframe:true, side:THREE.DoubleSide})
|
||||
);
|
||||
|
||||
let delta = timeDelta * 0.001;
|
||||
object.rotation.x += delta;
|
||||
|
||||
controls.update();
|
||||
let vertsSmooth = new Float32Array(smooth(surface.vertices.flat(), surface.vertPointNeighbors, 5));
|
||||
let surfaceSmoothGeometry = new THREE.BufferGeometry();
|
||||
surfaceSmoothGeometry.setAttribute('position', new THREE.BufferAttribute(vertsSmooth, 3) );
|
||||
surfaceSmoothGeometry.setIndex(surface.triPointVert);
|
||||
surfaceSmoothGeometry.computeVertexNormals(true);
|
||||
let surfaceSmoothObject = new THREE.Mesh(
|
||||
surfaceSmoothGeometry,
|
||||
new THREE.MeshPhongMaterial({color:0xffffff, side:THREE.DoubleSide, flatShading:true})
|
||||
);
|
||||
|
||||
dirty = true;
|
||||
|
||||
setTimeout(()=>update(timeNew), 100);
|
||||
}
|
||||
|
||||
const render = inTime =>
|
||||
{
|
||||
if(dirty)
|
||||
return {
|
||||
DOM:"canvas",
|
||||
Init(inScene)
|
||||
{
|
||||
renderer.render(scene, camera);
|
||||
dirty = false;
|
||||
}
|
||||
requestAnimationFrame(render);
|
||||
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, inDelta){}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
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>
|
||||
|
175
region.js
175
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,123 @@ 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, inOrientationGroup)
|
||||
{
|
||||
/*
|
||||
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[0].indexOf(vert2) !== -1)
|
||||
{
|
||||
// quit if they are
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
p1Neighbors[0].push(vert2);
|
||||
p2Neighbors[0].push(vert1);
|
||||
|
||||
|
||||
p1Neighbors[inOrientationGroup+1].push(vert2);
|
||||
p2Neighbors[inOrientationGroup+1].push(vert1);
|
||||
|
||||
}
|
||||
function Face(a, b, c, d /* vox indices */, inOrientationGroup)
|
||||
{
|
||||
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, inOrientationGroup);
|
||||
Edge(p2, p2WasFull, p3, p3WasFull, inOrientationGroup);
|
||||
Edge(p3, p3WasFull, p4, p4WasFull, inOrientationGroup);
|
||||
Edge(p4, p4WasFull, p1, p1WasFull, inOrientationGroup);
|
||||
}
|
||||
|
||||
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, 0); }
|
||||
if(!inVoxels[BR]){ Face(BC, BR, TR, TC, 1); }
|
||||
if(!inVoxels[TA]){ Face(TA, TU, TC, TR, 2); }
|
||||
|
||||
if(!inVoxels[CL]){ Face(BA, BU, TU, TA, 1); }
|
||||
if(!inVoxels[CD]){ Face(BR, BA, TA, TR, 0); }
|
||||
if(!inVoxels[CB]){ Face(BA, BU, BC, BR, 2); }
|
||||
}
|
||||
}
|
||||
console.log("looped over", i);
|
||||
|
||||
return {vertices, triPointVert, vertPointNeighbors};
|
||||
}
|
||||
};
|
||||
|
58
scene.js
Normal file
58
scene.js
Normal file
@ -0,0 +1,58 @@
|
||||
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 update = inTime =>
|
||||
{
|
||||
let timeNew = new Date();
|
||||
let timeDelta = timeNew - inTime;
|
||||
let delta = timeDelta * 0.001;
|
||||
|
||||
inSettings.Update(scene, delta);
|
||||
|
||||
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());
|
||||
};
|
Loading…
Reference in New Issue
Block a user