CN Journeys VR Art Snippet: Cartoon Foliage

Hello again! This post will briefly cover the process for creating the cartoon foliage in the desert scene. The art style for most toon items was inspired by the work of Oliver Hibert and Mike Perry.

Realistic foliage models were created to establish the small subset of assets that would be required to fill the scene.

We then reached out to our long time friend and artist Brendan Wiuff to help us nail down the look for the toon versions, among other things. The goal was to come up with a cartoon version of each foliage model in the scene. This was a collaborative process consisting of multiple sketches and ideas until the final lineup of toon foliage was complete.

Then it was time for the fun part! Modeling, sculpting, and texturing the toon foliage based on the concept.

Once we where happy with the assets, they were taken into Unity to create the specialized toon vegitation shader that would allow for a cartoon look with controls to animate the textures and also react to wind. Lets break it down into three parts: Color, Texture Manipulation, and Vertex Manipulation.

Color: This is a simple toon shader with a hard edge light and a dark side driven by the scene’s directional lights.

Texture Manipulation: Based off the concept we needed to reproduce a few qualities; Explicit color shifting, wiggliness, drippiness, and time posterization. Color cycling is achieved through lerping between two main textures and scrolling masked portions of the color maps. Wiggliness and drippiness are created using scrolling uv distortion to perturb the color maps.  For a wiggly effect a grayscale cloud distortion map is used, the drippy sections use a drippy looking map. When the time of the uv scrolling is posterized it helps create the desired hand animated look.

Vertex Manipulation: We wanted to have a simulated wind to help liven the plants in scene.  This is the same wind functionality the regular plants used. The wind effect is controlled at the model level by a second uv channel which maps potential intensity to V and offset time to U. On the shader side we have two blocks of sine wave motions, one for large scale motion to represent the larger and less frequent gusts. The second high frequency motion is for more pervasive breezes of the  branches and leaves, it helps break up repetition in the larger motions. The overall wind intensity is driven in script so that the plants can react to events in the experience.

Here is an example of our material setup for the toon palm tree trunk / fronds and an example of the shader graph from the Amplify Shader Editor.

The foliage transitions from realistic to toon when the player returns to the desert after successfully completing the Beyond Beeville journey.

Here is a closer look at the effect that eventually got used in other areas, including the logo.

In the end, this was a really fun process that generated the results we needed. Stay tuned for more posts like this and don’t forget to check out Cartoon Networks Journeys VR on October 1st.