feat: add webgpu flag

Author: itsdouges

packages/@triplex/server/src/types.ts

@@ -202,6 +202,12 @@ export interface TriplexConfig {
    * See: https://triplex.dev/docs/api-reference/config-options/public-dir
    */
   publicDir?: string;
+  /**
+   * Enables WebGPU support for React Three Fiber components.
+   *
+   * See: https://triplex.dev/docs/api-reference/config-options/webgpu
+   */
+  webgpu?: boolean;
 }
 
 export interface RendererManifest {

packages/@triplex/server/src/util/config.ts

@@ -36,6 +36,7 @@ const schema = object({
   provider: optional(string()),
   publicDir: optional(string()),
   renderer: optional(string()),
+  webgpu: optional(boolean()),
 });
 
 export function getConfig(_cwd: string): ReconciledTriplexConfig {
@@ -99,6 +100,7 @@ export function getConfig(_cwd: string): ReconciledTriplexConfig {
     provider,
     publicDir,
     renderer,
+    webgpu: config.webgpu || false,
   };
 }
 

packages/bridge/renderer.d.ts

@@ -13,5 +13,6 @@ declare interface Window {
     readonly preload: {
       readonly reactThreeFiber: boolean;
     };
+    readonly webgpu: boolean;
   };
 }

packages/renderer/src/features/canvas/canvas.tsx

@@ -54,7 +54,8 @@ export function Canvas({ children, ...props }: CanvasProps) {
 
   return (
     <FiberCanvas
-      shadows
+      renderer={window.triplex.webgpu ? "webgpu" : undefined}
+      shadows="percentage"
       {...props}
       raycaster={{
         ...props.raycaster,