Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add precission property to renderer component #3989

Merged
merged 1 commit into from
Feb 2, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions docs/components/renderer.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand All @@ -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.
Expand Down Expand Up @@ -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.
6 changes: 6 additions & 0 deletions docs/introduction/faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
11 changes: 10 additions & 1 deletion src/core/scene/a-scene.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
}
Expand Down
1 change: 1 addition & 0 deletions src/systems/renderer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down