Add exposure to AFrame #5029
Add exposure to AFrame #5029
Conversation
|
See how the colours are more muted and less graphic generally. ALso noticed how one of the torus-knots has toneMapped:false so that it has it's original pure colour. |
src/systems/renderer.js
Outdated
| maxCanvasWidth: {default: 1920}, | ||
| maxCanvasHeight: {default: 1920}, | ||
| physicallyCorrectLights: {default: false}, | ||
| exposure: {default: 1, if: {type: ['ACESFilmic', 'Linear', 'Reinhard', 'Cineon']}}, |
There was a problem hiding this comment.
Can name values with lowercase if not an acronym for consistency: linear, reinhard, cineon
Can capitalize first letter below:
string.charAt(0).toUpperCase() + string.slice(1);
There was a problem hiding this comment.
I think the default shouldn't be 1
There was a problem hiding this comment.
"1" is the THREE.js default of no change.
https://threejs.org/docs/#api/en/renderers/WebGLRenderer.toneMappingExposure
There was a problem hiding this comment.
Probably can replace 1 with something more user friendly and translate internally.
There was a problem hiding this comment.
Maybe no as toneMapping for consistency?
There was a problem hiding this comment.
Well it's a float it should be set to something like 0.5, or 1.1
There was a problem hiding this comment.
Like "intensity" on the light component
There was a problem hiding this comment.
Ah I see that the list is an if not a oneOf Misread. Sorry
There was a problem hiding this comment.
This should be:
toneMapping instead of type
exposure: {default: 1, if: {toneMapping: ['ACESFilmic', 'linear', 'reinhard', 'cineon']}},
There was a problem hiding this comment.
Thank you! Great spot!
| var data = this.data; | ||
| var sceneEl = this.el; | ||
| var renderer = sceneEl.renderer; | ||
| renderer.toneMappingExposure = data.exposure; |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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.
src/systems/renderer.js
Outdated
| maxCanvasHeight: {default: 1920}, | ||
| physicallyCorrectLights: {default: false}, | ||
| exposure: {default: 1, if: {type: ['ACESFilmic', 'Linear', 'Reinhard', 'Cineon']}}, | ||
| toneMapping: {default: 'No', oneOf: ['No', 'ACESFilmic', 'Linear', 'Reinhard', 'Cineon']}, |
There was a problem hiding this comment.
We can do:
toneMapping: {default: 'no', oneOf: ['no', 'ACESFilmic', 'linear', 'reinhard', 'cineon']},
There was a problem hiding this comment.
Yeah I'll do that.
|
This is awesome. Thank you! |
2 participants
Description:
This adds exposure to the renderer settings and allows flat materials to opt out of it so that they can still look like light emitting surfaces
Changes proposed:
TODO: Docs