Add precision property in renderer component. Workaroudn for problems…

… with Adreno 300 series GPUs and improves perf. (fix #3971, #3523)

docs/components/renderer.md

@@ -23,6 +23,8 @@ The `renderer` system configures a scene's
 
 ## Properties
 
+[precision]: #precision
+
 | Property                | Description                                                                     | Default Value |
 |-------------------------|---------------------------------------------------------------------------------|---------------|
 | antialias               | Whether to perform antialiasing. If `auto`, antialiasing is disabled on mobile. | auto          |
@@ -32,6 +34,7 @@ The `renderer` system configures a scene's
 | maxCanvasWidth          | Maximum canvas width. Uses the size multiplied by device pixel ratio. Does not limit canvas width if set to -1.                                | 1920            |
 | maxCanvasHeight         | Maximum canvas height. Behaves the same as maxCanvasWidth.                      | 1920          |
 | logarithmicDepthBuffer  | Whether to use a logarithmic depth buffer.                                      | auto          |
+| precision  |       Fragment shader [precision][pointer-lock-api]: low, medium or high.                                | high          |
 
 > **NOTE:** Once the scene is initialized, these properties may no longer be changed.
 
@@ -75,3 +78,7 @@ be adjusted when making this change. Performance is not significantly affected i
 
 A logarithmic depth buffer may provide better sorting and rendering in scenes containing very
 large differences of scale and distance.
+
+### Precision
+
+Set precision in fragment shaders. Main use is to address issues in older hardware / drivers. Adreno 300 series GPU based phones are [particularly problematic](https://github.com/mrdoob/three.js/issues/14137). You can set to `mediump` as a workaround. It will improve performance, in mobile in particular but be aware that might cause visual artifacts in shaders / textures.

docs/introduction/faq.md

@@ -311,3 +311,9 @@ The [roadmap is on GitHub][roadmap]!
 ## Do I call it "A-Frame" or "aframe" or "aframevr" or "aFrame"?
 
 A-Frame!
+
+## Why do my textures render black?
+
+[precision]: ../components/renderer.md#precision
+
+Phones with Adreno 300 series GPUs are notoriously problematic. Set [renderer precision][precision] to `medium` as a workaround. Real fix has to happen at the driver / device level.

src/core/scene/a-scene.js

@@ -548,14 +548,23 @@ module.exports.AScene = registerElement('a-scene', {
         var rendererAttrString;
         var rendererConfig;
 
-        rendererConfig = {alpha: true, antialias: !isMobile, canvas: this.canvas, logarithmicDepthBuffer: false};
+        rendererConfig = {
+          alpha: true,
+          antialias: !isMobile,
+          canvas: this.canvas,
+          logarithmicDepthBuffer: false
+        };
 
         this.maxCanvasSize = {height: 1920, width: 1920};
 
         if (this.hasAttribute('renderer')) {
           rendererAttrString = this.getAttribute('renderer');
           rendererAttr = utils.styleParser.parse(rendererAttrString);
 
+          if (rendererAttr.precision) {
+            rendererConfig.precision = rendererAttr.precision + 'p';
+          }
+
           if (rendererAttr.antialias && rendererAttr.antialias !== 'auto') {
             rendererConfig.antialias = rendererAttr.antialias === 'true';
           }

src/systems/renderer.js

@@ -15,6 +15,7 @@ module.exports.System = registerSystem('renderer', {
     maxCanvasWidth: {default: 1920},
     maxCanvasHeight: {default: 1920},
     physicallyCorrectLights: {default: false},
+    precision: {default: 'high', oneOf: ['high', 'medium', 'low']},
     sortObjects: {default: false},
     colorManagement: {default: false},
     gammaOutput: {default: false}