Create an AR Art Gallery with Lens Studio

With this program, creating a gallery space in virtual space for your work can be accessible done. This can be transported to intended viewers’ mobile devices to recreate the experience of walking through a gallery with your phone.

You can also record your experience first-handed and send it as a video walkthrough to offer that experience without moving around or holding a phone. This can be especially useful to artists wanting to display work during circumstances where physical gallery spaces are inaccessible.

Creating this project was influenced by a number of factors:

  • With uses of technology being a leading force in future exhibitions, using smart devices to highlight an exhibition theme and contents through interactiveness, my initial gallery theme highlighting development of generative/use of autonomous systems in art.
  • Using AR and VR, many advantages to the experience include pushing the boundaries and limits of typical physical galleries.
  • Current circumstances inhibiting the travel and experience of physical gallery spaces. This project can be used as a tool for others to easily materialize their own gallery space and transport to others for viewing and walking through, using a smartphone.

Initially my project was created to showcase pioneers of generative art, different genres of generative work such as those including audio, interactivity, and/or architectural pieces. However, the direction took a different turn after realizing the potential to be used for other artists or creators as a tool to display work.

How does it work?

Linked at the end of this article is a walkthrough with visual guides. This article provides visual aides and text to follow along.

To successfully create your own gallery from this template, one would most likely require at least:

  • 2GB space for Lens Studio application to download
  • Space for Photoshop (editing the wall design templates)
  • Strongly encouraged are: Adobe Illustrator, Snapchat (these will be used to test gallery functionality and personalize gallery images)
  • A laptop or computer that can function with these applications.

First:

So first things first, you’re going to need to download and install Lens Studio. Lens Studio is a desktop app incredibly useful for creating augmented reality experiences.

Now, download the “Gallery_Template_Files.” Within this, you will find 2 folders with the most key files for editing the gallery.

Within the Gallery_Lens_Template, folder you find the Lens Studio file that holds the 3D gallery template file. You can see some elements in here like icon, and the project file.

Click the icon with Lens Studio yellow logo and file name Gallery_Lens_Template.LSPROJ to launch the template.

When the file opens, you get a view of the workspace. To the left you see editable aspects of the file, most importantly — objects. These encompass elements of the 3d space, such as Materials and Textures which I will elaborate on soon.

Each wall within the 3D space is an individual object file, that can be accessed by clicking the “portal” object folder (it’s called this because the gallery is in a portal you step into) As I click on the “portal” folder, you can see 5 objects. Each object refers to a specific wall or floor you can edit — and when it is hovered and clicked on, highlights the wall in the visible editor. Great!

Now how do we edit the contents of the walls or floor?

Before we get to that, I’m gonna show what goes into the walls /floor objects.

Firstly, we will want to hide the “occluders” folders, meaning objects that hide certain parts of your vision to create an illusion of a portal. This is cool but makes it hard to see what you’re editing so let’s hide that for now.

Now…this is where Textures and Materials come in! These are the things that make up an object. You will be editing the “Texture,” which is a PNG file capturing the content of your gallery space. Each wall has its own texture.

This texture is then placed on a “Material,” which in our case, is a plane in the shape of a wall.

When you click the texture folder, you will only be replacing the content of these with your own work — using these 5 files — all of them are organized together beginning with Gallery Underscore and the following wall or floor panel that it connects with.

Scroll just a bit further down to see “Materials,” where you will insert the “texture” file onto depending on what wall you’d like to have it displayed on!
For example, I click the “Blank_left_wall_material” and under the right inspector panel you’ll see it has the Gallery_wall_left_texture (the png file) attached to it.

Now how to create your own designs with this!

Let’s go to our Gallery Template Files folder and inside go to Create Gallery Wall Template folder. We have PNG and PSD (photoshop document) files. The PNG is the final exported file that is used as a texture in Lens Studio file.
The PSD file is what you use to edit that PNG to be! Each PSD correlates to a wall side.

For example, I will click the Gallery_Wall_Front_Template PSD to edit the front wall. Within the layers, you can see 2 folders designated as a FRAME or PLAQUE, each containing editable layers specific to the folder name. And a WALL layer which establishes the wall image itself.

To put your own artwork or image here, you simply insert the wanted image into the FRAME folder — here i’ll use a photo of flowers — and swap it with the sample image. So, I drop that in there, and size it down to whatever size you want the viewer to see it at, and get rid of the sample image. Maybe you want to adjust (or get rid of) the frame entirely. So you can do that in the FRAME folder by transforming the lowercase frame layer.

You can do this by using transform (shift+t) to the size of the image as you’d like. Cool now we have the image like we want it. But the plaque doesn’t fit right now!

Under PLAQUE folder, edit the type content and plaque it’s on and size however you’d like (or delete it as you’d like!) be as expressive as you want with it!

Same goes for the wall. Using the wall layer as a template and appropriate gauge for viewers — you don’t want the image or type to be too big, or small… currently it’s at a generic but readable size when the viewer walks through. Explore this as you’d like to be most appropriate for your content.

So I will edit this by double-clicking the type…which has a text box for the header information and description. Going to edit this header to suit the image… and there we go.

I think we are ready to put this into the Lens Studio 3D file. So let’s save the PSD file, and export it as a PNG not changing the file name (overwriting the sample PNG) Correlating with the correct wall side. So it’ll overwrite the front space png.

We will go back to our Lens Studio template, and go to the textures folder on the left panel. Scroll to the texture name correlating with the wall you would like to place your file in, and right-click the texture. Click “update from source” on the menu that appears, and it will replace the texture with your newly exported png. See in the Preview panel that it should have updated to the new file. But if you want to test it out on your phone, after having snapchat downloaded, you can sync it to your phone and click the Push Lens To Device to test it out. Here’s a video demonstrating how this template looks when walking through the virtual space.

As you see, to view the space, you travel through a portal to access this. If you would like to remove the portal, and simply have a space, delete the “occluders” folder. This contains objects that obscure the viewer’s sight to create an illusion of a portal.

Anyways, apply the above steps to each wall and you have created your own gallery space to share with others! Some suggestions with sharing-

To share with viewers who don’t have snapchat — simply record yourself walking through your own gallery and send that video to people.

You can also publish the lens, and share it with people who have snapchat that way. Please be sure to keep the file under 4MB or it won’t upload.

Before publishing, be sure to edit the Project Info. You can put a preview, and icon to represent the content within it.

This video walks through working with the template and showing how to place your own designs in, and includes download files.

Credit to CreatorUp and Lens Studio for the Portal tutorial and template, please contact me with any questions or things to expand on more.

Edit: Still in process of uploading files to be downloaded for anyones’ use.

Graduating Graphic + Interactive student at Tyler School of Art – Temple University.