SethTrowbridge/voxel
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: SethTrowbridge:surfacer
Branches Tags
SethTrowbridge:master
SethTrowbridge:refactor
SethTrowbridge:cube-gen
SethTrowbridge:orientation-groups
SethTrowbridge:surfacer
SethTrowbridge:averager
..
compare: SethTrowbridge:master
Branches Tags
SethTrowbridge:refactor
SethTrowbridge:cube-gen
SethTrowbridge:orientation-groups
SethTrowbridge:surfacer
SethTrowbridge:averager
SethTrowbridge:master

No commits in common. "surfacer" and "master" have entirely different histories.
surfacer ... master

3 changed files with 163 additions and 302 deletions
Show Stats Expand all files Collapse all files

238
index.html
View File

@ -20,155 +20,121 @@
<body> <body>
<canvas></canvas> <canvas></canvas>
<script type="module"> <script type="module">
import { Scene, THREE } from './scene.js'; import * as T from 'http://esm.sh/three';
import { Region } from "./region.js"; import { OrbitControls } from 'http://esm.sh/three/examples/jsm/controls/OrbitControls.js';
import { Region, Kernel } from "./region.js";
let surfaceTest = () => 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 limit = (x, y, z, ax, ay, az) => r.Voxels[Region.CoordsToIndex(x, y, z)] = true;
{ };
let centerX = Math.round(x); filler(1, 1, 1);
let centerY = Math.round(y); Kernel.Loop(Kernel.Corners, [1, 1, 1], filler);
let centerZ = Math.round(z); Kernel.Loop(Kernel.Cardinal, [1, 1, 1], filler);
Region.Update(r);
let deltaX = ax-centerX; r.Filled.forEach((inIndexMap) =>
let deltaY = ay-centerY; {
let deltaZ = az-centerZ; let coords = Region.IndexToCoords(inIndexMap);
let cube = new T.Mesh(geometry, shader);
cube.position.set(...coords);
scene.add(cube);
});
let absDeltaX = Math.abs(deltaX); r.Surface.forEach((inIndexMap) =>
let absDeltaY = Math.abs(deltaY); {
let absDeltaZ = Math.abs(deltaZ); let coords = Region.IndexToCoords(inIndexMap);
let cube = new T.Mesh(geometry, shaderBlue);
cube.position.set(...coords);
scene.add(cube);
});
*/
let max = absDeltaX; light.position.set(-1, 2, 4);
if(absDeltaY > max){ max = absDeltaY; } camera.position.set(0, 0, 2);
if(absDeltaZ > max){ max = absDeltaZ; }
let lerp = 0.49/max; let dirty = false;
const update = inTime =>
{
let timeNew = new Date();
let timeDelta = timeNew - inTime;
if(lerp <= 1) let delta = timeDelta * 0.001;
{ object.rotation.x += delta;
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; controls.update();
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); dirty = true;
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;
*/
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 vertsSmooth = new Float32Array(smooth(surface.vertices.flat(), surface.vertPointNeighbors, 10));
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.MeshBasicMaterial({color:0xffffff, wireframe:true, side:THREE.DoubleSide, flatShading:true})
);
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, inDelta){}
};
setTimeout(()=>update(timeNew), 100);
} }
Scene(surfaceTest()); 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);
};
window.addEventListener("resize", resize);
resize();
render(0);
update(new Date());
</script> </script>
</body> </body>

169
region.js
View File

@ -1,10 +1,53 @@
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 = export const Region =
{ {
I(inX, inY, inZ) Create()
{
return {
Voxels:[],
Filled:[],
Surface:[]
};
},
CoordsToIndex(inX, inY, inZ)
{ {
return inX + inY*16 + inZ*256; return inX + inY*16 + inZ*256;
}, },
XYZ(inI) IndexToCoords(inI)
{ {
let zWhole = Math.floor(inI / 256); let zWhole = Math.floor(inI / 256);
let zPart = inI % 256; let zPart = inI % 256;
@ -12,117 +55,27 @@ export const Region =
let yPart = zPart % 16; let yPart = zPart % 16;
return [yPart, yWhole, zWhole]; return [yPart, yWhole, zWhole];
}, },
Surface(inVoxels) Update(inRegion)
{ {
var vertices = []; // array of surface vertices inRegion.Filled = [];
var voxPointVert = []; // vox array, contains integer pointers to vertices inRegion.Surface = [];
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; var i;
var x, y, z; for(i=0; i<inRegion.Voxels.length; i++)
var BA, BU, BC, BR, TA, TU, TC, TR, CL, CD, CB;
for(i=0; i<inVoxels.length; i++)
{ {
if(inVoxels[i]) if(inRegion.Voxels[i])
{ {
[x, y, z] = Region.XYZ(i); let coords = Region.IndexToCoords(i);
Kernel.Loop(Kernel.Corners, coords, (inX, inY, inZ)=>
// bottom: at, "up", corner, right {
BA = i; let offsetIndex = Region.CoordsToIndex(inX, inY, inZ);
BU = Region.I(x, y+1, z ); if(!inRegion.Voxels[offsetIndex])
BC = Region.I(x+1, y+1, z ); {
BR = Region.I(x+1, y, z ); inRegion.Surface.push(i);
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};
} }
}; };

58
scene.js
View File

@ -1,58 +0,0 @@
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());
};