GRAFIKA KOMPUTER DAN VISUALISASI
Penyajian Model 3D Interaktif dengan Game Engine
Disusun oleh:
Nama : Kirana Pirandika Ayuputri NIM : 21/474429/TK/52345 Kelas : A
PROGRAM STUDI SARJANA TEKNIK GEODESI DEPARTEMEN TEKNIK GEODESI
FAKULTAS TEKNIK UNIVERSITAS GADJAH MADA
2023
1 | H a l a m a n I. MATA ACARA
Penyajian Model 3D Interaktif dengan Game Engine
II. TUJUAN
1. Mahasiswa mampu memahami tools pada PlayCanvas Editor.
2. Mahasiswa mampu menampilkan scene first person yang berisi model 3D buatan mahasiswa.
III. PELAKSANAAN PRAKTIKUM Praktikum ini dilaksanakan pada:
Hari/Tanggal : Selasa, 9 Mei 2023 Waktu : 13.00 – 15.35 WIB
Tempat : Laboratorium Geokomputasi
IV. ALAT DAN BAHAN
1. Laptop: untuk menjalankan software.
2. https://playcanvas.com/: media untuk menyajikan model 3D.
3. Web browser Chrome: media untuk mengakses PlayCanvas.
4. https://developer.playcanvas.com/en/user-manual/: sebagai panduan untuk menyajikan model 3D.
5. Model 3D yang dibuat pada minggu ke-8 (format *.fbx).
6. https://developer.playcanvas.com/en/tutorials/first-person-movement/: sebagai template first person movement.
7. https://humus.name/index.php?page=Textures: untuk mengunduh skybox.
8. Microsoft Word: untuk membuat laporan praktikum.
V. LANGKAH KERJA Bagian A
1. Mengekspor hasil desain minggu 8 dalam format *.fbx.
2. Membuka https://playcanvas.com/, melakukan registrasi akun.
3. Membuat project dengan cara Projects → New → Roll a ball → Create.
2 | H a l a m a n 4. Memilih Editor → klik pada bagian Main Scene untuk membuka scene.
5. Memasukkan model 3D dengan cara klik Assets → Upload.
6. Memilih tipe Template → drag and drop model ke dalam scene.
7. Mengatur skala pada panel Entity.
8. Mengunduh skybox melalui https://humus.name/index.php?page=Textures.
9. Menambahkan CubeMap dengan cara klik Assets → CubeMap.
3 | H a l a m a n 10. Memasukkan hasil download skybox ke dalam Assets. Lalu, klik pada tiap sisi
CubeMap dan mengisikannya dengan gambar yang telah di-upload hingga lengkap 6 sisi.
11. Drag CubeMap ke dalam scene.
12. Mengatur pencahayaan dan kamera pada panel Hierarchy.
13. Menampilkan hasilnya dengan klik Launch . Bagian B
1. Membuka tutorial First Person Movement melalui https://developer.playcanvas.com/en/tutorials/first-person-movement/ → klik Tutorial Project.
2. Memilih Fork → menentukan nama file → klik fork.
4 | H a l a m a n 3. Memilih Editor → klik pada bagian First Person Movement untuk membuka
scene.
4. Menambahkan model 3D dengan cara yang sama seperti Bagian A.
5. Mengatur skala, pencahayaan, dan kamera seperti pada Bagian A.
6. Menambahkan objek lain seperti pohon, mobil, motor, dan kursi.
7. Menampilkan dan menjalankan hasilnya dengan klik Launch.
VI. HASIL DAN PEMBAHASAN 1. Tools pada PlayCanvas Editor
PlayCanvas merupakan game engine 3D open source/mesin aplikasi 3D interaktif yang memungkinkan pengeditan dari beberapa komputer melalui antarmuka berbasis browser. PlayCanvas berjalan di browser yang mendukung WebGL, seperti Google Chrome. Beberapa tools pada PlayCanvas yaitu.
a. Toolbar: perintah yang umum digunakan. Tools pada Toolbar yaitu:
5 | H a l a m a n
Ikon Nama Fungsi
Menu Berfungsi untuk menampilkan daftar lengkap semua perintah yang dapat dilakukan di PlayCanvas.
Translate Berfungsi untuk menggerakkan searah sumbu x dan y pada model di PlayCanvas.
Rotate Berfungsi untuk melakukan rotasi.
Scale Berfungsi untuk mengatur skala pada model yang dibuat di PlayCanvas.
Resize Element Component
Berfungsi untuk mengatur ukuran komponen elemen.
World/lokal Berfungsi untuk mengatur peta yang digunakan yaitu peta dunia atau local.
Snap Berfungsi untuk memghubungkan objek ke lokasi tertentu, apakah berupa titik tengah garis (mid point) atau pusat lingkaran ketika memilih suatu titik.
Focus Berfungsi untuk memperbesar tampilan objek agar fokus pada objek.
Undo Berfungsi untuk membatalkan suatu perintah yang sudah dilakukan sebelumnya.
Redo Berfungsi untuk mengembalikan atau mengulang sesuatu yang telah dibatalan sebelumnya.
Light Mapper Berfungsi untuk mengatur cahaya pada model.
Code Editor Berfungsi untuk editor kolaboratif real-time online yang memungkinkan pengguna untuk mengedit aset skrip dan juga semua aset berbasis teks lainnya.
Publish/
Download
Berfungsi untuk melakukan publikasi dan unduh data dari project yang sudah dilakukan.
How do I..? Berfungsi untuk memberikan informasi dan tutorial tentang penggunaan PlayCanvas.
b. Hierarchy: berfungsi untuk menunjukkan tampilan pohon dari seluruh entitas.
6 | H a l a m a n c. Inspector: berfungsi untuk menampilkan nilai atribut untuk item yang saat ini
dipilih. Beberapa panel inspector yaitu:
1) Entity/Component Inspector: berfungsi untuk mengatur komponen.
2) Texture Inspector: berfungsi untuk mengatur tekstur.
3) Material Inspector: berfungsi untuk mengatur material.
4) Cubemap Inspector: berfungsi untuk mengatur CubeMap.
d. Viewport: berfungsi menunjukkan pemandangan pengguna. Pengguna dapat bergerak bebas di sekitar adegan dengan memanipulasi kamera editor saat ini.
e. Assets Panel: mengelola semua aset yang tersedia di proyek. Pengguna dapat membuat, mengunggah, menghapus, memeriksa, dan mengedit aset apapun.
f. Loading Screen: terdiri dari dua jenis, yaitu:
Ikon Nama Fungsi
Create Default
Berfungsi untuk membuat layar pemuatan khusus.
Select Existing
Berfungsi untuk membuka layer pemuatan yang sudah memiliki skrip layer pemuatan yang valid.
g. Menu: berfungsi untuk menampilkan daftar lengkap semua perintah yang dapat pengguna lakukan.
7 | H a l a m a n h. Settings: berfungsi untuk mengatur berbagai properti.
i. Scenes: berfungsi untuk mengelola dialog adegan.
2. Tampilan Model 3D dengan PlayCanvas
Game engine merupakan sistem perangkat lunak yang dirancang untuk menjadi dasar pembuatan permainan. Salah satu contoh dari Game engine adalah PlayCanvas. PlayCanvas mampu memberikan kemudahan bagi pengguna dalam pembuatan permainan karena memiliki fitur yang sangat lengkap dan mudah dipahami bagi pemula.
Model 3D yang digunakan adalah model rumah yang dibentuk dari software SketchUp yang kemudian diekpor ke format .*fbx.
a. Pengaturan Lighting
Terdapat beberapa jenis pencahayaan pada PlayCanvas, yaitu:
8 | H a l a m a n 1) Directional Light: sumber cahaya yang tidak dipengaruhi posisi, tetapi
memiliki arah dan intensitas yang dapat diatur.
2) Spot Light: sumber cahaya yang dapat diatur posisinya dan memiliki sudut serta arah penyebaran tertentu.
3) Omni Light atau Point Light: sumber cahaya yang dapat diatur posisinya dan cahayanya memancar merata ke segala arah.
Pada praktikum kali ini, pencahayaan yang digunakan yaitu Directional Light dan Omni Light.
b. Pengaturan Kamera
Pengaturan camera yang tersedia dalam PlayCanvas, yaitu:
1) Perspective Camera: mengatur sesuai jarak pandang yang diinginkan.
2) Orthographic Camera: memberikan pandangan secara datar tanpa ada perspektif pengguna.
Pengaturan kamera pada proyek biasa (Bagian A)
Pengaturan kamera pada proyek First Person Movement (Bagian B)
c. Pemberian skybox
Pemberian skybox dilakukan dengan menambahkan CubeMap pada Assets, kemudian memasukkan gambar hasil unduhan situs humus.
9 | H a l a m a n d. Pengaturan scene pada First Person Movement
Dengan menggunakan first person, pengguna seolah-olah berada di dalam scene dan dapat bergerak sesuai keinginan dengan menggunakan keyboard A (kiri), W (maju), S (mundur), dan D (kanan).
Hasil Tampilan Bagian A
Tampilan hasil launch
Tampilan dengan Orthographic Camera
Hasil launch dapat diakses melalui:
https://launch.playcanvas.com/1740690?debug=true
Hasil Tampilan Bagian B (Scene First Person Movement)
10 | H a l a m a n
Tampilan hasil launch
Hasil launch dapat diakses melalui:
https://launch.playcanvas.com/1745782?debug=true
VII. KESIMPULAN
Berdasarkan praktikum minggu ke-10, dapat disimpulkan bahwa model 3D dapat disajikan secara interaktif dengan Game Engine melalui PlayCanvas.
PlayCanvas adalah mesin permainan 3D open source yang memungkinkan pengeditan dari beberapa komputer melalui antarmuka berbasis browser. Model yang digunakan adalah model rumah yang dibuat pada SketchUp kemudian di-export dengan format
*.fbx. Model 3D tersebut dilakukan penambahan CubeMap dan pengaturan kamera, light, player, animation, UI, dan lainnya. Pada praktikum minggu ini, tampilan model menggunakan First Person Movement (FPS) dengan scene first person sehingga seolah-olah pengguna memiliki fisik pada scene tersebut. Akan tetapi, dari hasil yang diperoleh, terdapat banyak material pada model 3D yang tidak terbaca oleh Play Canvas.
