From 5ccfb56c2e06d121898df3b5f28631e6098aa5da Mon Sep 17 00:00:00 2001
From: Diego Marcos <diego.marcos@gmail.com>
Date: Wed, 30 Jan 2019 11:32:40 -0800
Subject: [PATCH] Add precision property in renderer component. Workaroudn for
 problems with Adreno 300 series GPUs and improves perf. (fix #3971, #3523)

---
 docs/components/renderer.md |  7 +++++++
 docs/introduction/faq.md    |  6 ++++++
 src/core/scene/a-scene.js   | 11 ++++++++++-
 src/systems/renderer.js     |  1 +
 4 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/docs/components/renderer.md b/docs/components/renderer.md
index 5046d2f0be0..ca6d236b44f 100644
--- a/docs/components/renderer.md
+++ b/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][precision] : 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.
diff --git a/docs/introduction/faq.md b/docs/introduction/faq.md
index 524e638c67c..06570cf65de 100644
--- a/docs/introduction/faq.md
+++ b/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.
diff --git a/src/core/scene/a-scene.js b/src/core/scene/a-scene.js
index 478652886f6..3b8a3c808b5 100644
--- a/src/core/scene/a-scene.js
+++ b/src/core/scene/a-scene.js
@@ -548,7 +548,12 @@ 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};
 
@@ -556,6 +561,10 @@ module.exports.AScene = registerElement('a-scene', {
           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';
           }
diff --git a/src/systems/renderer.js b/src/systems/renderer.js
index 4bd9aee9dd7..de729027638 100644
--- a/src/systems/renderer.js
+++ b/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}