Merge pull request #6822 from 13djwright/master

Create option to Render Screenshot

dist/preview release/what's new.md

@@ -54,6 +54,7 @@
 - Texture channels are now displayed in grayscale ([Deltakosh](https://github.com/deltakosh/))
 - Ambiant and metallic maps are displayed correctly on PBR material even when using ORM packed texture ([Deltakosh](https://github.com/deltakosh/))
 - Added support for inspectable strings ([Deltakosh](https://github.com/deltakosh/))
+- Added support for CreateScreenshotUsingRenderTarget ([13djwright](https://github.com/13djwright/))
 
 ### Tools
 - Added `Tools.CreateScreenshotAsync` and `Tools.CreateScreenshotUsingRenderTargetAsync` ([mehmetoguzderin](https://github.com/mehmetoguzderin/))

inspector/src/components/actionTabs/tabs/toolsTabComponent.tsx

@@ -18,10 +18,15 @@ import { Mesh } from "babylonjs/Meshes/mesh";
 import { GLTFComponent } from "./tools/gltfComponent";
 
 import { GLTFData, GLTF2Export } from "babylonjs-serializers/glTF/2.0/index";
+import { FloatLineComponent } from '../lines/floatLineComponent';
+import { IScreenshotSize } from 'babylonjs/Misc/interfaces/screenshotSize';
+import { NumericInputComponent } from '../lines/numericInputComponent';
+import { CheckBoxLineComponent } from '../lines/checkBoxLineComponent';
 
 export class ToolsTabComponent extends PaneComponent {
     private _videoRecorder: Nullable<VideoRecorder>;
-
+    private _screenShotSize: IScreenshotSize = { precision: 1 };
+    private _useWidthHeight = false;
     constructor(props: IPaneComponentProps) {
         super(props);
 
@@ -47,8 +52,25 @@ export class ToolsTabComponent extends PaneComponent {
     captureScreenshot() {
         const scene = this.props.scene;
         if (scene.activeCamera) {
-            Tools.CreateScreenshot(scene.getEngine(), scene.activeCamera, { precision: 1.0 });
+            Tools.CreateScreenshot(scene.getEngine(), scene.activeCamera, this._screenShotSize);
+        }
+    }
+
+    captureRender() {
+        const scene = this.props.scene;
+        const oldScreenshotSize: IScreenshotSize = {
+            height: this._screenShotSize.height,
+            width: this._screenShotSize.width,
+            precision: this._screenShotSize.precision
+        };
+        if (!this._useWidthHeight) {
+            this._screenShotSize.width = undefined;
+            this._screenShotSize.height = undefined;
+        }
+        if (scene.activeCamera) {
+            Tools.CreateScreenshotUsingRenderTarget(scene.getEngine(), scene.activeCamera, this._screenShotSize);
         }
+        this._screenShotSize = oldScreenshotSize;
     }
 
     recordVideo() {
@@ -136,6 +158,26 @@ export class ToolsTabComponent extends PaneComponent {
                 <LineContainerComponent globalState={this.props.globalState} title="CAPTURE">
                     <ButtonLineComponent label="Screenshot" onClick={() => this.captureScreenshot()} />
                     <ButtonLineComponent label={this.state.tag} onClick={() => this.recordVideo()} />
+                    <ButtonLineComponent label="Render" onClick={() => this.captureRender()} />
+                    <LineContainerComponent globalState={this.props.globalState} title="RENDER SETTINGS">
+                        <div className="vector3Line">
+                            <FloatLineComponent label="Precision" target={this._screenShotSize} propertyName='precision' onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                            <CheckBoxLineComponent label="Use Width/Height" onSelect={ value => {
+                                this._useWidthHeight = value;
+                                this.forceUpdate();
+                            }
+                            } isSelected={() => this._useWidthHeight} />
+                            {
+                            this._useWidthHeight &&
+                            <div className="secondLine">
+                                <NumericInputComponent label="Width" step={1} value={this._screenShotSize.width ? this._screenShotSize.width : 512} onChange={value => this._screenShotSize.width = value} />
+                                <NumericInputComponent label="Height" step={1} value={this._screenShotSize.height ? this._screenShotSize.height : 512} onChange={value => this._screenShotSize.height = value} />
+                            </div>
+                            }
+                            
+                        </div>
+                    </LineContainerComponent>
+
                 </LineContainerComponent>
                 <LineContainerComponent globalState={this.props.globalState} title="REPLAY">
                     <ButtonLineComponent label="Generate replay code" onClick={() => this.exportReplay()} />

src/Misc/index.ts

@@ -40,3 +40,4 @@ export * from "./fileRequest";
 export * from "./customAnimationFrameRequester";
 export * from "./retryStrategy";
 export * from "./loadFileError";
+export * from "./interfaces/screenshotSize";