Rendering

Computer Graphics
irpan@mikroskil.ac.id

PRODI. TEKNIK INFORMATIKA (S-1)

Pengertian
• Rendering adalah proses akhir dari keseluruhan
proses pemodelan ataupun animasi komputer.

• Proses membuat gambar hasil akhir dari sebuah

desain mentah yang masih terpisah dan belum bersih.

• Dalam rendering, semua data-data yang sudah

dimasukkan dalam proses modeling, animasi,
texturing, pencahayaan dengan parameter tertentu
akan diterjemahkan dalam sebuah bentuk output 
Contoh
• Ketika membuat rumah menggunakan program 3D
Sketchup, awalnya rumah terlihat seperti kartun
dan efek-efeknya belum terlihat. Misalnya
membuat kursi terlihat mengkilat dll. Nah, disini
proses rendering dilakukan.
Rendering Implementation
 Film Hollywood "Visual effect"

Fame Focus        

Published on Nov 8, 2018
Rendering

• Rendering kadang kala membutuhkan waktu yg sangat lama, bahkan

walaupun dilakukan di sebuah komputer yg super kencang.
• Ini dikarenakan perangkat lunak yg digunakan pada dasarnya memotret
ulang setiap pixel dari gambar tersebut, dan hasil kalkulasi dari hanya
sebuah pixel bisa melibatkan sebuah kalkulasi lainnya yg lebih rumit,
melacak pendaran cahaya sebagaimana mereka akan terpantul dalam
sebuah adegan 3D.
• Untuk merender semua bingkai gambar dalam sebuah film animasi
(seperti misalnya Shrek, Monsters Inc., atau Ice Age) bisa melibatkan
ratusan komputer yg bekerja tanpa henti dalam waktu berhari-hari atau
bahkan berminggu-minggu (some case). 
Rendering
• Semua studio film besar Hollywood secara umum
menggunakan Linux untuk animasi dan efek visual.

• Mungkin tidak ada instalasi komersial Linux yg

lebih besar dari miliki studio DreamWorks
Animation, dengan lebih dari 1,000 dekstop PC
Linux dan lebih dari 3,000 CPU server CPU. 
Rendering
• "Untuk film animasi Shrek 3, kami akan
menghabiskan lebih dari 20 juta jam render CPU
hanya untuk membuat film ini.", kata CTO
DreamWorks Animation, Ed Leonard.

• "Setiap film yg kami produksi terus menekan

hingga ke batas akhir kemampuan PC dari apa yg
mampu dihasilkan oleh proses rendering, sehingga
membutuhkan lebih banyak dan lebih banyak lagi
kekuatan komputer.".
Rendering
• Semua orang tahu jika hukum Moore memprediksi bahwa kekuatan
komputer akan meningkat dua kali lipat setiap satu setengah tahun,
dan sejumlah referensi menyebutkan bahwa jam render CPU untuk
fitur kartun animasi akan berlipat ganda setiap tiga tahun. 
• Pada tahun 2001, film Shrek pertama menghabiskan sekitar 5 juta
jam render CPU.
• Pada tahun 2004, Shrek 2 menghabiskan lebih dari 10 juta jam
render CPU.
• Pada tahun 2007, Shrek 3 menggunakan 20 juta CPU render hours
Alur proses Rendering
Alur proses Rendering
1. Modelling Trasnformations : Menempatkan model pada sistem
koordinat yang disebut world space. Semua objek, sumber
cahaya, dan sudut pandang pengamat berada pada world space.
2. Trival Rejection : Rejection (penolakan) dilakukan terhadap
bagian-bagian yang tidak perlu sebagai upaya optimalisasi.
3. Illumination : Cahaya menyebabkan suatu objek dapat terlihat.
Warna objek ditentukan dari properti material objek itu sendiri
dan sumber cahaya pada tampilan tersebut. Algoritma Illuminasi
tergantung pada pemodelan bayangan (shading model) dan
pemodelan permukaan (surface model).
Alur proses Rendering
4. Viewing transformation : Transformasi pengamatan
adalah bentuk lain dari koordinat sistem. Memetakan titik-
titik yang ada pada world space ke ruang pengamatan.
Posisi pengamat ditransformasikan ke asalnya. Arah
pengamatan diorientasikan sepanjang axis.
Mendefinisikan pengamtan volume.
5. Clipping : Proses clipping dilakukan pada penggambaran
volume 3D yang biasa disebut viewing frustum. Pada
tahap ini dilakukan eliminasi total pada objek (dan bagian
objek) yang tidak visible bagi citra.
Alur proses Rendering
6. Projection : Objek selanjutnya diproyeksikan ke
dalam 2D. Transformasikan dari ruang
pengamatan ke layar.
7. Rasterization : Konversi tiap objek primitive ke
suah set fragment. Sebuah fragment diperlakukan
seperti pixel pada ruang 3 dimensi, selaras dengan
grid pixel, dengan atribut seperti posisi, warna,
dan tekstur yang normal.
8. Display : Melakukan interpolasi parameter.
Melakukan beragam operasi 2D.
Rendering
• Rendering berguna untuk :
› Game programming
› Arsitektur
› Simulator
› Movie
› Spesial Effect pada tayangan TV
› Design Visualization
› dll
Rendering Animasi
Pre - Rendering
• Rendering harus dilakukan dengan cermat dan
teliti.
• Pre-rendering adalah proses pengkomputeran
secara intensif, biasanya digunakan untuk
pembuatan film, menggunakan graphics card dan
3D hardware accelerator untuk penggunaan real
time rendering.
Komponen Rendering
• Komponen rendering 2D dari objek-objek 3D:
~ Geometri
~ Cahaya
~ Shading dan Shadow
~ Karakteristik Permukaan
~ Kamera
~ Algoritma Rendering
o Ray – Casting
o Ray – Tracing
o Radiosity
Metode Rendering
• Ray Tracing Rendering
 Ray tracing sebagai  sebuah metode 
rendering pertama kali digunakan pada tahun
1980 untuk pembuatan gambar tiga dimensi.
 Ide dari metode rendering ini sendiri berasal
dari percobaan Rene Descartes. Ia
menunjukkan pembentukan  pelangi  dengan 
menggunakan  bola  kaca berisi air dan
kemudian merunut kembali arah datangnya
cahaya dengan memanfaatkan teori
pemantulan dan pembiasan cahaya yang
telah ada saat itu.
Metode Rendering
• Ray Tracing Rendering
 Menghasilkan Fotorealistik.
 Konsep dasar  dari  metode ini  adalah  merunut  proses
yang  dialami  oleh  sebuah  cahaya  dalam
perjalanannya dari sumber cahaya hingga layar dan
memperkirakan warna seperti apa yang ditampilkan
pada pixel tempat jatuhnya cahaya.
 Proses tersebut diulang hingga seluruh pixel yang
dibutuhkan terbentuk.
Metode Rendering
Metode Rendering
• Wireframe Rendering
 Objek 3D dideskripsikan sebagai objek tanpa permukaan. 

 Objek dibentuk menggunakan garis-garis yang menggambarkan sisi-

sisi edges dari sebuah objek.

 Prosesnya cepat

 Tidak adanya permukaan, sehingga sebuah objek terlihat tranparent. 

 Sering terjadi kesalahpahaman antara sisi depan dan sisi belakangan

dari sebuah objek.
Metode Rendering
Metode Rendering
• Hidden Line Rendering
 Metode ini menggunakan fakta bahwa dalam sebuah
objek, terdapat permukaan yang tidak terlihat atau
permukaan yang tertutup oleh permukaan lainnya. 
 Dengan metode ini, sebuah objek masih direpresentasikan
dengan garis-garis yang mewakili sisi dari objek, tapi
beberapa garis tidak terlihat karena adanya permukaan
yang menghalanginya.Prosesnya cepat
 Lebih lambat dibandingkan wireframe rendering, namun
relatif masih cepat.
 Tidak terlihatnya karakteristik permukaan dari objek
tersebut, seperti warna, kilauan (shininess), tekstur,
pencahayaan, dll.
Metode Rendering
Metode Rendering
• Shaded Rendering
 Pada metode ini, komputer diharuskan untuk
melakukan berbagai perhitungan baik pencahayaan,
karakteristik permukaan, shadow casting, dll. 

 Menghasilkan citra yang sangat realistik.

 Membutuhkan waktu yang lama untuk rendering.

Metode Rendering
Rendering
• Software Rendering
 Blender
 Vray (3DS Max)
 OpenGL
 dll
Lighting, Shading, & Shadow
Pencahayaan (Lighting)
1. Pengenalan Cahaya
• Suatu objek dapat ditangkap oleh mata dan kemudian
direpresentasikan ke dalam definisi warna tertentu,
disebabkan karena adanya sumber cahaya yang
merefleksikannya. Cahaya tersebut dapat datang dari
berbagai arah atau sumber, baik penerangan langsung
maupun dari pantulan objek sekitarnya.
• Apakah cahaya itu?
• Cahaya dapat diartikan sebagai sebuah radiasi
elektromagnetik atau partikel-partikel photon yang memiliki
karakteristik panjang gelombang tertentu.
Lighting
• Pencahayaan (Lighting) pada objek dapat memberikan efek
bayangan (shadow), pantulan cahaya (highlight), dan warna.
Lighting
• Pencahayaan default atau standar dengan cahaya
lingkungan (ambient) yang sama pada setiap titik.
Kondisi default atau standar dapat dicapai kapan saja
dengan mematikan status Lighting menjadi disabled
dengan glDisable(GL_LIGHT0).
• Ketika menghidupkan bola lampu dalam ruangan,
sebagian besar berasal dari cahaya bola lampu, tetapi
beberapa cahaya datang setelah ada pantulan dari
dinding satu, dua, tiga, atau lebih. Cahaya yang
memantul ini disebut ambient
Lighting
• Dalam pencahayaan, ada dua hal yang menentukan
tampilan suatu obyek, yaitu:
1. Sumber cahaya dan pengaruh lingkungan
terhadap cahaya
• Lokasi sumber cahaya
• Arah pencahayaan dari sumber cahaya (omni, spot)
• Komponen pengaruh lingkungan terhadap cahaya
(ambient, diffuse, specular)
Lighting

2. Material dari obyek, yang memodelkan bagaimana

material bereaksi terhadap sumber cahaya, yaitu:
• Material reflektan terhadap komponen cahaya ambient
• Material reflektan terhadap komponen cahaya diffuse
• Material reflektan terhadap komponen cahaya specular
• Material sebagai sumber cahaya (emitance)
Lighting
• Pencahayaan di dalam OpenGL, dapat dibagi menjadi
empat komponen yaitu emissive, ambient, specular, dan
diffuse. Keempat komponen tersebut secara terpisah
merefleksikan cahayanya yang kemudian bergabung
menjadi satu.
• Namun dalam keseharian, sumber pencahayaan yang
ada di sekitar kita hanya terdiri atas 3 komponen saja
yaitu ambient, specular dan diffuse. Hal ini karena
emissive merupakan cahaya yang timbul dari hasil
radiasi objek itu sendiri.
a) Ambient

• Ambient atau cahaya ruang merupakan sumber cahaya yang

berasal dari segala arah. Cahaya ruang yang paling kuat
adalah cahaya yang berasal dari dinding kamar atau ruangan.
Hal ini bisa dilihat pada saat tidak ada penerangan apapun,
suatu benda atau objek tetap dapat terlihat oleh mata
meskipun nampak gelap.
• Sedangkan cahaya ruang yang paling lemah adalah cahaya
yang berasal dari luar, seperti cahaya bulan. Pada saat cahaya
ruang datang ke permukaan, cahaya tersebut dipendarkan ke
segala arah.
b) Diffuse (Difusi)

• Diffusi adalah cahaya yang berasal dari satu arah yang

kemudian disebarkan ke sekitar permukaan objeknya. Segala
cahaya yang datang dari arah atau posisi khusus
kemungkinan juga termasuk cahaya diffusi.
• Permukaan benda atau objek yang umumnya bersifat
menyebarkan cahaya seperti kayu, pasir, kain wol, kapur, dan
lain-lain sebagainya.
c) Specular

• Specular adalah cahaya yang berasal dari arah khusus dan

tidak menyebar melainkan dipantulkan. Cahaya jenis ini
menyebabkan suatu benda terlihat berkilau pada satu titik,
sehingga biasa disebut juga cahaya kilau (shininess).
• Benda yang paling kuat memancarkan cahaya specular
adalah cermin dengan sumber cahayanya sinar laser. Benda
lainnya yang bersifat cahaya ini seperti besi, metal, plastik,
kuningan, sendok, dan sebagainya.
Pada gambar, cahaya jenis apakah yang
diterimanya?
2. Penerapan Lighting dalam OpenGL

• Untuk pengaturan cahaya pada OpenGL, ada dua komponen gl

yang diperlukan yaitu glLight*() dan glMaterial*(). Kedua fungsi
ini tersusun atas parameter yang berbeda
• Pada glLight*( ), parameter terdiri atas tiga argumen yaitu nama
properti dari cahaya, jenis cahaya yang digunakan dan nilai/warna
dari properti cahaya tersebut.
• Bentuk umumnya sebagai berikut :

• void glLight{if}v(GLenum light, GLenum pname, TYPE *param);

 Light

• Sedangkan untuk fungsi glMaterial*(), parameternya juga terdapat tiga argumen

yaitu posisi permukaan objek yang akan diberikan cahaya, cahaya yang
dipergunakan, dan nilai dari cahaya.
• Posisi permukaan objek (material) terdapat tiga pilihan, yaitu :
• GL_FRONT : Permukaan objek terkena cahaya hanya pada bagian depan.
• GL_BACK : Permukaan objek terkena cahaya hanya: pada bagian belakang.
• GL_FRONT _AND_BACK : Permukaan objek terkena cahaya pada bagian depan
dan belakang.
• Bentuk umumnya adalah sebagai berikut :

• void glMaterial{if}v(GLenum face, GLenum pname, TYPEparam);

Lighting
• Algoritma untuk membuat pencahayaan (Lighting) pada suatu objek dalam
pemrograman OpenGL yaitu sebagai berikut :

Inisialisasi warna sumber cahaya [R,G,B,A] yang akan dibuat

Tentukan posisi sumber cahaya pada koordinat [x, y, z, h]

Membuat sumber cahaya dan peletakan posisi :
glLightfv(param_1, param_2, param_3);

param_1 : Nama / variabel sumber cahaya (GL_Light0-7)

param_2 : Library cahaya yang digunakan.
GL_AMBIENT : pengaturan cahaya ambient
GL_DIFFUSE : pengaturan cahaya diffuse
GL_SPECULAR : pengaturan cahaya specular
GL_POSITION : pengaturan fungsi cahaya

Param_3 : Variabel nilai cahaya atau posisi yang diberikan

Mengaktifkan fungsi pencahayaan

Mengaktifkan sumber cahaya yang dibuat
 Contoh coding penerapan lighting pada objek kubus

GLfloat diff[] = { 1.0, 0.0, 0.0, 1 };

Glfloat ambi[] = { 0.9, 0.9, 0.9, 1};
GLfloat pos[] = { 0, 0, -2, 0 };

glLightfv( GL_LIGHT1, GL_DIFFUSE, diff );

glLightfv( GL_LIGHT1, GL_POSITION, pos );
glMaterialfv ( GL_FRONT_AND_BACK, GL_AMBIENT, ambi );

glEnable(GL_LIGHTING);
glEnable(GL_LIGHT1);
glPushMatrix();
glTranslatef( 1.0, -1.0, 1.0 );
glutSolidCube(1.5);
glPopMatrix();
glDisable(GL_LIGHT1);
glDisable(GL_LIGHTING);
3. Perhitungan Lighting

•Cahaya yang dihitung dalam hal ini adalah cahaya kedua, yaitu total
cahaya yang diterima oleh mata kita setelah melalui proses iluminasi.
•Total cahaya ini dirumuskan dengan :
•(sumber cahaya x cahaya material)
•Jika sumber cahaya lebih dari satu :
([sumber cahaya1 + sumber cahaya2 + ...] x cahaya material)
contoh :
•sumber cahaya lampu = {LR, LG, LB}
•cahaya material (objek) = {MR, MB, MB)
•maka, total cahaya yang diterima oleh mata :
• (LR x MR, LG x MR, LB x MB)
Lighting Principles
• Lighting simulates how objects reflect light
• material composition of object
• light’s color and position
• global lighting parameters
• ambient light
• two sided lighting
• available in both color index
and RGBA mode

44
How OpenGL Simulates
Lights
• Phong lighting model
• Computed at vertices
• Lighting contributors
• Surface material properties
• Light properties
• Lighting model properties

45
Surface Poly.
Poly.
Per
Per
Vertex
Vertex

Normals
CPU DL Raster Frag FB
CPU DL Raster Frag FB
Texture
Texture
Pixel
Pixel

• Normals define how a surface reflects light

• glNormal3f( x, y, z )
• Current normal is used to compute vertex’s color
• Use unit normals for proper lighting
• scaling affects a normal’s length
glEnable( GL_NORMALIZE )
or
glEnable( GL_RESCALE_NORMAL )

46
Material Properties
• Define the surface properties of a primitive
• glMaterialfv( face, property, value );

GL_DIFFUSE Base color

GL_SPECULAR Highlight Color

GL_AMBIENT Low-light Color

GL_EMISSION Glow Color

GL_SHININESS Surface Smoothness

• separate materials for front and back

47
Light Properties
• glLightfv( light, property,
value );
• light specifies which light
• multiple lights, starting with GL_LIGHT0
glGetIntegerv( GL_MAX_LIGHTS, &n );
• properties
• colors
• position and type
• attenuation

48
Light Sources (cont.)
• Light color properties
• GL_AMBIENT
• GL_DIFFUSE
• GL_SPECULAR

49
Types of Lights
• OpenGL supports two types of Lights
• Local (Point) light sources
• Infinite (Directional) light sources
• Type of light controlled by w coordinate

w  0 Infinite Light directed along  x y z

w0 Local Light positioned at  x w y
w
z
w 

50
Turning on the Lights
• Flip each light’s switch
glEnable( GL_LIGHTn );
• Turn on the power
glEnable( GL_LIGHTING );

51
Light Material Tutorial

52
Controlling a Light’s
Position
• Modelview matrix affects a light’s position
• Different effects based on when position is specified
• eye coordinates
• world coordinates
• model coordinates
• Push and pop matrices to uniquely control a light’s
position

53
Light Position Tutorial

void gluLookAt( GLdouble eyeX,
  GLdouble eyeY,
  GLdouble eyeZ,
  GLdouble centerX,
  GLdouble centerY,
  GLdouble centerZ,
  GLdouble upX,
  GLdouble upY,
  GLdouble upZ);

54
Advanced Lighting
Features
• Spotlights
• localize lighting affects
• GL_SPOT_DIRECTION
• GL_SPOT_CUTOFF
• GL_SPOT_EXPONENT

55
Advanced Lighting
Features
• Light attenuation
• decrease light intensity with distance
• GL_CONSTANT_ATTENUATION
• GL_LINEAR_ATTENUATION
• GL_QUADRATIC_ATTENUATION

1
fi 
kc  kl d  k q d 2
56
Light Model Properties
• glLightModelfv( property, value );
• Enabling two sided lighting
GL_LIGHT_MODEL_TWO_SIDE
• Global ambient color
GL_LIGHT_MODEL_AMBIENT
• Local viewer mode
GL_LIGHT_MODEL_LOCAL_VIEWER
• Separate specular color
GL_LIGHT_MODEL_COLOR_CONTROL

57
Shading

PRODI. TEKNIK INFORMATIKA (S-1)

1. Pengenalan Shading

Non-Shading

Shading merupakan sebuah teknik gabungan antara pewarnaan dan

Non-Shading
pencahayaan terhadap polygon, titik, garis untuk menampilkan efek
No Edge lines
gelap, terang, halus ataupun kasar pada bagian tertentu dari
permukaan objek.

Shading
2. Jenis-Jenis Shading
A. Flat Shading
Flat shading disebut juga dengan konstan shading, yaitu teknik shading
yang memberikan satu jenis warna pada setiap polygon dan hanya
memerlukan satu kali kalkulasi untuk pewarnaan. Tipe flat shading
diantaranya Lambertian Shading dan Uniform Shading.

Penerapan Flat Shading pada OpenGL :

glShadeModel(GL_FLAT);
Shading
B. Smooth Shading
• Smooth shading yaitu teknik yang akan menampilkan gradasi warna pada tiap
polygonnya. Gradasi ini diakibatkan dari interpolasi warna pada garis polygonnya
(vertex).
• Penerapan Smooth Shading dalam OpenGL :
glShadeModel(GL_SMOOTH);

Teknik ini dibagi menjadi beberapa tipe, diantaranya :

a) Gourad Shading
Gourad Shading dipublikasikan oleh Hendy Gourad pada tahun 1971, dan dibuat dengan
tujuan untuk memberikan efek shading yang halus pada polygon tiap titiknya tanpa
memerlukan komputasi yang berat.
Shading
Gourad Shading menampilkan kesan gelap terang dari sebuah permukaan objek dengan
memperhitungkan warna dan penyinaran dari tiap sudut segitiga. Teknik ini juga tidak
menghasilkan efek shadow dan refleksi.

b) Phong Shading
• Phong Shading dikembangkan oleh Bui Tuong Phong pada tahun 1973 dalam
disertasinya di Universitas Utah. Sama seperti Gourad Shading, hasil Phong Shading
akan memberikan gradasi warna pada permukaan objeknya.
Kelebihannya :
- Memberikan efek shadow & refleksi
- Memberikan warna tiap garisnya, sehingga lebih halus.
Kekurangannya :
- Kalkulasi lama
Shadow

PRODI. TEKNIK INFORMATIKA (S-1)

Pengenalan Bayangan

• Bayangan merupakan hasil proyeksi dari cahaya yang jatuh ke

benda/objek yang kemudian diteruskan ke dalam suatu
bidang/permukaan.
Bayangan bukan merupakan sebuah objek.

Lalu, bagaimana membuat sebuah bayangan dari suatu

objek?.
Rumus Bayangan :

- Bidang dianggap y = 0.
- Jika sumber cahaya terlalu jauh dari objek, maka :