Editor: Retain viewport color when rendering images/videos. (#32866)

Author: Mugen87

editor/js/Editor.js

@@ -134,6 +134,7 @@ function Editor() {
 
 	this.viewportCamera = this.camera;
 	this.viewportShading = 'default';
+	this.viewportColor = new THREE.Color();
 
 	this.addCamera( this.camera );
 

editor/js/Menubar.Render.js

@@ -210,6 +210,7 @@ class RenderImageDialog {
 
 			const renderer = new THREE.WebGLRenderer( { antialias: true, logarithmicDepthBuffer: true } );
 			renderer.setSize( imageWidth.getValue(), imageHeight.getValue() );
+			renderer.setClearColor( editor.viewportColor );
 
 			if ( project.shadows !== undefined ) renderer.shadowMap.enabled = project.shadows;
 			if ( project.shadowType !== undefined ) renderer.shadowMap.type = project.shadowType;
@@ -414,6 +415,7 @@ class RenderVideoDialog {
 			await player.load( editor.toJSON() );
 			player.setPixelRatio( 1 );
 			player.setSize( videoWidth.getValue(), videoHeight.getValue() );
+			player.setClearColor( editor.viewportColor );
 
 			//
 

editor/js/Viewport.js

@@ -385,6 +385,8 @@ function Viewport( editor ) {
 
 		}
 
+		renderer.getClearColor( editor.viewportColor );
+
 		renderer.setPixelRatio( window.devicePixelRatio );
 		renderer.setSize( container.dom.offsetWidth, container.dom.offsetHeight );
 

editor/js/libs/app.js

@@ -142,6 +142,12 @@ const APP = {
 
 		};
 
+		this.setClearColor = function ( color ) {
+
+			renderer.setClearColor( color );
+
+		};
+
 		this.setSize = function ( width, height ) {
 
 			this.width = width;