Viewer Configurator: Add json output + save/load snippet (#16447)

This change introduces two new configurator features:
1. The ability to save/load the current state (to/from snippet server).
See https://forum.babylonjs.com/t/babylon-viewer-v2/54317/65

![image](https://github.com/user-attachments/assets/bd33db53-3c56-4524-ac07-2be32947b4f8)

![image](https://github.com/user-attachments/assets/116bc8c6-d014-47cd-aa7e-7dd52e0c2dd8)

1. The ability to output to json, which can in turn be passed into any
of the Viewer layers as the `ViewerOptions` (making the configurator
useful even if you aren't using the html layer).

![image](https://github.com/user-attachments/assets/0a12b30a-36d6-428b-95fe-590f7219dffe)

Changes to enable this:
- Add format dropdown to choose between html and json (html by default).
- Improve camera pose management.
- Pass an additional `initialConfiguredState` to `useConfiguration`
(comes from the loaded config/options).
- Use loaded options and default options in all calls to
`useConfiguration`.
- Add the ability to save the current configuration (as `ViewerOptions`)
to snippet server and encode into the url like other Babylon tools.
- Add the ability to load a configuration from snippet server (via url)
and use it with `ConfigureCustomViewerElement` to determine the initial
state of the Viewer within the Configurator.

Also fixed a small bug where environment intensity and rotation were not
output if the skybox was disabled.

Author: ryantrem

packages/tools/viewer-configurator/src/App.tsx

@@ -1,4 +1,5 @@
 import type { FunctionComponent } from "react";
+import type { ViewerOptions } from "viewer/viewer";
 import type { ViewerElement } from "viewer/viewerElement";
 
 import "./App.scss";
@@ -11,16 +12,21 @@ import { Configurator } from "./components/configurator/configurator";
 import { useEventfulState } from "./hooks/observableHooks";
 
 export const App: FunctionComponent = () => {
+    const [viewerOptions, setViewerOptions] = useState<ViewerOptions>();
     const [viewerElement, setViewerElement] = useState<ViewerElement>();
     const viewerDetails = useEventfulState(() => viewerElement?.viewerDetails, viewerElement, "viewerready");
     const viewer = useMemo(() => viewerDetails?.viewer, [viewerDetails]);
 
     return (
         <>
             <SplitContainer className="appContainer" direction={SplitDirection.Horizontal}>
-                <Viewer onViewerCreated={setViewerElement} />
+                <Viewer onViewerCreated={setViewerElement} onOptionsLoaded={setViewerOptions} />
                 <Splitter size={8} minSize={300} initialSize={400} maxSize={600} controlledSide={ControlledSize.Second} />
-                <div>{viewerElement && viewerDetails && viewer && <Configurator viewerElement={viewerElement} viewerDetails={viewerDetails} viewer={viewer} />}</div>
+                <div>
+                    {viewerOptions && viewerElement && viewerDetails && viewer && (
+                        <Configurator viewerOptions={viewerOptions} viewerElement={viewerElement} viewerDetails={viewerDetails} viewer={viewer} />
+                    )}
+                </div>
             </SplitContainer>
             <div className="blocker">Viewer Configurator needs a horizontal resolution of at least 900px</div>
         </>

packages/tools/viewer-configurator/src/components/babylonViewer/viewer.tsx

@@ -1,6 +1,9 @@
-import "./viewer.scss";
-import type { FunctionComponent } from "react";
+import type { ViewerOptions } from "viewer/viewer";
 import type { ViewerElement } from "viewer/viewerElement";
+import "./viewer.scss";
+import { useEffect, type FunctionComponent } from "react";
+import { Logger } from "core/Misc/logger";
+import { ConfigureCustomViewerElement } from "viewer/viewerElement";
 import "viewer";
 
 interface HTML3DElementAttributes extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
@@ -16,11 +19,30 @@ declare global {
         // eslint-disable-next-line @typescript-eslint/naming-convention
         interface IntrinsicElements {
             // eslint-disable-next-line @typescript-eslint/naming-convention
-            "babylon-viewer": HTML3DElementAttributes;
+            "configured-babylon-viewer": HTML3DElementAttributes;
         }
     }
 }
 
-export const Viewer: FunctionComponent<{ onViewerCreated: (viewerElement: ViewerElement) => void }> = (props) => {
-    return <babylon-viewer class="viewerElement" ref={props.onViewerCreated}></babylon-viewer>;
+export const Viewer: FunctionComponent<{ onViewerCreated: (element: ViewerElement) => void; onOptionsLoaded: (options: ViewerOptions) => void }> = (props) => {
+    useEffect(() => {
+        (async () => {
+            let options: ViewerOptions = {};
+            if (window.location.hash) {
+                try {
+                    const id = window.location.hash.substring(1).replace("#", "/");
+                    const response = await fetch(`https://snippet.babylonjs.com/${id}`);
+                    options = JSON.parse((await response.json()).jsonPayload);
+                } catch (error: unknown) {
+                    Logger.Error(`Failed to load snippet from URL: ${error}`);
+                }
+            }
+
+            ConfigureCustomViewerElement("configured-babylon-viewer", options);
+
+            props.onOptionsLoaded(options);
+        })();
+    }, []);
+
+    return <configured-babylon-viewer class="viewerElement" ref={props.onViewerCreated}></configured-babylon-viewer>;
 };

packages/tools/viewer-configurator/src/components/configurator/configurator.scss

@@ -194,6 +194,13 @@
         }
     }
 
+    .messageLine {
+        text-align: center;
+        font-size: 12px;
+        font-style: italic;
+        opacity: 0.6;
+    }
+
     .textInputLine {
         height: 100%;