[pull] dev from mrdoob:dev

editor/css/main.css

@@ -103,7 +103,7 @@ hr {
 
 	.TabbedPanel .Panels {
 		position: absolute;
-		top: 40px;
+		top: 36px;
 		display: block;
 		width: 100%;
 	}
@@ -303,7 +303,8 @@ hr {
 .Select {
 	color: #666;
 	background-color: #ddd;
-	border: 0px;
+	border: 3px solid #ddd;
+	border-radius: 4px;
 	text-transform: uppercase;
 	cursor: pointer;
 	outline: none;
@@ -318,7 +319,7 @@ hr {
 #resizer {
 	position: absolute;
 	z-index: 2; /* Above #sidebar */
-	top: 32px;
+	top: 36px;
 	right: 350px;
 	width: 5px;
 	bottom: 0px;
@@ -339,7 +340,7 @@ hr {
 
 #viewport {
 	position: absolute;
-	top: 32px;
+	top: 36px;
 	left: 0;
 	right: 350px;
 	bottom: 0;
@@ -352,7 +353,7 @@ hr {
 
 #script {
 	position: absolute;
-	top: 32px;
+	top: 36px;
 	left: 0;
 	right: 350px;
 	bottom: 0;
@@ -361,7 +362,7 @@ hr {
 
 #player {
 	position: absolute;
-	top: 32px;
+	top: 36px;
 	left: 0;
 	right: 350px;
 	bottom: 0;
@@ -370,7 +371,7 @@ hr {
 #menubar {
 	position: absolute;
 	width: 100%;
-	height: 32px;
+	height: 36px;
 	background: #eee;
 	padding: 0;
 	margin: 0;
@@ -395,7 +396,7 @@ hr {
 			display: inline-block;
 			color: #888;
 			margin: 0;
-			padding: 8px;
+			padding: 10px;
 			line-height: 16px;
 		}
 
@@ -406,6 +407,7 @@ hr {
 			border: 1px solid #ccc;
 			border-radius: 4px;
 			font-size: 9px;
+			line-height: normal;
 			padding: 2px 4px;
 			right: 10px;
 			pointer-events: none;
@@ -435,6 +437,7 @@ hr {
 				color: #666;
 				background-color: transparent;
 				padding: 5px 10px;
+				line-height: 25px;
 				margin: 0 !important;
 			}
 
@@ -472,6 +475,7 @@ hr {
 			color: #bbb;
 			background-color: transparent;
 			padding: 5px 10px;
+			line-height: 25px;
 			margin: 0 !important;
 			cursor: not-allowed;
 		}
@@ -481,7 +485,7 @@ hr {
 #sidebar {
 	position: absolute;
 	right: 0;
-	top: 32px;
+	top: 36px;
 	bottom: 0;
 	width: 350px;
 	background: #eee;
@@ -530,15 +534,26 @@ hr {
 
 #toolbar {
 	position: absolute;
-	left: 10px;
-	top: 42px;
-	width: 32px;
+	left: calc(50% - 175px);
+	transform: translateX(-50%);
+	bottom: 20px;
+	height: 32px;
 	background: #eee;
 	text-align: center;
+	display: flex;
+	align-items: center;
+	gap: 2px;
+	border-radius: 6px;
+	border: 3px solid #eee;
+	overflow: hidden;
 }
 
 	#toolbar .Button, #toolbar .Input {
 		height: 32px;
+		border-radius: 4px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 
 		#toolbar .Button img {
@@ -617,22 +632,22 @@ hr {
 	#viewport {
 		left: 0;
 		right: 0;
-		top: 32px;
-		height: calc(100% - 352px);
+		top: 36px;
+		height: calc(100% - 356px);
 	}
 
 	#script {
 		left: 0;
 		right: 0;
-		top: 32px;
-		height: calc(100% - 352px);
+		top: 36px;
+		height: calc(100% - 356px);
 	}
 
 	#player {
 		left: 0;
 		right: 0;
-		top: 32px;
-		height: calc(100% - 352px);
+		top: 36px;
+		height: calc(100% - 356px);
 	}
 
 	#sidebar {
@@ -642,6 +657,12 @@ hr {
 		bottom: 0;
 	}
 
+	#toolbar {
+		left: 50%;
+		transform: translateX(-50%);
+		bottom: 330px;
+	}
+
 }
 
 /* DARK MODE */
@@ -672,6 +693,7 @@ hr {
 	.Select {
 		color: #aaa;
 		background-color: #222;
+		border-color: #222;
 	}
 
 		.Select:hover {
@@ -734,6 +756,7 @@ hr {
 
 	#toolbar {
 		background-color: #111;
+		border-color: #111;
 	}
 
 		#toolbar img {

editor/index.html

@@ -16,6 +16,7 @@
 			{
 				"imports": {
 					"three": "../build/three.module.js",
+					"three/webgpu": "../build/three.webgpu.js",
 					"three/addons/": "../examples/jsm/",
 
 					"three/examples/": "../examples/",

editor/js/Config.js

@@ -15,10 +15,11 @@ function Config() {
 		'project/editable': false,
 		'project/vr': false,
 
+		'project/renderer/type': 'WebGLRenderer',
 		'project/renderer/antialias': true,
 		'project/renderer/shadows': true,
 		'project/renderer/shadowType': 1, // PCF
-		'project/renderer/toneMapping': 0, // NoToneMapping
+		'project/renderer/toneMapping': 7, // NeutralToneMapping
 		'project/renderer/toneMappingExposure': 1,
 
 		'settings/history': false,

editor/js/Editor.js

@@ -723,6 +723,7 @@ Editor.prototype = {
 
 			metadata: {},
 			project: {
+				renderer: this.config.getKey( 'project/renderer/type' ),
 				shadows: this.config.getKey( 'project/renderer/shadows' ),
 				shadowType: this.config.getKey( 'project/renderer/shadowType' ),
 				toneMapping: this.config.getKey( 'project/renderer/toneMapping' ),

editor/js/Menubar.Render.js

@@ -411,7 +411,7 @@ class RenderVideoDialog {
 		renderButton.onClick( async () => {
 
 			const player = new APP.Player();
-			player.load( editor.toJSON() );
+			await player.load( editor.toJSON() );
 			player.setPixelRatio( 1 );
 			player.setSize( videoWidth.getValue(), videoHeight.getValue() );
 

editor/js/Player.js

@@ -27,11 +27,11 @@ function Player( editor ) {
 
 	} );
 
-	signals.startPlayer.add( function () {
+	signals.startPlayer.add( async function () {
 
 		container.setDisplay( '' );
 
-		player.load( editor.toJSON() );
+		await player.load( editor.toJSON() );
 		player.setSize( container.dom.clientWidth, container.dom.clientHeight );
 		player.play();
 

editor/js/Sidebar.Project.Renderer.js

@@ -1,4 +1,5 @@
 import * as THREE from 'three';
+import { WebGPURenderer } from 'three/webgpu';
 
 import { UINumber, UIPanel, UIRow, UISelect, UIText } from './libs/ui.js';
 import { UIBoolean } from './libs/ui.three.js';
@@ -14,6 +15,20 @@ function SidebarProjectRenderer( editor ) {
 	const container = new UIPanel();
 	container.setBorderTop( '0px' );
 
+	// Renderer
+
+	const rendererRow = new UIRow();
+	container.add( rendererRow );
+
+	rendererRow.add( new UIText( strings.getKey( 'sidebar/project/renderer' ) ).setClass( 'Label' ) );
+
+	const rendererTypeSelect = new UISelect().setOptions( {
+		'WebGLRenderer': 'WebGL',
+		'WebGPURenderer': 'WebGPU'
+	} ).setWidth( '150px' ).onChange( createRenderer );
+	rendererTypeSelect.setValue( config.getKey( 'project/renderer/type' ) );
+	rendererRow.add( rendererTypeSelect );
+
 	// Antialias
 
 	const antialiasRow = new UIRow();
@@ -89,9 +104,22 @@ function SidebarProjectRenderer( editor ) {
 
 	//
 
-	function createRenderer() {
+	async function createRenderer() {
+
+		const rendererType = rendererTypeSelect.getValue();
+		const antialias = antialiasBoolean.getValue();
+
+		if ( rendererType === 'WebGPURenderer' ) {
+
+			currentRenderer = new WebGPURenderer( { antialias: antialias, logarithmicDepthBuffer: true } );
+			await currentRenderer.init();
+
+		} else {
+
+			currentRenderer = new THREE.WebGLRenderer( { antialias: antialias, logarithmicDepthBuffer: true } );
+
+		}
 
-		currentRenderer = new THREE.WebGLRenderer( { antialias: antialiasBoolean.getValue(), logarithmicDepthBuffer: true } );
 		currentRenderer.shadowMap.enabled = shadowsBoolean.getValue();
 		currentRenderer.shadowMap.type = parseFloat( shadowTypeSelect.getValue() );
 		currentRenderer.toneMapping = parseFloat( toneMappingSelect.getValue() );
@@ -111,7 +139,7 @@ function SidebarProjectRenderer( editor ) {
 
 		currentRenderer.shadowMap.enabled = true;
 		currentRenderer.shadowMap.type = THREE.PCFShadowMap;
-		currentRenderer.toneMapping = THREE.NoToneMapping;
+		currentRenderer.toneMapping = THREE.NeutralToneMapping;
 		currentRenderer.toneMappingExposure = 1;
 
 		shadowsBoolean.setValue( currentRenderer.shadowMap.enabled );
@@ -127,6 +155,7 @@ function SidebarProjectRenderer( editor ) {
 	signals.rendererUpdated.add( function () {
 
 		config.setKey(
+			'project/renderer/type', rendererTypeSelect.getValue(),
 			'project/renderer/antialias', antialiasBoolean.getValue(),
 			'project/renderer/shadows', shadowsBoolean.getValue(),
 			'project/renderer/shadowType', parseFloat( shadowTypeSelect.getValue() ),

editor/js/Strings.js

@@ -351,6 +351,7 @@ function Strings( config ) {
 			'sidebar/script/remove': 'حذف',
 
 			'sidebar/project': 'پروژه ها',
+			'sidebar/project/renderer': 'رندرر',
 			'sidebar/project/antialias': 'آنتی الآیس',
 			'sidebar/project/shadows': 'سایه ها',
 			'sidebar/project/toneMapping': 'تون مپینگ',
@@ -766,6 +767,7 @@ function Strings( config ) {
 			'sidebar/script/remove': 'Remove',
 
 			'sidebar/project': 'Project',
+			'sidebar/project/renderer': 'Renderer',
 			'sidebar/project/antialias': 'Antialias',
 			'sidebar/project/shadows': 'Shadows',
 			'sidebar/project/toneMapping': 'Tonemapping',
@@ -1182,6 +1184,7 @@ function Strings( config ) {
 			'sidebar/script/remove': 'Supprimer',
 
 			'sidebar/project': 'Projet',
+			'sidebar/project/renderer': 'Moteur',
 			'sidebar/project/antialias': 'Anticrénelage',
 			'sidebar/project/shadows': 'Ombres',
 			'sidebar/project/toneMapping': 'Mappage des nuances',
@@ -1598,6 +1601,7 @@ function Strings( config ) {
 			'sidebar/script/remove': '删除',
 
 			'sidebar/project': '项目',
+			'sidebar/project/renderer': '渲染器',
 			'sidebar/project/antialias': '抗锯齿',
 			'sidebar/project/shadows': '阴影',
 			'sidebar/project/toneMapping': '色调映射',
@@ -2014,6 +2018,7 @@ function Strings( config ) {
 			'sidebar/script/remove': '削除',
 
 			'sidebar/project': 'プロジェクト',
+			'sidebar/project/renderer': 'レンダラー',
 			'sidebar/project/antialias': 'アンチエイリアス',
 			'sidebar/project/shadows': 'シャドウ',
 			'sidebar/project/toneMapping': 'トーンマッピング',
@@ -2429,6 +2434,7 @@ function Strings( config ) {
 			'sidebar/script/remove': '삭제',
 
 			'sidebar/project': '프로젝트',
+			'sidebar/project/renderer': '렌더러',
 			'sidebar/project/antialias': '안티앨리어싱',
 			'sidebar/project/shadows': '그림자',
 			'sidebar/project/toneMapping': '톤 매핑',

editor/js/Toolbar.js

@@ -1,4 +1,4 @@
-import { UIPanel, UIButton, UICheckbox } from './libs/ui.js';
+import { UIPanel, UIButton } from './libs/ui.js';
 
 function Toolbar( editor ) {
 
@@ -50,15 +50,6 @@ function Toolbar( editor ) {
 	} );
 	container.add( scale );
 
-	const local = new UICheckbox( false );
-	local.dom.title = strings.getKey( 'toolbar/local' );
-	local.onChange( function () {
-
-		signals.spaceChanged.dispatch( this.getValue() === true ? 'local' : 'world' );
-
-	} );
-	container.add( local );
-
 	//
 
 	signals.transformModeChanged.add( function ( mode ) {

editor/js/Viewport.Controls.js

@@ -8,12 +8,10 @@ function ViewportControls( editor ) {
 	container.setPosition( 'absolute' );
 	container.setRight( '10px' );
 	container.setTop( '10px' );
-	container.setColor( '#ffffff' );
 
 	// camera
 
 	const cameraSelect = new UISelect();
-	cameraSelect.setMarginLeft( '10px' );
 	cameraSelect.setMarginRight( '10px' );
 	cameraSelect.onChange( function () {