Tokyo Night Scene in Unity: Tips and Tricks

Gary Tang gave a brief talk on the production of his Tokyo Night environment full of neon lights made with Unity, Maya, and Substance Painter.

Introduction

Hi everyone, my name is Gary Tang, I'm a CG Generalist currently working at FuseFX. I focus on modeling, texturing, lookdev, and lighting. In the past, I've worked on such projects as SuperGirl, Jurassic Park: Camp Cretacious, Fast & Furious: Spy Racers, and many others. The companies I collaborated with include DreamWork Animation, Encore VFX, Blur Studio, Mocean.

1 of 2

Tokyo Night: Idea

I've always been fascinated by the night street views in Japan: different light signs often make the scenes look like a shot from a sci-fi movie.

I've been learning Unity and needed a project to test out the new engine pipeline, In the past, I also created a Tokyo street project and thought it would be a starting point.

Modeling

I recycled some of the assets from my previous project, but about 80% of all the assets are new or remodeled to a higher quality. I like to upgrade the assets from project to project.

Though I didn't have concept art to start from, I gathered many different references and ideas to give myself a general direction of where I want the project to end up.

I then started blocking out the main shapes in Maya and played around with moving buildings around to get the best look.

When I had a basic blockout, I gean adding details starting from what is the closest to the camera. Buildings in the back would progressively become more and more simple, while the furthest buildings in the back are literally just boxes.

A strategy I used to make the modeling process easier was to finish one building and polish it, and then reuse half of the geo from it on the second building, i.e. windows, walls, or doors. You may notice that a lot of the geo in the scene is just the same model scaled to different sizes or with different colors/materials.

1 of 7

Scale

The scale is life-sized. In my Maya scene, I imported several people assets and scattered them around the scene for size references. In Unity, I used the Volume Fog and Depth of Field to make the scene look huge. I also used some forced perspective on the far background buildings.

1 of 2

Texturing

I used Substance Painter for the textures. In my experience, Substance Painter is great for texturing environments like this. Since more than half of the assets are duplicates, it is important to remember to UV all the assets first before duplicating them around the scene. That way, one shader could essentially work on all the lamps, light posts, windows, etc. and what seems like an impossible amount of geometry could be broken down to something simple like building groups, light post groups, etc.

Just like with modeling, I spent most of my time texturing and detailing the buildings that are closer to the viewer. The further in the back the models are, the fewer details and resolution they use. The buildings in the distance are actually not even textured in Substance. They use procedural shaders in Unity because the details on them wouldn't even read if they were textured.

1 of 7

Rain and Dirt shaders I set up in Substance were the most important ones. To make sure all the textured assets read consistently (as if they belonged to the same world), I made a shader that gives them the same level of dirt, dust, and wear. The Rain shader is my favorite: I use the rain particle brush to create a rain effect for all the assets in the scene which adds realism to the scene.

1 of 2

Lighting & Post-Process

As for lighting, I used all the native lights in Unity. Spotlights are used for street lamps. A lot of the lighting also came from illuminated restaurants and store signs, and those were lit by geometry that has light emission. As for post-processing, I used bloom to make the lights more saturated, color balance for the final adjustment, and AO to give the geometry more shadows.

As you can see here, I was very generous with the placement of the lights. Luckily for me, Unity handles numerous lights very well.

1 of 2

Final Touches

To achieve the final look, I played a lot with the lighting of the scene to give it a semi-futuristic look. Since I didn't plan to recreate something that already existed, I added more futuristic buildings in the background. Different store signs and restaurant billboards played a huge role in breaking up the scene and making it busier so that the viewer would spend some time examining all the pretty details.

When rendering with HDRP, you get a better quality of lighting and shadows. I started the project as a 3D scene in Unity and converted it to HDRP after I finished all the textures and lighting. As soon as I did that, I saw a dramatic improvement of the overall scene, almost as if you take an environment from a PS2 game to a PS4 game quality if that makes sense. If I were to start the project all over again, I would actually start it with Unity HDRP because when I upgraded the scene to HDRP, I had to go back and fix a lot of shaders as they weren't compatible anymore.

Gary Tang, CG Generalist

Interview conducted by Arti Sergeev

Keep reading

You may find these articles interesting

Join discussion

Comments 2

  • Games Freeside

    Looks pretty cool and futuristic, love this cyberpunk style. Thanks for sharing!

    0

    Games Freeside

    ·5 months ago·
  • Anonymous user

    Starbucks is "Starbucks" (alphabets) in Japan...
    but there are Komeda Coffee or Doutor Coffee cafe in Japan and it writes by KATAKANA and Kanjis like コメダ珈琲 and ドトールコーヒー .
    And Lantern shapes look like Chinese one...

    But it's Okay!

    0

    Anonymous user

    ·3 years ago·

You might also like

We need your consent

We use cookies on this website to make your browsing experience better. By using the site you agree to our use of cookies.Learn more