@plasius/renderer 1.0.0

package/src/shaders/vertex/landscapeVertexShader.js

@@ -0,0 +1,67 @@
+import * as TSL from "three/tsl";
+
+// Vertex shader
+export const landscapeVertexShader = TSL.Fn((shader) => {
+  const position = shader.input.vec3("position");
+  const uv = shader.input.vec2("uv");
+  const time = shader.uniforms.float("time");
+
+  let vHeight = shader.output.float("vHeight");
+  const clipPosition = output.vec4("gl_Position");
+
+  const waveZ = TSL.mul(
+    TSL.sin(TSL.add(TSL.mul(position.x, 0.5), TSL.mul(time, 1.0))),
+    1.0
+  );
+
+  const newPos = TSL.vec3(position.x, position.y, TSL.add(position.z, waveZ));
+
+  TSL.assign(vHeight, newPos.z);
+  TSL.assign(clipPosition, TSL.vec4(newPos, 1.0));
+});
+/*
+
+
+// Vertex shader
+export const landscapeVertexShader = TSL.Fn((shader) => {
+  const position = shader.input.vec3("position");
+  const uv = shader.input.vec2("uv");
+
+  const time = shader.uniforms.float("time");
+  const seed = shader.uniforms.float("seed");
+
+  let vUv = shader.output.vec2("vUv");
+  let vHeight = shader.output.float("vHeight");
+  let vPos = shader.output.vec3("vPos");
+
+  const clipPosition = output.vec4("gl_Position");
+
+  const random = (st) =>
+    fract(
+      mul(
+        sin(dot(st, vec2(add(12.9898, seed), add(78.233, seed)))),
+        43758.5453123
+      )
+    );
+
+  assign(vUv, uv);
+  assign(vPos, position);
+
+  const rnd = random(position.xy);
+  const waveZ = add(
+    mul(
+      add(
+        sin(add(mul(position.x, 0.2), time)),
+        cos(add(mul(position.y, 0.2), time))
+      ),
+      0.75
+    ),
+    sub(mul(rnd, 2.0), 1.0)
+  );
+
+  const newPos = vec3(position.x, position.y, add(position.z, waveZ));
+
+  assign(vHeight, newPos.z);
+  assign(clipPosition, vec4(newPos, 1.0));
+});
+*/

package/src/styles/renderer.module.css

@@ -0,0 +1,90 @@
+.canvas {
+  width: 100%;
+  height: 100%;
+  min-width: 640px;
+  min-height: 480px;
+  top: 0px;
+  left: 0px;
+  display: block;
+  z-index: 0;
+}
+
+.vrButton {
+  top: 67px;
+  position: absolute;
+  right: 15px;
+  z-index: 1000;
+  background-color: rgba(225, 18, 222, 0.8);
+  border: none;
+  border-radius: 5px;
+  padding: 10px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+  
+.vrButton .fullscreen {
+  top: 15px;
+}
+
+.vrButton:hover {
+  background-color: rgba(200, 10, 200, 0.8);
+  border: 2px solid #fff;
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+}
+  .vrButton:active {
+    background-color: rgba(175, 5, 175, 0.8);
+  }
+  .vrButton:disabled {
+    background-color: rgba(150, 0, 150, 0.8);
+    cursor: not-allowed;
+  }
+  .vrButton:disabled:hover {
+    background-color: rgba(150, 0, 150, 0.8);
+  }
+  .vrButton:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(225, 18, 222, 0.8);
+  }
+  .vrButton:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(225, 18, 222, 0.8);
+  }
+  .vrButton:focus:not(:focus-visible) {
+    box-shadow: none;
+  }
+  
+  .performanceContainer {
+    position: absolute;
+    bottom: 15px;
+    left: 15px;
+    width: 80px;
+    height: 48px;
+    z-index: 1000;
+    background-color: rgba(220, 220, 220, 0.5);
+    padding: 10px;
+    border-radius: 5px;
+  }
+  
+  .performanceContainer p {
+    margin: 0;
+    font-size: 14px;
+  }
+  .performanceContainer span {
+    font-weight: bold;
+  }
+  .performanceContainer .performanceText {
+    font-size: 16px;
+    color: #202020;
+  }
+  .performanceContainer .frameRateText {
+    font-size: 16px;
+    color: #202020;
+  }
+/* Custom canvas classes for VR/AR mode switching */
+.fixed {
+  position: fixed;
+}
+
+.absolute {
+  position: absolute;
+}

package/src/worldSpaceCompositor.ts

@@ -0,0 +1,265 @@
+export const WORLD_SPACE_SURFACE_LAYERS = [
+  "screen",
+  "overlay",
+  "alert",
+] as const;
+
+export type WorldSpaceSurfaceLayer =
+  (typeof WORLD_SPACE_SURFACE_LAYERS)[number];
+
+export const WORLD_SPACE_OCCLUSION_MODES = [
+  "world",
+  "overlay",
+  "always-visible",
+] as const;
+
+export type WorldSpaceOcclusionMode =
+  (typeof WORLD_SPACE_OCCLUSION_MODES)[number];
+
+export interface WorldSpaceOcclusionPolicy {
+  mode: WorldSpaceOcclusionMode;
+  depthTest: boolean;
+  depthWrite: boolean;
+  polygonOffset: boolean;
+  polygonOffsetFactor: number;
+  polygonOffsetUnits: number;
+  renderOrderOffset: number;
+  fadeWhenOccluded: boolean;
+}
+
+export interface WorldSpaceSurfaceInput {
+  id: string;
+  slot: string;
+  layer: WorldSpaceSurfaceLayer;
+  priority?: number;
+  occlusionMode?: WorldSpaceOcclusionMode;
+  exclusiveSlot?: boolean;
+}
+
+export interface ComposedWorldSpaceSurface extends WorldSpaceSurfaceInput {
+  exclusiveSlot: boolean;
+  occlusionMode: WorldSpaceOcclusionMode;
+  occlusionPolicy: WorldSpaceOcclusionPolicy;
+  renderOrder: number;
+  slotIndex: number;
+}
+
+export interface WorldSpaceCompositionCollision {
+  slot: string;
+  surfaceIds: string[];
+  reason: "exclusive-slot-conflict";
+}
+
+export interface WorldSpaceCompositionResult {
+  surfaces: ComposedWorldSpaceSurface[];
+  collisions: WorldSpaceCompositionCollision[];
+}
+
+export interface WorldSpaceCompositionOptions {
+  slotOrder?: string[];
+  startingRenderOrder?: number;
+  slotStep?: number;
+  priorityStep?: number;
+}
+
+const DEFAULT_LAYER_CONFIG: Record<
+  WorldSpaceSurfaceLayer,
+  {
+    baseRenderOrder: number;
+    defaultOcclusionMode: WorldSpaceOcclusionMode;
+    exclusiveSlot: boolean;
+  }
+> = {
+  screen: {
+    baseRenderOrder: 100,
+    defaultOcclusionMode: "world",
+    exclusiveSlot: true,
+  },
+  overlay: {
+    baseRenderOrder: 200,
+    defaultOcclusionMode: "overlay",
+    exclusiveSlot: false,
+  },
+  alert: {
+    baseRenderOrder: 300,
+    defaultOcclusionMode: "always-visible",
+    exclusiveSlot: false,
+  },
+};
+
+const OCCLUSION_POLICIES: Record<
+  WorldSpaceOcclusionMode,
+  WorldSpaceOcclusionPolicy
+> = {
+  world: {
+    mode: "world",
+    depthTest: true,
+    depthWrite: false,
+    polygonOffset: true,
+    polygonOffsetFactor: -1,
+    polygonOffsetUnits: -1,
+    renderOrderOffset: 0,
+    fadeWhenOccluded: false,
+  },
+  overlay: {
+    mode: "overlay",
+    depthTest: true,
+    depthWrite: false,
+    polygonOffset: true,
+    polygonOffsetFactor: -2,
+    polygonOffsetUnits: -2,
+    renderOrderOffset: 10,
+    fadeWhenOccluded: true,
+  },
+  "always-visible": {
+    mode: "always-visible",
+    depthTest: false,
+    depthWrite: false,
+    polygonOffset: false,
+    polygonOffsetFactor: 0,
+    polygonOffsetUnits: 0,
+    renderOrderOffset: 20,
+    fadeWhenOccluded: false,
+  },
+};
+
+function normalizePriority(value?: number): number {
+  if (!Number.isFinite(value)) {
+    return 0;
+  }
+
+  return Math.trunc(value as number);
+}
+
+function resolveSlotIndex(
+  slot: string,
+  options: WorldSpaceCompositionOptions & { slotIndex?: number }
+): number {
+  if (typeof options.slotIndex === "number") {
+    return options.slotIndex;
+  }
+
+  const preferredSlotOrder = options.slotOrder ?? [];
+  const preferredIndex = preferredSlotOrder.indexOf(slot);
+
+  if (preferredIndex >= 0) {
+    return preferredIndex;
+  }
+
+  return 0;
+}
+
+function buildSlotIndexMap(
+  surfaces: readonly WorldSpaceSurfaceInput[],
+  preferredSlotOrder: readonly string[]
+): Map<string, number> {
+  const slotIndexes = new Map<string, number>();
+  let nextIndex = 0;
+
+  for (const slot of preferredSlotOrder) {
+    if (!slotIndexes.has(slot)) {
+      slotIndexes.set(slot, nextIndex);
+      nextIndex += 1;
+    }
+  }
+
+  for (const surface of surfaces) {
+    if (!slotIndexes.has(surface.slot)) {
+      slotIndexes.set(surface.slot, nextIndex);
+      nextIndex += 1;
+    }
+  }
+
+  return slotIndexes;
+}
+
+export function resolveWorldSpaceOcclusionPolicy(
+  mode: WorldSpaceOcclusionMode
+): WorldSpaceOcclusionPolicy {
+  return { ...OCCLUSION_POLICIES[mode] };
+}
+
+export function resolveWorldSpaceRenderOrder(
+  surface: WorldSpaceSurfaceInput,
+  options: WorldSpaceCompositionOptions & { slotIndex?: number } = {}
+): number {
+  const layerConfig = DEFAULT_LAYER_CONFIG[surface.layer];
+  const occlusionMode =
+    surface.occlusionMode ?? layerConfig.defaultOcclusionMode;
+  const policy = OCCLUSION_POLICIES[occlusionMode];
+  const slotIndex = resolveSlotIndex(surface.slot, options);
+  const startingRenderOrder = options.startingRenderOrder ?? 1000;
+  const slotStep = options.slotStep ?? 1000;
+  const priorityStep = options.priorityStep ?? 10;
+
+  return (
+    startingRenderOrder +
+    slotIndex * slotStep +
+    layerConfig.baseRenderOrder +
+    normalizePriority(surface.priority) * priorityStep +
+    policy.renderOrderOffset
+  );
+}
+
+export function composeWorldSpaceSurfaces(
+  surfaces: readonly WorldSpaceSurfaceInput[],
+  options: WorldSpaceCompositionOptions = {}
+): WorldSpaceCompositionResult {
+  const slotIndexes = buildSlotIndexMap(surfaces, options.slotOrder ?? []);
+
+  const composedSurfaces = surfaces
+    .map<ComposedWorldSpaceSurface>((surface) => {
+      const layerConfig = DEFAULT_LAYER_CONFIG[surface.layer];
+      const occlusionMode =
+        surface.occlusionMode ?? layerConfig.defaultOcclusionMode;
+      const slotIndex = slotIndexes.get(surface.slot) ?? 0;
+
+      return {
+        ...surface,
+        exclusiveSlot: surface.exclusiveSlot ?? layerConfig.exclusiveSlot,
+        occlusionMode,
+        occlusionPolicy: resolveWorldSpaceOcclusionPolicy(occlusionMode),
+        renderOrder: resolveWorldSpaceRenderOrder(surface, {
+          ...options,
+          slotIndex,
+        }),
+        slotIndex,
+      };
+    })
+    .sort((left, right) => {
+      if (left.renderOrder !== right.renderOrder) {
+        return left.renderOrder - right.renderOrder;
+      }
+
+      return left.id.localeCompare(right.id);
+    });
+
+  const exclusiveSurfaceIdsBySlot = new Map<string, string[]>();
+
+  for (const surface of composedSurfaces) {
+    if (!surface.exclusiveSlot) {
+      continue;
+    }
+
+    const slotEntries = exclusiveSurfaceIdsBySlot.get(surface.slot) ?? [];
+    slotEntries.push(surface.id);
+    exclusiveSurfaceIdsBySlot.set(surface.slot, slotEntries);
+  }
+
+  const collisions: WorldSpaceCompositionCollision[] = [];
+
+  for (const [slot, surfaceIds] of exclusiveSurfaceIdsBySlot) {
+    if (surfaceIds.length > 1) {
+      collisions.push({
+        slot,
+        surfaceIds,
+        reason: "exclusive-slot-conflict",
+      });
+    }
+  }
+
+  return {
+    surfaces: composedSurfaces,
+    collisions,
+  };
+}

package/src/xr/rendererXrBridge.ts

@@ -0,0 +1,44 @@
+import {
+  defaultVrSessionInit,
+  mergeXrSessionInit,
+} from "@plasius/gpu-xr";
+
+type XrReferenceSpaceType =
+  | "viewer"
+  | "local"
+  | "local-floor"
+  | "bounded-floor"
+  | "unbounded";
+
+export interface XrEnabledRenderer {
+  xr?: {
+    enabled: boolean;
+    setReferenceSpaceType?: (type: XrReferenceSpaceType) => void;
+    setSession?: (session: XRSession) => Promise<void> | void;
+  };
+}
+
+export const rendererVrSessionInit = mergeXrSessionInit(defaultVrSessionInit, {
+  requiredFeatures: ["local-floor"],
+  optionalFeatures: ["depth-sensing", "hit-test", "hand-tracking", "layers"],
+});
+
+export async function bindSessionToRenderer(
+  renderer: XrEnabledRenderer | null,
+  session: XRSession,
+  referenceSpaceType: XrReferenceSpaceType = "local-floor"
+): Promise<boolean> {
+  const xr = renderer?.xr;
+  if (!xr) {
+    return false;
+  }
+
+  xr.enabled = true;
+  xr.setReferenceSpaceType?.(referenceSpaceType);
+
+  if (typeof xr.setSession === "function") {
+    await xr.setSession(session);
+  }
+
+  return true;
+}