SFE: Add option to force WebGL1 (#131)

Author: AmoebaChant

packages/editor/src/components/propertyTab/propertyTabComponent.tsx

@@ -20,7 +20,7 @@ import { BlockTools } from "../../blockTools.js";
 import type { Nullable } from "@babylonjs/core/types";
 import type { FrameNodePort } from "@babylonjs/shared-ui-components/nodeGraphSystem/frameNodePort";
 import type { LockObject } from "@babylonjs/shared-ui-components/tabs/propertyGrids/lockObject";
-import type { GlobalState } from "../../globalState";
+import { ForceWebGL1StorageKey, type GlobalState } from "../../globalState.js";
 import type { ISelectionChangedOptions } from "@babylonjs/shared-ui-components/nodeGraphSystem/interfaces/selectionChangedOptions";
 import { SmartFilterCoreVersion, type AnyInputBlock } from "@babylonjs/smart-filters";
 import type { Observer } from "@babylonjs/core/Misc/observable.js";
@@ -345,6 +345,21 @@ export class PropertyTabComponent extends react.Component<IPropertyTabComponentP
                                 }}
                             />
                         )}
+                        {this.props.globalState.onNewEngine && ( // NOTE: only display this option if the Editor controls creating the Engine
+                            <CheckBoxLineComponent
+                                label="Force WebGL v1"
+                                isSelected={() => this.props.globalState.forceWebGL1}
+                                onSelect={(value: boolean) => {
+                                    if (window.confirm("Any unsaved changes will be lost. Do you want to continue?")) {
+                                        localStorage.setItem(ForceWebGL1StorageKey, value ? "true" : "");
+                                        window.location.reload();
+                                    } else {
+                                        // Re-apply the original value (this.props.globalState.forceWebGL1)
+                                        this.forceUpdate();
+                                    }
+                                }}
+                            />
+                        )}
                     </LineContainerComponent>
                     {(this.props.globalState.loadSmartFilter ||
                         this.props.globalState.downloadSmartFilter ||

packages/editor/src/globalState.ts

@@ -24,6 +24,7 @@ const PreviewBackgroundStorageKey = "PreviewBackground";
 export const DefaultPreviewAspectRatio = "1.33333";
 export const PreviewAspectRatioKey = "PreviewAspectRatio";
 export const PreviewFillContainerKey = "PreviewFillContainer";
+export const ForceWebGL1StorageKey = "ForceWebGL1";
 
 export class GlobalState {
     private _previewBackground: string;
@@ -44,6 +45,8 @@ export class GlobalState {
         !!localStorage.getItem(PreviewFillContainerKey)
     );
 
+    forceWebGL1: boolean = !!localStorage.getItem(ForceWebGL1StorageKey);
+
     smartFilter: SmartFilter;
 
     blockEditorRegistration: BlockEditorRegistration;

packages/editor/src/graphEditor.tsx

@@ -8,7 +8,7 @@ import { Portal } from "./portal.js";
 
 import { MessageDialog } from "@babylonjs/shared-ui-components/components/MessageDialog.js";
 import { GraphCanvasComponent } from "@babylonjs/shared-ui-components/nodeGraphSystem/graphCanvas.js";
-import { LogComponent } from "./components/log/logComponent.js";
+import { LogComponent, LogEntry } from "./components/log/logComponent.js";
 import { TypeLedger } from "@babylonjs/shared-ui-components/nodeGraphSystem/typeLedger.js";
 import { BlockTools } from "./blockTools.js";
 import { PropertyTabComponent } from "./components/propertyTab/propertyTabComponent.js";
@@ -33,6 +33,7 @@ import { OutputBlockName } from "./configuration/constants.js";
 import type { BlockNodeData } from "./graphSystem/blockNodeData";
 import { DataStorage } from "@babylonjs/core/Misc/dataStorage.js";
 import { OnlyShowCustomBlocksDefaultValue } from "./constants.js";
+import { ThinEngine } from "@babylonjs/core/Engines/thinEngine.js";
 
 interface IGraphEditorProps {
     globalState: GlobalState;
@@ -116,7 +117,9 @@ export class GraphEditor extends react.Component<IGraphEditorProps, IGraphEditor
                 "sfe-preview-canvas"
             ) as HTMLCanvasElement;
             if (canvas && this.props.globalState.onNewEngine) {
-                const engine = initializePreview(canvas);
+                const engine = initializePreview(canvas, this.props.globalState.forceWebGL1);
+                const versionToLog = `Babylon.js v${ThinEngine.Version} - WebGL${engine.webGLVersion}`;
+                this.props.globalState.onLogRequiredObservable.notifyObservers(new LogEntry(versionToLog, false));
                 this.props.globalState.engine = engine;
                 this.props.globalState.onNewEngine(engine);
                 this._canvasResizeObserver.observe(canvas);
@@ -447,7 +450,7 @@ export class GraphEditor extends react.Component<IGraphEditorProps, IGraphEditor
         ) as HTMLCanvasElement
     ) => {
         if (canvas && this.props.globalState.onNewEngine) {
-            const engine = initializePreview(canvas);
+            const engine = initializePreview(canvas, this.props.globalState.forceWebGL1);
             this.props.globalState.engine = engine;
             this.props.globalState.onNewEngine(engine);
         }

packages/editor/src/initializePreview.ts

@@ -1,6 +1,6 @@
 import { ThinEngine } from "@babylonjs/core/Engines/thinEngine.js";
 
-export function initializePreview(canvas: HTMLCanvasElement): ThinEngine {
+export function initializePreview(canvas: HTMLCanvasElement, forceWebGL1: boolean): ThinEngine {
     const antialias = false;
     const engine = new ThinEngine(
         canvas,
@@ -12,9 +12,8 @@ export function initializePreview(canvas: HTMLCanvasElement): ThinEngine {
             audioEngine: false,
             // Important to allow skip frame and tiled optimizations
             preserveDrawingBuffer: false,
-            // Useful during debug to simulate WebGL1 devices (Safari)
-            // disableWebGL2Support: true,
             premultipliedAlpha: false,
+            disableWebGL2Support: forceWebGL1,
         },
         false
     );