Objekt mit einem höheren renderOrder wird durch rotiertes Element geclippt

Question

Ein gedrehtes Objekt (Zylinder in diesem Fall) schneidet Objekte ab (ein Dreieck, das in diesem Fall durch Linien gebildet wird), obwohl das renderOrder des zweiten Objekts höher ist. Siehe this jsfiddle demo für den Effekt.

Das Dreieck sollte vollständig auf der Oberseite des Zylinders gerendert werden, wird aber abgeschnitten, wo die Außenseite des Zylinders es schneidet. Es ist einfacher zu verstehen, was passiert, wenn eine Textur verwendet wird, aber jsfiddle ist schlecht bei der Verwendung externer Bilder.

var mesh, renderer, scene, camera, controls; 

init(); 
animate(); 

function init() { 
    renderer = new THREE.WebGLRenderer({ 
    antialias: true, 
    preserveDrawingBuffer: true 
    }); 
    renderer.setClearColor(0x24132E, 1); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.body.appendChild(renderer.domElement); 

    scene = new THREE.Scene(); 

    camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight, 0.1, 10000); 
    camera.position.set(0, 0, 7); 
    camera.lookAt(scene.position) 
    scene.add(camera); 

    var geometry = new THREE.CylinderGeometry(1, 1, 100, 32, 1, true); 

    var material = new THREE.MeshBasicMaterial({ 
    color: 0x0000ff 
    }); 

    material.side = THREE.DoubleSide; 
    mesh = new THREE.Mesh(geometry, material); 
    mesh.rotation.x = Math.PI/2; 
    scene.add(mesh); 



    var c = 3, // Side length of the triangle 
    a = c/2, 
    b = Math.sqrt(c * c - a * a), 
    yOffset = -b/3; // The vertical offset (if 0, triangle is on x axis) 

    // Draw the red triangle 
    var geo = new THREE.Geometry(); 
    geo.vertices.push(
    new THREE.Vector3(0, b + yOffset, 0), 
    new THREE.Vector3(-a, 0 + yOffset, 0), 
    new THREE.Vector3(a, 0 + yOffset, 0), 
    new THREE.Vector3(0, b + yOffset, 0) 
); 

    var lineMaterial = new THREE.LineBasicMaterial({ 
    color: 0xff0000, 
    linewidth: 5, 
    linejoin: "miter" 
    }); 

    plane = new THREE.Line(geo, lineMaterial); 
    // Place it on top of the cylinder 
    plane.renderOrder = 2; // This should override any clipping, right? 
    scene.add(plane); 
} 


function animate() { 
    requestAnimationFrame(animate); 

    render(); 
} 

function render() { 
    renderer.render(scene, camera); 
} 

Mache ich etwas falsch oder ist das ein Fehler?

Answer 1

für den Effekt, dass Sie eine zweite Szene verwenden wollen, und machen es auf die erste

function init(){ 
    ..... 
    renderer.autoClear = false; 
    scene.add(tube); 
    overlayScene.add(triangle); 
    ..... 
} 

function render() { 
    renderer.clear(); 
    renderer.render(scene, camera); 
    renderer.clearDepth(); 
    renderer.render(overlayScene, camera); 
} 

renderOrder bedeutet nicht, was Sie denken, es bedeutet, Blick auf die Implementierung in WebGLRenderer Aufgaben werden durch die sortiert Reihenfolge, wenn es bedeutete, was Sie davon erwarteten, es würde immer einige feste Renderreihenfolge geben und kollidierende Objekte würden durcheinander gesehen werden, renderOrder ist AFAIK verwendet, wenn Sie Probleme mit der Reihenfolge der transparenten/nicht undurchsichtigen Objekte haben

Answer 2

I worte ein kleines plugin für three.js für flares für meine g ein Ich. Three.js eingebautes Flares-Plugin ist langsam und ich bevorzuge es, keinen weiteren Rendering-Durchlauf auszuführen, der die Framerate halbiert. Hier ist, wie ich Fackeln auf Objekten sehen konnte, die tatsächlich vor ihnen waren.

Materialparameter:

{ 
    side: THREE.FrontSide, 
    blending: THREE.AdditiveBlending, 
    transparent: true, 
    map: flareMap, 
    depthWrite: false, 
    polygonOffset: true, 
    polygonOffsetFactor: -200 
} 

depthWrite - auf false gesetzt

polygonOffset - auf true gesetzt

polygonOffsetFactor - geben negative Zahl Objekt vor anderen zu bekommen. Geben Sie ihm ein paar wirklich hohen Wert wirklich sein obendrein dh -10000

Ignorieren andere params, werden sie für meine Fackeln benötigt