diff --git a/docs/components/renderer.md b/docs/components/renderer.md index 5046d2f0be0..143aff81c36 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}