Parallax Barrier Display 2.0

This article updates our earlier parallax barrier display tutorial by adding support for the latest iPhone hardware, provides more detail about generating and printing your own pinhole mask, and gives instructions for building an app to render light fields in real time!

Table of Contents

  1. What You Will Need
  2. Generating and Printing Your Parallax Barrier
  3. Aligning and Affixing Your Parallax Barrier
  4. Creating and Running Your iOS App
  5. Rendering Your Light Field
  6. Interlacing

We will provide additional resources and theoretical notes in context along the way. Let’s get started!

Note: What Is a Light Field Display, and Why Should I Want One?

A light field display is a 3D display that doesn’t require any special glasses. You can move your head around within a small region in front of the display (sometimes called the “head box” or “sweet spot”) and you will see motion parallax just as you would when observing a real object. In addition, a light field display projects light into your eyes in a way that simulates light reflecting off of real objects, so you will be able to focus or accommodate your eyes on objects at various distances and observe those objects become sharper or blurred, just like in real life. Thus, unlike stereoscopic displays which only provide binocular disparity for ocular vergence, a light field display provides the depth perception through both the vergence and accommodation cues. Since the light field display projects the light rays emitted in multiple viewing directions from an object into the eye, light field display suffers from an inherrent spatio-angular tradeoff. A simple low-cost light field display can be built by placing an appropriately dimensioned pinhole mask or “parallax barrier” over a high resolution LCD panel.

For more details about the physics of glasses-free 3d and light field displays, check out this SIGGRAPH course from Douglas Lanman and Matthew Hirsch.

What You Will Need

  1. An iPhone. We tested on iPhone 6 with iOS 9.2. This technique may work with iOS 8 as well, and with devices as old as iPhone 4S. However, if you want to use our provided mask files, you will need a device with a 4.7 inch screen like iPhone 6.
  2. A pinhole mask printed on a transparent film to use as a parallax barrier. We will describe the process of generating and printing this mask in detail in the next section.
  3. Coding experience. If you want to build a light field rendering app, you should ideally be comfortable with Swift development on iOS. Some experience with 3D graphics is also very helpful. If you have no coding experience, this tutorial might be a tough place to start. If you have coding experience, but not specifically with Swift, you will probably be able to figure out what you need to know. We will be using the very straightforward SceneKit framework for 3D rendering. We will be writing a custom shader using the iOS Metal Shading Language as well.
  4. A Mac. iOS development requires a Mac with Xcode installed. We used Xcode 7.2 on OS X 10.11 (El Capitan).
  5. (Optional) Two sheets of transparent acrylic, each the size of your phone screen.
    Parallax Barrier Between Two Acrylic Spacers

    Parallax Barrier Between Two Acrylic Spacers

    You can cut these with a laser cutter if you have access to one, or with a saw. The 5/64” strengthened UV-resistant acrylic sheets from McMaster used in the Layered 3D project should work here as well. You may also be able to find some acrylic sheets at your local hardware store.

    The bottom sheet is used as a spacer between the pixels and your parallax barrier. The top sheet simply protects the barrier. A thicker spacer will give you a narrower field of view, but more densely-packed angular resolution. You can experiment with different spacer thicknesses if you have them, or even do without a spacer, as the glass on the phone’s screen itself provides some spacing.

    We tried using a commercial iPhone screen protector instead of the top acrylic layer, but found it would not cling to the screen when the parallax barrier was under it.

  6. (Optional) An iOS-compatible game controller
    SteelSeries Nimbus MFi Game Controller

    SteelSeries Nimbus MFi Game Controller

    You probably will be unable to touch the screen through your barrier. If you want to have any interaction with your application while the barrier is affixed, such as to cycle through display models or show a calibration pattern, you will need to have some external input device like a bluetooth keyboard or game controller. We used the SteelSeries Nimbus available from Apple. Alternatively, you could make your mask and spacer assembly a bit smaller than your phone’s display so that a small section of the screen is touch-accessible.


Salman Naqvi
Stanford University;

Ryan Burgoyne
Stanford University

Ready to get started? Let’s delve into generating and printing your parallax barrier!

Comments are closed.