Object with a higher renderOrder being clipped by rotated element

Question

A rotated object (cylinder in this case) cuts off objects (a triangle made by lines in this case) even though the renderOrder of the second object is higher. See this jsfiddle demo for the effect.

The triangle should be rendered completely on top of the cylinder but is cut off where the outside of the cylinder intersects with it. It's easier to understand what's happening when a texture is used, but jsfiddle is bad at using external images.

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);
}

Am I doing something wrong or is this a bug?

Answer 1

for the effect that you want use a second scene and render it onto the first one

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 does not mean what you think it means, look at the implementation in WebGLRenderer objects are sorted by the order, if it meant what you anticipated from it, there would always be some fixed rendering order and colliding objects would be seen through each other, renderOrder is AFAIK used when you have issues with order of transparent/ not opaque objects