Skip to content

Commit

Permalink
Editor: Moved Renderer panel to its own file.
Browse files Browse the repository at this point in the history
  • Loading branch information
mrdoob committed Feb 7, 2021
1 parent 34397c9 commit 794af18
Show file tree
Hide file tree
Showing 3 changed files with 180 additions and 161 deletions.
176 changes: 176 additions & 0 deletions editor/js/Sidebar.Project.Renderer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
import * as THREE from '../../build/three.module.js';

import { UINumber, UIPanel, UIRow, UISelect, UIText } from './libs/ui.js';
import { UIBoolean } from './libs/ui.three.js';

function SidebarProjectRenderer( editor ) {

var config = editor.config;
var signals = editor.signals;
var strings = editor.strings;

var currentRenderer = null;

var container = new UIPanel();

var headerRow = new UIRow();
headerRow.add( new UIText( strings.getKey( 'sidebar/project/renderer' ).toUpperCase() ) );
container.add( headerRow );

// Antialias

var antialiasRow = new UIRow();
var antialiasBoolean = new UIBoolean( config.getKey( 'project/renderer/antialias' ) ).onChange( function () {

createRenderer();

} );

antialiasRow.add( new UIText( strings.getKey( 'sidebar/project/antialias' ) ).setWidth( '90px' ) );
antialiasRow.add( antialiasBoolean );

container.add( antialiasRow );

// Shadows

var shadowsRow = new UIRow();
var shadowsBoolean = new UIBoolean( config.getKey( 'project/renderer/shadows' ) ).onChange( function () {

currentRenderer.shadowMap.enabled = this.getValue();
signals.rendererUpdated.dispatch();

} );

shadowsRow.add( new UIText( strings.getKey( 'sidebar/project/shadows' ) ).setWidth( '90px' ) );
shadowsRow.add( shadowsBoolean );

var shadowTypeSelect = new UISelect().setOptions( {
0: 'Basic',
1: 'PCF',
2: 'PCF (Soft)',
// 3: 'VSM'
} ).setWidth( '125px' ).onChange( function () {

currentRenderer.shadowMap.type = parseFloat( this.getValue() );
signals.rendererUpdated.dispatch();

} );
shadowTypeSelect.setValue( config.getKey( 'project/renderer/shadowType' ) );

shadowsRow.add( shadowTypeSelect );

container.add( shadowsRow );

// Physically Correct lights

var physicallyCorrectLightsRow = new UIRow();
var physicallyCorrectLightsBoolean = new UIBoolean( config.getKey( 'project/renderer/physicallyCorrectLights' ) ).onChange( function () {

currentRenderer.physicallyCorrectLights = this.getValue();
signals.rendererUpdated.dispatch();

} );

physicallyCorrectLightsRow.add( new UIText( strings.getKey( 'sidebar/project/physicallyCorrectLights' ) ).setWidth( '90px' ) );
physicallyCorrectLightsRow.add( physicallyCorrectLightsBoolean );

container.add( physicallyCorrectLightsRow );

// Tonemapping

var toneMappingRow = new UIRow();
var toneMappingSelect = new UISelect().setOptions( {
0: 'None',
1: 'Linear',
2: 'Reinhard',
3: 'Cineon',
4: 'ACESFilmic'
} ).setWidth( '120px' ).onChange( function () {

currentRenderer.toneMapping = parseFloat( this.getValue() );
toneMappingExposure.setDisplay( currentRenderer.toneMapping === 0 ? 'none' : '' );
signals.rendererUpdated.dispatch();

} );
toneMappingSelect.setValue( config.getKey( 'project/renderer/toneMapping' ) );

toneMappingRow.add( new UIText( strings.getKey( 'sidebar/project/toneMapping' ) ).setWidth( '90px' ) );
toneMappingRow.add( toneMappingSelect );

var toneMappingExposure = new UINumber( config.getKey( 'project/renderer/toneMappingExposure' ) );
toneMappingExposure.setDisplay( toneMappingSelect.getValue() === '0' ? 'none' : '' );
toneMappingExposure.setWidth( '30px' ).setMarginLeft( '10px' );
toneMappingExposure.setRange( 0, 10 );
toneMappingExposure.onChange( function () {

currentRenderer.toneMappingExposure = this.getValue();
signals.rendererUpdated.dispatch();

} );
toneMappingRow.add( toneMappingExposure );

container.add( toneMappingRow );

//

function createRenderer() {

currentRenderer = new THREE.WebGLRenderer( { antialias: antialiasBoolean.getValue() } );
currentRenderer.outputEncoding = THREE.sRGBEncoding;
currentRenderer.physicallyCorrectLights = physicallyCorrectLightsBoolean.getValue();
currentRenderer.shadowMap.enabled = shadowsBoolean.getValue();
currentRenderer.shadowMap.type = parseFloat( shadowTypeSelect.getValue() );
currentRenderer.toneMapping = parseFloat( toneMappingSelect.getValue() );
currentRenderer.toneMappingExposure = toneMappingExposure.getValue();

signals.rendererChanged.dispatch( currentRenderer );

}

createRenderer();

// signals

signals.editorCleared.add( function () {

currentRenderer.physicallyCorrectLights = false;
currentRenderer.shadowMap.enabled = true;
currentRenderer.shadowMap.type = 1;
currentRenderer.toneMapping = 0;
currentRenderer.toneMappingExposure = 1;

refreshRendererUI();

signals.rendererUpdated.dispatch();

} );

function refreshRendererUI() {

physicallyCorrectLightsBoolean.setValue( currentRenderer.physicallyCorrectLights );
shadowsBoolean.setValue( currentRenderer.shadowMap.enabled );
shadowTypeSelect.setValue( currentRenderer.shadowMap.type );
toneMappingSelect.setValue( currentRenderer.toneMapping );
toneMappingExposure.setValue( currentRenderer.toneMappingExposure );
toneMappingExposure.setDisplay( currentRenderer.toneMapping === 0 ? 'none' : '' );

}

signals.rendererUpdated.add( function () {

config.setKey(
'project/renderer/antialias', antialiasBoolean.getValue(),
'project/renderer/physicallyCorrectLights', physicallyCorrectLightsBoolean.getValue(),
'project/renderer/shadows', shadowsBoolean.getValue(),
'project/renderer/shadowType', parseFloat( shadowTypeSelect.getValue() ),
'project/renderer/toneMapping', parseFloat( toneMappingSelect.getValue() ),
'project/renderer/toneMappingExposure', toneMappingExposure.getValue()
);

} );

return container;

}

export { SidebarProjectRenderer };
164 changes: 3 additions & 161 deletions editor/js/Sidebar.Project.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
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 { SidebarProjectRenderer } from './Sidebar.Project.Renderer.js';

import { SetMaterialCommand } from './commands/SetMaterialCommand.js';

Expand All @@ -11,8 +10,6 @@ function SidebarProject( editor ) {
var signals = editor.signals;
var strings = editor.strings;

var currentRenderer = null;

var container = new UISpan();

var projectsettings = new UIPanel();
Expand Down Expand Up @@ -65,124 +62,7 @@ function SidebarProject( editor ) {

// Renderer

var rendererPanel = new UIPanel();
container.add( rendererPanel );

var headerRow = new UIRow();
headerRow.add( new UIText( strings.getKey( 'sidebar/project/renderer' ).toUpperCase() ) );
rendererPanel.add( headerRow );

// Renderer / Antialias

var antialiasRow = new UIRow();
var antialiasBoolean = new UIBoolean( config.getKey( 'project/renderer/antialias' ) ).onChange( function () {

createRenderer();

} );

antialiasRow.add( new UIText( strings.getKey( 'sidebar/project/antialias' ) ).setWidth( '90px' ) );
antialiasRow.add( antialiasBoolean );

rendererPanel.add( antialiasRow );

// Renderer / Shadows

var shadowsRow = new UIRow();
var shadowsBoolean = new UIBoolean( config.getKey( 'project/renderer/shadows' ) ).onChange( function () {

currentRenderer.shadowMap.enabled = this.getValue();
signals.rendererUpdated.dispatch();

} );

shadowsRow.add( new UIText( strings.getKey( 'sidebar/project/shadows' ) ).setWidth( '90px' ) );
shadowsRow.add( shadowsBoolean );

var shadowTypeSelect = new UISelect().setOptions( {
0: 'Basic',
1: 'PCF',
2: 'PCF (Soft)',
// 3: 'VSM'
} ).setWidth( '125px' ).onChange( function () {

currentRenderer.shadowMap.type = parseFloat( this.getValue() );
signals.rendererUpdated.dispatch();

} );
shadowTypeSelect.setValue( config.getKey( 'project/renderer/shadowType' ) );

shadowsRow.add( shadowTypeSelect );

rendererPanel.add( shadowsRow );

// Renderer / Physically Correct lights

var physicallyCorrectLightsRow = new UIRow();
var physicallyCorrectLightsBoolean = new UIBoolean( config.getKey( 'project/renderer/physicallyCorrectLights' ) ).onChange( function () {

currentRenderer.physicallyCorrectLights = this.getValue();
signals.rendererUpdated.dispatch();

} );

physicallyCorrectLightsRow.add( new UIText( strings.getKey( 'sidebar/project/physicallyCorrectLights' ) ).setWidth( '90px' ) );
physicallyCorrectLightsRow.add( physicallyCorrectLightsBoolean );

rendererPanel.add( physicallyCorrectLightsRow );

// Renderer / Tonemapping

var toneMappingRow = new UIRow();
var toneMappingSelect = new UISelect().setOptions( {
0: 'None',
1: 'Linear',
2: 'Reinhard',
3: 'Cineon',
4: 'ACESFilmic'
} ).setWidth( '120px' ).onChange( function () {

currentRenderer.toneMapping = parseFloat( this.getValue() );
toneMappingExposure.setDisplay( currentRenderer.toneMapping === 0 ? 'none' : '' );
signals.rendererUpdated.dispatch();

} );
toneMappingSelect.setValue( config.getKey( 'project/renderer/toneMapping' ) );

toneMappingRow.add( new UIText( strings.getKey( 'sidebar/project/toneMapping' ) ).setWidth( '90px' ) );
toneMappingRow.add( toneMappingSelect );

var toneMappingExposure = new UINumber( config.getKey( 'project/renderer/toneMappingExposure' ) );
toneMappingExposure.setDisplay( toneMappingSelect.getValue() === '0' ? 'none' : '' );
toneMappingExposure.setWidth( '30px' ).setMarginLeft( '10px' );
toneMappingExposure.setRange( 0, 10 );
toneMappingExposure.onChange( function () {

currentRenderer.toneMappingExposure = this.getValue();
signals.rendererUpdated.dispatch();

} );
toneMappingRow.add( toneMappingExposure );

rendererPanel.add( toneMappingRow );

//

function createRenderer() {

currentRenderer = new THREE.WebGLRenderer( { antialias: antialiasBoolean.getValue() } );
currentRenderer.outputEncoding = THREE.sRGBEncoding;
currentRenderer.physicallyCorrectLights = physicallyCorrectLightsBoolean.getValue();
currentRenderer.shadowMap.enabled = shadowsBoolean.getValue();
currentRenderer.shadowMap.type = parseFloat( shadowTypeSelect.getValue() );
currentRenderer.toneMapping = parseFloat( toneMappingSelect.getValue() );
currentRenderer.toneMappingExposure = toneMappingExposure.getValue();

signals.rendererChanged.dispatch( currentRenderer );

}

createRenderer();
container.add( new SidebarProjectRenderer( editor ) );

// Materials

Expand Down Expand Up @@ -244,44 +124,6 @@ function SidebarProject( editor ) {

// signals

signals.editorCleared.add( function () {

currentRenderer.physicallyCorrectLights = false;
currentRenderer.shadowMap.enabled = true;
currentRenderer.shadowMap.type = 1;
currentRenderer.toneMapping = 0;
currentRenderer.toneMappingExposure = 1;

refreshRendererUI();

signals.rendererUpdated.dispatch();

} );

function refreshRendererUI() {

physicallyCorrectLightsBoolean.setValue( currentRenderer.physicallyCorrectLights );
shadowsBoolean.setValue( currentRenderer.shadowMap.enabled );
shadowTypeSelect.setValue( currentRenderer.shadowMap.type );
toneMappingSelect.setValue( currentRenderer.toneMapping );
toneMappingExposure.setValue( currentRenderer.toneMappingExposure );
toneMappingExposure.setDisplay( currentRenderer.toneMapping === 0 ? 'none' : '' );

}

signals.rendererUpdated.add( function () {

config.setKey(
'project/renderer/antialias', antialiasBoolean.getValue(),
'project/renderer/physicallyCorrectLights', physicallyCorrectLightsBoolean.getValue(),
'project/renderer/shadows', shadowsBoolean.getValue(),
'project/renderer/shadowType', parseFloat( shadowTypeSelect.getValue() ),
'project/renderer/toneMapping', parseFloat( toneMappingSelect.getValue() ),
'project/renderer/toneMappingExposure', toneMappingExposure.getValue()
);

} );

signals.objectSelected.add( function ( object ) {

if ( object !== null ) {
Expand Down
1 change: 1 addition & 0 deletions editor/sw.js
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,7 @@ const assets = [
'./js/Sidebar.js',
'./js/Sidebar.Scene.js',
'./js/Sidebar.Project.js',
'./js/Sidebar.Project.Renderer.js',
'./js/Sidebar.Settings.js',
'./js/Sidebar.Settings.Shortcuts.js',
'./js/Sidebar.Settings.Viewport.js',
Expand Down

0 comments on commit 794af18

Please sign in to comment.