Sprites interacting with voxels

[christopherdebeer]

As a bit of background, or context.
What I'm hoping to achieve is a world/level where the physics is handled by voxel-engine but the visuals are actually just 2d painted sprites layered over transparent voxels/meashes.

The issue im comming up against seems similar to the issue mentioned in: Issue #34 but in my case the voxels behind the transparent voxel Are visible as well as the player meshes when walking behind the transparent voxel, BUT sprites rendered at the same position as the transparent voxel are being covered by the voxel.

example: http://christopherdebeer.com/sandbox/voxeljs/

Any ideas?

@shama or @vogonistic, @mbalho mentioned that you might have some insights, if you do, it would be much appreciated.

[shama]

First off, that looks like it's going to be rad. :D

Think about the voxel mesh this way. Every voxel in a mesh does not have 6 sides. If a voxel mesh had 6 sides, it would be a single voxel floating on its own. If you put 2 voxels meshed next to each other, it will have 10 sides. The 2 touching sides between the voxels are ignored and don't have faces. Since there isn't a face, a texture isn't rendered. Thus you're looking inside of the mesh. A good way to visualize is to turn on wireframe mode.

@vogonistic has made the most progress on a solution: https://github.com/vogonistic/mineflayer-voxel/blob/master/transgreedy.js I'm planning giving it another go soon as well using his work.

The only tmp solutions I can think of now is don't use transparent textures or make everything cube geometry (I know these are really bad suggestions).

[christopherdebeer]

Thanks @shama

You mentioned/suggested using cube geometries, but on the left of the example I used a cube geometry with a LineBasicMaterial({transparent: true, opacity: 0.3}) while I understand this isn't an issue with voxeljs do you have any idea why the sprite still isn't visible through the cube even though it's supposed to be transparent?

Thanks for your help all the same.

[shama]

I think there you just need to set the material to be double sided with: {side: THREE.DoubleSide}.

[snagy]

You need to check your draw order and depth state for everything; make sure all the transparent objects render last, and render back-to-front if you want them to layer properly.

[max-mapper]

any progress on this? I think @snagy's suggestion to render transparent objects last is a pretty common way of doing it, anyone know how hard that would be in three.js?