How to create a frame to peep ‘Cartoon World’

In this article, I will show how to create ‘a frame to show the world converted into cartoon’.

I think those who read this article for the first time cannot get it well, so please watch the following Twitter video for reference.

https://twitter.com/OEKA_AKI/status/1115272322217271296

As seen in this video, the target in this article is to show:
①The background converted into a cartoon when viewing through the frame
②A different object for each frame

I explain the method in a simplified way. The actual completion image at the end of this article is shown in the following image.

When viewing the red wall through the frames, you can see a cartoon-style wall and a different sphere for each frame.

Although I will take a simplified way, it still involves more files and processes than usual.
I will explain how to do it first and then explain how it works at relevant points.

In particular, it’s difficult to apply this method without knowing how to use shaders to a level. So please learn it!

Brief explanation about the mechanism

I think it’s hard to follow the processes without some knowledge, so I summarize the workflow.

① Create a Wall as the background.
② Create a frame that makes the Wall transparent.

③ Create ‘ComicWall’ that is visible through the frame.

④ Create a frame that displays a cartoon-style sphere (ComicObject1) so that it’s placed on the frame created in ②.
⑤ Create ‘ComicObject1’ that is displayed only through the frame.

⑥ Duplicate the frame.
⑦ Create ‘ComicObject2’ that is displayed only through the duplicated frame above.

The mechanism is:
1 Place a cartoon-style wall with exactly the same size as the base wall.
2 Overlap two frames to display a different sphere for each frame with the background wall shared.
Those two are the key mechanisms.

That’s all for my brief explanation of the workflow. Based on it, let’s start the implementation from Sequence ①.

Create a wall(WALL) and a frame(KOMA1)

This time, I use Unity 2017.4.15f1. As of April 2019, it’s the recommended version for VRChat.。
I didn’t use complicated functions so much (as long as I remember), so I think that the other versions can also work.

①Create the background wall(Wall)

After creating a new Project with Unity, right-click on the Hierarchy (where ‘MainCamera’ and “Directional Light’ are placed) and select ‘3D Object > Cube’.
It brings up an object in the Scene. Rename the Cube ‘Wall’.

Hierarchy‘, ‘Project‘ and ‘Inspector‘ are the terms used frequently. Please remember them (I write them in italics in this article).

By selecting ‘Wall’ in the Hierarchy, various information is displayed in the Inspector.
In ‘Transform’ at the top, you can transform and move objects.
Now, set the parameters in the ‘Transform’ of ‘Wall’ as shown below.

The base wall has been completed just by setting those parameters. Adjust the position of the camera for better visibility.

 

Next, create ‘Material‘ and ‘Shader‘ to apply to ‘Wall’.
Those define how an object looks and we apply them to all the object we will create.

Right-click on the Project window and select ‘Create > Folder’ to create a folder and rename it ‘Wall’.
Move to the folder and select ‘Create > Material’ to create a Material and rename it ‘Wall’.
Then, select ‘Create > Shader > Standard Surface Shader’ to create a Shader and rename it ‘Wall’.

Next, we rewrite the content of the Shadar. However, if you open it, you will find that it’s written in a difficult language.
So, delete all the lines, copy and paste the following code anyway. You don’t need to understand the content.

Now, we apply the created Material and Shader to ‘Wall’ in the Hierarchy.

Firstly, drag the ‘Wall’ Material into the ‘Wall’ in the Hierarchy.
Click ‘Wall’ in the Hierarchy and you will find the ‘Wall’ Material at the bottom of the Inspector.
‘Shader’ has been set to ‘Standard’, so click it and select ‘Custom > Wall’.
Now, the ‘Wall’ Material and Shader have been applied.

Let’s change the colour of the wall, too.
Change the colour in the Shader setting as shown below.

Select ‘Wall’ in the Hierarchy. In the Inspector, you can modify the Shader setting.

It completes the setting of the wall.

②Create a frame that makes ‘Wall’ transparent

Click on a blank place in Hierarchy. With nothing selected, right-click and select ‘Create Empty’.
It creates a GameObject. Rename it ‘KOMA1’ and set the ‘Position’ of ‘Transform’ to (0,0,0) in the Inspector.

Next, with ‘KOMA1’ selected, right-click and select ‘3D object > Quad’.

This Quad will be a frame later, so add a ‘frame’ feature in advance.
Click ‘KOMA1’ again and select ‘3D Object > Cube’. As shown below, set the parameters of ‘Transform’ at the top of the Inspector.

Next, in the Project window, right-click and select ‘Crate > Material’ and rename it ‘Frame’.
Drag and drop ‘Frame’ into the Cube in the Hierarchy.
With the Cube selected, set ‘Unit/Color’ for the Shader of ‘Frame’ displayed at the bottom of the Inspector.
As before, you can change the colour with ‘Main Color’. Select the black colour this time.

By the effect of the Shader, the Cube with the Material applied turns black as the Material is coloured in Black.

It creates one side of the frame, so duplicate(Ctrl+D) it to complete the four sides.
Rename the Cube ‘Frame’. With ‘Frame’ selected, duplicate it three times. In the Inspector, set ‘Transform’ of each side as shown below.

Now, we completed a cartoon frame.
Next, we are going to set up the Quad.
Firstly, rename the Quad ‘Wall_KOMA’.

Create a Material and Shader again in the ‘Wall’ folder in the Project window. Rename both the Material and Shader to ‘Wall_KOMA’.
Copy and paste the following code in the ‘Wall_KOMA’ Shader.

Drag and drop the created ‘Wall_KOMA’ Material into ‘Wall_KOMA’ in the Hierarchy. In the Inspector, set ‘Shader’ to ‘Wall_KOMA’.
Then, the white frame turns transparent. You can confirm it makes the wall transparent by adjusting the direction of the camera so that it points the wall.

The inside of the frame is transparent. The experiment was successful!

Next, let’s make ‘a cartoon-style wall’ appear on the ‘transparent’ wall.

Complete the frame you can see the cartoon world through it

③Create a cartoon-style wall (ComicWall) displayed only through the frame

Duplicate ‘Wall’ and set it up so that it’s displayed only through the frame.
Having said that, you can do it in the same way, creating a Material and Shader and applying them.

So, let it done quickly.

Firstly, select ‘Wall’ in the Hierarchy and duplicate it (Ctrl+D). Rename it ‘ComicWall’.

By making ‘Comic Wall’ identical shape as ‘Wall’, you can create an effect as if you saw a parallel world.

We will make assets in the Project, but it can get untidy if all the assets created are placed in the same place. So, create the ‘ComicWall’ folder under ‘Assets’ to put them in.

Tidying up the folder structure is a key for productivity.

Then, create the ‘ComicWall’ Material and the ‘ComicWall’ Shader in that folder.
Copy and paste the following code in the ‘ComicWall’ Shader.

Apply the created Material and Shader to ‘ComicWall’ in the Hierarchy.
Then, the wall turns white when you look through the frame.

It doesn’t look cartoon-style yet

Make the wall into ‘cartoon-style’

We use ‘Texture‘ to make the wall look like a cartoon.
‘Texture’ is used to put a pattern on the object by using an image file.

I prepared a cartoon-style Texture, so save it to a place on your PC.
Drag and drop the saved image file into the Project view of Unity to add.

It’s a free material so help yourself.

Select ‘ComicWall’ in the Hierarchy and, in the Inspector, click ‘CW’ to expand.
From the Project view, drag and drop the image file into the grey box with ‘None (Texture)’.

Then, the image file is applied to the background visible through the frame, so a cartoon world finally appears in the frame!
Next, let’s place a sphere (ComicObject1) in this cartoon world.

Create an object drawn only in the frame

④Create a frame to display a cartoon-style sphere (ComicObject1) on the ‘Wall’ (②)

Firstly, duplicate (Ctrl+D) ‘Wall_KOMA’ in the Hierarchy to create the second frame. Rename it ‘ComicObject_KOMA’.

Then, create the ‘ComicObject’ folder under ‘Assets’ in the Project view.
Create a Material and Shader in the ‘ComicObject’ folder and rename them ‘CO_KOMA1’ and ‘ComicObject_KOMA’ respectively.
Drag and drop them into ‘ComicObject_KOMA’ in the Hierarchy.

And, create a Standard Surface Shader in ‘ComicObject’ by selecting ‘Shader > Standard Surface Shader’ and rename it ‘ComicObject_KOMA’.
Copy and paste the following code into the Shader.

Drag and drop the ‘CO_KOMA1’ Material into ‘ComicObject_KOMA’. Set the Shader to ‘ComicObject_KOMA’.
It completes the frame for ‘ComicObject’.

⑤ Create ‘ComicObject1’ visible only in the frame

Click a blank place in the Hierarchy and, with nothing selected, create a Sphere. Then, rename it ‘ComicObject1’.
by the Inspector, set (0,0,3) for the ‘Position (x,y,z)’ in the ‘Transform’ component, which places the Sphere in front of KOMA1.

Then, create a Material and Shader for ‘ComicObject’. Rename the Material to ‘CO1’ and the Shader to ‘ComicObject’.
Copy and past the following code into the Shader.

Again, apply the Material and the Shader to ‘ComicObject’.

This is how the successful result looks. If anything went wrong, check if you applied the Shader correctly by the Inspector.

Now, we completed all the settings for the first frame.
Now, let’s create another frame to finish up the project.

Create the second frame

⑥Duplicate the frame

⑦Create ComicObject2 visible only in the duplicated frame

Create another frame and make each frame show a different sphere.

Firstly, Select and duplicate (Ctrl+D) ‘KOMA1’ in the Hierarchy. Rename it ‘KOMA2’.
In the current state, it’s overlapped with KOMA1, so set -1.1 for the X Position of KOMA2 by the Inspector.

And, select and duplicate (Ctrl+D) ‘ComicObject1’ and rename it ‘ComicObject2’.
Again, it’s currently overlapped with ‘ComicObject1’, so set -1.1 for the X Position of ComicObject2 by the Inspector.

Now there are two frames and two spheres but both of the frames show the same two spheres.

Next, in the Project view, duplicate the CO1 and CO1_KOMA Material in the ComicObject material and rename them ‘CO2’ and ‘CO2_KOMA’ respectively.

 

In the Inspector of CO2_KOMA, set ‘Mask’ to 2.
This is important.

You can use the Inspector on the Project view, too.

 

Apply the created ‘CO2’ Material to ComicObject2 in the Hierarchy and the ‘CO2_KOMA’ Material to ‘ComicObject_KOMA’ under KOMA2 in the Hierarchy.

The mechanism used here is that objects are drawn only when their Mask value corresponds with the Mask value of the frame.
When adding frames, you can create the same effect by adding the ‘CO’ and ‘CO_KOMA’ Materials and set MASK to ‘3, 4, 5…’.

As you can see by the Inspector of ‘Wall’ and ‘ComicWall’, their Mask values have been set to 100.
By applying different Mask values to Walls and Objects, you can show a different Object in each frame, with the same wall shown. 
(Otherwise, you need to duplicate the background for each frame. That is, you saved the number of objects by overlapping frames).

※By the way, if you placed only one frame (i.e. you don’t place multiple frames), both ‘WALL’ and ‘ComicWall’ can use the same MASK value as ‘ComicObject’.
In this case, you don’t need to make overlapped two frames. Choose an appropriate way for your application.

 

Finally, replace the texture of ComicObject with something nice because a sphere in white looks too plain.
It’s completed now. Don’t forget to ‘Save Scene’ from the File Menu.

Congratulations!

By the way, The Shader of ‘ComicObject’ is based on ‘Unlit Shader’.

Further Note

I prepared the Shaders this time, but, in reality, you will face the situation where you want to use various Custom Shaders.
You don’t need to touch the Shaders for the frames (i.e. KOMAs). But, please add the lines to the codes of backgrounds and objects as follows.

【Wall】
◇In ‘Properties’, add _Mask (“Mask”, Int) = 100
◇In ‘SubShader/Tags’, add “Queue” = “Geometry-2
◇Just before ‘CGPROGRAM’ (or Pass{CGPROGRAM), add Stencil {Ref [_Mask] Comp NotEqual}

【ComicWall】
◇In ‘Properties’, add _Mask (“Mask”, Int) = 100
◇in ‘SubShader/Tags’, add “Queue” = “Geometry-2
◇Just before ‘CGPROGRAM’ (or Pass{CGPROGRAM), add Stencil{Ref [_Mask] Comp Equal}

【ComicObject】
◇In ‘Properties’, add _Mask (“Mask”, Int) = 1
◇Just before ‘CGPROGRAM’ (or Pass{CGPROGRAM), add Stencil{Ref [_Mask] Comp Equal}

If you have more than one ‘CGPROGRAM’, add ‘Stencil…’ for each CGPROGRAM.

By the way, it’s difficult to apply the ‘AlphaTest’ or ‘Transparent’ Shader to ‘Wall’ or “ComicWall’ (This is because ‘Wall’ and ‘ComicWall’ specify ‘Queue’ value but ‘AlphaTest’ and ‘Transparent’ fix the Queue value).
In addition, they could have a compatibility issue with a Shader that specifies the Queue value or overrides the ‘Stencil Buffer’ value.
In that case, you could make them work by adjusting the Queue value. Please try looking into it. Good luck!

It came to a long explanation, but now I’ve finished all instructions about how to ‘peep’ the cartoon world through the frame.
Although I used Textures to render a ‘cartoon world’ this time, I apply Shaders when creating a movie.
Search by ‘Manga Shader’ etc. If you found something you like, please try it with the setting instructed earlier.

That’s all. Thank you for reading!

oeka_aki