<p dir="auto"><strong>Describe the bug</strong></p>
<p dir="auto">Testing on various mobile devices (phones and pads) indicates that depending on the drivers, GPU:s and browser versions three.js may render all objects pitch-black. Mobile device having the same GPU/processor may behave differently depending on the phone model and year; older may work while newer doesn't. The same device may operate correctly with Chrome but not with Firefox etc.</p>
<p dir="auto"><strong>To Reproduce</strong></p>
<p dir="auto">Since this is due to false positive value given by three.js checking on device capabilites, there is no easy way to reproduce it without the correct hw/sw combination. Using the simple test below, it can be reproduced on all devices that have this issue.</p>
<p dir="auto"><em><strong>Live example</strong></em></p>
<p dir="auto">This will show a white cube on all devices:<br>
<code class="notranslate">var material = newTHREE.MeshPhongMaterial( { precision: 'mediump' } );</code><br>
<a href="https://jsfiddle.net/f2Lommf5/6721/embedded/result" rel="nofollow">https://jsfiddle.net/f2Lommf5/6721/embedded/result</a></p>
<p dir="auto">This will not show a white cube on some devices, rendering it pitch-black on some phones/pads:<br>
<code class="notranslate">var material = new THREE.MeshPhongMaterial( { precision: 'highp' } );</code><br>
<a href="https://jsfiddle.net/f2Lommf5/6722/embedded/result" rel="nofollow">https://jsfiddle.net/f2Lommf5/6722/embedded/result</a></p>
<p dir="auto"><em><strong>Possible solution</strong></em></p>
<p dir="auto">One solution to this would be using material precision: <code class="notranslate">mediump</code> on all mobile devices as a default value. This has first been suggested in 2018 by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Mugen87/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Mugen87">@Mugen87</a> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="345305716" data-permission-text="Title is private" data-url="https://github.com/mrdoob/three.js/issues/14570" data-hovercard-type="issue" data-hovercard-url="/mrdoob/three.js/issues/14570/hovercard" href="https://github.com/mrdoob/three.js/issues/14570">#14570</a>. There has been some arguments against this as a solution, and therefore <strong>perhaps a better solution to this would be some kind of automatic pre-testing whether the device really supports <code class="notranslate">highp</code> in practise or not, e.g. rendering a white test material sample and if it fails then defaulting material precision to <code class="notranslate">mediump</code>.</strong></p>
<p dir="auto"><strong>Platforms (tested, but there can be more):</strong></p>
<ul dir="auto">
<li>Device: [Mobile]</li>
<li>OS: [Android]</li>
<li>Browser: [Chrome, Firefox]</li>
<li>Three.js version: r126 (min-126)</li>
</ul>
<h5 dir="auto">Description of the problem</h5>
<p dir="auto">Right now, the default precision for shader progams in <code class="notranslate">three.js</code> is <code class="notranslate">highp</code>. Issues like <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="326298141" data-permission-text="Title is private" data-url="https://github.com/mrdoob/three.js/issues/14137" data-hovercard-type="issue" data-hovercard-url="/mrdoob/three.js/issues/14137/hovercard" href="https://github.com/mrdoob/three.js/issues/14137">#14137</a> showed that this approach causes rendering problems especially on (older) mobile devices . Using <code class="notranslate">mediump</code> would solve these issues and also improve the performance of the shader execution on mobile, see <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="326298141" data-permission-text="Title is private" data-url="https://github.com/mrdoob/three.js/issues/14137" data-hovercard-type="issue" data-hovercard-url="/mrdoob/three.js/issues/14137/hovercard?comment_id=397850032&amp;comment_type=issue_comment" href="https://github.com/mrdoob/three.js/issues/14137#issuecomment-397850032">#14137 (comment)</a>.</p>
<p dir="auto">The problem is that certain materials like <code class="notranslate">MeshStandardMaterial</code> can not produce correct visual output with <code class="notranslate">mediump</code> right now, see <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="326298141" data-permission-text="Title is private" data-url="https://github.com/mrdoob/three.js/issues/14137" data-hovercard-type="issue" data-hovercard-url="/mrdoob/three.js/issues/14137/hovercard?comment_id=397856954&amp;comment_type=issue_comment" href="https://github.com/mrdoob/three.js/issues/14137#issuecomment-397856954">#14137 (comment)</a>. Changing certain parts of the shader souce code is necessary to solve this issue.</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=""> r94</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>