Skip to content

Add exposure to AFrame #5029

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.

Sign up for GitHub

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

Merged
merged 4 commits into from
Mar 21, 2022
Merged

Add exposure to AFrame #5029

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
37fa46b
add exposure to AFrame
AdaRoseCannon Mar 21, 2022
109c9f4
exposure docs
AdaRoseCannon Mar 21, 2022
5f7a532
exposure name fixes
AdaRoseCannon Mar 21, 2022
c07d2c2
exposure name fixes
AdaRoseCannon Mar 21, 2022
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
exposure name fixes
  • Loading branch information
@AdaRoseCannon
AdaRoseCannon committed Mar 21, 2022
commit 5f7a532e430ad8c5919df87d6858c7d556d8468c
4 changes: 2 additions & 2 deletions docs/components/renderer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,10 @@ It also configures presentation attributes when entering WebVR/WebXR.
| logarithmicDepthBuffer | Whether to use a logarithmic depth buffer. | auto |
| precision | Fragment shader [precision][precision] : low, medium or high. | high |
| alpha | Whether the canvas should contain an alpha buffer. | true |
| toneMapping | Type of toneMapping to use, one of: 'No', 'ACESFilmic', 'Linear', 'Reinhard', 'Cineon' | 'No' |
| toneMapping | Type of toneMapping to use, one of: 'no', 'ACESFilmic', 'linear', 'reinhard', 'cineon' | 'no' |
| exposure | When any toneMapping other than "No" is used this can be used to make the overall scene brighter or darker | 1 |

> **NOTE:** Once the scene is initialized, none of these properties may no longer be changed apart from "exposure" which can be set dynamically.
> **NOTE:** Once the scene is initialized, none of these properties may no longer be changed apart from "exposure" and "toneMapping" which can be set dynamically.

### antialias

Expand Down
9 changes: 6 additions & 3 deletions src/systems/renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ module.exports.System = registerSystem('renderer', {
maxCanvasWidth: {default: 1920},
maxCanvasHeight: {default: 1920},
physicallyCorrectLights: {default: false},
exposure: {default: 1, if: {type: ['ACESFilmic', 'Linear', 'Reinhard', 'Cineon']}},
toneMapping: {default: 'No', oneOf: ['No', 'ACESFilmic', 'Linear', 'Reinhard', 'Cineon']},
exposure: {default: 1, if: {toneMapping: ['ACESFilmic', 'linear', 'reinhard', 'cineon']}},
toneMapping: {default: 'no', oneOf: ['no', 'ACESFilmic', 'linear', 'reinhard', 'cineon']},
precision: {default: 'high', oneOf: ['high', 'medium', 'low']},
sortObjects: {default: false},
colorManagement: {default: false},
Expand All @@ -29,11 +29,12 @@ module.exports.System = registerSystem('renderer', {
init: function () {
var data = this.data;
var sceneEl = this.el;
var toneMappingName = this.data.toneMapping.charAt(0).toUpperCase() + this.data.toneMapping.slice(1);
// This is the rendering engine, such as THREE.js so copy over any persistent properties from the rendering system.
var renderer = sceneEl.renderer;
renderer.sortObjects = data.sortObjects;
renderer.physicallyCorrectLights = data.physicallyCorrectLights;
renderer.toneMapping = THREE[this.data.toneMapping + 'ToneMapping'];
renderer.toneMapping = THREE[toneMappingName + 'ToneMapping'];

if (data.colorManagement || data.gammaOutput) {
renderer.outputEncoding = THREE.sRGBEncoding;
Expand All @@ -55,6 +56,8 @@ module.exports.System = registerSystem('renderer', {
var data = this.data;
var sceneEl = this.el;
var renderer = sceneEl.renderer;
var toneMappingName = this.data.toneMapping.charAt(0).toUpperCase() + this.data.toneMapping.slice(1);
renderer.toneMapping = THREE[toneMappingName + 'ToneMapping'];
renderer.toneMappingExposure = data.exposure;
Copy link
Member

@dmarcos dmarcos Mar 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have no experience with exposure or tone mapping so this might be dumb. Are there use cases for different values of tone mapping and exposure? Should we always match them automatically?
Copy link
Contributor Author

@AdaRoseCannon AdaRoseCannon Mar 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The tone toneMapping option is a list of functions that act on the colour of each pixel according to the exposure value specified.

The different functions each have a slightly different aesthetic.

You control the exposure for when the user moves into a bright environment you lower it to make the dark areas darker and make the outside less blinding bright.

Usually it's just used to control the lighting on a global level to get the right feeling for the environment the developer is building.
},

Expand Down