Realistic advanced Anamorphic
GCC academy
Hello
This is Kim Saetbyeol for realistic media content lectures
In this lecture, we will learn about anamorphic
which is a method that gives unique immersiveness
in visual arts and films
Anamorphic is a technology
which makes a distorted image on a flat surface
look right on from a certain angle or through certain equipment
This method is used in various realistic media
like film, advertisement, and media art
and gives visual amazement and depth to audience
Through this lecture, we will learn anamorphic's principles,
workflows, various use cases, etc.
and see how you can apply it to your own creative process
with practice examples
Understanding Anamorphic
First of all, what is anamorphic?
It is a media facade visual distortion technique that allows you to see a complete image
only from a specific location or viewing angle
This technique utilizes precise punctuation
that allows you to enjoy the fully aligned image
at specific locations
Even on flat surfaces of buildings or square LED screens
it gives a three-dimensional effect to the audience
giving them a sense of depth and space
The principle of anamorphic
were found in 16th and 17th century art
In modern times, it is applied and utilized in
media art and projection mapping
This is when an optical illusion is used
An optical illusion is a visual phenomenon that makes the object appear three-dimensional
depending on the angle at which you look at it
with a visual information in distorted images
Anamorphic is a technology that projects a flat image
that appears only at a certain angle and looks 3D
The image is distorted based on the observer's point of view
and only gives a sense of three-dimensionality at that point
Actually, when you look at it from a different point than that point
the illusion may not be visible
The distorted image is transformed with the appropriate perspective and proportion
to match the projection target
So the main principle of this anamorphic is
based on where the audience is standing
distorting and projecting images
For example, when looking from a certain direction on one side of a building
it's as if objects are popping out of the screen
or looks like it's floating in space
Anamorphic media facade
is widely used in shopping malls, advertising buildings, and art works
Because it provides a very colorful and unique visual experience
it has been getting a lot of attention recently
Representative examples include COEX in Seoul and the Gwanghwamun History Museum
Shibuya, Tokyo, Times Square in New York's
digital signages
These media facades are visible only when the audience stands in a certain position
with the 3D effect revealed
and this anamorphic has brought them popularity
To create anamorphic
we need various software
3D programs that can create distorted images
are Blender, C4D, Maya, 3D MAX, etc.
Also, the corresponding real-time projection mapping program
are used for the distortion
MadMapper, Resolume Arena
and TouchDesigner are utilized
There are three steps in the anamorphic workflow
First, the structure must be 3D modeled and simulated
At this time, the outer and inner surfaces
are both made and used
Secondly, for visual illusions
a distorted image must be created
I would like to introduce Unreal Engine
which uses N display
Thirdly, by using software
you need to set up a projection
In order for the corresponding distortion phenomenon to be properly displayed
it is important to get the illusion point exactly right
Creating Round and Rectangular Images Using Optical Illusions
Next is using optical illusions
to create round and rectangular image production
Round and rectangular images using optical illusions
combined with digital signage formats
provide interesting visual effects
capturing the audience's attention
Below are some of the different forms of digital signage
where optical illusion effect was used
In the case of round digital signage,
there are circular, dome-shaped, and ceiling signage types
The circular curved display has a visual focal point
which makes it suitable for a circular image
or rotating optical illusion
For example, an optical illusion of waves spreading out within a circle
or an image of turning gears
can create an effect that makes it seem as if the structure itself is rotating
The dome-shaped ceiling signage is a form that wraps around in all directions
which makes optical illusions with the sky or space as a background suitable
For example, through the effect of stars pouring down from the sky
it can make the audience feel immersed inside the dome
In the case of a multi-faceted book display,
it is a structure that combines several rectangular screens
Using the three-dimensional optical illusion effect of square signage
an illusion of each side showing the same object from a different direction
is possible
This makes it seem as if the objects in the signage
appearing from multiple angles
Among the rectangular signage, utilizing the edges
it can express three-dimensional cubes
or stairs
The edges of the screen appear to be connected to real space
in the illusion, which makes it look like
something is actually going to pop out
of the screen with a strong sense of three-dimensionality
For these signage types, the ratios vary greatly
It must be able to respond in various ways to
horizontal, vertical, square, etc. shaped signages
and illusionary effects by shape
reconstructs the audience's experience of space
through various digital signage
and lets the content feel richer
Next is modelling the corresponding
actual images according to these signage types
A cube in Blender
Simply press Shift+A and you will get Mesh→Cube
This will show up when you do that
The form I have created now is
two parts, the outer and inner
Even in the case of cubes, we adjust the size
to make a long horizontal shape
or also design vertically corresponding shapes
So you have a space where you can screen
and determine where exactly it will be
Have the internal space of screening
and also the cover space
Let's try making it from the beginning together
Open a new file
Let's make one
At first on Blender, there is a cube like this
So you can use this as is, but
first, let's erase it as if it doesn't exist
Let's create a corresponding cube
Press Shift+A to select Mesh
and select Cube
If you look at the bottom, you can see the size
So in this part
you can make it using ratio
but in Blender, it would be great if you could include the actual size
of the space where it will actually be shown
Through this actual size
with the decimal places
we can reduce the margin of error considerably
Even when this is brought to Unreal
Of course, because the units of Blender and Unreal are different
it may appear to be a different size in the field, but
basically, the settings here
can be set as the actual size in advance
which helps to create videos that fit perfectly
I'll try making it by selecting about 5m here
Here we need to change the size again
Adjust the size first
and increase the scale
and you'll be able to work very conveniently
So one side is a square shape
and the x-axis is now expanded by about 1.8 times
For the y axis as well, corresponding to 5m,
In this way, it becomes more distant or narrower
You can implement various signage forms
So, in the case of very large buildings that are difficult to measure
using drawings or using a laser
and such methods are used to calculate virtual numbers
Let's finish it this way
Let's make the outer cover and the inner cover
I'll make two copies of the cube first
I'll keep the second one closed like this
Go to Edit mode with this one
Select surface in Edit mode
and select all the unnecessary faces
and I'll erase them
Then, the outer surface is included like this
Unity, Blender, Unreal, all of them
Although each quad unit has a different way of expressing a square,
on this quad, the faces have directions
So see if you'll use both faces
or you'll use the one that's showing
You can check with Gaioframe like this
Let's leave this here with the eyes closed
If you come back again, this guy is the one you have to see the inside of
Enter Edit mode as well
Let's erase the two outer sides
Then the surface looks like this
So I made both the inside and the outside
I'm going to change the name
Let's name them, according what we're seeing
Outside and Inside
Which direction the corresponding cube is facing
Let's put that
I showed you earlier on InSide
There was thickness on the Blender screen
Let's try making that thickness part
In this inner space
in Edit mode, select everything
The corresponding surface on the inside
we're going to give them thickness called bezel
Here
we have Extrude Along Normals
If you pull it in slightly, the corresponding surface will appear
So, it becomes thicker on the inside like this
If you take a look at some examples of anamorphic
they always utilize this thickness
With this thickness
the moment the thickness pops out from the inside
people experience optical illusions
So that part is very effective
the object inside this thick part
If you project upto the part that is poking out
you can create an effective anamorphic
You can check the corresponding offset at the bottom
If you make it like this and leave
this form is produced
You can see OutSide and InSide together like this
There is one more important part here
You must check the part called UV
Here, with the whole thing selected
Next, Unwrap UV→Smart UV Project
This is how it goes
Let's take a look at UV Editing
If you look here, it says this
It's best to spread this out as much as possible
Press the corresponding entire sections like this
Stretch to the edge and fit it into this square
as full as possible
I will spread it out as much as possible
Like this, without any remaining parts
With that done
back in Object mode
let's export it
I will print and save this
InSide part and OutSide part
You can export it from File
You can save it as FBX
nDisplay Screen Linkage
Now open Unreal Editor
I bring the Box, InSide, and OutSide that I created
Let's learn how to integrate with NDisplay
Basically, we'll start with an empty project
Under the name Box Project_1
I will make it like this
When you open Unreal Editor
I'll start assuming that you are familiar
with working with Unreal
In the case of NDisplay, it is an additional plugin
so it is important to expand and install the plugin
So I set up the project
and we will practice
making one that suits it
Basically, the level is set to Main
Let us bring NDisplay first
If you look at the window, you will see Edit - Project Settings
There is a settings corner
Here
NDisplay isn't set up right now, is it?
So we're going to add a plugin
Here it is, NDisplay is installed now
There we go
So for those of you who have this unchecked,
if you check it, it will work when you restart this editor
So, I'm going to try making an NDisplay
When creating content, always
it's good if you could organize the folders
But I'm going to make NDisplay
I'll install it like this
If you right click
various assets appear
nDisplay Preferences
You'll see it there
If you proceed with the new settings, it will be created like this
We will create it under the name nDisplay_BoxProject
Okay, now let's bring in the FBX
If you bring it, it will be like this
set as FBX import options
and there are many different options
The most important of these is through normal map inversion
finding and bringing the side that we can use
If you press import all like this, it will come in like this
There are currently two overlapping, so if you look at them separately,
now, you can put the material into it like this
We can basically see the box cube like this
There are these screens that have an inner surface
and the outer surface is like this
Rename the corresponding side
That looks better
You can do that like this by pressing F2
Actually, I'm not going to use any materials
so you can just open nDisplay with the settings like this
Move over to the nDisplay screen like this
As you can see, there are various output mappings, clusters,
components etc.
First here is the nDisplay screen
is provided by default
Let me erase that
Then it looks like this, so I'll add onto here
The addition here is called a static mesh component
Here is the screen we got from Blender
and I can make it here
I brought it as a static mesh
and the mesh is currently disconnected
It says None
Here is the surface we have
If you put the OutSide side like this
this corresponding mesh will come in
So basically we're moving
As I said
for anamorphic, a fixed position
is the important thing to be checked
so I'll try to find the center by rotating it
Let's move to an appropriate location by entering 45 degrees as the number
I'm not looking at the screen right now
so it's shown in gray
If you have finished connecting this mesh
adjust the location so that
it can be seen well from the corresponding viewpoint
So that it's somewhat in the middle like this
This is what it looks like from the viewpoint
If you make it like this, you will need to add a cluster
Add a new cluster node
Adjust the preset resolution
that you'll screen
You can adjust the size here too
When you do that, a viewpoint called VP is provided
So we need to connect to this viewpoint
If you click on this viewpoint,
it is activated like this
Let's change that
To apply a screen to a viewpoint
connect to mesh instead of simple
in the projection policy
Among the meshes, this is the StaticMesh we brought
If you connect like this, the surrounding environment will be reflected
and it is distorted for the optical illusion
As you can see here, to fit this viewpoint
The setting is such that the corresponding scene comes up
So the most important thing is from the viewpoint
the type must be set as mesh
and since we created a viewpoint in OutSide
let's compile and save then exit
Then this box UV
because it is connected to StaticMesh, we can delete it
and let me show you this space
If you bring it like this, the nDisplay screen will appear
with the reflected environment on the screen
This guy has a viewpoint
So I'll turn it around like this and try to figure out the location
If you set the location like this
You can adjust it so that the corresponding scene is visible
It doesn't fit well right now, so I'll adjust it and show you
Yeah, it's almost right now
Yes, then the part that is currently in this environment is being shown
Let me turn it off and
put some suitable materials in it
Add one actor
and give the motor green
If you turn on the fijiball in nDisplay again,
when the ball moves like this now,
Do you see the screen being distorted and captured?
So here's what we've created
When passing through the thickness of the box
you can see the distortion very effectively
If you remap this part,
the anamorphic illusion effect that makes it look like it's popping out
is made
With the set anamorphic display nDisplay
I made a sequence
I brought it as an example
Here is a video that was previously closed in a box
and as the box opens, it looks like the dinosaur inside is revealed
I made an animation
You can see the dinosaur properly only in the corresponding location
If you move the angle like this, it gets distorted
like the leg part not being visible
This is also the case when going to the opposite scene
You can't see
But the 45 degree section
If you see it from the section where we have a viewpoint
the dinosaur's full form is revealed
So when you look at it, to create the effect of the dinosaur popping out
I positioned the nDisplay that
mainly shows the frame here
If you apply various animations within the sequencer,
you can effectively do an anamorphic
So try that with nDisplay
Because what you see in the nDisplay screen is rendered
when you turn off this nDisplay
it looks completely different when you turn it on
I have already intentionally created distortion on this display
and that allows you to use it for optical illusions
so make sure to check this part when applying it
Let me show you how to render this
If you press render
the most important part here is the settings part
If you go into settings, there are deferred, output, and .jpg
You probably went through the settings
in many different things as you want
but nDisplay is set up like this
First, delete the deferred
and open one nDisplay setting
then open nDisplay rendering
Basically, I mainly extract as a png sequence
Sometimes errors in nDisplay occur
so I will output it as jpg
The output resolution
will be the nDisplay resolution
If there are multiple root actors in nDisplay
you need to set the target display as an actor
Then in display rendering
you can see that it is all well-confirmed like this
I mainly use this custom frame rate,
instead of the resolution in output
Because I mainly use 30 frames
for those who use 60 frames or 30 frames
you can just apply it according to your purpose
And in terms of frame processing number
the number of frames you want will be increased like this
Don't render all of these parts at once
For example, go from to frames 900 to 2000
or from 0 to 600 and such
Basically, the entire settings are entered at the beginning
and there is a high possibility that error frames will occur around 0~1 frames
So basically, I recommend starting at 1
Here, select the frames you want
then using custom frames and custom frame rates
you can bring it out
One of the most important parts is the output directory
Make sure to specify where it will be saved
and to not overwrite it,
I recommend saving it in a newly created folder
And if you press render, the rendering will be done
When configuring the environment, various lights and plugins
will be brought from Quicksell Bridge a lot I assume
If you raise that part to Nanite, it will get extremely overloaded
so make sure you adjust the vertex number
so that you computer doesn't get overloaded
If you wait for the image to be captured on nDisplay,
it will warm up and finish with the time showing up
I'll explain the rendering, mapping and on-site projection of the final result
separately
Rendering, as you can see
a finished video created in the computer program Unreal
is produced digitally and printed in this stage
In this process, colors, lighting, textures and such
detailed time elements are reflected
This rendered image can be output in various resolutions and ratios
to fit the screen or display
This is the finished video you see on the screen
The final rendered image or animation
must first be checked how it appears on your computer screen
and then by playing it on the display
and simulating the image with the optical illusion effect
the final result is produced through repeated revisions
Next, we map it and simulate it again
In the mapping stage, the rendered image is
adapted to the viewer's position in the actual installation or space
and the location and shape to be projected is adjusted
At this stage, the image is adjusted to a distorted form or
the location where the image will be projected is specified
so that we can adjust it according to
how it will look in the real space
It is the process of arranging the images
according to the shape of space or object
By using the model,
the image is divided to fit each sides
or the mapping layout is made using mapping software
Lastly, there is the on-site projection stage
The final projection is where the mapped image is projected into real space
and where the audience can experience it
The actual on-site specificity is different from the rendering and mapping stages
as well as the environments that can be mapped
and different environments depending on LED or projector
Lighting, surroundings, and real space characteristics are all
influential to the video
so the results may vary
The anamorphic technique and nDisplay introduced today
are essential for expressing immersive, realistic media
Please take a look at the program and production practice introduced in the latter half
and I hope you can produce effective results
This concludes the lecture
Understanding Anamorphic Anamorphic A visual distortion technique on a media façade that makes the full image visible only from a specific position or viewing angle of the viewer
By utilizing precise perspective, you can view a perfectly aligned image only from a specific location It gives a three-dimensional effect even on the flat surface of a building or an LED screen, giving the audience a sense of depth and space
Principle of Anamorphic Mapping A technique that projects a flat image to appear in 3D only from a specific angle
Distort the image based on the observer's point of view to create a sense of three-dimensionality only at that point Transform the distorted image into an appropriate perspective and ratio to match the projection target
Anamorphic Production Programs 3D programs that produce distorted images: Blender, C4D, Maya, 3D MAX, etc.
Real-time projection mapping programs: MadMapper, Resolume Arena, TouchDesigner, etc.
Anamorphic Workflow 3D modeling and simulation for visual illusions Create distorted images Set up projections with software
Creating round and rectangular images using optical illusions Various forms of digital signage Circular curved display: Suitable for expressing circular images and rotation effects due to its visual center point
Dome-shaped signage: Wraps in all directions, ideal for sky or space illusions Polyhedral display: A structure that combines multiple rectangular screens to create the effect
that objects in the signage appear to be revealed from multiple angles By utilizing illusionary effects by shape, you can reconstruct the audience's experience of space and enrich the content
Making a Box in Blender It is effective to apply the actual space size to be used
Create a new file, select [Shift+A]→Mesh→Cube, and adjust Scale to shape the signage Copy the cube, then delete unnecessary faces in Edit mode
In Edit mode, delete two outer faces of the copied cube Use Extrude Along Normals from the toolbar's Extrude menu
Adjust the thickness of the inner box by pulling the setting bar In Edit mode of Inside, select all, then select Unwrap in UV→Smart UV Project
Modify to fit the size of the UV map created in UV Editing and save as File→Export→FBX
nDisplay Screen Linking nDisplay Screen Linking In Unreal Editor, select Game→Basic→Empty Project and create BoxProject_1
After creating the nDisplay folder in the content folder, select nDisplay→nDisplay Preferences→Create New Preferences
After importing FBX to nDisplay folder, open nDisplay_BoxProject Add static mesh component, then select box_UV_OutSide in static mesh item
Adjust the position and rotation values ​​to center the viewpoint Add a new cluster node and adjust the preset Change the viewpoint projection policy type to Mesh and attach a StaticMesh
After compiling → saving, go to the level and drag and drop nDisplay_BoxProject into the world and adjust the position to fit the InSide part
After creating the BasicAsset03 material, check the distortion effect when the ball passes through the thickness part of the box.