Three/webgpu and Typescript

I’m finally trying to migrate my project to typescript. I am struggling to get non exported modules augmented and it simply won’t work. WebGPUBackend is not exported from @typestypes/three as is some other modules.

I have custom methods in a fork added to XRManager I need to augment the XRManager also and won’t work. Everything else I managed to bash into shape but not three. I can only augment the three module not “three/webgpu”.

So this won’t import and can’t augment it.

import { WebGPURenderer, WebGPUBackend } from "three/webgpu";

Attempting augmenting in an included typescript, it won’t resolve. Is there a way to do it ?

declare module "three/webgpu" {

  export interface XRManager {

    createMediaLayer(

      texture: VideoTexture,

      layout:

        | "default"

        | "mono"

        | "stereo"

        | "stereo-left-right"

        | "stereo-top-bottom",

      quaternion: Quaternion,

      is180: boolean,

      params: {},

      radius: number,

      widthSegments: number,

      heightSegments: number,

      updateAtIndex: number,

      quadWidth: number,

      quadHeight: number,

      translation: Vector3,

    ): Group;

  }




  export function createSphereMesh(

    texture: Texture,

    eyeIndex: number,

    radius: number,

    widthSegments: number,

    heightSegments: number,

    uvFactors?: any,

    is180?: boolean,

    material?: boolean,

  ): Mesh;




  class WebGPUCapabilities {

    /**

     * Returns the maximum anisotropy texture filtering value.

     *

     * @return {number} The maximum anisotropy texture filtering value.

     */

    getMaxAnisotropy: () => number;




    getUniformBufferLimit: () => number;

  }




  export interface WebGPUBackend {

    capabilities: WebGPUCapabilities;

  }




  interface WebGLBackend {

    capabilities: WebGLCapabilities;

  }

}

Tsconfig


{



  "compilerOptions": {

    "module": "esnext",

    "moduleResolution": "bundler",

    "jsx": "preserve",

    "target": "esnext",

    "useDefineForClassFields": false,

    "resolveJsonModule": true,

    "rootDirs": ["./"],

    "types": [

      "vite/client",

      "vite-plugin-glsl/ext",

      "@types/three",

      "@types/webxr",

      "@webgpu/types"

    ],

   

  },

  "include": [

    "src",

    "src/types/globals.d.ts"

  ]



}

This won’t work either

import WebGPUBackenbd from "@types/three/src/renderers/webgpu/WebGPUBackend.js";

If I add an export to @types/three/src/Three.WebGPU.d.ts it works

export { default as WebGPUBackend } from './renderers/webgpu/WebGPUBackend.js';

If I copy the entire webgpu definition and change the path with that WebGPUBackend export it works. But augmenting fails now if I change the path.

 "paths": {

      "three/webgpu": ["./src/types/three-webgpu.d.ts"]

    }