LogInNic Belliard talked about the way he managed to create playable a comic strip in 3D with shaders, image overlaying and lighting preserving a hand-painted look.
Nic Belliard kindly shared a highly detailed breakdown of his most recent playable project Blacksad and talked about the way he managed to comparatively quickly recreate a comic strip in 3D with post-processing shaders, image overlaying and lighting preserving an appealing hand-painted look.
Introduction
Hey! My name is Nic Belliard, I am a third-year graduate student following the course Digital Arts and Entertainment at Howest (Kortrijk/Belgium).
I’ve worked on a lot of projects throughout the years I’ve been in DAE ranging from illustrations to detailed environment and characters. Most of my work can be found on my ArtStation.
Previously, I’ve also made a small blog on one of my projects called Hangar 19. If you haven’t read it, you can check it out here:
This time I will talk about how to translate a Graphic Novel and its “Graphic” style into 3D based on its shading, geometry, compositions, lighting, mood and so on. In this blog, I will explain how to achieve this and in what ways it is possible focusing on re-creating the atmosphere and settings from a comic strip in 3D where a viewer can look around in. Of course, there are a lot of ways to get the result, some of which are faster or more precise. The focus will be more on getting the general effect which can be applied to multiple environments.
The talk will be based on my graduate work in the form of a small game Blacksad.
I hope you’ll enjoy reading! All the images and the game itself can be found here.
Blacksad, the demo:
Where to Begin?
The first step was the selection of a Graphic Novel which I would re-create in 3D.
Eventually, I chose Blacksad made by Juan Diaz Canales (writer) and Juanjo Guarnido as (artist) because of the intriguing style and story. Every part from lighting to dressing gave off a strong character and it was hard to resist the wish to work on it.
Once the novel was chosen, it needed to be analyzed thoroughly to understand the style and single out the details. The main questions were:
- What materials are used?
- What are the peculiarities of the line work?
- How are their objects/characters drawn?
- What lighting is used?
- What is the general mood?
- What are the general colors?
- Where is the focus in every scene?
- What scale is used?
For this analysis, I’ve created a style guide to help me better understand the comics and its style.
General analysis:
Environment 01 analysis:
Environment 02 analysis:
Environment 03 analysis:
As seen in the images, the general details noticed were:
- Harsh black outline
- Overall grain effect
- Canvas texture background
- Waterpaint effect/stains
- Warm colors + Blue tints
- Same color grades
- Raw painted shadows
- Sketchy lines
The comic strip has watercolor and grungy effects in combination with a nice warm and moody tone for each image (to get the detective style mood). Each object has a black outline, plus depending on the shot some outlines are more ‘sketchy’ than the other. To get this effect I’ll need to keep it raw.
The shots for re-creation should be very open and communicate large parts of the story. The questions that should help find interesting shots are always:
- What happened?
- Is it interesting to look at?
- Can I expand on it and show more than it’s shown? (What are my options?)
The Objects
In the project, I first focused on the objects. They are the base of everything so getting them right first will be a good start.
The scenes are very detailed and packed, and even though most of them have a lot of copy-pasting, there is still a big variation of objects in each scene. There were around 30-40 objects, many of which were re-useable. Deciding what to do first and what models were needed in the beginning was very important, hence analyzing each scene took a while. But once you understand the scene you can get the result fast.
For example, in the images above you can see that there is way too much stuff that would make your head spin around. Yet, by simply splitting the scene up and thinking what needs to be copy-pasted you can get really far.
Eventually, it was also necessary to analyze the size difference and how ‘stylized’ the objects were. When you look at the style guide you can see that the objects seem not to be that stylized, but they do have a slight exaggeration in the silhouette. For example, the legs of a chair are a bit shorter in comparison with the main body, some objects have curves that shouldn’t have curves (like a bookcase), etc. Generally, the objects were comparatively realistic with a subtle touch of stylization.
Once I had all my objects it was time to build up my scenes. Also, when I started this project, the idea was to simply re-create one environment. But since I had a lot of time, I re-created more environments and eventually turned the project into a short immersive game. This means that during the production more and more objects were needed.
The Setting
The first two weeks (of the total six) were mainly focused on getting all the shapes, proportions and feeling right. Recreating the first environment The Office (image above) was quite difficult at first. Starting a new scene is always annoying because you need to calculate how big the room is and if you mess this step up everything in the scene will not feel right later on.
Once general scaling is done you can start dressing the scene with all your details. Throughout the progress, you will further adjust some proportions of your objects and the room in the engine itself.
Environment 1
Due to the fact that it was the first environment, it took a bit longer as everything needed to be set up (BSP Shapes, basic lighting, importing objects, getting the right settings, proportion research, etc.). This environment was also the base for other scenes, and getting it right was important.
Environment 2 & 3
The second and the third environments went a lot faster based off the first one. A lot of elements were re-used: by simply re-adjusting the room and the objects and changing the layout you can easily create something totally new.
Connectors
Since there were multiple environments, I needed connectors to switch between the different rooms. The first scene (Office) was placed in an apartment as seen in the references, and this is where the idea of connecting the rooms with a hallway in the style of an old apartment came. Such connectors would fit the moody scenes, and switching between scenes felt like switching between apartment rooms connecting the pieces of the story.
End Result (notice that each room translates its own story and mood):
The Look (Shaders & materials)
Main Outline Shader
The shaders were tricky. For the project, I needed something general that would work with each scene. Luckily, most of the images in the Graphic Novel had the same ‘feel’. Eventually, to get the right graphic style that can be easily adjusted, you would need to use different kinds of shaders, and instead of one big shader, you actually use multiple. See it as a painting itself: you work layer by layer, piece by piece to get the final look.
This is how the shaders were built up:
- Main outline shader
- Image overlays to get the painted look (these are just textures you place on top of each other on your screen)
- Custom real-time shadows
Once I had a rough blockout of my scene, I started playing around with the outline shader to get the right result. Everything went fluent but eventually came to halt due to an issue. An outline of the object was shown, but it was only a silhouette and there were no inner detail lines shown (details inside the object). That means that if I put an object on top of another, it wouldn’t show the outlines of the smaller one. For example, if a big carpet is placed under a chair, only the outline of the carpet will be shown.
First draft (notice that the outlines are only shown on BSP Walls and all the details inside of an object are ignored):
Second draft (all the lines are shown more correctly now):
To fix the outlines I just had to adjust a simple thing.
This is the main post process material that creates the outline shader. The distance mask that was placed in the material (red outline) to create outlines closer to the camera broke the material. By simply removing it everything was fixed.
To get the outline you (simply said) need to find the depth of the scene to portray the outline and the vectors from the silhouette of the objects in the scene.
If you want more information about this you can watch the videos below:
Without outline (notice the painted feel):
With outline (notice that it brings everything together):
Eventually, what has been achieved is a visually strong and supporting shader that really lifts and translates the scene well. The images above show how important it actually is and what exactly it does.
Notice that without the shader the image looks painted (which is good for the base) and everything in it feels like it blends together, while with the shader it brings everything together in a balanced way.
Outline Shader For Interactable Objects
Since I turned this project into a small game I had to implement a lot in order to really immerse the player in the story: interactable environment pieces, audio, VFX, animations, story elements and so on.
A player is able to click on certain objects in the scene to interact with, some of them will slowly move closer to the camera and can be rotated around its axis. Such objects get an outline.
I will not explain how this works since it is mainly based on existing tutorials that you can check out below:
Custom Shadows
The custom shadow shader is one of the important shaders that are subtle and really powerful at the same time. Without it, the scenes would not feel that special. It supports the scenes in a balanced way. It basically changes the shadows of the objects with a custom mask where a light hits and gives a raw-edged visually appealing shadow. It also makes the AO in the scene a bit more dramatic/extreme, increases the range of it and builds around the objects. Finally, it acts greatly towards movable lights/objects increasing and decreasing in size depending on the light, character location, etc. adding some life to the scene.
A surprisingly easy post-process material:
Notice the cracked/uneven shadows where the light hits (picture 1 after the gif below) and the AO around the objects (picture 2).
When you walk around in the scene you can also see that the shadows kind of liquify together as if it was water. Funny enough, this result has been received by accident and there was no intent to get it. A happy accident that made the scenes more unique.
Image Overlays
To get the painted effect in the scenes a combination of subtle image overlays had to be used to get a more grungy effect. Сombined with the materials, post-processing, shadows, and lighting it delivers the desired result.
Here a simple grungy image is literally placed over the screen. However, you can’t just place one image and expect to be done with it. It needs to be built up subtly or it would be clear that you just placed an image over the screen. In combination with a dirt mask, you can get a good result.
It makes the whole scene a bit more rough which is especially seen when you actually play the game. If you look at the walls or specific objects in the next images you may notice it.
As said before, all of these are small subtle changes that in the end work together perfectly and create a strong result (seen better in the demo).
Materials
The materials are done fairly simple, each object has an instance from a master material. These instances are just plain simple colors that you can adjust with a tileable texture if necessary. The reason why this technique has been used and instead of another technique like making hand-painted textures for each object is that this would take an eternity to finish (due to a lot of objects individual texturing would be insane). Of course, you would get a more specific result with hand-painting, but using the colors and post-processing you receive the result faster and in an efficient way.
Main material:
The difference with and without materials (colors):
Lighting & Pos-Processing
Getting the lighting right is a real hassle since it requires a lot of effort to set everything from the basic directional light to smaller detail lighting (like lamps, candles, etc.).
If you look back to the references you can see that the main tone of the environments is always mysterious, dark/moody, washed out by smoke and strong contrasting lights. The first environment needed to be more mysterious and somewhat inviting so it has been given a warmer but washed out tone.
This also needs to be built up slowly.
To make the scenes more interesting a GodRay material has been made with a strong orange color as an accent. This combined with sub-lights that also receive a stronger orange color makes the scenes a lot more appealing to look at.
The GodRay itself is built up with a mesh (cone) with a panning (= an image that moves from one side to another) material on top that blends with the scene. It also reacts towards the custom real-time shadows to make them move.
Each room also receives a specific post-process volume to change the mood in the scene. What is meant by it is that if you enter a room, the lighting and color may change since they have a certain range. Once you enter this range, the environment will be changed.
The main lighting is movable together with the sub-lights since everything is real-time.
In the images below you can see that with just some lighting and Post-Process you can get really far.
The Immersion
Sound
Most of the audio has been downloaded from FreeSounds website. A lot of sounds were needed to build up the ambiance for each scene because they have their own ‘personality’:
- Environment 1 (Office): Moody, dark, mysterious.
- Environment 2 (Blacksad’s Appartment murder scene): Bright, stressy, ominous.
- Environment 3 (Ivoc Statoc’s Office): Misleading, worrying, dark.
This is purely based off the comics and how you interpret it from your own standpoint.
To achieve the mood you need to work with the audio cues. Whenever you enter a room and walk over a collision box it will trigger a specific sound. Some sounds are only played from a certain distance. For example, the closer you move towards windows the louder the street sounds will be.
Some yellow boxes trigger the specific sounds when you walk over them, others allow to interact with them (such as turning on the lamps):
To experience this yourself watch the full demonstration video in the beginning or play the game itself (it can be found on my portfolio)!
The Story
This was an extra part that complimented the environments. The text parts of the Graphic Novel have been implemented in the scene to immerse the viewer in the environments and make them curious about the story. They mainly give a player extra information about the scenes and provoke to continue looking for the clues, look further into the settings and discover what happened in each room.
The implementation is similar to the audio cues. Trigger boxes placed in the scenes would display the text blocks on the screen like a comic strip. To show this visually:
The VFX
VFX inside the scene itself is not that extreme. The main ones are smoke (cigarette, mist, etc.), fire and some detailing.
The stylized smoke is made out of a cloud-looking mesh that uses the GodRay Material to make it more see-through and misty. Then, it has been placed in a particle system.
The smoke used for the mist is also a particle system using a flipbook image (= an animation portrayed on a single image to play it in the engine) to portray mist that you can view from afar (for example, in the hallways).
The fire in the scene is just an image that gets transformed in a material by panning noisetextures (= distortion) over the specific image to make it seem like it moves. As seen below:
The Conclusion
By working with only post-processing shaders, image overlays and lighting you can create environments in a style you want much faster. Of course, it is not 100% accurate in terms of the reference, and such accuracy can’t be achieved only with shaders. To get the highly-precise result you would need to hand-paint the scenes just like in the Graphic Novel itself which would take way longer.
If you aim for the general effect and use shaders, you can work around 3x faster. As proven by my graduation work, you can make a small game with a general look resembling the Graphic Style in this specific time limit. The effect gives a look that is easily adjustable for each environment. With this, you can create a lot of variations by simply changing the images in the masked materials.
Another conclusion is that you need to take your time and analyze the project thoroughly. You build it up subtly with layers just like a painting itself. An appealing and finished result will appear by doing a lot of smaller things that complement each other instead of one ‘big’ thing: shaders, lighting, colors, VFX, grunge, gameplay, interaction and so on. Piece by piece you will receive what has been portrayed in your reference, and eventually get a 3D Graphic Novel.
This was such a fun project and I sincerely hope this small blog was a bit helpful for some people out there.
If you are interested to see more or if you just want to message me you can do it here:
Cheers!