Flight Of Dreams


An immersive projection in Centrair Flight Park that makes you feel as though you are flying alongside an airplane - the 787 Dreamliner.

Year: 2018 Summer
Team: teamLab
Client:
Chubu Centrair International Airport
Role: Interactive Engineer Intern
Tools: Unity Shader Language
Deliverable: Custom-built shader assets

Overview

Located next to the Chubu International Airport in Nagoya, FLIGHT OF DREAMS is a new kind of airplane theme park based around an exhibition of the first-ever Boeing 787 — Dreamliner. Partnered with the world-renowned media art company teamLab in Tokyo, a projection mapping show was created to wow visitors in the new innovative commercial hub. Real-time generative digital content is projected all around the space, surrounding the aircraft on display. When visitors stand in the observation space, the borders between the walls and the floor seem to disappear. The artwork causes reality to dissolve and one becomes immersed in the illusion of flying in three-dimensional space alongside the airplane.

Background

Built in the Chubu area centering on Nagoya (the heart of Japan's aerospace industry), Centrair is a transport hub for local aerospace and automotive industries. In 2015, Centrair was delighted that Boeing chose to donate the historically significant first test plane, ZA001, a Boeing 787 Dreamliner, to Greater Nagoya, which played such an important role in the manufacturing of the 787Centrair is the only airport in the world from which both the 787 main wing and fuselage sections are flown to Boeing's final assembly plants in the U.S. on the Dreamlifter. It's significant because ZA001 is coming back to the place that literally gave it wings. The last flight of this airplane to Centrair is like a "homecoming" for ZA001

In order to commemorate this historical moment, Centrair decided to build a commercial complex to house ZA001 and create a Flight Park around it. "ZA001 carries all of our dreams and aspirations and has grown to symbolize the storied partnership between Boeing and Japan's outstanding aerospace industry."  - Masanao Tomozoe, CEO of Centrair. Through the exhibition, Centrair expects to raise interest in aerospace and contribute to this "next-generation industry" for the Greater Nagoya region. The airport also hopes that it will spur the imagination of the young people of Japan and the next generation of aerospace pioneers.

To bring this vision to life, teamLab, the world-renowned digital media studio, was commissioned to design and develop an awe-inspiring journey that highlights immersive learning, collaborative creativity and co-creation. The experience comprises nine hands-on exhibits, the crown jewel of which is Flight of Dreams, a dynamic audiovisual projection mapping show that uses cutting-edge immersive technology to the fullest.


Nagoya
Where dreams take off

Experience Map

To ensure a memorable, immersive, and interactive flight-themed journey, the Park is divided into different areas. Each one features a unique experience that invokes various levels of co-creation and sensory involvement. The guest journey is designed to be exploratory and non-linear while still structured within a holistic experiential framework that strives to maximize positive participatory engagement.


"We want it to be a space overflowing with dreams. This milestone will allow us to significantly contribute to the aerospace community as well as the Greater Nagoya region by spurring the imagination and interest of future aviation pioneers here in Japan."

Masanao Tomozoe

President and CEO at Central Japan International Airport Co Ltd

Projection Narrative

Flight of Dreams, the centerpiece of Flight Park, is a ten-minute immersive projection mapping show delivering a mesmerizing and meditative audiovisual experience that sets the backdrop for the entire Flight Park journey. The narrative is anchored around two key concepts: “the shared memory of modern air travel in Japan" and "traditional Japanese culture around spatial movement". The imagination and social participation of every guest is an integral part of the experience which transports them into a shared dream of flying alongside the 787.

I joined the interactive team as an intern and had the pleasure to be involved in the development of two chapters of the projection: Whales and Planes.

"It's like real flight. It is very interesting that we mimic the scene of a plane flying into the sky."

Toshiyuki Inoko

Founder and Chief Representative of teamLab

Technical Development

Flight of Dreams is a 3D real-time virtual scene constructed in Unity3D with models and assets from our 3D artists. My tasks as an interactive intern were twofold:
- Aesthetically, how to creatively breathe life into the visual assets and foster a dreamlike atmosphere.
- On the technical side, how to optimize the real-time performance of a 3D scene with potentially millions of particles and complicated visual effects.

By the end of my internship, I achieved the following results:

1. Shader

Created custom shaders for 3D models to implement different theme-realted visual effects.

2. GPU Particle System

Built a GPU particle system for better performace over the the built-in CPU particle system.

3. Color Clustering

Implemented clustering algorithm to extract color palettes from hand-drawn color sketches.

An 80 day Journey of Unity Graphics Programming

Before I joined teamLab, I had never dabbled in Unity's graphics programming capacity.  As part of an incredible team made up of members filled with initiative, I took some days to grasp the basic concepts and techniques and then started experimenting while trying to stay aligned with the project's needs and goals.

The Interactive team in teamLab is a group of self-driven and talented engineers who love sharing their insights with each other. On the left is a resourceful tech book authored by Masatatsu Nakamura, one of the best engineers in teamLab.

Link to the book

鯨 Whale

My first challenge is to make the swimming whales look convincing within an environment that would be dynamicly reflected on them.

Surface Shader

This dynamic water caustics effect is achieved through  
applying perlin noise offset to the UV coordinate of a static  
water caustics texture in a surface shader.

Light Source Responsive

Variably blurred water caustics are indicative of depth of
water which is crucial for illusion of immersive space.
I parametize the blurriness of the water caustics via
blending two textures (clear and blurred), and  link it with
light source distance to make it responsive in real-time.

Custom Render Texture

This is a wildcard experiment of the custom render texture feature, in an attempt to push the boundaries of the dreamy quality the team is comfortable with.

珊瑚 Corals

Chapter "Whales"  features a beautiful landscape of flowing corals with a vibrant array of colors. I again created shaders to bring them to life.

Vertex-based Texture

The pulsating rhythms of the light-emitting is created by mapping the distance between vertexes and the center of the model into a luminace texture which is then animated with periodic sine wave.

Color Schemes

Overlay monochrome
luminance texture with
different gradient color
patterns.

星 Stars

In chapter "Planes", stars are scattered across the firmament where planes swoosh past. The goal here is to make them glitter.

High Contrast Luminance

High contrast noise map
is overlayed and animated
to simulate a metalic
glittering effect.

Kawase Lightstreak

Suggested by the the team, I apply the Kawase Lightstreak effect (created by a team member) on top of my shader. But it comes out with issue of overexposure and I am prompted to fix the issue.

Origional Kawase's Light Streak

GPU Particle

In chapter "Planes", airplanes sketched by guests perform formation flying alongside the 787. To create the contrail effect, the built-in particle system doesn't give the optimal performance and we turn to a customized GPU particle system solution.





Compute Shader

Compute shader capitalizes on the highly parallel computing capacity of GPU. In our case it ends up giving better CPU and GPU time performace compared with the built-in Shuriken system.

The team provides the basic code and I iterate it by adding the "Emitter" in the code logic and also extends its particle features.

Color Clustering

In chapter "Planes", we wanted the colors of the contrails left by sketched airplanes to match their color palettes. My mentor, Yuan Li, provided a bare minimum k-means algorithm and I further iterated and improved it.

K-means Clustering

K-means group similar data points
together and discover underlying patterns.
To achieve this objective, K-means looks for
a fixed number (k) of clusters in a dataset.
This makes K-means a good fit for our
purpose: discover color patterns from a
dataset of pixels.

Get Started

Improved K-Means

The base K-means from my mentor had
issues on both performance and results (colors
seem greyed-out). After digging into the algorithm,
I implemented the following optimizations:

- Global minimum variance (reduce "greying-out")
- Sample thredsholding (e.g. exclude dark pixels)
- Result pruning (remove similar colors)
- Time performance improvement (e.g. downsampling)
- Space performance improvement (e.g. linkedlist for cashed iteration)

Get Started

Regional K-means

I noticed that in most cases
guests color the plane into three
parts. Applying Kmeans on each of
them could give a more
representative color palette.

Get Started

See our platform in action

Communicate your digital product with simple interactions, and an auto-rotation script for webflow tabs.

Clone our high
quality components

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a ex porttitor, elementum augue eget, molestie erat.

Get Started

Build better with guides & education.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a ex porttitor, elementum augue eget, molestie erat.

Get Started

Shop Premium
Products

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a ex porttitor, elementum augue eget, molestie erat.

Get Started
Lottie Animation by
@Brodie Pointon

Meet our application.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Boost your customer conversion rates with conversion—centered landing page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla

Clone Project

Secure & Fast

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim

Developer Friendly

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim

Free Trial Available

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim

Friendly & Easy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim

What our customers have said

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Thomas Bekkers, Call of Duty Professional

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Jane Doe, Executive Team

Jungu managed to get done a variety of different tasks in a timely and professional manner. His final presentation really showcased his ability to bring together design and engineering.”

Takeshi Yamada, HR and Interns Liaison at teamLab

Jungu is a detail-oriented and self-driven intern. He has a solid CS foundation and is a quick learner. His cross-pollination across design and technology makes him an asset to us and any team that could have him in his future.”

Yuan Li, Mentor and Interactive Engineer at teamLab

Epilogue

I had always been inspired by teamLab's work, and it was like a dream come true to join them as an intern. I used to marvel at how they could merge art and science, two seemingly different fields, into a sensorially sumptuous, seamless, and immersive experience. I came onboard at the juncture where they were about to embark on a new chapter. They expanded and relocated their office, and then opened their own museum. By the end of my internship, I've come to realize that what's unique and outstanding about teamLab's work is the fact that they themselves are engineers and they're coming at digital art from a technological as well as artistic perspective. This intermingling of art and science enables them to nurture our curiosity about the natural world around us.



teamLab opened their permanent digital art museum teamLab Borderless in Odaiba right when I joined them and I had the honor to visit it firsthand (I shot this vlog during the intern tour). The concept behind the name lies in that the boundaries between art and visitor, person and installation, blur. Digital installations and artworks are constantly in flux, changing and transforming in response to people around.


The yearly company field trip also took place in the summer and I as an intern was also invited. I was impressed that the whimsical and innovative spirit of the company was consistently reflected even outside the workspace. In the video is the most interesting team building activity I've ever taken part in - a robot building contest where groups of employees try to make robots that could grab the most foam balls.


This interdisciplinary crew includes architects, engineers, programmers, CG animators, mathematicians, musicians, and more, which enables them to collaborate and create complex, highly interactive and engaging digital experiences - undoubtedly one of the best teams at the intersection of art, technology and design in the world. Thank you teamLab for allowing me to be part of it.

© 2021 Jungu Guo. All rights reserved.  |   Email: guoj038@newschool.edu