sorting - Three.js CanvasRenderer深度ソート

Question

CanvasRenderer でレンダリングされたいくつかの CubeGeometry オブジェクトがあります。次の画像に示すように、深さの並べ替えが原因でクリッピングの問題が発生しています。

ここで、これは CanvasRenderer の制限によるものであるという回答を見ました。より良い結果を得るためにいくつかのことを適用しようとしましたが、まだクリッピングの問題があります。オーバードローを 1 に設定し、パフォーマンスにあまり影響を与えずに可能な限りセグメントを増やしました。

画像は WebGLRenderer で正しく見えますが、まだ広くサポートされていないため、CanvasRenderer をあきらめる前に、すべてのオプションを試してみたいと思います。他に試すアイデアはありますか？

参照用のコード:

function SolidWood( length, width, thickness )
{
    this.ID = -1;
    this.name = "Unknown";
    this.dimensions = {};
    this.dimensions.length = length;
    this.dimensions.width = width;
    this.dimensions.thickness = thickness;
    this.properties = {};
    this.properties.color = 0x00ff00;
    this.properties.wireframe = false;
    this.properties.shading = THREE.SmoothShading;
    this.properties.overdraw = 1.0;

    this.geometry = null;
    this.material = null;
    this.mesh = null;
}
SolidWood.prototype.BuildGeometry = function(){
    var segs = (Detector.webgl ? 1 : 8);
    this.geometry = new THREE.CubeGeometry(this.dimensions.width, this.dimensions.length, this.dimensions.thickness
        , segs, segs, segs);
};
SolidWood.prototype.BuildMaterial = function(){
    this.properties.ambient = this.properties.color;
    this.material = new THREE.MeshLambertMaterial( this.properties );
};
SolidWood.prototype.BuildMesh = function(){
    this.mesh = new THREE.Mesh(this.geometry, this.material)
};
SolidWood.prototype.BuildAll = function(){
    this.BuildGeometry();
    this.BuildMaterial();
    this.BuildMesh();
};

var camera, scene, renderer, controls, light;
var panel = {};
var HEIGHT, WIDTH;
var $container = $('#content-gallery-content');
var $speed = $('#speed');

init();
animate();

function init() {

    WIDTH = 400;
    HEIGHT = 300;

    camera = new THREE.PerspectiveCamera( 60, WIDTH / HEIGHT, .001, 1000 );
    camera.position.z = 30;
    camera.position.y = 5;
    camera.lookAt(new THREE.Vector3(0,0,0));

    scene = new THREE.Scene();

    light = new THREE.PointLight(0xffffff, 0.75, 0.0);
    light.position.set(0, -30, 0);
    scene.add(light);
    scene.add(new THREE.AmbientLight(0xb0b0b0));

    //build our panel
    panel.crossmembersCount = 2;
    panel.membersPerFoot = 4;
    panel.memberWidth = 2.5;
    panel.memberWidthHalf = panel.memberWidth/2;
    panel.degrees90 = ((90*Math.PI)/180);
    panel.gapWidth = (12-(panel.memberWidth * panel.membersPerFoot)) / panel.membersPerFoot;
    panel.members = {};
    panel.crossmembers = {};

    for(i=0; i<panel.crossmembersCount; ++i)
    {
        panel.crossmembers[i] = new SolidWood(1.25, 11.875, 0.5);
        panel.crossmembers[i].properties.color = 0x000000;
        panel.crossmembers[i].BuildAll();

        panel.crossmembers[i].mesh.rotation.x = panel.degrees90;
        panel.crossmembers[i].mesh.position.z = ((i*12)+5.5)-11.5;
        panel.crossmembers[i].mesh.position.x = 0.0625;
        panel.crossmembers[i].mesh.position.y = 0.25;

        scene.add( panel.crossmembers[i].mesh );
    }
    for(i=0; i< panel.membersPerFoot; ++i)
    {
        panel.members[i] = new SolidWood(23.0, panel.memberWidth, 0.6875);
        panel.members[i].properties.color = 0xccaa00;
        panel.members[i].BuildAll();

        panel.members[i].mesh.rotation.x = panel.degrees90;
        panel.members[i].mesh.position.z = 0;
        panel.members[i].mesh.position.x = panel.memberWidthHalf-6.125+((panel.memberWidth+panel.gapWidth)*i);
        panel.members[i].mesh.position.y = (0.6875/2)*-1;

        scene.add( panel.members[i].mesh );
    }


    renderer = (Detector.webgl ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer());
    renderer.setSize( WIDTH, HEIGHT );
    renderer.setClearColor(0xD0D0D0, 1.0);

    $container.append( renderer.domElement );

    controls = new THREE.OrbitControls(camera, $container.get(0));

}

function animate() {

    // note: three.js includes requestAnimationFrame shim
    requestAnimationFrame( animate );

    light.position = camera.position;
    //var length = $('#speed').val() * 100;
    renderer.render( scene, camera );

}