WebXR Typescript types

WebXR Typescript types

///////////////////////////////////////////////////////////////////////
// XR types

type EventHandler = (event: Event) => any;

export type XRSessionMode = 'immersive-vr' | 'inline' | 'immersive-ar';

export interface XRSystem {
  isSessionSupported: (sessionMode: XRSessionMode) => Promise<boolean>,
  requestSession: (sessionMode: XRSessionMode, sessionInit?: any) => Promise<XRSession>,
}

export interface XRViewport {
  readonly height: number;
  readonly width: number;
  readonly x: number;
  readonly y: number;
}

export interface XRWebGLLayer {
  readonly antialias: boolean;
  readonly framebuffer: WebGLFramebuffer;
  readonly frameBufferWidth: number;
  readonly frameBufferHeight: number;
  readonly ignoreDepthValues: boolean;
  getViewport: (view: XRView) => XRViewport;
}

export interface XRSpace extends EventTarget { }

export interface XRRenderState {
  readonly baseLayer: XRWebGLLayer;
  readonly depthFar: number;
  readonly depthNear: number;
  readonly inlineVerticalFieldOfView: number;
}

export interface XRReferenceSpace extends XRSpace {
  onreset: EventHandler;
  // [NewObject] XRReferenceSpace 
  getOffsetReferenceSpace: (originOffset: XRRigidTransform) => XRReferenceSpace
}

export interface XRBoundedReferenceSpace extends XRSpace { }

export interface XRInputSource {
  // A DOMString indicating the methodology used to 
  // produce the target ray: gaze, tracked-pointer, or screen.
  readonly targetRayMode: "gaze" | "tracked-pointer" | "screen";
  // tracks the pose which is used to render objects which should 
  // appear as if they're held in the hand indicated by handedness. 
  // The orientation of this space indicates the angle at which the hand 
  // is gripping the object.
  readonly gripSpace: XRSpace;
  readonly targetRaySpace: XRSpace;
  readonly handedness: "left" | "right" | "none";
  readonly profiles: string;
}

export interface XRPose {
  readonly transform: XRRigidTransform;
  readonly emulatedPosition: boolean;
}

export interface XRFrame {
  readonly session: XRSession;
  getPose: (space: XRSpace, baseSpace: XRSpace) => XRPose,
  getViewerPose: (referenceSpace: XRReferenceSpace) => XRViewerPose,
}

export interface XRInputSourceEvent extends Event {
  readonly frame: XRFrame;
  readonly inputSource: XRInputSource;
}

export type XRInputSourceArray = Array<XRInputSource>;

export interface XRSession extends EventTarget {
  // Returns this session's blend mode which denotes how much of the real-world 
  // environment is visible through the XR device
  readonly environmentBlendMode: "opaque" | "additive" | "alpha-blend";
  // Returns a list of this session's XRInputSources, each representing an input device 
  // used to control the camera and/or scene.
  readonly inputSources: XRInputSourceArray;
  // object which contains options affecting how the imagery is rendered.
  // This includes things such as the near and far clipping planes
  readonly renderState: XRRenderState;
  readonly visibilityState: "hidden" | "visible" | "visible-blurred"

  // Removes a callback from the animation frame painting callback from 
  // XRSession's set of animation frame rendering callbacks, given the 
  // identifying handle returned by a previous call to requestAnimationFrame().
  cancelAnimationFrame: Function;
  // Ends the WebXR session. Returns a promise which resolves when the 
  // session has been shut down.
  end: Function;
  // Schedules the specified method to be called the next time the user agent 
  // is working on rendering an animation frame for the WebXR device. Returns an 
  // integer value which can be used to identify the request for the purposes of 
  // canceling the callback using cancelAnimationFrame(). This method is comparable 
  // to the Window.requestAnimationFrame() method.
  requestAnimationFrame: Function;
  // Requests that a new XRReferenceSpace of the specified type be created. 
  // Returns a promise which resolves with the XRReferenceSpace or 
  // XRBoundedReferenceSpace which was requested, or throws a NotSupportedError if 
  // the requested space type isn't supported by the device.
  requestReferenceSpace: (
    s: 'bounded-floor' | 'local' | 'local-floor' | 'unbounded' | 'viewer'
  ) => Promise<XRReferenceSpace | XRBoundedReferenceSpace>;
  updateRenderState: Function;
}

export interface XRViewerPose {
  readonly views: XRView[];
}

export interface XRDomPoint {
  readonly x: number;
  readonly y: number;
  readonly z: number;
  readonly w: number;
}

export interface XRRigidTransform {
  // constructor(position?: DOMPointInit, orientation?: DOMPointInit);
  readonly matrix: Float32Array;
  readonly orientation: XRDomPoint;
  readonly position: XRDomPoint;
  readonly inverse: XRRigidTransform;
}

export interface XRViewPort {
  readonly height: number;
  readonly width: number;
  readonly x: number;
  readonly y: number;
}

export interface XRView {
  device: any;
  readonly eye: "right" | "left";
  sessionId: number;
  readonly transform: XRRigidTransform;
  readonly projectionMatrix: Float32Array;
}

These are not complete, but they are good enough to where I've gotten my own engine to work.

I'm a baby developer and im getting this error when I import my typescript component to my app.tsx file:

I don't understand because I have declared and assigned all the types. It seems the app throws this error when I add a component to app.tsx. This is my app.tsx:
import React from 'react';
import './App.css';
import AugmentedRealityHitTest from './components/AugmentedRealityHitTest'

function App() {
return (

);
}

export default App;
This is a simple create-react-app typescript template and im really just trying to show the AR button in the UI and start the session. I used the boiler plate code from immersive web samples to get started. Please help.

Not sure what you're facing, but maybe this post will help: https://robrohan.com/2020/10/16/using-webxr-types.html I'd use the types in DefinitelyTyped as they are more up to date.