Merge pull request #6674 from sebavan/WebGPU

Web gpu

Playground/babylon.d.txt

@@ -47125,7 +47125,62 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
-     * Display a 360 degree video on an approximately spherical surface, useful for VR applications or skyboxes.
+     * Contains position and normal vectors for a vertex
+     */
+    export class PositionNormalVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /**
+         * Creates a PositionNormalVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3);
+        /**
+         * Clones the PositionNormalVertex
+         * @returns the cloned PositionNormalVertex
+         */
+        clone(): PositionNormalVertex;
+    }
+    /**
+     * Contains position, normal and uv vectors for a vertex
+     */
+    export class PositionNormalTextureVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /** the uv of the vertex (default: 0,0) */
+        uv: Vector2;
+        /**
+         * Creates a PositionNormalTextureVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         * @param uv the uv of the vertex (default: 0,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3, 
+        /** the uv of the vertex (default: 0,0) */
+        uv?: Vector2);
+        /**
+         * Clones the PositionNormalTextureVertex
+         * @returns the cloned PositionNormalTextureVertex
+         */
+        clone(): PositionNormalTextureVertex;
+    }
+}
+declare module BABYLON {
+    /**
+     * Display a 360/180 degree video on an approximately spherical surface, useful for VR applications or skyboxes.
      * As a subclass of TransformNode, this allow parenting to the camera or multiple videos with different locations in the scene.
      * This class achieves its effect with a VideoTexture and a correctly configured BackgroundMaterial on an inverted sphere.
      * Potential additions to this helper include zoom and and non-infinite distance rendering effects.
@@ -47143,6 +47198,7 @@ declare module BABYLON {
          * Define the video source as a Stereoscopic Side by Side panoramic 360 video.
          */
         static readonly MODE_SIDEBYSIDE: number;
+        private _halfDome;
         private _useDirectMapping;
         /**
          * The video texture being displayed on the sphere
@@ -47161,6 +47217,10 @@ declare module BABYLON {
          */
         protected _mesh: Mesh;
         /**
+         * A mesh that will be used to mask the back of the video dome in case it is a 180 degree movie.
+         */
+        private _halfDomeMask;
+        /**
          * The current fov(field of view) multiplier, 0.0 - 2.0. Defaults to 1.0. Lower values "zoom in" and higher values "zoom out".
          * Also see the options.resolution property.
          */
@@ -47174,6 +47234,14 @@ declare module BABYLON {
          */
         videoMode: number;
         /**
+         * Is the video a 180 degrees video (half dome) or 360 video (full dome)
+         *
+         */
+        /**
+        * Set the halfDome mode. If set, only the front (180 degrees) will be displayed and the back will be blacked out.
+        */
+        halfDome: boolean;
+        /**
          * Oberserver used in Stereoscopic VR Mode.
          */
         private _onBeforeCameraRenderObserver;
@@ -47192,6 +47260,7 @@ declare module BABYLON {
             poster?: string;
             faceForward?: boolean;
             useDirectMapping?: boolean;
+            halfDomeMode?: boolean;
         }, scene: Scene);
         private _changeVideoMode;
         /**
@@ -51530,61 +51599,6 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
-     * Contains position and normal vectors for a vertex
-     */
-    export class PositionNormalVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /**
-         * Creates a PositionNormalVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3);
-        /**
-         * Clones the PositionNormalVertex
-         * @returns the cloned PositionNormalVertex
-         */
-        clone(): PositionNormalVertex;
-    }
-    /**
-     * Contains position, normal and uv vectors for a vertex
-     */
-    export class PositionNormalTextureVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /** the uv of the vertex (default: 0,0) */
-        uv: Vector2;
-        /**
-         * Creates a PositionNormalTextureVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         * @param uv the uv of the vertex (default: 0,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3, 
-        /** the uv of the vertex (default: 0,0) */
-        uv?: Vector2);
-        /**
-         * Clones the PositionNormalTextureVertex
-         * @returns the cloned PositionNormalTextureVertex
-         */
-        clone(): PositionNormalTextureVertex;
-    }
-}
-declare module BABYLON {
-    /**
      * Block used to expose an input value
      */
     export class InputBlock extends NodeMaterialBlock {

Playground/index.html

@@ -139,6 +139,7 @@
                 <div class="toDisplay">
                     <div class="option" onclick="setVersion('latest');">Latest</div>
                     <div class="option" onclick="setVersion('stable');">Stable</div>
+                    <div class="option" onclick="setVersion('webgpu');">WebGPU</div>
                 </div>
             </div>
             <div class="button select">
@@ -221,6 +222,7 @@
                         <div class="toDisplaySub">
                             <div class="option" onclick="setVersion('latest');">Latest</div>
                             <div class="option" onclick="setVersion('stable');">Stable</div>
+                            <div class="option" onclick="setVersion('webgpu');">WebGPU</div>
                         </div>
                     </div>
                 </div>
@@ -302,6 +304,7 @@
                         <div class="toDisplaySub">
                             <div class="option" onclick="setVersion('latest');">Latest</div>
                             <div class="option" onclick="setVersion('stable');">Stable</div>
+                            <div class="option" onclick="setVersion('webgpu');">WebGPU</div>
                         </div>
                     </div>
                 </div>
@@ -380,6 +383,7 @@
                         <div class="toDisplaySub">
                             <div class="option" onclick="setVersion('latest');">Latest</div>
                             <div class="option" onclick="setVersion('stable');">Stable</div>
+                            <div class="option" onclick="setVersion('webgpu');">WebGPU</div>
                         </div>
                     </div>
                 </div>

Playground/indexWebGPU-local.html

@@ -0,0 +1,469 @@
+<!DOCTYPE html>
+<html>
+
+
+<head>
+    <title>Babylon.js Playground WEBGPU</title>
+    <meta charset='utf-8' />
+    <meta name="viewport" content="width=device-width, user-scalable=no">
+    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
+    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
+
+    <!--For canvas/code separator-->
+    <script src="js/libs/split.js"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
+    <!-- jszip -->
+    <script src="js/libs/jszip.min.js"></script>
+    <script src="js/libs/fileSaver.js"></script>
+    <!-- Dependencies -->
+    <script src="../dist/preview%20release/ammo.js"></script>
+    <script src="../dist/preview%20release/recast.js"></script>
+    <script src="../dist/preview%20release/cannon.js"></script>
+    <script src="../dist/preview%20release/Oimo.js"></script>
+    <script src="../dist/preview%20release/gltf_validator.js"></script>
+    <script src="../dist/preview%20release/earcut.min.js"></script>
+    <!-- Monaco -->
+
+    <!-- Babylon.js -->
+    <script src="../Tools/DevLoader/BabylonLoader.js"></script>
+
+    <link href="css/index.css" rel="stylesheet" />
+</head>
+
+<body>
+    <div class="navbar navBar1600">
+        <div class="title">
+            Babylon.js Playground WEBGPU
+        </div>
+        <div class="version" id="mainTitle">
+        </div>
+
+        <div class="category">
+            <div class="button run" id="runButton1600">Run
+                <i class="fa fa-play" aria-hidden="true"></i>
+            </div>
+        </div>
+
+
+        <div class="category">
+            <div class="button" id="newButton1600">New
+                <i class="fa fa-file" aria-hidden="true"></i>
+            </div>
+            <div class="button removeOnPhone" id="clearButton1600">Clear
+                <i class="fa fa-trash" aria-hidden="true"></i>
+            </div>
+        </div>
+
+        <div class="category">
+            <div class="button" id="saveButton1600">Save
+                <i class="fa fa-floppy-o" aria-hidden="true"></i>
+            </div>
+        </div>
+
+        <div class="category">
+            <div class="button select">Settings
+                <div class="toDisplay">
+                    <div class="option subSelect">Theme
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="darkTheme1600">Dark</div>
+                            <div class="option" id="lightTheme1600">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect">
+                        <span id="currentFontSize1600">Font: 14</span>
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option" id="safemodeToggle1600">Safe mode
+                        <i class="far fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option checked" id="editorButton1600">Editor
+                        <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="fullscreenButton1600">Fullscreen</div>
+                    <div class="option" id="editorFullscreenButton1600">Editor Fullscreen</div>
+                    <div class="option" id="formatButton1600">Format code</div>
+                    <div class="option" id="minimapToggle1600">Minimap
+                        <i class="far fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" style="height:auto;padding: 20px;background: white;" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- <div class="button uncheck" id="debugButton1600">Inspector</div> -->
+            <div class="button" id="metadataButton1600">Metadata</div>
+        </div>
+
+
+
+        <div class="category right">
+            <div class="button select">
+                <span id="currentVersion1600">Version: Latest</span>
+                <div class="toDisplay">
+                    <div class="option" onclick="setVersion('latest');">Latest</div>
+                    <div class="option" onclick="setVersion('2.5');">2.5</div>
+                </div>
+            </div>
+            <div class="button select">
+                <span class="examplesButton">Examples</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="navbar navBar1475">
+        <div class="title">
+            Babylon.js Playground
+        </div>
+        <div class="version" id="mainTitle">
+        </div>
+
+        <div class="category">
+            <div class="button run" id="runButton1475">Run
+                <i class="fa fa-play" aria-hidden="true"></i>
+            </div>
+        </div>
+
+
+        <div class="category">
+            <div class="button" id="newButton1475">New
+                <i class="fa fa-file" aria-hidden="true"></i>
+            </div>
+            <div class="button removeOnPhone" id="clearButton1475">Clear
+                <i class="fa fa-trash" aria-hidden="true"></i>
+            </div>
+        </div>
+
+        <div class="category">
+            <div class="button" id="saveButton1475">Save
+                <i class="fa fa-floppy-o" aria-hidden="true"></i>
+            </div>
+        </div>
+
+        <div class="category">
+            <div class="button select">Settings
+                <div class="toDisplay">
+                    <div class="option subSelect">Theme
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="darkTheme1475">Dark</div>
+                            <div class="option" id="lightTheme1475">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect">
+                        <span id="currentFontSize1475">Font: 14</span>
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option" id='safemodeToggle1475'>Safe mode
+                        <i class="far fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option checked" id="editorButton1475">Editor
+                        <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="fullscreenButton1475">Fullscreen</div>
+                    <div class="option" id="editorFullscreenButton1475">Editor Fullscreen</div>
+                    <div class="option" id="formatButton1475">Format code</div>
+                    <div class="option" id="minimapToggle1475">Minimap
+                        <i class="far fa-square" aria-hidden="true"></i>
+                    </div>
+                    <!-- <div class="option" id="debugButton1475">Inspector</div> -->
+                    <div class="option" id="metadataButton1475">Metadata</div>
+                    <div class="option subSelect">
+                        <span id="currentVersion1475">Vers. : Latest</span>
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setVersion('latest');">Latest</div>
+                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="category right">
+            <div class="button select">
+                <span class="examplesButton">Examples</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="navbar navBar1030">
+        <div class="category">
+            <div class="button run" id="runButton1030">Run
+                <i class="fa fa-play" aria-hidden="true"></i>
+            </div>
+        </div>
+
+
+        <div class="category">
+            <div class="button" id="newButton1030">New
+                <i class="fa fa-file" aria-hidden="true"></i>
+            </div>
+            <div class="button removeOnPhone" id="clearButton1030">Clear
+                <i class="fa fa-trash" aria-hidden="true"></i>
+            </div>
+        </div>
+
+        <div class="category">
+            <div class="button" id="saveButton1030">Save
+                <i class="fa fa-floppy-o" aria-hidden="true"></i>
+            </div>
+        </div>
+
+        <div class="category">
+            <div class="button select">Settings
+                <div class="toDisplay">
+                    <div class="option subSelect">Theme
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="darkTheme1030">Dark</div>
+                            <div class="option" id="lightTheme1030">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect">
+                        <span id="currentFontSize1030">Font: 14</span>
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option" id="safemodeToggle1030">Safe mode
+                        <i class="far fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option checked" id="editorButton1030">Editor
+                        <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="fullscreenButton1030">Fullscreen</div>
+                    <div class="option" id="editorFullscreenButton1030">Editor Fullscreen</div>
+                    <div class="option" id="formatButton1030">Format code</div>
+                    <div class="option" id="minimapToggle1030">Minimap
+                        <i class="far fa-square" aria-hidden="true"></i>
+                    </div>
+                    <!-- <div class="option" id="debugButton1030">Inspector</div> -->
+                    <div class="option" id="metadataButton1030">Metadata</div>
+                    <div class="option subSelect">
+                        <span id="currentVersion1030">Vers. : Latest</span>
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setVersion('latest');">Latest</div>
+                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="category right">
+            <div class="button select">
+                <span class="examplesButton">Examples</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="navbar navBar750">
+        <div class="category">
+            <div class="button select">File
+                <div class="toDisplay">
+                    <div class="option" id="runButton750">Run
+                        <i class="fa fa-play" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="newButton750">New
+                        <i class="fa fa-file" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="clearButton750">Clear
+                        <i class="fa fa-trash" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="saveButton750">Save
+                        <i class="fa fa-floppy-o" aria-hidden="true"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="category">
+            <div class="button select">Settings
+                <div class="toDisplay">
+                    <div class="option subSelect">Theme
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="darkTheme750">Dark</div>
+                            <div class="option" id="lightTheme750">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect">
+                        <span id="currentFontSize750">Font: 14</span>
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option" id="safemodeToggle750">Safe mode
+                        <i class="far fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div style="display:none;" class="option checked" id="editorButton750">Editor
+                        <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="fullscreenButton750">Fullscreen</div>
+                    <div class="option" id="editorFullscreenButton750">Editor Fullscreen</div>
+                    <div class="option" id="formatButton750">Format code</div>
+                    <div class="option" id="minimapToggle750">Minimap
+                        <i class="far fa-square" aria-hidden="true"></i>
+                    </div>
+                    <!-- <div class="option" id="debugButton750">Inspector</div> -->
+                    <div class="option" id="metadataButton750">Metadata</div>
+                    <div class="option subSelect">
+                        <span id="currentVersion750">Vers. : Latest</span>
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setVersion('latest');">Latest</div>
+                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="category right">
+            <div class="button select">
+                <span class="examplesButton">Examples</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="wrapper">
+        <div id="jsEditor"></div>
+        <div id="canvasZone">
+            <canvas touch-action="none" id="renderCanvas"></canvas>
+        </div>
+    </div>
+    <div id="exampleList">
+        <div id="exampleBanner">
+            <h1>Examples</h1>
+        </div>
+        <div class="horizontalSeparator"></div>
+        <input id="filterBar" type="text" placeholder="Filter examples...">
+        <img id="filterBarClear"
+            src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
+    </div>
+
+    <span class="label" id="fpsLabel">FPS</span>
+
+    <div id="errorZone">
+    </div>
+
+    <div class="navbarBottom">
+        <div id="statusBar"></div>
+        <div class="links">
+            <div class='link'>
+                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
+            </div>
+        </div>
+    </div>
+
+    <div id="saveLayer" class="save-layer">
+        <div class="save-form">
+            <label for="saveFormTitle">TITLE</label>
+            <div class="separator"></div>
+            <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
+
+            <label for="saveFormDescription">DESCRIPTION</label>
+            <div class="separator"></div>
+            <textarea id="saveFormDescription" rows="4" cols="10"></textarea>
+
+            <label for="saveFormTags">TAGS (separated by comma)</label>
+            <div class="separator"></div>
+            <textarea id="saveFormTags" rows="4" cols="10"></textarea>
+
+            <div class="save-form-buttons" id="saveFormButtons">
+
+                <div id="saveFormButtonOk" class="button">OK</div>
+                <div id="saveFormButtonCancel" class="button">Cancel</div>
+            </div>
+        </div>
+    </div>
+
+    <div id="waitDiv">
+        <span id="waitTitle">Babylon.js Playground
+            <BR>
+            <BR>
+            <BR>
+        </span>
+        <div id="logo-part">
+            <img src="v4.svg" id="waitLogo" />
+            <img src="spinner.svg" id="waitSpinner" />
+        </div>
+    </div>
+
+    <script src="https://code.jquery.com/jquery.js"></script>
+    <script src="js/jquery.qrcode.js"></script>
+    <script src="js/qrcode.js"></script>
+
+    <script src="js/actions.js"></script>
+    <script src="js/pbt.js"></script>
+    
+    <script src="/dist/preview release/shaderc/shaderc.js"></script>
+
+    <script>
+        window.shadercOptions = { 
+            jsPath: "/dist/preview release/shaderc/shaderc.js",
+            wasmPath: "/dist/preview release/shaderc/shaderc.wasm"
+        };
+
+        BABYLONDEVTOOLS.Loader
+            .loadCoreOnly()
+            .require('node_modules/monaco-editor/min/vs/loader.js')
+            .require('js/indexWebGPU.js')
+            .load(function() {
+                BABYLON.DracoCompression.Configuration.decoder = {
+                    wasmUrl: "../dist/preview%20release/draco_wasm_wrapper_gltf.js",
+                    wasmBinaryUrl: "../dist/preview%20release/draco_decoder_gltf.wasm",
+                    fallbackUrl: "../dist/preview%20release/draco_decoder_gltf.js"
+                };
+            });
+    </script>
+</body>
+
+</html>

Playground/indexWebGPU.html

@@ -0,0 +1,473 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Babylon.js Playground</title>
+    <meta charset='utf-8' />
+    <meta name="viewport" content="width=device-width, user-scalable=no">
+    <link rel="shortcut icon" href="https://www.babylonjs.com/img/favicon/favicon.ico">
+    <link rel="manifest" href="https://www.babylonjs.com/img/favicon/manifest.json">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">
+    <meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">
+    <meta name="theme-color" content="#ffffff">
+    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
+
+    <script src="js/libs/pep.min.js"></script>
+    <!--For canvas/code separator-->
+    <script src="js/libs/split.js"></script>
+
+    <script src="js/libs/dat.gui.min.js"></script>
+    <!-- jszip -->
+    <script src="js/libs/jszip.min.js"></script>
+    <script src="js/libs/fileSaver.js"></script>
+    <!-- Dependencies -->
+    <script src="https://preview.babylonjs.com/ammo.js"></script>
+    <script src="https://preview.babylonjs.com/recast.js"></script>
+    <script src="https://preview.babylonjs.com/cannon.js"></script>
+    <script src="https://preview.babylonjs.com/Oimo.js"></script>
+    <script src="https://preview.babylonjs.com/gltf_validator.js"></script>
+    <script src="https://preview.babylonjs.com/earcut.min.js"></script>
+    <!-- Babylon.js -->
+    <script src="https://preview.babylonjs.com/shaderc/shaderc.js"></script>
+    <script src="https://preview.babylonjs.com/babylon.js"></script>
+    <!-- <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script> -->
+    <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
+    <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
+    <!-- <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
+    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script> -->
+    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
+    <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
+
+    <!-- Monaco -->
+    <script src="node_modules/monaco-editor/min/vs/loader.js"></script>
+
+    <!-- Extensions -->
+    <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js" async></script>
+    <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js"
+        async></script>
+
+    <!-- Scene Manager -->
+    <script src="https://mackeyk24.github.io/toolkit/babylon.manager.js"></script>
+    <script src="https://mackeyk24.github.io/toolkit/babylon.navmesh.js"></script>
+
+    <link href="css/index.css" rel="stylesheet" />
+</head>
+
+<body>
+    <div class="navbar navBar1600">
+        <div class="title">
+            Babylon.js Playground WEBGPU
+        </div>
+        <div class="version" id="mainTitle">
+        </div>
+
+        <div class="category">
+            <div class="button run" id="runButton1600">Run
+                <i class="fa fa-play" aria-hidden="true"></i>
+            </div>
+        </div>
+
+
+        <div class="category">
+            <div class="button" id="newButton1600">New
+                <i class="fa fa-file" aria-hidden="true"></i>
+            </div>
+            <div class="button removeOnPhone" id="clearButton1600">Clear
+                <i class="fa fa-trash" aria-hidden="true"></i>
+            </div>
+        </div>
+
+        <div class="category">
+            <div class="button" id="saveButton1600">Save
+                <i class="fa fa-floppy-o" aria-hidden="true"></i>
+            </div>
+        </div>
+
+        <div class="category">
+            <div class="button select">Settings
+                <div class="toDisplay">
+                    <div class="option subSelect">Theme
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="darkTheme1600">Dark</div>
+                            <div class="option" id="lightTheme1600">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect">
+                        <span id="currentFontSize1600">Font: 14</span>
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option" id="safemodeToggle1600">Safe mode
+                        <i class="far fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option checked" id="editorButton1600">Editor
+                        <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="fullscreenButton1600">Fullscreen</div>
+                    <div class="option" id="editorFullscreenButton1600">Editor Fullscreen</div>
+                    <div class="option" id="formatButton1600">Format code</div>
+                    <div class="option" id="minimapToggle1600">Minimap
+                        <i class="far fa-square" aria-hidden="true"></i>
+                    </div>
+                </div>
+            </div>
+
+            <!-- <div class="button uncheck" id="debugButton1600">Inspector</div> -->
+            <div class="button" id="metadataButton1600">Metadata</div>
+        </div>
+
+        <div class="category right">
+            <div class="button select">
+                <span id="currentVersion1600">Version: Latest</span>
+                <div class="toDisplay">
+                    <div class="option" onclick="setVersion('latest');">Latest</div>
+                    <div class="option" onclick="setVersion('stable');">Stable</div>
+                </div>
+            </div>
+            <div class="button select">
+                <span class="examplesButton">Examples</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="navbar navBar1475">
+        <div class="title">
+            Babylon.js Playground WEBGPU
+        </div>
+        <div class="version" id="mainTitle">
+        </div>
+
+        <div class="category">
+            <div class="button run" id="runButton1475">Run
+                <i class="fa fa-play" aria-hidden="true"></i>
+            </div>
+        </div>
+
+
+        <div class="category">
+            <div class="button" id="newButton1475">New
+                <i class="fa fa-file" aria-hidden="true"></i>
+            </div>
+            <div class="button removeOnPhone" id="clearButton1475">Clear
+                <i class="fa fa-trash" aria-hidden="true"></i>
+            </div>
+        </div>
+
+        <div class="category">
+            <div class="button" id="saveButton1475">Save
+                <i class="fa fa-floppy-o" aria-hidden="true"></i>
+            </div>
+        </div>
+
+        <div class="category">
+            <div class="button select">Settings
+                <div class="toDisplay">
+                    <div class="option subSelect">Theme
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="darkTheme1475">Dark</div>
+                            <div class="option" id="lightTheme1475">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect">
+                        <span id="currentFontSize1475">Font: 14</span>
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option" id='safemodeToggle1475'>Safe mode
+                        <i class="far fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option checked" id="editorButton1475">Editor
+                        <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="fullscreenButton1475">Fullscreen</div>
+                    <div class="option" id="editorFullscreenButton1475">Editor Fullscreen</div>
+                    <div class="option" id="formatButton1475">Format code</div>
+                    <div class="option" id="minimapToggle1475">Minimap
+                        <i class="far fa-square" aria-hidden="true"></i>
+                    </div>
+                    <!-- <div class="option" id="debugButton1475">Inspector</div> -->
+                    <div class="option" id="metadataButton1475">Metadata</div>
+                    <div class="option subSelect">
+                        <span id="currentVersion1475">Vers. : Latest</span>
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setVersion('latest');">Latest</div>
+                            <div class="option" onclick="setVersion('stable');">Stable</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" style="height:auto;padding: 20px;background: white;" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="category right">
+            <div class="button select">
+                <span class="examplesButton">Examples</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="navbar navBar1030">
+        <div class="category">
+            <div class="button run" id="runButton1030">Run
+                <i class="fa fa-play" aria-hidden="true"></i>
+            </div>
+        </div>
+
+
+        <div class="category">
+            <div class="button" id="newButton1030">New
+                <i class="fa fa-file" aria-hidden="true"></i>
+            </div>
+            <div class="button removeOnPhone" id="clearButton1030">Clear
+                <i class="fa fa-trash" aria-hidden="true"></i>
+            </div>
+        </div>
+
+        <div class="category">
+            <div class="button" id="saveButton1030">Save
+                <i class="fa fa-floppy-o" aria-hidden="true"></i>
+            </div>
+        </div>
+
+        <div class="category">
+            <div class="button select">Settings
+                <div class="toDisplay">
+                    <div class="option subSelect">Theme
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="darkTheme1030">Dark</div>
+                            <div class="option" id="lightTheme1030">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect">
+                        <span id="currentFontSize1030">Font: 14</span>
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option" id="safemodeToggle1030">Safe mode
+                        <i class="far fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option checked" id="editorButton1030">Editor
+                        <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="fullscreenButton1030">Fullscreen</div>
+                    <div class="option" id="editorFullscreenButton1030">Editor Fullscreen</div>
+                    <div class="option" id="formatButton1030">Format code</div>
+                    <div class="option" id="minimapToggle1030">Minimap
+                        <i class="far fa-square" aria-hidden="true"></i>
+                    </div>
+                    <!-- <div class="option" id="debugButton1030">Inspector</div> -->
+                    <div class="option" id="metadataButton1030">Metadata</div>
+                    <div class="option subSelect">
+                        <span id="currentVersion1030">Vers. : Latest</span>
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setVersion('latest');">Latest</div>
+                            <div class="option" onclick="setVersion('stable');">Stable</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="category right">
+            <div class="button select">
+                <span class="examplesButton">Examples</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="navbar navBar750">
+        <div class="category">
+            <div class="button select">File
+                <div class="toDisplay">
+                    <div class="option" id="runButton750">Run
+                        <i class="fa fa-play" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="newButton750">New
+                        <i class="fa fa-file" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="clearButton750">Clear
+                        <i class="fa fa-trash" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="saveButton750">Save
+                        <i class="fa fa-floppy-o" aria-hidden="true"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="category">
+            <div class="button select">Settings
+                <div class="toDisplay">
+                    <div class="option subSelect">Theme
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="darkTheme750">Dark</div>
+                            <div class="option" id="lightTheme750">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect">
+                        <span id="currentFontSize750">Font: 14</span>
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option" id="safemodeToggle750">Safe mode
+                        <i class="far fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div style="display:none;" class="option checked" id="editorButton750">Editor
+                        <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="fullscreenButton750">Fullscreen</div>
+                    <div class="option" id="editorFullscreenButton750">Editor Fullscreen</div>
+                    <div class="option" id="formatButton750">Format code</div>
+                    <div class="option" id="minimapToggle750">Minimap
+                        <i class="far fa-square" aria-hidden="true"></i>
+                    </div>
+                    <!-- <div class="option" id="debugButton750">Inspector</div> -->
+                    <div class="option" id="metadataButton750">Metadata</div>
+                    <div class="option subSelect">
+                        <span id="currentVersion750">Vers. : Latest</span>
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setVersion('latest');">Latest</div>
+                            <div class="option" onclick="setVersion('stable');">Stable</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="category right">
+            <div class="button select">
+                <span class="examplesButton">Examples</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="wrapper">
+        <div id="jsEditor"></div>
+        <div id="canvasZone">
+            <canvas touch-action="none" id="renderCanvas"></canvas>
+        </div>
+    </div>
+    <div id="exampleList">
+        <div id="exampleBanner">
+            <h1>Examples</h1>
+        </div>
+        <div class="horizontalSeparator"></div>
+        <input id="filterBar" type="text" placeholder="Filter examples...">
+        <img id="filterBarClear"
+            src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
+    </div>
+
+    <span class="label" id="fpsLabel">FPS</span>
+
+    <div id="errorZone">
+    </div>
+
+    <div class="navbarBottom">
+        <div id="statusBar"></div>
+        <div class="links">
+            <div class='link'>
+                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
+            </div>
+        </div>
+    </div>
+
+    <div id="saveLayer" class="save-layer">
+        <div class="save-form">
+            <label for="saveFormTitle">TITLE</label>
+            <div class="separator"></div>
+            <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
+
+            <label for="saveFormDescription">DESCRIPTION</label>
+            <div class="separator"></div>
+            <textarea id="saveFormDescription" rows="4" cols="10"></textarea>
+
+            <label for="saveFormTags">TAGS (separated by comma)</label>
+            <div class="separator"></div>
+            <textarea id="saveFormTags" rows="4" cols="10"></textarea>
+
+            <div class="save-form-buttons" id="saveFormButtons">
+
+                <div id="saveFormButtonOk" class="button">OK</div>
+                <div id="saveFormButtonCancel" class="button">Cancel</div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://code.jquery.com/jquery.js"></script>
+    <script src="js/jquery.qrcode.js"></script>
+    <script src="js/qrcode.js"></script>
+
+    <script>
+        Split(['#jsEditor', '#canvasZone']);
+    </script>
+
+    <script src="js/actions.js"></script>
+    <script src="js/pbt.js"></script>
+    <script src="js/indexWebGPU.js"></script>
+
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-41767310-2"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+
+        gtag('config', 'UA-41767310-2');
+    </script>
+</body>
+
+</html>

Playground/js/index.js

@@ -835,6 +835,9 @@ function showError(errorMessage, errorEvent) {
                 case "stable":
                     location.href = "indexStable.html" + location.hash;
                     break;
+                case "webgpu":
+                    location.href = "indexWebGPU.html" + location.hash;
+                    break;
                 default:
                     location.href = "index.html" + location.hash;
                     break;

dist/preview release/babylon.d.ts

@@ -47888,7 +47888,62 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
-     * Display a 360 degree video on an approximately spherical surface, useful for VR applications or skyboxes.
+     * Contains position and normal vectors for a vertex
+     */
+    export class PositionNormalVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /**
+         * Creates a PositionNormalVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3);
+        /**
+         * Clones the PositionNormalVertex
+         * @returns the cloned PositionNormalVertex
+         */
+        clone(): PositionNormalVertex;
+    }
+    /**
+     * Contains position, normal and uv vectors for a vertex
+     */
+    export class PositionNormalTextureVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /** the uv of the vertex (default: 0,0) */
+        uv: Vector2;
+        /**
+         * Creates a PositionNormalTextureVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         * @param uv the uv of the vertex (default: 0,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3, 
+        /** the uv of the vertex (default: 0,0) */
+        uv?: Vector2);
+        /**
+         * Clones the PositionNormalTextureVertex
+         * @returns the cloned PositionNormalTextureVertex
+         */
+        clone(): PositionNormalTextureVertex;
+    }
+}
+declare module BABYLON {
+    /**
+     * Display a 360/180 degree video on an approximately spherical surface, useful for VR applications or skyboxes.
      * As a subclass of TransformNode, this allow parenting to the camera or multiple videos with different locations in the scene.
      * This class achieves its effect with a VideoTexture and a correctly configured BackgroundMaterial on an inverted sphere.
      * Potential additions to this helper include zoom and and non-infinite distance rendering effects.
@@ -47906,6 +47961,7 @@ declare module BABYLON {
          * Define the video source as a Stereoscopic Side by Side panoramic 360 video.
          */
         static readonly MODE_SIDEBYSIDE: number;
+        private _halfDome;
         private _useDirectMapping;
         /**
          * The video texture being displayed on the sphere
@@ -47924,6 +47980,10 @@ declare module BABYLON {
          */
         protected _mesh: Mesh;
         /**
+         * A mesh that will be used to mask the back of the video dome in case it is a 180 degree movie.
+         */
+        private _halfDomeMask;
+        /**
          * The current fov(field of view) multiplier, 0.0 - 2.0. Defaults to 1.0. Lower values "zoom in" and higher values "zoom out".
          * Also see the options.resolution property.
          */
@@ -47937,6 +47997,14 @@ declare module BABYLON {
          */
         videoMode: number;
         /**
+         * Is the video a 180 degrees video (half dome) or 360 video (full dome)
+         *
+         */
+        /**
+        * Set the halfDome mode. If set, only the front (180 degrees) will be displayed and the back will be blacked out.
+        */
+        halfDome: boolean;
+        /**
          * Oberserver used in Stereoscopic VR Mode.
          */
         private _onBeforeCameraRenderObserver;
@@ -47955,6 +48023,7 @@ declare module BABYLON {
             poster?: string;
             faceForward?: boolean;
             useDirectMapping?: boolean;
+            halfDomeMode?: boolean;
         }, scene: Scene);
         private _changeVideoMode;
         /**
@@ -52331,61 +52400,6 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
-     * Contains position and normal vectors for a vertex
-     */
-    export class PositionNormalVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /**
-         * Creates a PositionNormalVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3);
-        /**
-         * Clones the PositionNormalVertex
-         * @returns the cloned PositionNormalVertex
-         */
-        clone(): PositionNormalVertex;
-    }
-    /**
-     * Contains position, normal and uv vectors for a vertex
-     */
-    export class PositionNormalTextureVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /** the uv of the vertex (default: 0,0) */
-        uv: Vector2;
-        /**
-         * Creates a PositionNormalTextureVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         * @param uv the uv of the vertex (default: 0,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3, 
-        /** the uv of the vertex (default: 0,0) */
-        uv?: Vector2);
-        /**
-         * Clones the PositionNormalTextureVertex
-         * @returns the cloned PositionNormalTextureVertex
-         */
-        clone(): PositionNormalTextureVertex;
-    }
-}
-declare module BABYLON {
-    /**
      * Block used to expose an input value
      */
     export class InputBlock extends NodeMaterialBlock {

dist/preview release/babylon.module.d.ts

@@ -49949,6 +49949,74 @@ declare module "babylonjs/Helpers/sceneHelpers" {
         }
     }
 }
+declare module "babylonjs/Maths/math.vertexFormat" {
+    import { Vector3, Vector2 } from "babylonjs/Maths/math.vector";
+    /**
+     * Contains position and normal vectors for a vertex
+     */
+    export class PositionNormalVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /**
+         * Creates a PositionNormalVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3);
+        /**
+         * Clones the PositionNormalVertex
+         * @returns the cloned PositionNormalVertex
+         */
+        clone(): PositionNormalVertex;
+    }
+    /**
+     * Contains position, normal and uv vectors for a vertex
+     */
+    export class PositionNormalTextureVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /** the uv of the vertex (default: 0,0) */
+        uv: Vector2;
+        /**
+         * Creates a PositionNormalTextureVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         * @param uv the uv of the vertex (default: 0,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3, 
+        /** the uv of the vertex (default: 0,0) */
+        uv?: Vector2);
+        /**
+         * Clones the PositionNormalTextureVertex
+         * @returns the cloned PositionNormalTextureVertex
+         */
+        clone(): PositionNormalTextureVertex;
+    }
+}
+declare module "babylonjs/Maths/math" {
+    export * from "babylonjs/Maths/math.axis";
+    export * from "babylonjs/Maths/math.color";
+    export * from "babylonjs/Maths/math.constants";
+    export * from "babylonjs/Maths/math.frustum";
+    export * from "babylonjs/Maths/math.path";
+    export * from "babylonjs/Maths/math.plane";
+    export * from "babylonjs/Maths/math.size";
+    export * from "babylonjs/Maths/math.vector";
+    export * from "babylonjs/Maths/math.vertexFormat";
+    export * from "babylonjs/Maths/math.viewport";
+}
 declare module "babylonjs/Helpers/videoDome" {
     import { Scene } from "babylonjs/scene";
     import { TransformNode } from "babylonjs/Meshes/transformNode";
@@ -49957,7 +50025,7 @@ declare module "babylonjs/Helpers/videoDome" {
     import { BackgroundMaterial } from "babylonjs/Materials/Background/backgroundMaterial";
     import "babylonjs/Meshes/Builders/sphereBuilder";
     /**
-     * Display a 360 degree video on an approximately spherical surface, useful for VR applications or skyboxes.
+     * Display a 360/180 degree video on an approximately spherical surface, useful for VR applications or skyboxes.
      * As a subclass of TransformNode, this allow parenting to the camera or multiple videos with different locations in the scene.
      * This class achieves its effect with a VideoTexture and a correctly configured BackgroundMaterial on an inverted sphere.
      * Potential additions to this helper include zoom and and non-infinite distance rendering effects.
@@ -49975,6 +50043,7 @@ declare module "babylonjs/Helpers/videoDome" {
          * Define the video source as a Stereoscopic Side by Side panoramic 360 video.
          */
         static readonly MODE_SIDEBYSIDE: number;
+        private _halfDome;
         private _useDirectMapping;
         /**
          * The video texture being displayed on the sphere
@@ -49993,6 +50062,10 @@ declare module "babylonjs/Helpers/videoDome" {
          */
         protected _mesh: Mesh;
         /**
+         * A mesh that will be used to mask the back of the video dome in case it is a 180 degree movie.
+         */
+        private _halfDomeMask;
+        /**
          * The current fov(field of view) multiplier, 0.0 - 2.0. Defaults to 1.0. Lower values "zoom in" and higher values "zoom out".
          * Also see the options.resolution property.
          */
@@ -50006,6 +50079,14 @@ declare module "babylonjs/Helpers/videoDome" {
          */
         videoMode: number;
         /**
+         * Is the video a 180 degrees video (half dome) or 360 video (full dome)
+         *
+         */
+        /**
+        * Set the halfDome mode. If set, only the front (180 degrees) will be displayed and the back will be blacked out.
+        */
+        halfDome: boolean;
+        /**
          * Oberserver used in Stereoscopic VR Mode.
          */
         private _onBeforeCameraRenderObserver;
@@ -50024,6 +50105,7 @@ declare module "babylonjs/Helpers/videoDome" {
             poster?: string;
             faceForward?: boolean;
             useDirectMapping?: boolean;
+            halfDomeMode?: boolean;
         }, scene: Scene);
         private _changeVideoMode;
         /**
@@ -54750,74 +54832,6 @@ declare module "babylonjs/Materials/Node/nodeMaterialWellKnownValues" {
         FogColor = 8
     }
 }
-declare module "babylonjs/Maths/math.vertexFormat" {
-    import { Vector3, Vector2 } from "babylonjs/Maths/math.vector";
-    /**
-     * Contains position and normal vectors for a vertex
-     */
-    export class PositionNormalVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /**
-         * Creates a PositionNormalVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3);
-        /**
-         * Clones the PositionNormalVertex
-         * @returns the cloned PositionNormalVertex
-         */
-        clone(): PositionNormalVertex;
-    }
-    /**
-     * Contains position, normal and uv vectors for a vertex
-     */
-    export class PositionNormalTextureVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /** the uv of the vertex (default: 0,0) */
-        uv: Vector2;
-        /**
-         * Creates a PositionNormalTextureVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         * @param uv the uv of the vertex (default: 0,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3, 
-        /** the uv of the vertex (default: 0,0) */
-        uv?: Vector2);
-        /**
-         * Clones the PositionNormalTextureVertex
-         * @returns the cloned PositionNormalTextureVertex
-         */
-        clone(): PositionNormalTextureVertex;
-    }
-}
-declare module "babylonjs/Maths/math" {
-    export * from "babylonjs/Maths/math.axis";
-    export * from "babylonjs/Maths/math.color";
-    export * from "babylonjs/Maths/math.constants";
-    export * from "babylonjs/Maths/math.frustum";
-    export * from "babylonjs/Maths/math.path";
-    export * from "babylonjs/Maths/math.plane";
-    export * from "babylonjs/Maths/math.size";
-    export * from "babylonjs/Maths/math.vector";
-    export * from "babylonjs/Maths/math.vertexFormat";
-    export * from "babylonjs/Maths/math.viewport";
-}
 declare module "babylonjs/Materials/Node/Blocks/Input/inputBlock" {
     import { NodeMaterialBlock } from "babylonjs/Materials/Node/nodeMaterialBlock";
     import { NodeMaterialBlockConnectionPointTypes } from "babylonjs/Materials/Node/nodeMaterialBlockConnectionPointTypes";
@@ -112121,7 +112135,62 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
-     * Display a 360 degree video on an approximately spherical surface, useful for VR applications or skyboxes.
+     * Contains position and normal vectors for a vertex
+     */
+    export class PositionNormalVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /**
+         * Creates a PositionNormalVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3);
+        /**
+         * Clones the PositionNormalVertex
+         * @returns the cloned PositionNormalVertex
+         */
+        clone(): PositionNormalVertex;
+    }
+    /**
+     * Contains position, normal and uv vectors for a vertex
+     */
+    export class PositionNormalTextureVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /** the uv of the vertex (default: 0,0) */
+        uv: Vector2;
+        /**
+         * Creates a PositionNormalTextureVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         * @param uv the uv of the vertex (default: 0,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3, 
+        /** the uv of the vertex (default: 0,0) */
+        uv?: Vector2);
+        /**
+         * Clones the PositionNormalTextureVertex
+         * @returns the cloned PositionNormalTextureVertex
+         */
+        clone(): PositionNormalTextureVertex;
+    }
+}
+declare module BABYLON {
+    /**
+     * Display a 360/180 degree video on an approximately spherical surface, useful for VR applications or skyboxes.
      * As a subclass of TransformNode, this allow parenting to the camera or multiple videos with different locations in the scene.
      * This class achieves its effect with a VideoTexture and a correctly configured BackgroundMaterial on an inverted sphere.
      * Potential additions to this helper include zoom and and non-infinite distance rendering effects.
@@ -112139,6 +112208,7 @@ declare module BABYLON {
          * Define the video source as a Stereoscopic Side by Side panoramic 360 video.
          */
         static readonly MODE_SIDEBYSIDE: number;
+        private _halfDome;
         private _useDirectMapping;
         /**
          * The video texture being displayed on the sphere
@@ -112157,6 +112227,10 @@ declare module BABYLON {
          */
         protected _mesh: Mesh;
         /**
+         * A mesh that will be used to mask the back of the video dome in case it is a 180 degree movie.
+         */
+        private _halfDomeMask;
+        /**
          * The current fov(field of view) multiplier, 0.0 - 2.0. Defaults to 1.0. Lower values "zoom in" and higher values "zoom out".
          * Also see the options.resolution property.
          */
@@ -112170,6 +112244,14 @@ declare module BABYLON {
          */
         videoMode: number;
         /**
+         * Is the video a 180 degrees video (half dome) or 360 video (full dome)
+         *
+         */
+        /**
+        * Set the halfDome mode. If set, only the front (180 degrees) will be displayed and the back will be blacked out.
+        */
+        halfDome: boolean;
+        /**
          * Oberserver used in Stereoscopic VR Mode.
          */
         private _onBeforeCameraRenderObserver;
@@ -112188,6 +112270,7 @@ declare module BABYLON {
             poster?: string;
             faceForward?: boolean;
             useDirectMapping?: boolean;
+            halfDomeMode?: boolean;
         }, scene: Scene);
         private _changeVideoMode;
         /**
@@ -116564,61 +116647,6 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
-     * Contains position and normal vectors for a vertex
-     */
-    export class PositionNormalVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /**
-         * Creates a PositionNormalVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3);
-        /**
-         * Clones the PositionNormalVertex
-         * @returns the cloned PositionNormalVertex
-         */
-        clone(): PositionNormalVertex;
-    }
-    /**
-     * Contains position, normal and uv vectors for a vertex
-     */
-    export class PositionNormalTextureVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /** the uv of the vertex (default: 0,0) */
-        uv: Vector2;
-        /**
-         * Creates a PositionNormalTextureVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         * @param uv the uv of the vertex (default: 0,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3, 
-        /** the uv of the vertex (default: 0,0) */
-        uv?: Vector2);
-        /**
-         * Clones the PositionNormalTextureVertex
-         * @returns the cloned PositionNormalTextureVertex
-         */
-        clone(): PositionNormalTextureVertex;
-    }
-}
-declare module BABYLON {
-    /**
      * Block used to expose an input value
      */
     export class InputBlock extends NodeMaterialBlock {

dist/preview release/documentation.d.ts

@@ -47888,7 +47888,62 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
-     * Display a 360 degree video on an approximately spherical surface, useful for VR applications or skyboxes.
+     * Contains position and normal vectors for a vertex
+     */
+    export class PositionNormalVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /**
+         * Creates a PositionNormalVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3);
+        /**
+         * Clones the PositionNormalVertex
+         * @returns the cloned PositionNormalVertex
+         */
+        clone(): PositionNormalVertex;
+    }
+    /**
+     * Contains position, normal and uv vectors for a vertex
+     */
+    export class PositionNormalTextureVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /** the uv of the vertex (default: 0,0) */
+        uv: Vector2;
+        /**
+         * Creates a PositionNormalTextureVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         * @param uv the uv of the vertex (default: 0,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3, 
+        /** the uv of the vertex (default: 0,0) */
+        uv?: Vector2);
+        /**
+         * Clones the PositionNormalTextureVertex
+         * @returns the cloned PositionNormalTextureVertex
+         */
+        clone(): PositionNormalTextureVertex;
+    }
+}
+declare module BABYLON {
+    /**
+     * Display a 360/180 degree video on an approximately spherical surface, useful for VR applications or skyboxes.
      * As a subclass of TransformNode, this allow parenting to the camera or multiple videos with different locations in the scene.
      * This class achieves its effect with a VideoTexture and a correctly configured BackgroundMaterial on an inverted sphere.
      * Potential additions to this helper include zoom and and non-infinite distance rendering effects.
@@ -47906,6 +47961,7 @@ declare module BABYLON {
          * Define the video source as a Stereoscopic Side by Side panoramic 360 video.
          */
         static readonly MODE_SIDEBYSIDE: number;
+        private _halfDome;
         private _useDirectMapping;
         /**
          * The video texture being displayed on the sphere
@@ -47924,6 +47980,10 @@ declare module BABYLON {
          */
         protected _mesh: Mesh;
         /**
+         * A mesh that will be used to mask the back of the video dome in case it is a 180 degree movie.
+         */
+        private _halfDomeMask;
+        /**
          * The current fov(field of view) multiplier, 0.0 - 2.0. Defaults to 1.0. Lower values "zoom in" and higher values "zoom out".
          * Also see the options.resolution property.
          */
@@ -47937,6 +47997,14 @@ declare module BABYLON {
          */
         videoMode: number;
         /**
+         * Is the video a 180 degrees video (half dome) or 360 video (full dome)
+         *
+         */
+        /**
+        * Set the halfDome mode. If set, only the front (180 degrees) will be displayed and the back will be blacked out.
+        */
+        halfDome: boolean;
+        /**
          * Oberserver used in Stereoscopic VR Mode.
          */
         private _onBeforeCameraRenderObserver;
@@ -47955,6 +48023,7 @@ declare module BABYLON {
             poster?: string;
             faceForward?: boolean;
             useDirectMapping?: boolean;
+            halfDomeMode?: boolean;
         }, scene: Scene);
         private _changeVideoMode;
         /**
@@ -52331,61 +52400,6 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
-     * Contains position and normal vectors for a vertex
-     */
-    export class PositionNormalVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /**
-         * Creates a PositionNormalVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3);
-        /**
-         * Clones the PositionNormalVertex
-         * @returns the cloned PositionNormalVertex
-         */
-        clone(): PositionNormalVertex;
-    }
-    /**
-     * Contains position, normal and uv vectors for a vertex
-     */
-    export class PositionNormalTextureVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /** the uv of the vertex (default: 0,0) */
-        uv: Vector2;
-        /**
-         * Creates a PositionNormalTextureVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         * @param uv the uv of the vertex (default: 0,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3, 
-        /** the uv of the vertex (default: 0,0) */
-        uv?: Vector2);
-        /**
-         * Clones the PositionNormalTextureVertex
-         * @returns the cloned PositionNormalTextureVertex
-         */
-        clone(): PositionNormalTextureVertex;
-    }
-}
-declare module BABYLON {
-    /**
      * Block used to expose an input value
      */
     export class InputBlock extends NodeMaterialBlock {

dist/preview release/viewer/babylon.module.d.ts

@@ -49949,6 +49949,74 @@ declare module "babylonjs/Helpers/sceneHelpers" {
         }
     }
 }
+declare module "babylonjs/Maths/math.vertexFormat" {
+    import { Vector3, Vector2 } from "babylonjs/Maths/math.vector";
+    /**
+     * Contains position and normal vectors for a vertex
+     */
+    export class PositionNormalVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /**
+         * Creates a PositionNormalVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3);
+        /**
+         * Clones the PositionNormalVertex
+         * @returns the cloned PositionNormalVertex
+         */
+        clone(): PositionNormalVertex;
+    }
+    /**
+     * Contains position, normal and uv vectors for a vertex
+     */
+    export class PositionNormalTextureVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /** the uv of the vertex (default: 0,0) */
+        uv: Vector2;
+        /**
+         * Creates a PositionNormalTextureVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         * @param uv the uv of the vertex (default: 0,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3, 
+        /** the uv of the vertex (default: 0,0) */
+        uv?: Vector2);
+        /**
+         * Clones the PositionNormalTextureVertex
+         * @returns the cloned PositionNormalTextureVertex
+         */
+        clone(): PositionNormalTextureVertex;
+    }
+}
+declare module "babylonjs/Maths/math" {
+    export * from "babylonjs/Maths/math.axis";
+    export * from "babylonjs/Maths/math.color";
+    export * from "babylonjs/Maths/math.constants";
+    export * from "babylonjs/Maths/math.frustum";
+    export * from "babylonjs/Maths/math.path";
+    export * from "babylonjs/Maths/math.plane";
+    export * from "babylonjs/Maths/math.size";
+    export * from "babylonjs/Maths/math.vector";
+    export * from "babylonjs/Maths/math.vertexFormat";
+    export * from "babylonjs/Maths/math.viewport";
+}
 declare module "babylonjs/Helpers/videoDome" {
     import { Scene } from "babylonjs/scene";
     import { TransformNode } from "babylonjs/Meshes/transformNode";
@@ -49957,7 +50025,7 @@ declare module "babylonjs/Helpers/videoDome" {
     import { BackgroundMaterial } from "babylonjs/Materials/Background/backgroundMaterial";
     import "babylonjs/Meshes/Builders/sphereBuilder";
     /**
-     * Display a 360 degree video on an approximately spherical surface, useful for VR applications or skyboxes.
+     * Display a 360/180 degree video on an approximately spherical surface, useful for VR applications or skyboxes.
      * As a subclass of TransformNode, this allow parenting to the camera or multiple videos with different locations in the scene.
      * This class achieves its effect with a VideoTexture and a correctly configured BackgroundMaterial on an inverted sphere.
      * Potential additions to this helper include zoom and and non-infinite distance rendering effects.
@@ -49975,6 +50043,7 @@ declare module "babylonjs/Helpers/videoDome" {
          * Define the video source as a Stereoscopic Side by Side panoramic 360 video.
          */
         static readonly MODE_SIDEBYSIDE: number;
+        private _halfDome;
         private _useDirectMapping;
         /**
          * The video texture being displayed on the sphere
@@ -49993,6 +50062,10 @@ declare module "babylonjs/Helpers/videoDome" {
          */
         protected _mesh: Mesh;
         /**
+         * A mesh that will be used to mask the back of the video dome in case it is a 180 degree movie.
+         */
+        private _halfDomeMask;
+        /**
          * The current fov(field of view) multiplier, 0.0 - 2.0. Defaults to 1.0. Lower values "zoom in" and higher values "zoom out".
          * Also see the options.resolution property.
          */
@@ -50006,6 +50079,14 @@ declare module "babylonjs/Helpers/videoDome" {
          */
         videoMode: number;
         /**
+         * Is the video a 180 degrees video (half dome) or 360 video (full dome)
+         *
+         */
+        /**
+        * Set the halfDome mode. If set, only the front (180 degrees) will be displayed and the back will be blacked out.
+        */
+        halfDome: boolean;
+        /**
          * Oberserver used in Stereoscopic VR Mode.
          */
         private _onBeforeCameraRenderObserver;
@@ -50024,6 +50105,7 @@ declare module "babylonjs/Helpers/videoDome" {
             poster?: string;
             faceForward?: boolean;
             useDirectMapping?: boolean;
+            halfDomeMode?: boolean;
         }, scene: Scene);
         private _changeVideoMode;
         /**
@@ -54750,74 +54832,6 @@ declare module "babylonjs/Materials/Node/nodeMaterialWellKnownValues" {
         FogColor = 8
     }
 }
-declare module "babylonjs/Maths/math.vertexFormat" {
-    import { Vector3, Vector2 } from "babylonjs/Maths/math.vector";
-    /**
-     * Contains position and normal vectors for a vertex
-     */
-    export class PositionNormalVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /**
-         * Creates a PositionNormalVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3);
-        /**
-         * Clones the PositionNormalVertex
-         * @returns the cloned PositionNormalVertex
-         */
-        clone(): PositionNormalVertex;
-    }
-    /**
-     * Contains position, normal and uv vectors for a vertex
-     */
-    export class PositionNormalTextureVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /** the uv of the vertex (default: 0,0) */
-        uv: Vector2;
-        /**
-         * Creates a PositionNormalTextureVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         * @param uv the uv of the vertex (default: 0,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3, 
-        /** the uv of the vertex (default: 0,0) */
-        uv?: Vector2);
-        /**
-         * Clones the PositionNormalTextureVertex
-         * @returns the cloned PositionNormalTextureVertex
-         */
-        clone(): PositionNormalTextureVertex;
-    }
-}
-declare module "babylonjs/Maths/math" {
-    export * from "babylonjs/Maths/math.axis";
-    export * from "babylonjs/Maths/math.color";
-    export * from "babylonjs/Maths/math.constants";
-    export * from "babylonjs/Maths/math.frustum";
-    export * from "babylonjs/Maths/math.path";
-    export * from "babylonjs/Maths/math.plane";
-    export * from "babylonjs/Maths/math.size";
-    export * from "babylonjs/Maths/math.vector";
-    export * from "babylonjs/Maths/math.vertexFormat";
-    export * from "babylonjs/Maths/math.viewport";
-}
 declare module "babylonjs/Materials/Node/Blocks/Input/inputBlock" {
     import { NodeMaterialBlock } from "babylonjs/Materials/Node/nodeMaterialBlock";
     import { NodeMaterialBlockConnectionPointTypes } from "babylonjs/Materials/Node/nodeMaterialBlockConnectionPointTypes";
@@ -112121,7 +112135,62 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
-     * Display a 360 degree video on an approximately spherical surface, useful for VR applications or skyboxes.
+     * Contains position and normal vectors for a vertex
+     */
+    export class PositionNormalVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /**
+         * Creates a PositionNormalVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3);
+        /**
+         * Clones the PositionNormalVertex
+         * @returns the cloned PositionNormalVertex
+         */
+        clone(): PositionNormalVertex;
+    }
+    /**
+     * Contains position, normal and uv vectors for a vertex
+     */
+    export class PositionNormalTextureVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /** the uv of the vertex (default: 0,0) */
+        uv: Vector2;
+        /**
+         * Creates a PositionNormalTextureVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         * @param uv the uv of the vertex (default: 0,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3, 
+        /** the uv of the vertex (default: 0,0) */
+        uv?: Vector2);
+        /**
+         * Clones the PositionNormalTextureVertex
+         * @returns the cloned PositionNormalTextureVertex
+         */
+        clone(): PositionNormalTextureVertex;
+    }
+}
+declare module BABYLON {
+    /**
+     * Display a 360/180 degree video on an approximately spherical surface, useful for VR applications or skyboxes.
      * As a subclass of TransformNode, this allow parenting to the camera or multiple videos with different locations in the scene.
      * This class achieves its effect with a VideoTexture and a correctly configured BackgroundMaterial on an inverted sphere.
      * Potential additions to this helper include zoom and and non-infinite distance rendering effects.
@@ -112139,6 +112208,7 @@ declare module BABYLON {
          * Define the video source as a Stereoscopic Side by Side panoramic 360 video.
          */
         static readonly MODE_SIDEBYSIDE: number;
+        private _halfDome;
         private _useDirectMapping;
         /**
          * The video texture being displayed on the sphere
@@ -112157,6 +112227,10 @@ declare module BABYLON {
          */
         protected _mesh: Mesh;
         /**
+         * A mesh that will be used to mask the back of the video dome in case it is a 180 degree movie.
+         */
+        private _halfDomeMask;
+        /**
          * The current fov(field of view) multiplier, 0.0 - 2.0. Defaults to 1.0. Lower values "zoom in" and higher values "zoom out".
          * Also see the options.resolution property.
          */
@@ -112170,6 +112244,14 @@ declare module BABYLON {
          */
         videoMode: number;
         /**
+         * Is the video a 180 degrees video (half dome) or 360 video (full dome)
+         *
+         */
+        /**
+        * Set the halfDome mode. If set, only the front (180 degrees) will be displayed and the back will be blacked out.
+        */
+        halfDome: boolean;
+        /**
          * Oberserver used in Stereoscopic VR Mode.
          */
         private _onBeforeCameraRenderObserver;
@@ -112188,6 +112270,7 @@ declare module BABYLON {
             poster?: string;
             faceForward?: boolean;
             useDirectMapping?: boolean;
+            halfDomeMode?: boolean;
         }, scene: Scene);
         private _changeVideoMode;
         /**
@@ -116564,61 +116647,6 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
-     * Contains position and normal vectors for a vertex
-     */
-    export class PositionNormalVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /**
-         * Creates a PositionNormalVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3);
-        /**
-         * Clones the PositionNormalVertex
-         * @returns the cloned PositionNormalVertex
-         */
-        clone(): PositionNormalVertex;
-    }
-    /**
-     * Contains position, normal and uv vectors for a vertex
-     */
-    export class PositionNormalTextureVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /** the uv of the vertex (default: 0,0) */
-        uv: Vector2;
-        /**
-         * Creates a PositionNormalTextureVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         * @param uv the uv of the vertex (default: 0,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3, 
-        /** the uv of the vertex (default: 0,0) */
-        uv?: Vector2);
-        /**
-         * Clones the PositionNormalTextureVertex
-         * @returns the cloned PositionNormalTextureVertex
-         */
-        clone(): PositionNormalTextureVertex;
-    }
-}
-declare module BABYLON {
-    /**
      * Block used to expose an input value
      */
     export class InputBlock extends NodeMaterialBlock {

localDevWebGPU/index.html

@@ -11,7 +11,6 @@
     <script src="../dist/preview%20release/ammo.js"></script>
     <script src="../dist/preview%20release/gltf_validator.js"></script>
     <script src="../Tools/DevLoader/BabylonLoader.js"></script>
-    <script src="../dist/preview%20release/shaderc/shaderc.js"></script>
 
     <style>
         html,
@@ -129,15 +128,16 @@
                     }
 
                     var shadercOptions = { 
-                        wasmBinaryFile: "/dist/preview release/Shaderc/shaderc.wasm"
+                        jsPath: "/dist/preview release/shaderc/shaderc.js",
+                        wasmPath: "/dist/preview release/shaderc/shaderc.wasm"
                     };
 
                     if (typeof createEngine !== "undefined") {
                         engine = createEngine();
-                        engine.initEngineAsync(shadercOptions).then(() => onLoad(engine));
+                        engine.initAsync(shadercOptions).then(() => onLoad(engine));
                     } else {
                         engine = new BABYLON.WebGPUEngine(canvas);
-                        engine.initEngineAsync(shadercOptions).then(() => onLoad(engine));
+                        engine.initAsync(shadercOptions).then(() => onLoad(engine));
                     }
 
                     // BABYLONDEVTOOLS.Loader.debugShortcut(engine);

src/Engines/WebGPU/webgpuConstants.ts

@@ -145,8 +145,8 @@ export class WebGPUConstants {
     public static readonly GPUTextureAspect_stencilOnly: GPUTextureAspect = "stencil-only";
 
     public static readonly GPUTextureUsage_NONE = 0;
-    public static readonly GPUTextureUsage_TRANSFER_SRC = 1;
-    public static readonly GPUTextureUsage_TRANSFER_DST = 2;
+    public static readonly GPUTextureUsage_COPY_SRC = 1;
+    public static readonly GPUTextureUsage_COPY_DST = 2;
     public static readonly GPUTextureUsage_SAMPLED = 4;
     public static readonly GPUTextureUsage_STORAGE = 8;
     public static readonly GPUTextureUsage_OUTPUT_ATTACHMENT = 16;

src/Engines/webgpuEngine.ts

@@ -22,6 +22,25 @@ import { IShaderProcessor } from "./Processors/iShaderProcessor";
 import { WebGPUShaderProcessor } from "./WebGPU/webgpuShaderProcessors";
 import { ShaderProcessingContext } from "./Processors/shaderProcessingOptions";
 import { WebGPUShaderProcessingContext } from "./WebGPU/webgpuShaderProcessingContext";
+import { Tools } from "../Misc/tools";
+
+/**
+ * Options to load the associated Shaderc library
+ */
+export interface ShadercOptions {
+    /**
+     * Defines an existing instance of shaderC (usefull in modules who do not access the global instance).
+     */
+    shaderc?: any;
+    /**
+     * Defines the URL of the shaderc JS File.
+     */
+    jsPath?: string;
+    /**
+     * Defines the URL of the shaderc WASM File.
+     */
+    wasmPath?: string;
+}
 
 /**
  * Options to create the WebGPU engine
@@ -67,19 +86,29 @@ export interface WebGPUEngineOptions extends GPURequestAdapterOptions {
      * Defines the requested Swap Chain Format.
      */
     swapChainFormat?: GPUTextureFormat;
+
+    /**
+     * Defines wether MSAA is enabled on the canvas.
+     */
+    antialiasing?: boolean;
 }
 
 /**
  * The web GPU engine class provides support for WebGPU version of babylon.js.
  */
 export class WebGPUEngine extends Engine {
+    // Default shaderc options.
+    private static readonly _shadercDefaultOptions: ShadercOptions = {
+        jsPath: "http://preview.babylonjs.com/shaderc/shaderc.js",
+        wasmPath: "http://preview.babylonjs.com/shaderc/shaderc.wasm"
+    };
+
     // Page Life cycle and constants
     private readonly _uploadEncoderDescriptor = { label: "upload" };
     private readonly _renderEncoderDescriptor = { label: "render" };
-    private readonly _blitDescriptor = { label: "upload" };
     private readonly _clearDepthValue = 1;
     private readonly _clearStencilValue = 0;
-    private readonly _defaultSampleCount = 1;
+    private readonly _defaultSampleCount = 4; // Only supported value for now.
 
     // Engine Life Cycle
     private _canvas: HTMLCanvasElement;
@@ -89,13 +118,13 @@ export class WebGPUEngine extends Engine {
     private _device: GPUDevice;
     private _context: GPUCanvasContext;
     private _swapChain: GPUSwapChain;
+    private _mainPassSampleCount: number;
 
     // Some of the internal state might change during the render pass.
     // This happens mainly during clear for the state
     // And when the frame starts to swap the target texture from the swap chain
     private _mainTexture: GPUTexture;
     private _depthTexture: GPUTexture;
-    private _mainTextureCopyView: GPUTextureCopyView;
     private _mainColorAttachments: GPURenderPassColorAttachmentDescriptor[];
     private _mainTextureExtends: GPUExtent3D;
     private _mainDepthAttachment: GPURenderPassDepthStencilAttachmentDescriptor;
@@ -103,7 +132,6 @@ export class WebGPUEngine extends Engine {
     // Frame Life Cycle (recreated each frame)
     private _uploadEncoder: GPUCommandEncoder;
     private _renderEncoder: GPUCommandEncoder;
-    private _blitEncoder: GPUCommandEncoder;
 
     private _commandBuffers: GPUCommandBuffer[] = [null as any, null as any];
 
@@ -159,6 +187,7 @@ export class WebGPUEngine extends Engine {
 
         options.deviceDescriptor = options.deviceDescriptor || { };
         options.swapChainFormat = options.swapChainFormat || WebGPUConstants.GPUTextureFormat_bgra8unorm;
+        options.antialiasing = options.antialiasing === undefined ? true : options.antialiasing;
 
         this._decodeEngine.getCaps().textureFloat = false;
         this._decodeEngine.getCaps().textureFloatRender = false;
@@ -194,8 +223,8 @@ export class WebGPUEngine extends Engine {
         this._canvas = canvas;
         this._options = options;
 
-        // TODO WEBGPU. RESIZE and SCALING.
         this._hardwareScalingLevel = 1;
+        this._mainPassSampleCount = options.antialiasing ? this._defaultSampleCount : 1;
 
         this._sharedInit(canvas, !!options.doNotHandleTouchAction, options.audioEngine);
     }
@@ -209,9 +238,8 @@ export class WebGPUEngine extends Engine {
      * @param shadercOptions Defines the ShaderC compiler options if necessary
      * @returns a promise notifying the readiness of the engine.
      */
-    public initEngineAsync(shadercOptions: any = null): Promise<void> {
-        // TODO WEBGPU. Rename to initAsync.
-        return (window as any).Shaderc(shadercOptions)
+    public initAsync(shadercOptions?: ShadercOptions): Promise<void> {
+        return this._initShaderc(shadercOptions)
             .then((shaderc: any) => {
                 this._shaderc = shaderc;
                 return navigator.gpu!.requestAdapter(this._options);
@@ -234,6 +262,35 @@ export class WebGPUEngine extends Engine {
             });
     }
 
+    private _initShaderc(shadercOptions?: ShadercOptions): Promise<any> {
+        shadercOptions = shadercOptions || { };
+        shadercOptions = {
+            ...WebGPUEngine._shadercDefaultOptions,
+            ...shadercOptions
+        };
+
+        if (shadercOptions.shaderc) {
+            return Promise.resolve(shadercOptions.shaderc);
+        }
+
+        const wasmOptions = {
+            wasmBinaryFile: shadercOptions!.wasmPath
+        };
+
+        if ((window as any).Shaderc) {
+            return (window as any).Shaderc(wasmOptions);
+        }
+
+        if (shadercOptions.jsPath && shadercOptions.wasmPath) {
+            return Tools.LoadScriptAsync(shadercOptions.jsPath)
+                .then(() => {
+                    return (window as any).Shaderc(wasmOptions);
+                });
+        }
+
+        return Promise.reject("shaderc is not available.");
+    }
+
     private _initializeLimits(): void {
         // Init caps
         // TODO WEBGPU Real Capability check once limits will be working.
@@ -290,12 +347,11 @@ export class WebGPUEngine extends Engine {
         this._swapChain = this._context.configureSwapChain({
             device: this._device,
             format: this._options.swapChainFormat!,
-            usage: WebGPUConstants.GPUTextureUsage_TRANSFER_DST,
+            usage: WebGPUConstants.GPUTextureUsage_OUTPUT_ATTACHMENT | WebGPUConstants.GPUTextureUsage_COPY_SRC,
         });
     }
 
     // Set default values as WebGL with depth and stencil attachment for the broadest Compat.
-    // TODO WEBGPU. Reinit on resize.
     private _initializeMainAttachments(): void {
         this._mainTextureExtends = {
             width: this.getRenderWidth(),
@@ -303,46 +359,43 @@ export class WebGPUEngine extends Engine {
             depth: 1
         };
 
-        const mainTextureDescriptor = {
-            size: this._mainTextureExtends,
-            arrayLayerCount: 1,
-            mipLevelCount: 1,
-            sampleCount: this._defaultSampleCount,
-            dimension: WebGPUConstants.GPUTextureDimension_2d,
-            format: WebGPUConstants.GPUTextureFormat_bgra8unorm,
-            usage: WebGPUConstants.GPUTextureUsage_OUTPUT_ATTACHMENT | WebGPUConstants.GPUTextureUsage_TRANSFER_SRC,
-        };
+        if (this._options.antialiasing) {
+            const mainTextureDescriptor = {
+                size: this._mainTextureExtends,
+                arrayLayerCount: 1,
+                mipLevelCount: 1,
+                sampleCount: this._mainPassSampleCount,
+                dimension: WebGPUConstants.GPUTextureDimension_2d,
+                format: WebGPUConstants.GPUTextureFormat_bgra8unorm,
+                usage: WebGPUConstants.GPUTextureUsage_OUTPUT_ATTACHMENT,
+            };
 
-        if (this._mainTexture) {
-            this._mainTexture.destroy();
+            if (this._mainTexture) {
+                this._mainTexture.destroy();
+            }
+            this._mainTexture = this._device.createTexture(mainTextureDescriptor);
+            this._mainColorAttachments = [{
+                attachment: this._mainTexture.createDefaultView(),
+                loadValue: new Color4(0, 0, 0, 1),
+                storeOp: WebGPUConstants.GPUStoreOp_store
+            }];
+        }
+        else {
+            this._mainColorAttachments = [{
+                attachment: this._swapChain.getCurrentTexture().createDefaultView(),
+                loadValue: new Color4(0, 0, 0, 1),
+                storeOp: WebGPUConstants.GPUStoreOp_store
+            }];
         }
-        this._mainTexture = this._device.createTexture(mainTextureDescriptor);
-        const mainTextureView = this._mainTexture.createDefaultView();
-        this._mainTextureCopyView = {
-            texture: this._mainTexture,
-            origin: {
-                x: 0,
-                y: 0,
-                z: 0
-            },
-            mipLevel: 0,
-            arrayLayer: 0,
-        };
-
-        this._mainColorAttachments = [{
-            attachment: mainTextureView,
-            loadValue: new Color4(0, 0, 0, 1),
-            storeOp: WebGPUConstants.GPUStoreOp_store
-        }];
 
         const depthTextureDescriptor = {
             size: this._mainTextureExtends,
             arrayLayerCount: 1,
             mipLevelCount: 1,
-            sampleCount: this._defaultSampleCount,
+            sampleCount: this._mainPassSampleCount,
             dimension: WebGPUConstants.GPUTextureDimension_2d,
             format: WebGPUConstants.GPUTextureFormat_depth24plusStencil8,
-            usage: WebGPUConstants.GPUTextureUsage_OUTPUT_ATTACHMENT
+            usage:  WebGPUConstants.GPUTextureUsage_OUTPUT_ATTACHMENT
         };
 
         if (this._depthTexture) {
@@ -1160,7 +1213,7 @@ export class WebGPUEngine extends Engine {
                 mipLevelCount: noMipmap ? 1 : mipMaps + 1,
                 sampleCount: 1,
                 size: textureExtent,
-                usage: WebGPUConstants.GPUTextureUsage_TRANSFER_DST | WebGPUConstants.GPUTextureUsage_SAMPLED
+                usage: WebGPUConstants.GPUTextureUsage_COPY_DST | WebGPUConstants.GPUTextureUsage_SAMPLED
             };
 
             const gpuTexture = this._device.createTexture(textureDescriptor);
@@ -1239,7 +1292,7 @@ export class WebGPUEngine extends Engine {
                 mipLevelCount: noMipmap ? 1 : mipMaps + 1,
                 sampleCount: 1,
                 size: textureExtent,
-                usage: WebGPUConstants.GPUTextureUsage_TRANSFER_DST | WebGPUConstants.GPUTextureUsage_SAMPLED
+                usage: WebGPUConstants.GPUTextureUsage_COPY_DST | WebGPUConstants.GPUTextureUsage_SAMPLED
             };
 
             const gpuTexture = this._device.createTexture(textureDescriptor);
@@ -1407,7 +1460,6 @@ export class WebGPUEngine extends Engine {
 
         this._uploadEncoder = this._device.createCommandEncoder(this._uploadEncoderDescriptor);
         this._renderEncoder = this._device.createCommandEncoder(this._renderEncoderDescriptor);
-        this._blitEncoder = this._device.createCommandEncoder(this._blitDescriptor);
     }
 
     private _freezeCommands: boolean = false;
@@ -1438,20 +1490,6 @@ export class WebGPUEngine extends Engine {
             this._frozenCommands[1] = this._commandBuffers[1];
         }
 
-        // TODO WEBGPU. GC.
-        this._blitEncoder.copyTextureToTexture(this._mainTextureCopyView, {
-                texture: this._swapChain.getCurrentTexture(),
-                origin: {
-                    x: 0,
-                    y: 0,
-                    z: 0
-                },
-                mipLevel: 0,
-                arrayLayer: 0,
-            },
-            this._mainTextureExtends);
-        this._commandBuffers[2] = this._blitEncoder.finish();
-
         this._device.getQueue().submit(this._commandBuffers);
 
         super.endFrame();
@@ -1482,7 +1520,13 @@ export class WebGPUEngine extends Engine {
             this._endRenderPass();
         }
 
-        // this._mainColorAttachments[0].attachment = this._swapChain.getCurrentTexture().createDefaultView();
+        // Resolve in case of MSAA
+        if (this._options.antialiasing) {
+            this._mainColorAttachments[0].resolveTarget = this._swapChain.getCurrentTexture().createDefaultView();
+        }
+        else {
+            this._mainColorAttachments[0].attachment = this._swapChain.getCurrentTexture().createDefaultView();
+        }
 
         this._currentRenderPass = this._renderEncoder.beginRenderPass({
             colorAttachments: this._mainColorAttachments,
@@ -2061,7 +2105,6 @@ export class WebGPUEngine extends Engine {
         }
 
         // Unsupported at the moment but needs to be extracted from the MSAA param.
-        const sampleCount = this._defaultSampleCount;
         const topology = this._getTopology(fillMode);
         const rasterizationStateDescriptor = this._getRasterizationStateDescriptor();
         const depthStateDescriptor = this._getDepthStencilStateDescriptor();
@@ -2071,7 +2114,7 @@ export class WebGPUEngine extends Engine {
         const pipelineLayout = this._getPipelineLayout();
 
         gpuPipeline.renderPipeline = this._device.createRenderPipeline({
-            sampleCount,
+            sampleCount: this._mainPassSampleCount,
             primitiveTopology: topology,
             rasterizationState: rasterizationStateDescriptor,
             depthStencilState: depthStateDescriptor,