Merge pull request mrdoob#18513 from Mugen87/dev32

Editor: Added tone mapping project settings.
Keshigom · Jan 30, 2020 · be569fd · be569fd
2 parents 2f8769b + e105ae8
commit be569fd
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 7 deletions.
diff --git a/editor/js/Config.js b/editor/js/Config.js
@@ -16,6 +16,9 @@ var Config = function () {
 
 		'project/renderer/antialias': true,
 		'project/renderer/shadows': true,
+		'project/renderer/toneMapping': 1, // linear
+		'project/renderer/toneMappingExposure': 1,
+		'project/renderer/toneMappingWhitePoint': 1,
 
 		'project/vr': false,
 

diff --git a/editor/js/Editor.js b/editor/js/Editor.js
@@ -41,6 +41,7 @@ var Editor = function () {
 		snapChanged: new Signal(),
 		spaceChanged: new Signal(),
 		rendererChanged: new Signal(),
+		rendererUpdated: new Signal(),
 
 		sceneBackgroundChanged: new Signal(),
 		sceneFogChanged: new Signal(),

diff --git a/editor/js/Sidebar.Project.js b/editor/js/Sidebar.Project.js
@@ -4,7 +4,7 @@
 
 import * as THREE from '../../build/three.module.js';
 
-import { UIPanel, UIRow, UIInput, UICheckbox, UIText, UIListbox, UISpan, UIButton } from './libs/ui.js';
+import { UIPanel, UIRow, UIInput, UICheckbox, UIText, UIListbox, UISpan, UIButton, UISelect, UINumber } from './libs/ui.js';
 import { UIBoolean } from './libs/ui.three.js';
 
 import { SetMaterialCommand } from './commands/SetMaterialCommand.js';
@@ -15,6 +15,8 @@ var SidebarProject = function ( editor ) {
 	var signals = editor.signals;
 	var strings = editor.strings;
 
+	var currentRenderer = null;
+
 	var container = new UISpan();
 
 	var projectsettings = new UIPanel();
@@ -56,6 +58,8 @@ var SidebarProject = function ( editor ) {
 	var rendererPropertiesRow = new UIRow();
 	rendererPropertiesRow.add( new UIText( strings.getKey( 'sidebar/project/renderer' ) ).setWidth( '90px' ) );
 
+	// Renderer / Antialias
+
 	var rendererAntialias = new UIBoolean( config.getKey( 'project/renderer/antialias' ), strings.getKey( 'sidebar/project/antialias' ) ).onChange( function () {
 
 		config.setKey( 'project/renderer/antialias', this.getValue() );
@@ -76,31 +80,102 @@ var SidebarProject = function ( editor ) {
 
 	projectsettings.add( rendererPropertiesRow );
 
+	// Tonemapping
+
+	var tonemapping = new UIPanel();
+
+	// Tonemapping / Header
+
+	var headerRow = new UIRow();
+	headerRow.add( new UIText( strings.getKey( 'sidebar/project/toneMapping' ).toUpperCase() ) );
+	tonemapping.add( headerRow );
+
+	// Tonemapping / Type
+
+	var toneMappingTypeRow = new UIRow();
+	var rendererToneMappingTypeLabel = new UIText( strings.getKey( 'sidebar/project/toneMappingType' ) ).setWidth( '90px' );
+
+	var rendererToneMappingTypeSelect = new UISelect().setOptions( {
+		0: 'None',
+		1: 'Linear',
+		2: 'Reinhard',
+		3: 'Uncharted2',
+		4: 'Cineon',
+		5: 'ACESFilmic',
+	} ).setWidth( '150px' ).onChange( function () {
+
+		config.setKey( 'project/renderer/toneMapping', this.getValue() );
+		updateRenderer();
+
+	} );
+	rendererToneMappingTypeSelect.setValue( config.getKey( 'project/renderer/toneMapping' ) );
+	toneMappingTypeRow.add( rendererToneMappingTypeLabel, rendererToneMappingTypeSelect );
+	tonemapping.add( toneMappingTypeRow );
+
+	// Tonemapping / Exposure
+
+	var toneMappingExposureRow = new UIRow();
+	var rendererToneMappingExposureLabel = new UIText( strings.getKey( 'sidebar/project/toneMappingExposure' ) ).setWidth( '90px' );
+	var rendererToneMappingExposure = new UINumber( config.getKey( 'project/renderer/toneMappingExposure' ) ).setRange( 0, 10 ).onChange( function () {
+
+		config.setKey( 'project/renderer/toneMappingExposure', this.getValue() );
+		updateTonemapping();
+
+	} );
+	toneMappingExposureRow.add( rendererToneMappingExposureLabel, rendererToneMappingExposure );
+	tonemapping.add( toneMappingExposureRow );
+
+	// Tonemapping / White Point
+
+	var toneMappingWhitePointRow = new UIRow();
+	var rendererToneMappingWhitePointLabel = new UIText( strings.getKey( 'sidebar/project/toneMappingWhitePoint' ) ).setWidth( '90px' );
+	var rendererToneMappingWhitePoint = new UINumber( config.getKey( 'project/renderer/toneMappingWhitePoint' ) ).setRange( 0, 10 ).onChange( function () {
+
+		config.setKey( 'project/renderer/toneMappingWhitePoint', this.getValue() );
+		updateTonemapping();
+
+	} );
+	toneMappingWhitePointRow.add( rendererToneMappingWhitePointLabel, rendererToneMappingWhitePoint );
+	tonemapping.add( toneMappingWhitePointRow );
+
+	container.add( tonemapping );
+
 	//
 
 	function updateRenderer() {
 
-		createRenderer( rendererAntialias.getValue() );
+		createRenderer( rendererAntialias.getValue(), rendererShadows.getValue(), rendererToneMappingTypeSelect.getValue() );
 
 	}
 
-	function createRenderer( antialias, shadows ) {
+	function createRenderer( antialias, shadows, toneMapping ) {
 
 		var parameters = { antialias: antialias };
-		var renderer = new THREE.WebGLRenderer( parameters );
+		currentRenderer = new THREE.WebGLRenderer( parameters );
 
 		if ( shadows ) {
 
-			renderer.shadowMap.enabled = true;
+			currentRenderer.shadowMap.enabled = true;
 			// renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 
 		}
 
-		signals.rendererChanged.dispatch( renderer );
+		currentRenderer.toneMapping = parseFloat( toneMapping );
+
+		signals.rendererChanged.dispatch( currentRenderer );
+
+	}
+
+	function updateTonemapping() {
+
+		currentRenderer.toneMappingExposure = rendererToneMappingExposure.getValue();
+		currentRenderer.toneMappingWhitePoint = rendererToneMappingWhitePoint.getValue();
+
+		signals.rendererUpdated.dispatch();
 
 	}
 
-	createRenderer( config.getKey( 'project/renderer/antialias' ), config.getKey( 'project/renderer/shadows' ) );
+	createRenderer( config.getKey( 'project/renderer/antialias' ), config.getKey( 'project/renderer/shadows' ), config.getKey( 'project/renderer/toneMapping' ) );
 
 	// Materials
 

diff --git a/editor/js/Strings.js b/editor/js/Strings.js
@@ -287,6 +287,10 @@ var Strings = function ( config ) {
 			'sidebar/project/renderer': 'Renderer',
 			'sidebar/project/antialias': 'antialias',
 			'sidebar/project/shadows': 'shadows',
+			'sidebar/project/toneMapping': 'Tone Mapping',
+			'sidebar/project/toneMappingType': 'Type',
+			'sidebar/project/toneMappingExposure': 'Exposure',
+			'sidebar/project/toneMappingWhitePoint': 'White Point',
 			'sidebar/project/materials': 'Materials',
 			'sidebar/project/Assign': 'Assign',
 
@@ -569,6 +573,10 @@ var Strings = function ( config ) {
 			'sidebar/project/renderer': '渲染器',
 			'sidebar/project/antialias': '抗锯齿',
 			'sidebar/project/shadows': '阴影',
+			'sidebar/project/toneMapping': 'Tone Mapping',
+			'sidebar/project/toneMappingType': 'Type',
+			'sidebar/project/toneMappingExposure': 'Exposure',
+			'sidebar/project/toneMappingWhitePoint': 'White Point',
 			'sidebar/project/materials': '材质',
 			'sidebar/project/Assign': '应用',
 

diff --git a/editor/js/Viewport.js b/editor/js/Viewport.js
@@ -318,6 +318,12 @@ var Viewport = function ( editor ) {
 
 	} );
 
+	signals.rendererUpdated.add( function () {
+
+		render();
+
+	} );
+
 	signals.rendererChanged.add( function ( newRenderer ) {
 
 		if ( renderer !== null ) {