webxr 0.1.0

data/examples/controller_input.rb

@@ -0,0 +1,91 @@
+# frozen_string_literal: true
+
+# Controller Input Example
+# This example demonstrates how to handle VR controller input using the InputHelper.
+#
+# IMPORTANT: This code runs ONLY in a browser via ruby.wasm.
+# It cannot be executed with standard Ruby (e.g., `ruby examples/controller_input.rb`).
+#
+# See hello_webxr.html for a working browser example.
+
+require "webxr"
+
+# Use the SessionManager for easier session handling
+manager = WebXR::Helpers::SessionManager.new
+
+unless manager.available?
+  puts "WebXR is not available"
+  exit
+end
+
+unless manager.supports?(WebXR::SessionMode::IMMERSIVE_VR)
+  puts "VR is not supported"
+  exit
+end
+
+# Get WebGL context
+canvas = JS.global[:document].call(:getElementById, "xr-canvas")
+gl = canvas.call(:getContext, "webgl2", JS.eval("{ xrCompatible: true }"))
+
+# Start VR session with block for automatic cleanup
+manager.start_vr(optional_features: ["hand-tracking"]) do |session, reference_space|
+  puts "VR Session started"
+
+  # Setup rendering
+  renderer = WebXR::Helpers::RenderingHelper.new(session, gl, reference_space)
+  renderer.setup_layer(antialias: true, framebuffer_scale_factor: 1.0)
+
+  # Setup input handling
+  input = WebXR::Helpers::InputHelper.new(session, reference_space)
+
+  # Handle select events (trigger press)
+  input.on_select do |source, event, pose|
+    if pose
+      position = pose.transform.position
+      puts "Select at position: (#{position[:x].round(2)}, #{position[:y].round(2)}, #{position[:z].round(2)})"
+    end
+
+    case source.handedness
+    when WebXR::Handedness::LEFT
+      puts "Left controller select"
+    when WebXR::Handedness::RIGHT
+      puts "Right controller select"
+    end
+  end
+
+  # Handle squeeze events (grip button)
+  input.on_squeeze do |source, event, pose|
+    puts "Squeeze from #{source.handedness} controller"
+  end
+
+  # Run render loop
+  renderer.run_frame_loop do |time, frame, view, viewport|
+    # Clear with dark blue color
+    renderer.clear(r: 0.0, g: 0.0, b: 0.2, a: 1.0)
+
+    # Get controller states
+    input.each_controller do |controller|
+      states = input.button_states(controller)
+
+      # Check thumbstick movement
+      thumbstick_x = states[:thumbstick][:x]
+      thumbstick_y = states[:thumbstick][:y]
+
+      if thumbstick_x.abs > 0.1 || thumbstick_y.abs > 0.1
+        puts "#{controller.handedness} thumbstick: (#{thumbstick_x.round(2)}, #{thumbstick_y.round(2)})"
+      end
+
+      # Get controller pose
+      pose = input.grip_pose_for(controller, frame)
+      if pose
+        # Use pose.transform.matrix for rendering controller model
+      end
+    end
+
+    # Your 3D rendering code here
+    projection = view.projection_matrix
+    view_matrix = view.view_matrix
+  end
+end
+
+puts "Session ended"

data/examples/hand_tracking.rb

@@ -0,0 +1,124 @@
+# frozen_string_literal: true
+
+# Hand Tracking Example
+# This example demonstrates how to use hand tracking in WebXR Ruby.
+#
+# IMPORTANT: This code runs ONLY in a browser via ruby.wasm.
+# It cannot be executed with standard Ruby (e.g., `ruby examples/hand_tracking.rb`).
+#
+# Prerequisites:
+# - A WebXR-compatible browser with hand tracking support
+# - A device with hand tracking capabilities (e.g., Meta Quest)
+# - ruby.wasm runtime loaded in the browser
+
+require "webxr"
+
+# Check WebXR availability
+unless WebXR.available?
+  puts "WebXR is not available"
+  exit
+end
+
+xr = WebXR.system
+
+# Check hand tracking support
+unless xr.session_supported?(WebXR::SessionMode::IMMERSIVE_VR)
+  puts "VR is not supported"
+  exit
+end
+
+# Get WebGL context
+canvas = JS.global[:document].call(:getElementById, "xr-canvas")
+gl = canvas.call(:getContext, "webgl2", JS.eval("{ xrCompatible: true }"))
+
+# Request VR session with hand tracking
+session = xr.request_session(
+  WebXR::SessionMode::IMMERSIVE_VR,
+  required_features: ["local-floor"],
+  optional_features: ["hand-tracking"]
+)
+
+puts "VR Session started with hand tracking"
+puts "Enabled features: #{session.enabled_features.join(', ')}"
+
+# Get reference space
+reference_space = session.request_reference_space(WebXR::ReferenceSpaceType::LOCAL_FLOOR)
+
+# Create WebGL layer
+layer = WebXR::WebGLLayer.new(session, gl)
+session.update_render_state(base_layer: layer)
+
+# Rendering loop
+render_frame = proc do |time, js_frame|
+  session.request_animation_frame(&render_frame)
+
+  frame = WebXR::Frame.new(js_frame)
+  pose = frame.viewer_pose(reference_space)
+
+  next unless pose
+
+  # Bind framebuffer
+  gl.call(:bindFramebuffer, gl[:FRAMEBUFFER], layer.framebuffer)
+  gl.call(:clearColor, 0.1, 0.1, 0.2, 1.0)
+  gl.call(:clear, gl[:COLOR_BUFFER_BIT] | gl[:DEPTH_BUFFER_BIT])
+
+  # Process input sources for hand tracking
+  session.input_sources.each do |source|
+    hand = source.hand
+    next unless hand
+
+    puts "Processing #{source.handedness} hand with #{hand.size} joints"
+
+    # Get joint poses
+    hand.each do |joint_name, joint_space|
+      joint_pose = frame.joint_pose(joint_space, reference_space)
+      next unless joint_pose
+
+      position = joint_pose.transform.position
+      radius = joint_pose.radius
+
+      # Draw a sphere at each joint position
+      # In a real app, you would use WebGL to render spheres
+      if joint_space.tip?
+        puts "  #{joint_name}: pos=(#{position[:x].round(3)}, #{position[:y].round(3)}, #{position[:z].round(3)}), radius=#{radius.round(4)}"
+      end
+    end
+
+    # Detect pinch gesture (thumb tip close to index finger tip)
+    thumb_tip = hand.thumb_tip
+    index_tip = hand.index_finger_tip
+
+    if thumb_tip && index_tip
+      thumb_pose = frame.joint_pose(thumb_tip, reference_space)
+      index_pose = frame.joint_pose(index_tip, reference_space)
+
+      if thumb_pose && index_pose
+        thumb_pos = thumb_pose.transform.position
+        index_pos = index_pose.transform.position
+
+        # Calculate distance between thumb and index tips
+        dx = thumb_pos[:x] - index_pos[:x]
+        dy = thumb_pos[:y] - index_pos[:y]
+        dz = thumb_pos[:z] - index_pos[:z]
+        distance = Math.sqrt(dx * dx + dy * dy + dz * dz)
+
+        # Pinch detected if distance is less than 2cm
+        if distance < 0.02
+          puts "  PINCH detected on #{source.handedness} hand! Distance: #{(distance * 100).round(1)}cm"
+        end
+      end
+    end
+  end
+
+  # Render views
+  pose.each_view do |view|
+    viewport = layer.viewport(view)
+    gl.call(:viewport, viewport.x, viewport.y, viewport.width, viewport.height)
+    # Your 3D rendering code here
+  end
+end
+
+# Start render loop
+session.request_animation_frame(&render_frame)
+
+puts "Hand tracking demo started"

data/examples/hello_webxr.html

@@ -0,0 +1,288 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Hello WebXR Ruby</title>
+  <style>
+    body {
+      margin: 0;
+      background: #1a1a2e;
+      color: white;
+      font-family: system-ui, sans-serif;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+    }
+    h1 { color: #e94560; }
+    #xr-canvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .container {
+      text-align: center;
+      padding: 2rem;
+      z-index: 10;
+      position: relative;
+    }
+    button {
+      background: #e94560;
+      color: white;
+      border: none;
+      padding: 1rem 2rem;
+      font-size: 1.2rem;
+      border-radius: 8px;
+      cursor: pointer;
+      margin: 0.5rem;
+      transition: background 0.3s;
+    }
+    button:hover { background: #ff6b6b; }
+    button:disabled {
+      background: #444;
+      cursor: not-allowed;
+    }
+    #status {
+      margin-top: 1rem;
+      padding: 1rem;
+      background: rgba(255,255,255,0.1);
+      border-radius: 8px;
+    }
+    #log {
+      margin-top: 1rem;
+      padding: 1rem;
+      background: #0f0f23;
+      border-radius: 8px;
+      text-align: left;
+      max-height: 200px;
+      overflow-y: auto;
+      font-family: monospace;
+      font-size: 0.9rem;
+      width: 80%;
+      max-width: 500px;
+    }
+    .log-entry { margin: 0.25rem 0; }
+  </style>
+</head>
+<body>
+  <canvas id="xr-canvas"></canvas>
+
+  <div class="container" id="ui">
+    <h1>Hello WebXR Ruby</h1>
+    <p>WebXR Device API bindings for Ruby via ruby.wasm</p>
+
+    <div id="status">Checking WebXR support...</div>
+
+    <div id="buttons" style="display: none;">
+      <button id="vr-btn" disabled>Enter VR</button>
+      <button id="ar-btn" disabled>Enter AR</button>
+    </div>
+
+    <div id="log"></div>
+  </div>
+
+  <script type="module">
+    const statusDiv = document.getElementById("status");
+    const buttonsDiv = document.getElementById("buttons");
+    const vrBtn = document.getElementById("vr-btn");
+    const arBtn = document.getElementById("ar-btn");
+    const logDiv = document.getElementById("log");
+    const canvas = document.getElementById("xr-canvas");
+
+    // Setup WebGL context
+    const gl = canvas.getContext("webgl2", { xrCompatible: true });
+    if (!gl) {
+      console.error("WebGL2 not supported");
+    }
+
+    function log(message) {
+      const entry = document.createElement("div");
+      entry.className = "log-entry";
+      const time = new Date().toLocaleTimeString();
+      entry.textContent = `[${time}] ${message}`;
+      logDiv.appendChild(entry);
+      logDiv.scrollTop = logDiv.scrollHeight;
+      console.log(message);
+    }
+
+    async function startXRSession(mode) {
+      try {
+        const isAR = mode === "immersive-ar";
+        log(`Requesting ${isAR ? 'AR' : 'VR'} session...`);
+
+        const session = await navigator.xr.requestSession(mode, {
+          requiredFeatures: [isAR ? "local" : "local-floor"]
+        });
+
+        log(`Session started: ${mode}`);
+        statusDiv.textContent = `${isAR ? 'AR' : 'VR'} session active`;
+
+        // Hide UI during session
+        document.getElementById("ui").style.display = "none";
+
+        // Setup WebGL layer
+        const layer = new XRWebGLLayer(session, gl, { alpha: isAR });
+        session.updateRenderState({ baseLayer: layer });
+
+        log(`Layer created: ${layer.framebufferWidth}x${layer.framebufferHeight}`);
+        log(`Framebuffer: ${layer.framebuffer ? 'valid' : 'null (using canvas)'}`);
+
+        // Get reference space
+        const spaceType = isAR ? "local" : "local-floor";
+        const refSpace = await session.requestReferenceSpace(spaceType);
+        log("Reference space acquired");
+
+        // Handle session end
+        session.addEventListener("end", () => {
+          log("Session ended");
+          statusDiv.textContent = "Session ended. Click to restart.";
+          document.getElementById("ui").style.display = "block";
+          vrBtn.disabled = false;
+          arBtn.disabled = false;
+        });
+
+        // Handle select events
+        session.addEventListener("select", (event) => {
+          const hand = event.inputSource.handedness;
+          log(`Select from ${hand} controller`);
+        });
+
+        // Animation frame counter
+        let frameCount = 0;
+        let hue = 0;
+
+        // Render loop
+        function onFrame(time, frame) {
+          session.requestAnimationFrame(onFrame);
+          frameCount++;
+
+          const pose = frame.getViewerPose(refSpace);
+          if (!pose) return;
+
+          // Bind XR framebuffer
+          gl.bindFramebuffer(gl.FRAMEBUFFER, layer.framebuffer);
+
+          // Animate background color (hue rotation)
+          hue = (hue + 0.5) % 360;
+          const rgb = hslToRgb(hue / 360, 0.5, 0.3);
+
+          // Clear with animated color (or transparent for AR)
+          if (isAR) {
+            gl.clearColor(0, 0, 0, 0);
+          } else {
+            gl.clearColor(rgb[0], rgb[1], rgb[2], 1.0);
+          }
+          gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+          // Render each view
+          for (const view of pose.views) {
+            const viewport = layer.getViewport(view);
+            gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
+
+            // Draw a simple colored rectangle for each eye
+            // In a real app, you would render 3D content here
+          }
+
+          // Log every 100 frames
+          if (frameCount % 100 === 0) {
+            log(`Frame ${frameCount}`);
+          }
+        }
+
+        session.requestAnimationFrame(onFrame);
+        log("Render loop started");
+
+      } catch (e) {
+        log("Error: " + e.message);
+        vrBtn.disabled = false;
+        arBtn.disabled = false;
+      }
+    }
+
+    // HSL to RGB conversion
+    function hslToRgb(h, s, l) {
+      let r, g, b;
+      if (s === 0) {
+        r = g = b = l;
+      } else {
+        const hue2rgb = (p, q, t) => {
+          if (t < 0) t += 1;
+          if (t > 1) t -= 1;
+          if (t < 1/6) return p + (q - p) * 6 * t;
+          if (t < 1/2) return q;
+          if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+          return p;
+        };
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1/3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1/3);
+      }
+      return [r, g, b];
+    }
+
+    // Initialize
+    async function init() {
+      log("Initializing WebXR demo...");
+
+      if (!navigator.xr) {
+        statusDiv.textContent = "WebXR is not supported in this browser";
+        log("WebXR not available");
+        return;
+      }
+
+      log("WebXR API detected");
+      buttonsDiv.style.display = "block";
+
+      // Check VR support
+      try {
+        const vrSupported = await navigator.xr.isSessionSupported("immersive-vr");
+        if (vrSupported) {
+          vrBtn.disabled = false;
+          log("Immersive VR supported");
+        } else {
+          log("Immersive VR not supported");
+        }
+      } catch (e) {
+        log("VR check failed: " + e.message);
+      }
+
+      // Check AR support
+      try {
+        const arSupported = await navigator.xr.isSessionSupported("immersive-ar");
+        if (arSupported) {
+          arBtn.disabled = false;
+          log("Immersive AR supported");
+        } else {
+          log("Immersive AR not supported");
+        }
+      } catch (e) {
+        log("AR check failed: " + e.message);
+      }
+
+      statusDiv.textContent = "Ready! Click a button to start XR session.";
+
+      // Button handlers
+      vrBtn.addEventListener("click", () => {
+        vrBtn.disabled = true;
+        arBtn.disabled = true;
+        startXRSession("immersive-vr");
+      });
+
+      arBtn.addEventListener("click", () => {
+        vrBtn.disabled = true;
+        arBtn.disabled = true;
+        startXRSession("immersive-ar");
+      });
+    }
+
+    init();
+    log("WebXR demo initialized");
+  </script>
+</body>
+</html>