Virtual Interactive Showroom for TECZZZ Look 1

To bring back in-person showroom experience for my Thesis Project during the pandemic with absolute no waste of natural resource. And also to create fresh interaction with audiences while they're visiting the showroom.

CHALLENGE:

To bring back an in-person presentation experience sustainably during the pandemic since the in-person Graduation Runway had been canceled.

SOLUTION:

Use self-taught 3D skills to create a virtual interactive showroom to bring back the in-person visiting experience with absolutely no waste.

Timeline: 2 months (including digital garments and physical garments creation)

Progress

The 3D showroom space idea was inspired by my previous camera scan project for Kozaburo. I was thinking of doing a camera scan VR showroom for my Thesis Project. But because my scene is futuristic, it will be hard to build up a futuristic scene in real life. And also, I want something fresh besides the camera scan showroom. So I decided to learn Blender and build up a scene there. In the beginning, I only thought about using the scene for a camera scan. After building up the 3D models for the rendering of my runway, I figured it was wasteful for this huge environment just for a video clip and also, I have enough time to bring the showroom to live before the deadline. Then, I decided to bring it to life.

Researching

I am a video game player ever since I was young, just like most of the GenZ. And I believe that most of the GenZ will be the biggest shopping group in the future. So one thing comes to my mind, that makes the showroom like a video game.

Talking about a video game, Balenciaga's Fall 2021 video game presentation pops out in my mind.

After a little more research, I found out the presentation was created in Unreal Engine.

- Hollywood quality render

- Easy navigation logic, used by most of the video games

- Worldbuilding

- reactive environment

However, there is no doubt that Unreal Engine is one of the best solutions to bring my presentation live. As I dig in more, I found out that Unreal Engine has different material system than blender, which means I couldn't directly export my file from Blender to Unreal Engine. It requires some manipulations on it. After watching couple tutorials, I don't think it's possible to learn and finish the project when there's only one month left. So I have to find another option.

As continued researching, I found an interesting Instagram account called the_3mbassy. The 3mbassy is a 3D virtual fashion design studio based in Germany. They brought a virtual showroom project to life

Screenshot from 3mbassy's Cyber Space.

- Free movement on the floor around the showroom

- Information tag in the starting point link to a Youtube tutorial video on how to walk around the showroom and how to interact

- Video tag link to the high-quality render on Instagram post

I think this is a great solution and it has everything I need. As I continuing digging in, I found out they brought their virtual space to live by Verge 3D - a Blender plug-in.

I started bringing the showroom model through Verge 3D immediately.

It was hard to believe that everything works smoothly in the Blender. After some copy & paste work, I decided to preview it on Verge 3D.

My computer froze in the process for a couple of minutes and die...

Luckily, Verge 3D is beginner-friendly and offers a community for people to ask questions - even for trial users. In the community, people help me and let me know the reasons cause those issues - my file is too big. I'll have to minimize the showroom file.

First of all, I tried lower down all the image size of the renders without losing the quality.

Then, I baked all the textures from the neon light source to get a better performance.

I tried to lower down the particle distance of all the neon lights made with my designs and bring them into low-poly objects.

Lastly, I take off all the background buildings/neon lights and use high-quality renders instead.

Everything works well after the compression!

Everything can be launched in 15 seconds as a web interactive app.

INTERACTION PART

Simply left-click and drag to look around inside the showroom.

Simply left-click on the floor to walk around the showroom. Walking is enabled by Verge 3D's puzzle system. Verge 3D puzzle is a great substitute for designers who barely know to code.

Click on the display screen to teleport the camera close to the screen in order to get a better view of the render images.

Hover the mouse onto the display screen to play the available video content.

Instagram button to bring people to the Instagram page to see a higher quality render of images/videos.

I thought everything is running smoothly and it's close enough to what I want to present my project. So I decide to send it out to my friends and show it off in front of them..

My friends are mostly Asian and Gen-Z. All of them loves fashion and some of them love to play video games but some of them don't.

Hi guys! I create a virtual interactive showroom for my Thesis project.

Check it out and let me know what you think!

OMG, it looks so cool! How did you do that?

The showroom looks so dope!

I accidentally click on something and it takes my screen to a weird spot. I have to refresh the page to get back. But it's cool!

After all, I found out that no one knows how to interact with the showroom beside me. Most of them thoughts it's a solid project. Even some of my video game player friends didn't know it can interact before I told them.

So, I decided to create a help menu in the very beginning, just like every video game has.

Instead of boring written instructions, I decide to have the instructions play as videos. I believe it is easier for people to understand.

HELP MENU DISPLAY

CONCLUSION

This is my very first time learning about 3D skills. Because of the pandemic, the in-person graduation runway had been canceled. To better present my project and to better deliver the mood to the audience. I decided to bring up a showroom in a different way instead of the camera scan version. Luckily, I took a CLO 3D class the last semester, which brings me into the 3D world. With the modeling basics in CLO 3D, I self-taught in Blender and get my project presented specially online.

Because of the time limit, I had only featured one garment in the showroom. Having only one garment is not enough for big showroom space. And I think the interaction part is also not enough. Thanks to the Verge 3D puzzle, it allows me to bring up the interaction part without coding background and gives me a basic knowledge of coding. And it also brings a lot of possibilities. Also, I found out that it is important to let your audience know how they can interact with it. Some of my friends don't know how to interact inside the showroom without the help menu. With more content, it will be more important to have a detailed, clear help menu. And also, the performance of the app on each device is important. Because I have too many garment object as the neon light, and even though I compressed them to low-poly objects, it is still heavy and the performance is not smooth enough on some devices such as Mac and mobile devices. That is one thing I have to be aware of in the next project.

However, it is my first 3D project and I like it a lot. It turns on the fire in my heart on 3D and interaction. And it makes me think more about how I can connect myself with the audience.

SOURCES

Background building object: "75-low-poly-buildings" (https://skfb.ly/6YFrx) by taishawnbrown6 is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).

The font in the project: "Anurati Font" (https://befonts.com/anurati-font.html) by Emmeran Richard.

Walking plug-in puzzle bought from: (https://zjbcool.gumroad.com/l/HxqzA) by zjbcool.

Garment designed by Liqian Zhang.

Showroom built by Liqian Zhang.

THE END

THANK YOU!