From 229c25947a0567b1b98566fd68894730cde4c5ae Mon Sep 17 00:00:00 2001 From: Aiden <68633820+awils27@users.noreply.github.com> Date: Thu, 11 Jun 2026 09:36:32 +1000 Subject: [PATCH] Toned down hands/controlers --- src/vr180player/xr/pointer-overlays.ts | 63 ++++++++++++-------------- 1 file changed, 29 insertions(+), 34 deletions(-) diff --git a/src/vr180player/xr/pointer-overlays.ts b/src/vr180player/xr/pointer-overlays.ts index a9db375..5bd7f7b 100644 --- a/src/vr180player/xr/pointer-overlays.ts +++ b/src/vr180player/xr/pointer-overlays.ts @@ -10,8 +10,8 @@ export type VrOverlayVisibilityOptions = { hideDelayMs?: number; }; -export const INPUT_OVERLAY_HIDE_DELAY_MS = 2500; -export const INPUT_OVERLAY_FADE_DURATION_MS = 200; +export const INPUT_OVERLAY_HIDE_DELAY_MS = 1600; +export const INPUT_OVERLAY_FADE_DURATION_MS = 260; export const INPUT_OVERLAY_RENDER_ORDER = 10000; export const POINTER_LENGTH = 5; export const POINTER_MIN_LENGTH = 0.06; @@ -19,29 +19,9 @@ export const POINTER_HIT_SURFACE_OFFSET = 0.015; const HAND_JOINT_NAMES = [ 'wrist', - 'thumb-metacarpal', - 'thumb-phalanx-proximal', - 'thumb-phalanx-distal', 'thumb-tip', - 'index-finger-metacarpal', - 'index-finger-phalanx-proximal', - 'index-finger-phalanx-intermediate', - 'index-finger-phalanx-distal', 'index-finger-tip', - 'middle-finger-metacarpal', - 'middle-finger-phalanx-proximal', - 'middle-finger-phalanx-intermediate', - 'middle-finger-phalanx-distal', 'middle-finger-tip', - 'ring-finger-metacarpal', - 'ring-finger-phalanx-proximal', - 'ring-finger-phalanx-intermediate', - 'ring-finger-phalanx-distal', - 'ring-finger-tip', - 'pinky-finger-metacarpal', - 'pinky-finger-phalanx-proximal', - 'pinky-finger-phalanx-intermediate', - 'pinky-finger-phalanx-distal', 'pinky-finger-tip' ]; @@ -123,7 +103,7 @@ export class VrOverlayVisibility { object.traverse?.((child: any) => { const materials = Array.isArray(child.material) ? child.material : [child.material]; materials.filter(Boolean).forEach((material: any) => { - material.opacity = opacity; + material.opacity = opacity * getOverlayMaterialMaxOpacity(material); material.transparent = true; material.depthTest = false; material.depthWrite = false; @@ -153,7 +133,7 @@ export function createPointerOverlay(index: number, overlayVisibility: VrOverlay const group = new THREE.Group(); group.name = `vrPointerOverlay${index}`; - const pointerMaterial = createOverlayLineMaterial(index === 0 ? 0x8fd8ff : 0xffc16b, 0.75); + const pointerMaterial = createOverlayLineMaterial(index === 0 ? 0xb9e8ff : 0xffd99a, 0.28); const pointerGeometry = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, -POINTER_LENGTH) @@ -163,8 +143,8 @@ export function createPointerOverlay(index: number, overlayVisibility: VrOverlay pointerLine.renderOrder = INPUT_OVERLAY_RENDER_ORDER; group.add(pointerLine); - const tipMaterial = createOverlayMeshMaterial(index === 0 ? 0x8fd8ff : 0xffc16b, 0.9); - const tipMesh = new THREE.Mesh(new THREE.SphereGeometry(0.018, 12, 8), tipMaterial); + const tipMaterial = createOverlayMeshMaterial(index === 0 ? 0xd8f5ff : 0xffe6ba, 0.42); + const tipMesh = new THREE.Mesh(new THREE.SphereGeometry(0.01, 10, 6), tipMaterial); tipMesh.name = `vrPointerTip${index}`; tipMesh.position.z = -POINTER_LENGTH; tipMesh.renderOrder = INPUT_OVERLAY_RENDER_ORDER + 1; @@ -195,7 +175,7 @@ export function createControllerOverlay(index: number, overlayVisibility: VrOver const group = new THREE.Group(); group.name = `vrControllerOverlay${index}`; - const material = createOverlayLineMaterial(index === 0 ? 0x8fd8ff : 0xffc16b, 0.8); + const material = createOverlayLineMaterial(index === 0 ? 0xb9e8ff : 0xffd99a, 0.24); const outlineGeometry = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(-0.045, -0.025, -0.08), new THREE.Vector3(0.045, -0.025, -0.08), @@ -210,8 +190,8 @@ export function createControllerOverlay(index: number, overlayVisibility: VrOver outline.renderOrder = INPUT_OVERLAY_RENDER_ORDER; group.add(outline); - const originMaterial = createOverlayMeshMaterial(0xffffff, 0.75); - const origin = new THREE.Mesh(new THREE.SphereGeometry(0.012, 10, 6), originMaterial); + const originMaterial = createOverlayMeshMaterial(0xffffff, 0.28); + const origin = new THREE.Mesh(new THREE.SphereGeometry(0.007, 8, 5), originMaterial); origin.name = `vrControllerOrigin${index}`; origin.renderOrder = INPUT_OVERLAY_RENDER_ORDER + 1; group.add(origin); @@ -226,7 +206,7 @@ export function createHandOverlay(hand: any, index: number, overlayVisibility: V return; } - const material = createOverlayMeshMaterial(index === 0 ? 0x8fd8ff : 0xffc16b, 0.85); + const material = createOverlayMeshMaterial(index === 0 ? 0xb9e8ff : 0xffd99a, 0.26); joints.forEach(({ joint, name }) => { if (!joint || joint.userData?.vrwpHandOverlayMarker) { return; @@ -234,8 +214,8 @@ export function createHandOverlay(hand: any, index: number, overlayVisibility: V const isTip = name.endsWith('tip'); const isWrist = name === 'wrist'; - const radius = isWrist ? 0.014 : isTip ? 0.011 : 0.008; - const marker = new THREE.Mesh(new THREE.SphereGeometry(radius, 10, 6), material); + const radius = isWrist ? 0.008 : isTip ? 0.006 : 0.005; + const marker = new THREE.Mesh(new THREE.SphereGeometry(radius, 8, 5), material); marker.name = `vrHandJointOverlay${index}-${name}`; marker.renderOrder = INPUT_OVERLAY_RENDER_ORDER + 2; marker.frustumCulled = false; @@ -289,23 +269,38 @@ export function setPointerOverlayLength(pointerOverlay: any, length: number): vo } export function createOverlayLineMaterial(color: number, opacity: number): any { - return new THREE.LineBasicMaterial({ + const material = new THREE.LineBasicMaterial({ color, depthTest: false, depthWrite: false, opacity, transparent: true }); + material.userData = { + ...material.userData, + vrwpOverlayMaxOpacity: opacity + }; + return material; } export function createOverlayMeshMaterial(color: number, opacity: number): any { - return new THREE.MeshBasicMaterial({ + const material = new THREE.MeshBasicMaterial({ color, depthTest: false, depthWrite: false, opacity, transparent: true }); + material.userData = { + ...material.userData, + vrwpOverlayMaxOpacity: opacity + }; + return material; +} + +function getOverlayMaterialMaxOpacity(material: any): number { + const maxOpacity = material.userData?.vrwpOverlayMaxOpacity; + return Number.isFinite(maxOpacity) ? maxOpacity : 1; } function getHandJoints(hand: any): Array<{ joint: any; name: string }> {