<h5 dir="auto">Description of the problem</h5>
<p dir="auto">I am working on a Three.js project which requires thousands of unique meshes to be rendered. Since number of objects have big impact on rendering performance I merged those objects into single mesh (manually, not using geometry.merge() function) and created "pseudo objects" which keeps parent mesh reference and index data (faceIndexStart, faceIndexEnd) so that I can manipulate color and position of individual objects using those references. (I could not find a built in way to do that, please let me know if there is one). At the end I achieved a super performant scene.</p>
<p dir="auto">However, I would like to manage visibility of those individual objects, too. I know I can use multimaterial but this will increase number of drawcalls which will have random effect on the performance.</p>
<p dir="auto">For example; let's say I have a model with 10000 individual objects and I create single mesh by merging  position and index vectors and create 10000 pseudo objects which just keep a reference to this mesh and information about this individual objects face indices. If I use multimaterial and hide 2000 of these objects during runtime. In the best case scenario those objects will be continuous in my buffers and I will have just one more draw call but if they are at random places I can have  up to 1+2000*2 draw calls. One may suggest sortByMaterial function in that case but than it will mess up with order of my buffer attributes and my pseudo objects will be useless. (Not sure, correct me if I am wrong);</p>
<h5 dir="auto">Suggestion</h5>
<p dir="auto">Three.js already supports everything neccessary to create single mesh out of lot's of meshes and pseudo meshes to manipulate position data of every single mesh. I can also manipulate color of those individual objects using vertex colors. It would be really helpful if materials could have THREE.faceVisibility or THREE.vertexVisibility as a value for visibility property and shader code to include logic to discard fragments based on "visibility" attribute value if one of those values I suggested passed on visibility property of a material.</p>
<p dir="auto">Currently I am overriding MeshPhong shader code by string replacements to achieve this desired solution and it feels dirty/hacky. This suggestion seems to me easy to implement and doesn't seem to have any downsides.</p>
<p dir="auto">EDIT: Here is the ugly/hacky thing I do:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var vert = THREE.ShaderChunk['meshphong_vert'];

        THREE.ShaderChunk['meshphong_vert'] = `attribute float hidden;
varying float vhidden;
` + vert.replace('void main() {', `void main() {
vhidden=hidden;`);

        var frag = THREE.ShaderChunk['meshphong_frag'];
        THREE.ShaderChunk['meshphong_frag'] = `varying float vhidden;
` + frag.replace('void main() {', `void main() {
if(vhidden&gt;0.0)
{
    discard;
}`);


        THREE.ShaderLib['phong'] = {

            uniforms: THREE.UniformsUtils.merge([

                THREE.UniformsLib['common'],
                THREE.UniformsLib['aomap'],
                THREE.UniformsLib['lightmap'],
                THREE.UniformsLib['emissivemap'],
                THREE.UniformsLib['bumpmap'],
                THREE.UniformsLib['normalmap'],
                THREE.UniformsLib['displacementmap'],
                THREE.UniformsLib['fog'],
                THREE.UniformsLib['lights'],

                {
                    &quot;emissive&quot;: { value: new THREE.Color(0x000000) },
                    &quot;specular&quot;: { value: new THREE.Color(0x111111) },
                    &quot;shininess&quot;: { value: 30 }
                }

            ]),

            vertexShader: THREE.ShaderChunk['meshphong_vert'],
            fragmentShader: THREE.ShaderChunk['meshphong_frag']
        };"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">vert</span> <span class="pl-c1">=</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">ShaderChunk</span><span class="pl-kos">[</span><span class="pl-s">'meshphong_vert'</span><span class="pl-kos">]</span><span class="pl-kos">;</span>

        <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">ShaderChunk</span><span class="pl-kos">[</span><span class="pl-s">'meshphong_vert'</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-s">`attribute float hidden;</span>
<span class="pl-s">varying float vhidden;</span>
<span class="pl-s">`</span> <span class="pl-c1">+</span> <span class="pl-s1">vert</span><span class="pl-kos">.</span><span class="pl-en">replace</span><span class="pl-kos">(</span><span class="pl-s">'void main() {'</span><span class="pl-kos">,</span> <span class="pl-s">`void main() {</span>
<span class="pl-s">vhidden=hidden;`</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

        <span class="pl-k">var</span> <span class="pl-s1">frag</span> <span class="pl-c1">=</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">ShaderChunk</span><span class="pl-kos">[</span><span class="pl-s">'meshphong_frag'</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
        <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">ShaderChunk</span><span class="pl-kos">[</span><span class="pl-s">'meshphong_frag'</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-s">`varying float vhidden;</span>
<span class="pl-s">`</span> <span class="pl-c1">+</span> <span class="pl-s1">frag</span><span class="pl-kos">.</span><span class="pl-en">replace</span><span class="pl-kos">(</span><span class="pl-s">'void main() {'</span><span class="pl-kos">,</span> <span class="pl-s">`void main() {</span>
<span class="pl-s">if(vhidden&gt;0.0)</span>
<span class="pl-s">{</span>
<span class="pl-s">    discard;</span>
<span class="pl-s">}`</span><span class="pl-kos">)</span><span class="pl-kos">;</span>


        <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">ShaderLib</span><span class="pl-kos">[</span><span class="pl-s">'phong'</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>

            <span class="pl-c1">uniforms</span>: <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">UniformsUtils</span><span class="pl-kos">.</span><span class="pl-en">merge</span><span class="pl-kos">(</span><span class="pl-kos">[</span>

                <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">UniformsLib</span><span class="pl-kos">[</span><span class="pl-s">'common'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
                <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">UniformsLib</span><span class="pl-kos">[</span><span class="pl-s">'aomap'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
                <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">UniformsLib</span><span class="pl-kos">[</span><span class="pl-s">'lightmap'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
                <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">UniformsLib</span><span class="pl-kos">[</span><span class="pl-s">'emissivemap'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
                <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">UniformsLib</span><span class="pl-kos">[</span><span class="pl-s">'bumpmap'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
                <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">UniformsLib</span><span class="pl-kos">[</span><span class="pl-s">'normalmap'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
                <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">UniformsLib</span><span class="pl-kos">[</span><span class="pl-s">'displacementmap'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
                <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">UniformsLib</span><span class="pl-kos">[</span><span class="pl-s">'fog'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
                <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">UniformsLib</span><span class="pl-kos">[</span><span class="pl-s">'lights'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>

                <span class="pl-kos">{</span>
                    <span class="pl-s">"emissive"</span>: <span class="pl-kos">{</span> <span class="pl-c1">value</span>: <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Color</span><span class="pl-kos">(</span><span class="pl-c1">0x000000</span><span class="pl-kos">)</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
                    <span class="pl-s">"specular"</span>: <span class="pl-kos">{</span> <span class="pl-c1">value</span>: <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Color</span><span class="pl-kos">(</span><span class="pl-c1">0x111111</span><span class="pl-kos">)</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
                    <span class="pl-s">"shininess"</span>: <span class="pl-kos">{</span> <span class="pl-c1">value</span>: <span class="pl-c1">30</span> <span class="pl-kos">}</span>
                <span class="pl-kos">}</span>

            <span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">,</span>

            <span class="pl-c1">vertexShader</span>: <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">ShaderChunk</span><span class="pl-kos">[</span><span class="pl-s">'meshphong_vert'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-c1">fragmentShader</span>: <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">ShaderChunk</span><span class="pl-kos">[</span><span class="pl-s">'meshphong_frag'</span><span class="pl-kos">]</span>
        <span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<h5 dir="auto">Description of the problem</h5>
<p dir="auto">I'm working with a set of models that use vertex color alpha. Now that threejs uses buffer geometry almost exclusively, adding in vertex color alpha is pretty simple, and it would be nice to see these changes upstream. The changes mostly involve declaring color as a vec4 instead of vec3.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="'#ifdef USE_COLOR',
'   attribute vec4 color;',
'#endif',"><pre class="notranslate"><code class="notranslate">'#ifdef USE_COLOR',
'   attribute vec4 color;',
'#endif',
</code></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var color_fragment = `
#ifdef USE_COLOR
    diffuseColor.rgb *= vColor.xyz;
    diffuseColor.a *= vColor.a;
#endif 
`;

var color_pars_fragment = &quot;#ifdef USE_COLOR\n\tvarying vec4 vColor;\n#endif\n&quot;;
var color_pars_vertex = &quot;#ifdef USE_COLOR\n\tvarying vec4 vColor;\n#endif&quot;;
var color_vertex = &quot;#ifdef USE_COLOR\n\tvColor.xyzw = color.xyzw;\n#endif&quot;;"><pre class="notranslate"><code class="notranslate">var color_fragment = `
#ifdef USE_COLOR
    diffuseColor.rgb *= vColor.xyz;
    diffuseColor.a *= vColor.a;
#endif 
`;

var color_pars_fragment = "#ifdef USE_COLOR\n\tvarying vec4 vColor;\n#endif\n";
var color_pars_vertex = "#ifdef USE_COLOR\n\tvarying vec4 vColor;\n#endif";
var color_vertex = "#ifdef USE_COLOR\n\tvColor.xyzw = color.xyzw;\n#endif";
</code></pre></div>
<h5 dir="auto">Example Without Vertex Color Alpha</h5>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/ae53c5fa1976a5da4507c19ac13659eabc86df23b9d3e3d73d35c1d28da37c12/68747470733a2f2f692e696d6775722e636f6d2f6c633576764b782e706e67"><img src="https://camo.githubusercontent.com/ae53c5fa1976a5da4507c19ac13659eabc86df23b9d3e3d73d35c1d28da37c12/68747470733a2f2f692e696d6775722e636f6d2f6c633576764b782e706e67" alt="Imgur" data-canonical-src="https://i.imgur.com/lc5vvKx.png" style="max-width: 100%;"></a></p>
<h5 dir="auto">Example With Vertex Color Alpha</h5>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/f26394a6ca5eb850d82a84bb76424803226cf1889fd0b11515f64f21f346a28e/68747470733a2f2f692e696d6775722e636f6d2f526c75325749702e6a7067"><img src="https://camo.githubusercontent.com/f26394a6ca5eb850d82a84bb76424803226cf1889fd0b11515f64f21f346a28e/68747470733a2f2f692e696d6775722e636f6d2f526c75325749702e6a7067" alt="Imgur" data-canonical-src="https://i.imgur.com/Rlu2WIp.jpg" style="max-width: 100%;"></a></p>
<h5 dir="auto">Three.js version</h5>
<ul class="contains-task-list">
<li>[ x ] Dev</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> r104</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>