feat(general): add WebGPU support

Author: simonedevit

package-lock.json

@@ -31,7 +31,7 @@
     "dependencies": {
         "acorn": "^8.11.3",
         "its-fine": "^1.2.5",
-        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
         "suspend-react": "^0.1.3",
         "zustand": "^5.0.3"
     },
@@ -61,7 +61,7 @@
         "@testing-library/react": "^16.0.1",
         "@types/acorn": "^6.0.0",
         "@types/jest": "^29.5.14",
-        "@types/lodash": "^4.17.13",
+        "@types/lodash-es": "^4.17.12",
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "@types/react-reconciler": "0.31.0",

packages/library/package.json

@@ -791,6 +791,7 @@ const ConstructorsMap: Record<string, Array<string>> = {
    lightBlock: ["name"],
    lightGizmo: ["gizmoLayer"],
    lightInformationBlock: ["name"],
+   lightingVolume: ["name","scene","shadowGenerator","tesselation"],
    lineEdgesRenderer: ["source","epsilon","checkVerticesInsteadOfIndices"],
    linesMesh: ["name","scene","parent","source","doNotCloneChildren","useVertexColor","useVertexAlpha","material"],
    loadAssetContainerAsync: ["source","scene","options"],

packages/library/src/_generated/babylon.core.constructors.ts

@@ -794,6 +794,7 @@ import type { Light } from '@babylonjs/core';
 import type { LightBlock } from '@babylonjs/core';
 import type { LightGizmo } from '@babylonjs/core';
 import type { LightInformationBlock } from '@babylonjs/core';
+import type { LightingVolume } from '@babylonjs/core';
 import type { LineEdgesRenderer } from '@babylonjs/core';
 import type { LinesMesh } from '@babylonjs/core';
 import type { LoadAssetContainerAsync } from '@babylonjs/core';
@@ -5655,6 +5656,13 @@ gizmoLayer: ConstructorParameters<typeof LightGizmo>[0];
 name: ConstructorParameters<typeof LightInformationBlock>[0];
 
     },LightInformationBlock>, any>;
+  lightingVolume: React.DetailedHTMLProps<BabylonProps<ExcludeReadonlyAndPrivate<LightingVolume>, {
+name: ConstructorParameters<typeof LightingVolume>[0];
+    scene: ConstructorParameters<typeof LightingVolume>[1];
+    shadowGenerator: ConstructorParameters<typeof LightingVolume>[2];
+    tesselation: ConstructorParameters<typeof LightingVolume>[3];
+    
+    },LightingVolume>, any>;
   lineEdgesRenderer: React.DetailedHTMLProps<BabylonProps<ExcludeReadonlyAndPrivate<LineEdgesRenderer>, {
 source: ConstructorParameters<typeof LineEdgesRenderer>[0];
     epsilon: ConstructorParameters<typeof LineEdgesRenderer>[1];

packages/library/src/_generated/babylon.core.declarations.ts

@@ -1,8 +1,10 @@
 import { createStore, type StoreApi, useStore } from 'zustand';
-import type { Nullable, Engine, HavokPlugin, Scene, WebXRDefaultExperience } from '@babylonjs/core';
+import type { Nullable, Engine as WebGLEngine, WebGPUEngine, HavokPlugin, Scene, WebXRDefaultExperience } from '@babylonjs/core';
 import { createContext, useContext } from 'react';
 import type { IPhysicsEngine } from '@babylonjs/core/Physics/IPhysicsEngine';
 
+export type Engine = WebGLEngine | WebGPUEngine;
+
 export type EngineStore = {
     engine: Nullable<Engine>;
     isMultipleCanvas: boolean;

packages/library/src/core/store.ts

@@ -3,7 +3,7 @@ import { suspend, clear } from 'suspend-react';
 import type { ISceneLoaderAsyncResult, ImportMeshOptions } from '@babylonjs/core';
 import { ImportMeshAsync } from '@babylonjs/core/Loading/sceneLoader.js';
 import { useScene } from './store';
-import isEqual from 'lodash/isEqual';
+import { isEqual } from 'lodash-es';
 
 function dispose(model: ISceneLoaderAsyncResult) {
     Object.values(model).forEach(attribute => {

packages/library/src/core/useModel.tsx

@@ -2,7 +2,7 @@ import { version } from 'react';
 import ReactReconciler, { type FiberRoot } from 'react-reconciler';
 import { DefaultEventPriority, NoEventPriority } from 'react-reconciler/constants';
 import type { AbstractMesh } from '@babylonjs/core';
-import lodash from 'lodash';
+import { isEqualWith } from 'lodash-es';
 import { Logger, BabylonPackages, isInstanceOf, builders, CollidingComponents } from '@dvmstudios/reactylon-common';
 import type { UpdatePayload, RootContainer, EngineContext, Instance, BabylonEntity } from '@types';
 import { Host, MaterialHost, TextureHost, MeshHost, AdvancedDynamicTextureHost, GuiHost, LightHost, CameraHost, GridHost /*, TransformNodeHost*/ } from './components/hosts';
@@ -18,8 +18,6 @@ const IS_REACT_19 = version.startsWith('19');
 type CommitUpdateV19 = [Instance, string, CoreHostProps | GuiHostProps, CoreHostProps | GuiHostProps, any];
 type EventPriority = any;
 
-const { isEqualWith } = lodash;
-
 function isParentNeeded(child: BabylonEntity) {
     if (isInstanceOf(child, 'Material')) {
         return false;

packages/library/src/reconciler.ts

@@ -1,6 +1,6 @@
 /* PROPS USED BY JSX ELEMENTS GENERATOR */
 
-import type { Engine, Node, Nullable, Scene, WebXRDefaultExperience } from '@babylonjs/core';
+import type { Engine as WebGLEngine, WebGPUEngine, Node, Nullable, Scene, WebXRDefaultExperience } from '@babylonjs/core';
 import { BabylonPackages } from '@dvmstudios/reactylon-common';
 import type { CommonProps } from './props';
 import type { EngineStore } from '../core/store';
@@ -79,7 +79,7 @@ export type UpdatePayload = {
 };
 
 export type RootContainer = {
-    engine: Engine;
+    engine: WebGLEngine | WebGPUEngine;
     scene: Scene;
     canvas: HTMLCanvasElement | WebGLRenderingContext;
     isMultipleCanvas: boolean;

packages/library/src/types/types.ts

@@ -1,8 +1,6 @@
 import type { Vector3, Vector4 } from '@babylonjs/core';
 import { isInstanceOf } from '@dvmstudios/reactylon-common';
-import lodash from 'lodash';
-
-const { get, setWith } = lodash;
+import { get, setWith } from 'lodash-es';
 
 export default class ObjectUtils {
     static set(object: any, path: string, value: any, customizer: any = Object) {

packages/library/src/utils/ObjectUtils.ts

@@ -13,7 +13,7 @@ type WrapperProps = React.PropsWithChildren<{
 
 const Wrapper: React.FC<WrapperProps> = ({ children, context }) => {
     return (
-        <Engine antialias _nullEngine={new NullEngine()}>
+        <Engine _nullEngine={new NullEngine()}>
             <Scene
                 onSceneReady={scene => {
                     scene.createDefaultCameraOrLight(true, undefined);