Passthrough Lighting Temperature Controller

This page is a step-by-step guide to build a lighting temperature controller working in Meta Quest 3 passthrough through a slider UI. This includes using the Meta XR Passthrough Building Block and controller joystick input.

The goal is to create a UI slider that lets you tint the passthrough view from cool (blue) to warm (orange), controlled by the right joystick on Meta Quest 3.

Step-by-Step Setup Guide

1. Create & Set Up the Project

1. Open Unity Hub
2. Create a new 3D (URP) project (Recommended Unity version: 2022.3.x LTS)

2. Switch Platform to Android (for Quest)

1. Go to File > Build Settings

2. Select Android and click Switch Platform

3. Then close the window.

3. Add the Required Packages

1. Go to Edit > Project Settings > XR Plug-in Management
   - Install XR Plug-in Management if prompted.
   - Enable Meta XR under Android tab.

2. Go to Window > Package Manager
   Click the + button → "Add package from git URL"
   -com.meta.xr.sdk
   - This installs the Meta XR SDK or Meta all in one SDK

4. Add the Passthrough Building Block

1. In the Hierarchy:
   Right-click → XR > Meta XR > Add Passthrough Building Block
   This gives you:
   - OVRCameraRig
   - OVRPassthroughLayer
   - Passthrough visibility in headset

5. Create the UI Slider

1. Right-click in Hierarchy → UI > Canvas

2. Inside the Canvas:
   - Right-click → UI > Slider
   - Rename it: TintSlider
   - Set: Min Value: -1,Max Value: ,1Value: 0

3. Move the Canvas in front of the camera (e.g. position to 0, 0, 2)

4. Right-click in Hierarchy → Create Empty
   - Rename it: TintControlUI
   - Drag TintSlider under it.

6. Create the Tint Script

1. In Project window → Assets > Scripts
   - Right-click → Create > C# Script
   - Name it: SliderPassthroughTint

2. Paste this code:
   
   

using UnityEngine;

using UnityEngine.UI;

public class SliderPassthroughTint : MonoBehaviour

{

    public Slider tintSlider;

    public OVRPassthroughLayer passthroughLayer;

    [Header("Joystick Settings")]

    public float joystickSensitivity = 1f;

    public float joystickDeadzone = 0.1f;

    public float minSliderValue = -1f;

    public float maxSliderValue = 1f;

    [Header("Color Tint Presets")]

    public Color coolColor = new Color(0.85f, 0.92f, 1.1f);  // bluish

    public Color warmColor = new Color(1.0f, 0.75f, 0.5f);   // orangey

    void Start()

    {

        if (tintSlider == null)

        {

            tintSlider = GetComponentInChildren<Slider>();

        }

        if (passthroughLayer == null)

        {

            passthroughLayer = FindFirstObjectByType<OVRPassthroughLayer>();

        }

        tintSlider.onValueChanged.AddListener(UpdateTint);

        UpdateTint(tintSlider.value);

    }

    void Update()

    {

        float input = OVRInput.Get(OVRInput.Axis2D.SecondaryThumbstick).x;

        if (Mathf.Abs(input) > joystickDeadzone)

        {

            float newValue = tintSlider.value + input * joystickSensitivity * Time.deltaTime;

            newValue = Mathf.Clamp(newValue, minSliderValue, maxSliderValue);

            tintSlider.value = newValue;

        }

    }

    void UpdateTint(float value)

    {

        if (passthroughLayer == null) return;

        float lerpValue = (value + 1f) / 2f;

        Color finalColor = Color.Lerp(coolColor, warmColor, lerpValue);

        passthroughLayer.overridePerLayerColorScaleAndOffset = true;

        passthroughLayer.colorScale = new Vector4(finalColor.r, finalColor.g, finalColor.b, 1f);

        passthroughLayer.colorOffset = Vector4.zero;

    }

}

7. Hook Everything Up

1. Drag the SliderPassthroughTint script onto TintControlUI

2. In the Inspector:
   - Assign the Slider (TintSlider)
   - Assign the PassthroughLayer (find the one on OVRCameraRig)
   
   

8. Test in Headset

1. Plug in your Meta Quest 3

2. Go to File > Build Settings → Click Add Open Scenes

3. Click Build and Run

4. You should now:
   - See passthrough
   - See a slider
   - Move the right joystick left/right to tint cool → warm

You can change the numbers here to apply different color tinting.
This project referenced the Adobe Photoshop warm and cool photo filter.

UI Design

On the slider UI, additional information such as kelvin number, light color and color reference icons are shown.