<h5 dir="auto">Description of the problem</h5>
<p dir="auto">Every face in a <code class="notranslate">Geometry</code> has a <code class="notranslate">materialIndex</code>. When Three converts from a Geometry to a BufferGeometry...</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var bufferGeometry = THREE.BufferGeometry.new().fromGeometry(geometry);"><pre class="notranslate"><code class="notranslate">var bufferGeometry = THREE.BufferGeometry.new().fromGeometry(geometry);
</code></pre></div>
<p dir="auto">...there's <a href="https://github.com/mrdoob/three.js/blob/bde8a0540d1b6a7f0a9daf66f00e8f160994ff93/src/core/BufferGeometry.js#L467">an intermediary step where a DirectGeometry is used</a>...</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="fromGeometry: function ( geometry ) {
    geometry.__directGeometry = new DirectGeometry().fromGeometry( geometry );"><pre class="notranslate"><code class="notranslate">fromGeometry: function ( geometry ) {
    geometry.__directGeometry = new DirectGeometry().fromGeometry( geometry );
</code></pre></div>
<p dir="auto">Note that a <a href="https://github.com/mrdoob/three.js/blob/bde8a0540d1b6a7f0a9daf66f00e8f160994ff93/src/core/DirectGeometry.js#L9"><code class="notranslate">DirectGeometry</code> defines an <code class="notranslate">indices</code> array, then does nothing with it</a>.</p>
<p dir="auto">So it's not surprising when BufferGeometry <a href="https://github.com/mrdoob/three.js/blob/bde8a0540d1b6a7f0a9daf66f00e8f160994ff93/src/core/BufferGeometry.js#L506">checks the intermediary <code class="notranslate">directGeometry.indices.length</code>, it won't ever be populated</a>.</p>
<p dir="auto">When the BufferGeometry comes out the other end, it has no indices. <code class="notranslate">bufferGeometry.getIndex()</code> is null.</p>
<p dir="auto"><a href="https://github.com/mrdoob/three.js/commit/ed0b2eafe895de62bd5dbe63db14501f28647573#diff-3a1a405a5084cef2556ee83466287251L69">It looks like DirectGeometry's ability to handle indices was removed two years ago</a>.</p>
<p dir="auto">Here's a CodePen demonstrating the problem. Check the logs. The merged geometry should have indices returned, but it doesn't. <a href="https://codepen.io/andrewray/pen/gRyrzR?editors=0010" rel="nofollow">https://codepen.io/andrewray/pen/gRyrzR?editors=0010</a></p>
<h5 dir="auto">Three.js version</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Dev</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> r85</li>
</ul>
<h5 dir="auto">Browser</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> All of them</li>
</ul>
<h5 dir="auto">OS</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> All of them</li>
</ul>
<h5 dir="auto">Description of the problem</h5>
<p dir="auto">There is a very useful object property colorWrite described here:</p>
<p dir="auto"><a href="https://stackoverflow.com/questions/28869268/three-js-transparent-object-occlusion" rel="nofollow">https://stackoverflow.com/questions/28869268/three-js-transparent-object-occlusion</a><br>
<a href="http://jsfiddle.net/4vnsbdz6/1/" rel="nofollow">http://jsfiddle.net/4vnsbdz6/1/</a><br>
<a href="http://jsfiddle.net/4vnsbdz6/4/" rel="nofollow">http://jsfiddle.net/4vnsbdz6/4/</a></p>
<p dir="auto">However, it relies on manually setting the render order and excludes rendering of objects behind other objects.</p>
<p dir="auto">What I would find useful is a rendering option that does this kind of occlusion but for object groups inside or perhaps just behind another geometry and using its alpha map to determine the visibility of the objects inside, with the option to set an influence value to do inverse.</p>
<p dir="auto">For example, there would be a cube with an alpha map on it.<br>
There would be a THREE.Group with a property that uses one or more objects as a mask with a mask influence such as the cube.<br>
If the group is inside the cube, it would render the group objects according to the alpha map.<br>
The group would have the list of mask objects and if any of the pixels in the group are behind an opaque pixel in the cube, they'd be rendered, otherwise not rendered.</p>
<p dir="auto">This would behave like world-space alpha maps. It can probably be achieved using a custom shader but the shader would need to be applied per object. This would allow easily doing things like cutaways for architectural models:</p>
<p dir="auto"><a href="https://cdn1.28dayslater.co.uk/xf/2017/07/1458657_8291f7d765e875b0ce71ac9087b1350b.jpg" rel="nofollow">https://cdn1.28dayslater.co.uk/xf/2017/07/1458657_8291f7d765e875b0ce71ac9087b1350b.jpg</a></p>
<p dir="auto">For that, a full architecture geometry would be modelled and put in a group and then one or more masking geometries made with alpha maps. The architecture group would set the masking geometries as properties but with a negative influence so that only pixels outside the masking geometry are drawn fully and inside, according to the alpha map.</p>
<p dir="auto">I guess it can be applied per material using a loop, it would just be easier to do per group.</p>
<p dir="auto">The colorWrite examples above are almost usable for this but it's not possible to set an inverse on it, it doesn't use alpha maps so would have to model intricate masks but the most important aspect is being able to easily exclude or include geometry in the occlusion - being able to set a list of masks on a specific set of objects would be much easier than using render order, especially with multiple masks.</p>
<h5 dir="auto">Three.js version</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Dev</li>
<li>[x ] r109</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> ...</li>
</ul>
<h5 dir="auto">Browser</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Chrome</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Firefox</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Internet Explorer</li>
</ul>
<h5 dir="auto">OS</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Windows</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> macOS</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Linux</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Android</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> iOS</li>
</ul>
<h5 dir="auto">Hardware Requirements (graphics card, VR Device, ...)</h5>