Disappearing Objects - Three.js CanvasRenderer

Question

I am very stuck, I do not understand why my objects are disappearing with canvas renderer. While it works exactly as expected with webGL renderer, I need to display this on mobile devices and as such do not have access to a webGL renderer

I have tried overdraw:true but this does not seem to make the missing objects disappear

http://jsfiddle.net/xH9GD/3/

When I comment out the room the boxes remain but they get very mangled on my iPhone.

I understand the concept of Z-fighting however I don't think this is occurring as the zPosition of each of the faces should be seperate to the others

floor = drawTopFacingWall(room.width, room.length );
wall1 = drawLeftFacingWall( room.length, room.depth );
wall2 = drawFrontFacingWall( room.width, room.depth );
wall3 = drawRightFacingWall( room.length, room.depth );
roof = drawBottomFacingWall( room.width, room.length );
wall4 = drawBackFacingWall( room.width, room.depth );

Answer 1

The "disappearing" geometry is caused by a limitation of CanvasRenderer due to the way it handles depth-sorting.

While WebGLRenderer sorts at the pixel level, CanvasRenderer sorts at the polygon level.

The best you can do is to increase the tessellation of your geometry.

var geometry = new THREE.PlaneGeometry( width, height, 10, 10 );

three.js r.66