IF 580
Grafika Komputer dan Animasi
05 – Procedural Grid
Alethea Suryadibrata
Eka Jaya Harsono
REVIEW
▪ Texturing Concept
▪ Texture Mapping
▪ Tiling and Offset
▪ Texture Filtering
OUTLINE
▪ Procedural Vertices
▪ Procedural Triangles
▪ Procedural UVs
▪ Procedural Tangents
▪ Procedural Grid
Procedural Approach: Problem With Manual
Assignment
Inconsistency between triangles definition would make other vectors not working properly.
Procedural Approach: Manually Map Texture Problem
Creating textured cube with manual UVs, we have to do mapping and calculate the
coordinates manually in the code. Meanwhile Unity already have tiling and offset calculation.
Procedural Approach: Advantages
You don’t have to calculate manually in the code the vertices coordinate and the size also you don’t
need to make sure that your triangles are consistent. Moreover, you don’t need to calculate UVs
vector if you want to change tile in texture, use only tiling and offset + flexible details.
Procedural Vertices: Calculating Number of Vertices
Let say:
You want to produce M x N grid.
M is the number of grid in the surface in horizontal
approach.
N is the number of grid in the surface in vertical
approach.
How much vertices that you need to produce this
kind?
Procedural Vertices: Calculating Number of Vertices
Specific Case :
M = 4 , N=2
There are totals of 8 Quads
Horizontal vertices : 5
Vertical vertices : 3
Total vertices : 5 x 3 = 15
General Case:
Total vertices:
(M+1) x (N+1)
Procedural Vertices: Calculating Number of Vertices
Procedural Vertices: Generating Vertices
Procedural Vertices: Adding Gizmos to Simulate
Gizmos are used to give visual debugging or setup aids in the Scene view.
Procedural Triangles: Creating Triangles Concept
V10 V11 V12 V13 V14
V5 V6 V7 V8 V9
V0 V1 V2 V3 V4
How do you define the triangles procedurally?
Procedural Triangles: Creating First Two Triangles
V10 V11 V12 V13 V14 Specific Case :
M = 4 , N=2
First Triangle
T[0] = V0
V5 V6 V7 V8 V9
2nd T[1] = V5
T[2] = V1
1st
Second Triangle
V0 V1 V2 V3 V4 T[3] = V1
T[4] = V5
T[5] = V6
Procedural Triangles: Identifying Triangle Value Pattern
First Triangle Pattern:
V10 V11 V12 V13 V14 T[0] = V0 T[0] = V0
T[1] = V5 T[1] = T[4] = V5
T[2] = V1 T[2] = T[3 ]= V1
Second T[5] = V6
V5 V6 V7 V8 V9 Triangle
2nd 4th Pattern Test:
T[3] = V1
1st 3rd T[6] = V1
T[4] = V5
T[7] = T[10] = V6
V0 V1 V2 V3 T[5] = V6
V4 T[8] = T[9 ]= V2
T[11] = V7
Procedural Triangles: Code Implementation
Pattern:
T[0] = V0
T[1] = T[4] = V5
T[2] = T[3 ]= V1
T[5] = V6
Pattern Test:
T[6] = V1
T[7] = T[10] = V6
T[8] = T[9 ]= V2
T[11] = V7
Procedural UVs: Procedural Mapping Concept
M=4 , N=2
V10 V11 V12 V13 V14 Manual Mode:
UV[0] = (0.0,0)
UV[1] = (0.0,0.25)
V5 V6 V7 V8 V9 UV[2] = (0.0,0.5)
UV[3] = (0.0,0.75)
UV[4] = (0.0,1.0)
UV[5] = (0.25,0.0)
V0 V1 V2 V3 V4 UV[6] = (0.25,0.25)
Procedural Mode: UV[i] = (x / M , y /N)
Procedural UVs: Code Implementation
For each vertex define UV Vectors as in procedural mode formula.
Procedural Tangent: What is Tangent?
Tangent Vector is a vector that is tangent to a curve or surface in any given point at texture.
Procedural Tangent: Define Tangent
Procedural Grid: Set Texture to Material
Set material’s shader and main texture programmatically
Procedural Grid: Results
Procedural Grid: Testing The Tangent
Procedural Grid: Testing The Tangent
PRACTICE
<optional>
PRACTICE 1
▪ <optional>
NEXT WEEK’S OUTLINE
▪ Procedural Grid
▪ Procedural UV
▪ Tangent Vectors
BOOK REFERENCES
▪ De Byl, P. (2017). Holistic game development with unity: An all-in-one guide to
implementing game mechanics, art, design and programming. AK Peters/CRC Press.
▪ Ferrone, H. (2019). Learning C# by developing games with Unity 2019: code in C# and
build 3D games with Unity.
▪ Pavlidis, T. (2012). Algorithms for graphics and image processing. Springer Science &
Business Media.
VIDEO REFERENCES
▪ Procedural Mesh
WEB REFERENCES
▪ https://docs.unity3d.com/Manual/
▪ https://docs.unity3d.com/ScriptReference/
▪ http://www.directxtutorial.com/
▪ http://www.catlikecoding.com/
Vis
Menjadi Program Studi Strata Satu Informatika unggulan yang menghasilkan lulusan
INFORMATIKA
i
berwawasan internasional yang kompeten di bidang Ilmu Komputer (Computer
Science), berjiwa wirausaha dan berbudi pekerti luhur.
Mis
i
1. Menyelenggarakan pembelajaran dengan teknologi dan kurikulum terbaik serta didukung
tenaga pengajar profesional.
2. Melaksanakan kegiatan penelitian di bidang Informatika untuk memajukan ilmu dan
teknologi Informatika.
3. Melaksanakan kegiatan pengabdian kepada masyarakat berbasis ilmu dan teknologi
Informatika dalam rangka mengamalkan ilmu dan teknologi Informatika.
