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

Compare commits

merge into: SethTrowbridge:master
Branches Tags
SethTrowbridge:master
SethTrowbridge:refactor
SethTrowbridge:cube-gen
SethTrowbridge:orientation-groups
SethTrowbridge:surfacer
SethTrowbridge:averager
...
pull from: SethTrowbridge:surfacer
Branches Tags
SethTrowbridge:refactor
SethTrowbridge:cube-gen
SethTrowbridge:orientation-groups
SethTrowbridge:surfacer
SethTrowbridge:averager
SethTrowbridge:master

12 Commits
master ... surfacer

Author SHA1 Message Date
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
3 changed files with 309 additions and 170 deletions
Show Stats Expand all files Collapse all files

230
index.html
View File

@ -20,121 +20,155 @@
<body> <body>
<canvas></canvas> <canvas></canvas>
<script type="module"> <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(
[
0, 0, 0,
1, 0, 0,
1, 1, 0,
0, 1, 0,
2, 0, 1,
2, 1, 1
]
), 3));
geoBuff.setIndex( if(lerp <= 1)
[ {
0, 1, 2, return [
2, 3, 0, centerX + deltaX*lerp,
1, 4, 5, centerY + deltaY*lerp,
5, 2, 1 centerZ + deltaZ*lerp
] ];
); }
geoBuff.computeVertexNormals(); else
const geoObj = new T.Mesh(geoBuff, shader); {
shader.shading = T.FlatShading; return [ax, ay, az];
scene.add(geoObj); }
}
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;
/* /*
let r = Region.Create(); voxels[Region.I(0, 0, 1)] = true;
let filler = (x, y, z) => voxels[Region.I(1, 0, 1)] = true;
{ voxels[Region.I(2, 0, 1)] = true;
r.Voxels[Region.CoordsToIndex(x, y, z)] = true; voxels[Region.I(0, 1, 1)] = true;
}; voxels[Region.I(1, 1, 1)] = true;
filler(1, 1, 1); voxels[Region.I(0, 2, 1)] = true;
Kernel.Loop(Kernel.Corners, [1, 1, 1], filler);
Kernel.Loop(Kernel.Cardinal, [1, 1, 1], filler);
Region.Update(r);
r.Filled.forEach((inIndexMap) => voxels[Region.I(0, 0, 2)] = true;
{ voxels[Region.I(1, 0, 2)] = true;
let coords = Region.IndexToCoords(inIndexMap); voxels[Region.I(2, 0, 2)] = true;
let cube = new T.Mesh(geometry, shader); voxels[Region.I(0, 1, 2)] = true;
cube.position.set(...coords); voxels[Region.I(1, 1, 2)] = true;
scene.add(cube); voxels[Region.I(0, 2, 2)] = true;
});
r.Surface.forEach((inIndexMap) => voxels[Region.I(0, 0, 3)] = true;
{ voxels[Region.I(1, 0, 3)] = true;
let coords = Region.IndexToCoords(inIndexMap); voxels[Region.I(2, 0, 3)] = true;
let cube = new T.Mesh(geometry, shaderBlue); voxels[Region.I(0, 1, 3)] = true;
cube.position.set(...coords); voxels[Region.I(1, 1, 3)] = true;
scene.add(cube); voxels[Region.I(0, 2, 3)] = true;
});
*/ */
light.position.set(-1, 2, 4);
camera.position.set(0, 0, 2);
let dirty = false; let surface = Region.Surface(voxels);
const update = inTime => 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 timeNew = new Date(); let light = new THREE.PointLight(0xffffff, 1, 100)
let timeDelta = timeNew - inTime; light.position.set(5, 5, -5);
inScene.add(light)
inScene.add(surfaceCubeObject);
inScene.add(surfaceSmoothObject);
let delta = timeDelta * 0.001; inScene.add(new THREE.GridHelper(10, 10));
object.rotation.x += delta; inScene.add(new THREE.AxesHelper( 5 ));
},
controls.update(); Update(inScene, inDelta){}
dirty = true;
setTimeout(()=>update(timeNew), 100);
}
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); Scene(surfaceTest());
update(new Date());
</script> </script>
</body> </body>

169
region.js
View File

@ -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 = export const Region =
{ {
Create() I(inX, inY, inZ)
{
return {
Voxels:[],
Filled:[],
Surface:[]
};
},
CoordsToIndex(inX, inY, inZ)
{ {
return inX + inY*16 + inZ*256; return inX + inY*16 + inZ*256;
}, },
IndexToCoords(inI) XYZ(inI)
{ {
let zWhole = Math.floor(inI / 256); let zWhole = Math.floor(inI / 256);
let zPart = inI % 256; let zPart = inI % 256;
@ -55,27 +12,117 @@ export const Region =
let yPart = zPart % 16; let yPart = zPart % 16;
return [yPart, yWhole, zWhole]; 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; 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};
} }
}; };

58
scene.js Normal file
View 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());
};