@plasius/renderer 1.0.0

package/src/renderStateProvider.tsx

@@ -0,0 +1,121 @@
+import { createScopedStoreContext } from "@plasius/react-state";
+import type { IState } from "@plasius/react-state";
+import type { CameraRigProfile } from "./camera/cameraRigProfile.js";
+import { VIEW_PROFILE } from "./camera/cameraRigProfile.js";
+
+type RenderAction =
+  | {
+      type: "set_camera_profile";
+      payload: CameraRigProfile;
+    }
+  | {
+      type: "set_frame";
+      payload: number;
+    }
+  | {
+      type: "set_last_render_time";
+      payload: number;
+    }
+  | {
+      type: "update";
+    }
+  | {
+      type: "reset";
+    }
+  | {
+      type: "set_frame_rate";
+      payload: number;
+    }
+  | {
+      type: "increment_accumulated_frames";
+    }
+  | {
+      type: "set_performance_tier";
+      payload: "low" | "medium" | "high" | "ultra";
+    }
+  | {
+      type: "set_is_animating";
+      payload: boolean;
+    }
+  | {
+      type: "set_pause_render";
+      payload: boolean;
+    }
+  | {
+      type: "set_scene_hash";
+      payload: string;
+    }
+  | {
+      type: "set_vr_mode";
+      payload: boolean;
+    };
+
+interface RenderState extends IState {
+  frame: number;
+  lastRenderTime: number;
+  debugEnabled: boolean;
+  frameRate: number;
+  accumulatedFrames: number;
+  performanceTier: "low" | "medium" | "high" | "ultra";
+  isAnimating: boolean;
+  pauseRender: boolean;
+  sceneHash: string;
+  cameraRigProfile: CameraRigProfile;
+  useVR: boolean;
+}
+
+const initialState: RenderState = {
+  frame: 0,
+  lastRenderTime: 0,
+  debugEnabled: false,
+  frameRate: 0,
+  accumulatedFrames: 0,
+  performanceTier: "high",
+  isAnimating: true,
+  pauseRender: false,
+  sceneHash: "",
+  cameraRigProfile: VIEW_PROFILE,
+  useVR: false,
+};
+
+const reducer = (state: RenderState, action: RenderAction): RenderState => {
+  switch (action.type) {
+    case "update":
+      return { ...state };
+    case "reset":
+      return initialState;
+    case "set_frame_rate":
+      return { ...state, frameRate: action.payload };
+    case "increment_accumulated_frames":
+      return { ...state, accumulatedFrames: state.accumulatedFrames + 1 };
+    case "set_performance_tier":
+      return { ...state, performanceTier: action.payload };
+    case "set_is_animating":
+      return { ...state, isAnimating: action.payload };
+    case "set_pause_render":
+      return { ...state, pauseRender: action.payload };
+    case "set_scene_hash":
+      return { ...state, sceneHash: action.payload };
+    case "set_camera_profile":
+      return { ...state, cameraRigProfile: action.payload };
+    case "set_frame":
+      return { ...state, frame: action.payload };
+    case "set_last_render_time":
+      return { ...state, lastRenderTime: action.payload };
+    case "set_vr_mode":
+      return { ...state, useVR: action.payload };
+    default:
+      return state;
+  }
+};
+
+export type RenderStoreContext = ReturnType<
+  typeof createScopedStoreContext<RenderState, RenderAction>
+>;
+
+export const RenderStore: RenderStoreContext =
+  createScopedStoreContext<RenderState, RenderAction>(reducer, initialState);
+
+export const RenderProvider = ({ children }: { children: React.ReactNode }) => {
+  return <RenderStore.Provider>{children}</RenderStore.Provider>;
+};

package/src/renderer.tsx

@@ -0,0 +1,294 @@
+import { type Vector3, type Group } from "three";
+import * as THREE from "three/webgpu";
+import {
+  Canvas,
+  //type ThreeToJSXElements,
+  type RootState,
+} from "@react-three/fiber";
+/*
+declare module "@react-three/fiber" {
+  interface ThreeElements extends ThreeToJSXElements<typeof THREE> { 
+    
+  }
+}
+*/
+// Use the constructor parameter type as our renderer parameters type
+type WebGPURendererParameters = ConstructorParameters<
+  typeof THREE.WebGPURenderer
+>[0];
+import { useRef, useEffect, Suspense } from "react";
+
+import { Html, useProgress } from "@react-three/drei";
+import { createXrManager } from "@plasius/gpu-xr";
+import type { CameraManager } from "@plasius/gpu-camera";
+
+import { BsHeadsetVr } from "react-icons/bs";
+import { CgWebsite } from "react-icons/cg";
+
+import { RenderStore } from "./renderStateProvider.js";
+
+import styles from "./styles/renderer.module.css";
+import { Scene } from "./scene.js";
+
+import { Player } from "./player/player.js";
+
+import { AdaptiveDPR } from "./adaptivedpr.js";
+import {
+  bindSessionToRenderer,
+  rendererVrSessionInit,
+} from "./xr/rendererXrBridge.js";
+import {
+  createRendererCameraManager,
+  ManagedCameraController,
+} from "./camera/managedCameraController.js";
+
+interface WebGPURendererWithContext extends THREE.WebGPURenderer {
+  getContextAttributes: () => {
+    antialias: boolean;
+    alpha: boolean;
+    stencil: boolean;
+    depth: boolean;
+    powerPreference: string;
+    xrCompatible: boolean;
+  };
+}
+
+export interface RendererProps {
+  cameraPosition: Vector3;
+  cameraRotation: Vector3;
+  multiview: boolean;
+}
+
+function Loader() {
+  const { progress } = useProgress();
+  return <Html center>{progress} % loaded</Html>;
+}
+
+enum Perf {
+  Low,
+  Medium,
+  High,
+  Ultra,
+}
+
+function Renderer({
+  cameraPosition,
+  cameraRotation,
+  multiview = true,
+  children,
+}: React.PropsWithChildren<RendererProps>) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const sceneRef = useRef<Group | null>(null);
+  const rendererRef = useRef<WebGPURendererWithContext | null>(null);
+  const xrManagerRef = useRef<ReturnType<typeof createXrManager> | null>(null);
+  const cameraManagerRef = useRef<CameraManager | null>(null);
+
+  const { useVR, cameraRigProfile } = RenderStore.useStore();
+  const dispatch = RenderStore.useDispatch();
+
+  if (!cameraManagerRef.current) {
+    cameraManagerRef.current = createRendererCameraManager({
+      maxParallelViews: multiview ? 2 : 1,
+      maxHotCameras: 3,
+    });
+  }
+  const cameraManager = cameraManagerRef.current as CameraManager;
+
+  useEffect(() => {
+    return () => {
+      cameraManager.clear();
+    };
+  }, [cameraManager]);
+
+  useEffect(() => {
+    const xrManager = createXrManager({
+      onSessionStart: (session) => {
+        void bindSessionToRenderer(rendererRef.current, session).catch(() => {
+          dispatch({ type: "set_vr_mode", payload: false });
+        });
+      },
+      onSessionEnd: () => {
+        dispatch({ type: "set_vr_mode", payload: false });
+      },
+    });
+
+    xrManagerRef.current = xrManager;
+
+    void xrManager.probeSupport(["immersive-vr"]).catch(() => {
+      // Ignore probe failures; entering VR will surface actionable errors.
+    });
+
+    return () => {
+      const current = xrManagerRef.current;
+      xrManagerRef.current = null;
+      if (current) {
+        void current.dispose();
+      }
+    };
+  }, [dispatch]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const xrManager = xrManagerRef.current;
+
+    if (!canvas || !xrManager) {
+      return;
+    }
+
+    const fullscreenChangeHandler = () => {
+      if (!document.fullscreenElement) {
+        dispatch({ type: "set_vr_mode", payload: false });
+      }
+    };
+
+    const enterVRHandler = async () => {
+      try {
+        if (!document.fullscreenElement) {
+          await canvas.requestFullscreen();
+        }
+
+        canvas.addEventListener("fullscreenchange", fullscreenChangeHandler);
+        await xrManager.enterVr(rendererVrSessionInit);
+      } catch {
+        dispatch({ type: "set_vr_mode", payload: false });
+      }
+    };
+
+    const exitVRHandler = async () => {
+      await xrManager.exitSession();
+
+      if (document.fullscreenElement === canvas) {
+        await document.exitFullscreen().catch(() => {});
+      }
+    };
+
+    if (!useVR) {
+      void exitVRHandler();
+      return () => {
+        canvas.removeEventListener("fullscreenchange", fullscreenChangeHandler);
+      };
+    }
+
+    void enterVRHandler();
+
+    return () => {
+      canvas.removeEventListener("fullscreenchange", fullscreenChangeHandler);
+    };
+  }, [useVR, dispatch]);
+
+  return (
+    <>
+      <button
+        title={useVR ? "Exit VR" : "Enter VR"}
+        onClick={() => dispatch({ type: "set_vr_mode", payload: !useVR })}
+        className={styles.vrButton}
+      >
+        {useVR ? <CgWebsite size={24} /> : <BsHeadsetVr size={24} />}
+      </button>
+
+      <Suspense fallback={<div style={{ height: "100%" }} />}>
+        <Canvas
+          shadows={"soft"}
+          tabIndex={0}
+          ref={canvasRef}
+          className={`${styles.canvas} ${
+            !useVR ? styles.fixed : styles.absolute
+          }`}
+          style={{ width: "100%", height: "100%" }}
+          camera={{
+            position: cameraPosition.toArray(),
+            rotation: cameraRotation.toArray(),
+            near: 0.1,
+            far: 1000,
+            fov: 50,
+          }}
+          dpr={useVR ? 1 : [1, 4]}
+          gl={async (props) => {
+            const params = {
+              ...props,
+              multiview,
+            } as WebGPURendererParameters;
+            const renderer = new THREE.WebGPURenderer(
+              params
+            ) as WebGPURendererWithContext;
+
+            await renderer.init();
+
+            if (useVR && "setPixelRatio" in renderer) {
+              renderer.setPixelRatio(1);
+            }
+
+            if ("setClearColor" in renderer) {
+              renderer.setClearColor("lightblue");
+            }
+
+            if ("outputColorSpace" in renderer) {
+              renderer.outputColorSpace = THREE.SRGBColorSpace;
+            }
+
+            if ("xr" in renderer) {
+              renderer.xr.enabled = true;
+            }
+
+            renderer.getContextAttributes = () => ({
+              antialias: props.antialias ?? true,
+              alpha: props.alpha ?? true,
+              stencil: props.stencil ?? true,
+              depth: props.depth ?? true,
+              powerPreference: props.powerPreference ?? "high-performance",
+              xrCompatible: true,
+            });
+            return renderer;
+          }}
+          onCreated={(state: RootState) => {
+            // In XR, keep DPR stable to avoid stereo stitching issues
+            if (useVR && "setPixelRatio" in state.gl) {
+              // Cap DPR to a reasonable value for HMDs; many runtimes manage internal resolution
+              state.gl.setPixelRatio(1);
+            }
+
+            if ("setClearColor" in state.gl) {
+              state.gl.setClearColor("lightblue");
+            }
+
+            if ("setSize" in state.gl) {
+              state.gl.setSize(state.size.width, state.size.height);
+            }
+
+            if ("outputColorSpace" in state.gl) {
+              state.gl.outputColorSpace = THREE.SRGBColorSpace;
+            }
+
+            rendererRef.current = state.gl as unknown as WebGPURendererWithContext;
+          }}
+        >
+          {!useVR && <AdaptiveDPR />}
+
+          <Suspense fallback={Loader()}>
+            {!useVR && (
+              <ManagedCameraController
+                manager={cameraManager}
+                profile={cameraRigProfile}
+                cameraId="main"
+              />
+            )}
+            <Scene ref={sceneRef}>
+              <Player cameraManager={cameraManager} cameraId="main" />
+              {children}
+            </Scene>
+          </Suspense>
+        </Canvas>
+      </Suspense>
+    </>
+  );
+}
+
+function WrappedRenderer(props: React.PropsWithChildren<RendererProps>) {
+  return (
+    <RenderStore.Provider>
+      <Renderer {...props} />
+    </RenderStore.Provider>
+  );
+}
+
+export { WrappedRenderer as Renderer };

package/src/scene.tsx

@@ -0,0 +1,42 @@
+import { forwardRef, type ReactNode } from "react";
+import { Physics } from "@react-three/rapier";
+import { Environment } from "@react-three/drei";
+import { Landscape } from "./landscape.js";
+import { Vector3, Group } from "three";
+
+export interface SceneProps {
+  children?: ReactNode[];
+}
+
+// Use forwardRef to make ref work
+export const Scene = forwardRef<Group, SceneProps>(function Scene(props, ref) {
+  return (
+    <group ref={ref}>
+      <Environment
+        preset={"dawn"}
+        background={false}
+        environmentIntensity={0.5}
+      />
+      <ambientLight color={0xe1e1e1} intensity={0.3} />
+      <directionalLight
+        color={0xf0f0f0}
+        intensity={1.0}
+        position={new Vector3(5, 10, -10)}
+        castShadow
+        shadow-mapSize-width={2048}
+        shadow-mapSize-height={2048}
+        shadow-bias={-0.0005}
+        shadow-camera-left={-20}
+        shadow-camera-right={20}
+        shadow-camera-top={20}
+        shadow-camera-bottom={-20}
+        shadow-camera-near={0.5}
+        shadow-camera-far={100}
+      />
+      <Physics gravity={[0, -9.81, 0]}>
+        <Landscape />
+        {props.children}
+      </Physics>
+    </group>
+  );
+});

package/src/shaders/fragment/landscapeFragmentShader.d.ts

@@ -0,0 +1,4 @@
+import { ShaderNode } from "three/tsl";
+
+// src/shaders/vertex/landscapeVertexShader.d.ts
+export const landscapeFragmentShader: ShaderNode; // or object/function depending on your export

package/src/shaders/fragment/landscapeFragmentShader.js

@@ -0,0 +1,141 @@
+import * as TSL from "three/tsl";
+
+// Fragment shader
+export const landscapeFragmentShader = TSL.Fn((shader) => {
+  const vHeight = shader.input.float("vHeight");
+  const fragColor = shader.uniforms.vec4("fragColor");
+
+  const lowColor = TSL.vec3(0.5, 0.8, 0.3); // Grass
+  const highColor = TSL.vec3(1.0, 1.0, 1.0); // Snow
+
+  const mixFactor = TSL.smoothstep(0.0, 2.0, vHeight);
+  const baseColor = TSL.mix(lowColor, highColor, mixFactor);
+
+  TSL.assign(fragColor, TSL.vec4(baseColor, 1.0));
+});
+
+/*import * as TSL from "three/tsl";
+
+// Fragment shader
+export const landscapeFragmentShader = TSL.Fn((shader) => {
+  const vUv = shader.input.vec2("vUv");
+  const vHeight = shader.input.float("vHeight");
+  const vPos = shader.input.vec3("vPos");
+
+  const time = shader.uniforms.float("time");
+  const fragColor = shader.uniforms.vec4("fragColor");
+
+  const applyWind = (normal, pos) => {
+    const windDir = TSL.vec2(
+      TSL.sin(TSL.add(TSL.mul(pos.x, 0.1), TSL.mul(time, 0.3))),
+      TSL.cos(TSL.add(TSL.mul(pos.y, 0.1), TSL.mul(time, 0.3)))
+    );
+    const strength = TSL.add(
+      0.2,
+      TSL.mul(
+        0.1,
+        TSL.sin(TSL.add(TSL.dot(pos, TSL.vec2(0.3, 0.7)), TSL.mul(time, 0.5)))
+      )
+    );
+    const wind = TSL.mul(
+      TSL.normalize(TSL.vec3(windDir.x, windDir.y, 0.0)),
+      strength
+    );
+    return TSL.normalize(TSL.add(normal, TSL.mul(wind, 0.4)));
+  };
+
+  const calculateNormal = (height, uv, pos) => {
+    const eps = 0.01;
+    const hL = TSL.smoothstep(-2.0, 4.5, TSL.sub(height, eps));
+    const hR = TSL.smoothstep(-2.0, 4.5, TSL.add(height, eps));
+    const hD = TSL.smoothstep(-2.0, 4.5, TSL.sub(height, eps));
+    const hU = TSL.smoothstep(-2.0, 4.5, TSL.add(height, eps));
+    const normal = TSL.normalize(
+      TSL.vec3(TSL.sub(hL, hR), TSL.sub(hD, hU), 2.0)
+    );
+    return applyWind(normal, pos.xz);
+  };
+
+  const grassWave = (uv, height) => {
+    const baseFreq = 40.0;
+    const speed = 0.5;
+    const wave1 = TSL.sin(
+      TSL.mul(TSL.add(TSL.add(uv.x, uv.y), TSL.mul(time, speed)), baseFreq)
+    );
+    const wave2 = TSL.cos(
+      TSL.mul(
+        TSL.add(TSL.sub(uv.x, uv.y), TSL.mul(time, TSL.mul(speed, 1.2))),
+        TSL.mul(baseFreq, 0.8)
+      )
+    );
+    const pattern = TSL.mul(TSL.add(wave1, wave2), 0.03);
+    const density = TSL.smoothstep(0.3, 0.7, height);
+    return TSL.mul(pattern, density);
+  };
+
+  const grassDensityFactor = (coords) =>
+    TSL.smoothstep(
+      0.4,
+      0.9,
+      TSL.fract(
+        TSL.mul(
+          TSL.sin(TSL.dot(TSL.mul(coords, 0.2), TSL.vec2(12.9898, 78.233))),
+          43758.5453
+        )
+      )
+    );
+
+  const sand = TSL.vec3(0.76, 0.7, 0.5);
+  const grass = TSL.vec3(0.4, 0.8, 0.2);
+  const stone = TSL.vec3(0.5, 0.5, 0.5);
+  const snow = TSL.vec3(0.95, 0.95, 0.95);
+
+  const low = TSL.smoothstep(-2.0, 0.0, vHeight);
+  const high = TSL.smoothstep(1.0, 3.0, vHeight);
+
+  let base = TSL.mix(sand, grass, low);
+  base = TSL.mix(base, stone, high);
+  base = TSL.mix(base, snow, TSL.smoothstep(2.5, 4.5, vHeight));
+
+  const normal = calculateNormal(vHeight, vUv, vPos);
+  const slope = TSL.dot(TSL.vec3(0.0, 0.0, 1.0), normal);
+  const snowBlend = TSL.smoothstep(0.8, 1.0, slope);
+  base = TSL.mix(
+    base,
+    snow,
+    TSL.mul(snowBlend, TSL.smoothstep(1.5, 4.5, vHeight))
+  );
+
+  const tintNoise = TSL.fract(
+    TSL.mul(TSL.sin(TSL.dot(vPos.xz, TSL.vec2(91.91, 47.47))), 43758.5453)
+  );
+  const tint = TSL.mix(
+    TSL.vec3(-0.05, 0.05, -0.02),
+    TSL.vec3(0.05, -0.03, 0.02),
+    tintNoise
+  );
+  base = TSL.add(base, tint);
+
+  const density = grassDensityFactor(vPos.xz);
+  base = TSL.mix(base, TSL.vec3(0.25, 0.4, 0.15), TSL.sub(1.0, density));
+
+  const lightDir = TSL.normalize(TSL.vec3(0.3, 0.5, 1.0));
+  let lighting = TSL.clamp(TSL.dot(lightDir, normal), 0.3, 1.0);
+  lighting = TSL.mul(lighting, TSL.add(0.8, TSL.mul(0.4, density)));
+
+  const grassMotion = TSL.mul(grassWave(vUv, vHeight), density);
+  const animatedGrass = TSL.vec3(0.0, TSL.mul(grassMotion, 0.4), 0.0);
+
+  const fresnel = TSL.pow(
+    TSL.sub(1.0, TSL.dot(TSL.normalize(TSL.vec3(0.0, 0.0, 1.0)), normal)),
+    3.0
+  );
+  const fresnelColor = TSL.mul(TSL.vec3(0.2, 0.5, 0.1), fresnel);
+
+  const finalColor = TSL.mul(
+    TSL.add(TSL.add(base, animatedGrass), fresnelColor),
+    lighting
+  );
+  TSL.assign(fragColor, TSL.vec4(finalColor, 1.0));
+});
+*/

package/src/shaders/landscapeShader.tsx

@@ -0,0 +1,39 @@
+import * as THREE from "three/webgpu";
+import { extend, ThreeElements } from "@react-three/fiber";
+import { landscapeVertexShader } from "./vertex/landscapeVertexShader.js";
+import { landscapeFragmentShader } from "./fragment/landscapeFragmentShader.js";
+import { add } from "three/tsl";
+
+// ✅ Define a class that extends the material
+class LandscapeShaderMaterial extends THREE.MeshStandardNodeMaterial {
+  constructor() {
+    super({ color: new THREE.Color(0.4, 0.7, 0.2) });
+/*
+    // Append your vertex shader to the existing position pipeline
+    if (this.positionNode)
+      this.positionNode = shader(() =>
+        add(this.positionNode!, landscapeVertexShader)
+      );
+    else this.positionNode = landscapeVertexShader;
+    // Append your fragment shader to the existing color pipeline
+    if (this.colorNode)
+      this.colorNode = shader(() =>
+        add(this.colorNode!, landscapeFragmentShader)
+      );
+    else this.colorNode = landscapeFragmentShader;
+    */
+  }
+}
+
+// ✅ Register the class with R3F so you can use it as a JSX tag
+extend({ LandscapeShaderMaterial });
+
+export { LandscapeShaderMaterial };
+
+declare module "@react-three/fiber" {
+  interface ThreeElements {
+    landscapeShaderMaterial: ThreeElements["meshStandardMaterial"] & {
+      ref?: React.Ref<THREE.MeshStandardNodeMaterial>;
+    };
+  }
+}

package/src/shaders/vertex/landscapeVertexShader.d.ts

@@ -0,0 +1,4 @@
+import { ShaderNode, Node, vec3 } from "three/tsl";
+
+// src/shaders/vertex/landscapeVertexShader.d.ts
+export const landscapeVertexShader: ShaderNode<Node, "vec3">;