Voxels in HTML5

[Brift]

So I have been working on a system of voxels using three.js, and while I do have a working example of what I'm trying to accomplish at http://apoidgames.web44.net/wedge.html I feel like there are a lot of things I could do to make this more efficient.  I adapted the pointerlock control example from three.js to get to this point.

 

To briefly summarize what I am trying to accomplish, I am attempting to create a minecraftlike with the change that the xz plane is composed of equilateral triangles as opposed to squares.  While I was able to render a scene based on whether the blocks are filled or not filled, the way I went about doing it was to create a new mesh for every face that needed to be displayed.  What I would like to do instead is have one mesh for a given area that I add faces to as needed.  Unfortunately I run into problems trying to keep track of vertices and faces in general, and I also need each face to be aware of both the block it represents as well as the block it is facing.

 

I should probably mention that I am relatively new to javascript and it's very possible that I'm going about this the wrong way.  I feel that HTML5 and web is the way of the future though, and so any possible suggestions on how to make this better would greatly be appreciated.

 

Thanks,

Dave (aka. Brift)

[P.Uri.Tanner]

The demo lags heavily for me at the moment.

 

There have been some adventures into js based voxel engines over at http://voxeljs.com. If you are already familar with nodejs it's super easy to set up. Else it's just ok

 

 

Also welcome here!

[austin]

This doesn't have the equilateral triangle thing you're after, but are you familiar with voxel.js? It might be easier to tweak that to your liking vs build it out yourself.

EDIT: Looks like Mirko beat me to the punch

[Brift]

I am somewhat familiar with voxel.js, and I'll be sure to look into that more.

[P.Uri.Tanner]

@Brift: have you tried merging your Geometry? That increases your performance alot! http://threejs.org/docs/#Reference/Extras/GeometryUtils

[Brift]

So the thing I am worried about when it comes to merging the geometry is that I need to target a particular face in order to either 1 set that block that the face belongs to false (erase the block) or 2. Set the block the face is facing to true (fill the neighbor).  If all of the geometry is merged it's my understanding that I won't be able to pick out faces, though I could be mistaken in that regard.  I'm beginning to think that a voxel engine might be a little too much for a browser.  Thanks for your feedback everyone.

[MrCoder]

It is way easier to just use the voxel data as basis for picking etc instead of the geometry itself. That way you can merge geometry in whatever way you want.

 

(it's very much doable to create voxel engines in webgl btw: https://apps.facebook.com/gooblocks/ )