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

Compare commits

base: SethTrowbridge:cube-gen
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. "cube-gen" and "master" have entirely different histories.
cube-gen ... master

3 changed files with 159 additions and 364 deletions
Show Stats Expand all files Collapse all files

252
index.html
View File

@ -20,181 +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();
let limit = (x, y, z, ax, ay, az) => const camera = new T.PerspectiveCamera(80, 2, 0.1, 10);
{ const light = new T.DirectionalLight(0xFFFFFF, 1);
let centerX = Math.round(x); const geometry = new T.BoxGeometry(0.8, 0.8, 0.8);
let centerY = Math.round(y); const shader = new T.MeshPhongMaterial({color:0xFFCC00});
let centerZ = Math.round(z); const shaderBlue = new T.MeshPhongMaterial({color:0x0033FF});
const object = new T.Mesh(geometry, shader);
let deltaX = ax-centerX; const controls = new OrbitControls(camera, renderer.domElement);
let deltaY = ay-centerY; controls.update();
let deltaZ = az-centerZ;
let absDeltaX = Math.abs(deltaX); scene.add(light);
let absDeltaY = Math.abs(deltaY); scene.add(object);
let absDeltaZ = Math.abs(deltaZ); scene.add(new T.GridHelper(10, 10));
let max = absDeltaX;
if(absDeltaY > max){ max = absDeltaY; }
if(absDeltaZ > max){ max = absDeltaZ; }
let lerp = 0.49/max; const geoBuff = new T.BufferGeometry();
geoBuff.setAttribute("position", new T.BufferAttribute(new Float32Array(
if(lerp <= 1) [
{ 0, 0, 0,
return [ 1, 0, 0,
centerX + deltaX*lerp, 1, 1, 0,
centerY + deltaY*lerp, 0, 1, 0,
centerZ + deltaZ*lerp 2, 0, 1,
]; 2, 1, 1
} ]
else ), 3));
{
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 testGeometry = new THREE.BufferGeometry(); let r = Region.Create();
let testAttribute = new THREE.BufferAttribute(new Float32Array(0)); let filler = (x, y, z) =>
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);
console.log(testGeometry); r.Filled.forEach((inIndexMap) =>
testAttribute.array = new Float32Array([1, 2, 3]); {
testAttribute.needsUpdate = true; let coords = Region.IndexToCoords(inIndexMap);
console.log(testGeometry); let cube = new T.Mesh(geometry, shader);
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);
});
*/ */
let surfaceCubeGeometry = new THREE.BufferGeometry(); light.position.set(-1, 2, 4);
let surfaceCubeObject = new THREE.Mesh( camera.position.set(0, 0, 2);
surfaceCubeGeometry,
new THREE.MeshPhongMaterial({color:0x666666, wireframe:false, flatShading:true, side:THREE.DoubleSide})
);
let rebuildSurface = inVoxels => let dirty = false;
{ const update = inTime =>
let surface = Region.Surface(inVoxels); {
let vertsCube = new Float32Array(surface.vertices.flat()); let timeNew = new Date();
let timeDelta = timeNew - inTime;
surfaceCubeGeometry.setAttribute("position", new THREE.BufferAttribute(vertsCube, 3)); let delta = timeDelta * 0.001;
surfaceCubeGeometry.setIndex(surface.triPointVert); object.rotation.x += delta;
surfaceCubeGeometry.computeVertexNormals(true);
};
rebuildSurface(voxels);
return { controls.update();
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)); dirty = true;
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];
}
}
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);
}
}
}
};
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};
} }
}; };

98
scene.js
View File

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