Cara Mengatasi Tekstur Hilang Saat Ekspor Blender ke GLB/GLTF dengan Bake

Saat ingin menambahkan objek 3D ke dalam proyek, seperti proyek website atau game, objek tersebut perlu diekspor ke dalam format GLB/GLTF dari aplikasi 3D Modeling seperti Blender.

Banyak pengguna Blender mengalami masalah saat mengekspor objek 3D ke format GLB/GLTF: material procedural yang terlihat di Blender, tiba-tiba hilang saat dibuka di aplikasi lain seperti Three.js. Mengapa bisa terjadi, dan bagaimana solusinya?

Saat melakukan ekspor dari file Blender ke format GLB/GLTF, material berupa warna dan tekstur yang telah dibuat menggunakan Shader Editor bisa hilang. Hal ini dapat terjadi jika material dibuat secara procedural. Material procedural hanya dapat “dibaca” oleh Blender itu sendiri dan tidak dikenali di luar Blender.

Objek pada Blender

Pada https://gltf.pmnd.rs/, tekstur hilang

Procedural materials pada Blender adalah material yang dibuat menggunakan node shader tanpa menggunakan gambar atau tekstur eksternal (image textures), melainkan dibangun dari rumus matematika, pola (noise, gradient, wave, dll.), dan fungsi-fungsi shader yang menghasilkan warna, tekstur, dan permukaan secara dinamis.

Jika ingin tetap mempertahankan tekstur yang telah dibuat, tekstur yang sudah ada perlu dibake. Proses bake akan mengubah informasi material dari nodes menjadi data statis, seperti gambar.

Berikut hal yang dilakukan untuk bake:

Part 1: Siapkan UV Map

1. Buka UV Editing**, klik Tab pada keyboard untuk ke Edit Mode, dan select semua vertices* (tekan A pada keyboard*)

2. Lakukan Smart UV Project dengan menekan U pada keyboard, dan pilih Smart UV Project

3. Set Island Margin ke 0.01 (agar antar-island tidak saling overlap), lalu klik OK.

Part 2: Menyiapkan Material

1. Masuk ke tab Shading, pada **shader editor**, select objek yang ingin dibake, dan pilih material yang ingin dibake

2. Pastikan engine render yang dipakai adalah Cycles, dan aktifkan GPU Compute jika memungkinkan.

3. Tambahkan node Image Texture pada Shader editor

4. Lakukan split screen dan buka UV Editor

5. Pada contoh ini, akan dilakukan 3 kali baking, yaitu warna (diffuse), normal, dan roughness.

PART 3: Baking

Saat melakukan bake, selalu ingat untuk select seluruh bagian object dan node Image Texture

• Diffuse

a. Pada *node Image Texture, klik New, set nama file gambar dan ukurannya (20482048)

b. Pada UV Editor, pilih file gambar yang baru dibuat. Gambar akan berwarna hitam

c. Pada render, pergi ke bagian bake, ubah bake type menjadi diffuse**, unselect Direct dan Undirect**

d. Klik Bake. Saat proses selesai, pada bagian UV Editor akan muncul warna yang bentuknya sesuai dengan pola UV.

e. Simpan file

• Normal

a. Pada *node Image Texture, klik New Image, set nama file gambar dan ukurannya (20482048)

b. Pada UV Editor, pilih file gambar yang baru dibuat

c. Pada render, pergi ke bagian bake, ubah bake type menjadi normal

d. Klik Bake. Saat proses selesai, pada bagian UV Editor akan muncul warna yang bentuknya sesuai dengan pola UV

e. Simpan file

• Roughness

a. Pada *node Image Texture, klik New Image, set nama file gambar dan ukurannya (20482048)

b. Pada UV Editor, pilih file gambar yang baru dibuat

c. Pada render, pergi ke bagian bake, ubah bake type menjadi Roughness

d. Klik Bake. Saat proses selesai, pada bagian UV Editor akan muncul warna yang bentuknya sesuai dengan pola UV

e. Simpan file

PART 3: Apply Texture

1. Saatnya set tekstur hasil bake ke model. Pada shader editor, sisihkan nodes yang ada. Disconnect dari* *Principal BSDF

2. Select node Principle BSDF

3. Pada **shader editor**, dengan keyboard, klik “ctrl+shift+T” (dengan catatan Node Wrangler sudah aktif (cek Edit->Preferences-> add ons->Node Wrangler)).

Select semua file gambar yang dibuat tadi dan klik Principled Texture Setup

4. Tekstur akan ditambahkan otomatis

5. Bagaimana jika ada yang ketinggalan? Duplikat node diatasnya, dan pilih file yang benar.

6. Selesai

Sekarang coba export file menjadi GLB dan cek dengan https://gltf.pmnd.rs/

Tekstur terlihat saat ekspor

Berdasarkan pengalaman develop web yang di dalamnya terdapat asset 3d dan dengan Three.js.

Terima kasih sudah membaca!

Jika ada pertanyaan, ingin berdiskusi, atau tertarik berkolaborasi, jangan ragu untuk menghubungi saya melalui: 📧 Email: merryskachr@gmail.com 💬 LinkedIn: https://www.linkedin.com/in/merryska-christy-mait-62426a212/

Sources:

• https://blender.stackexchange.com/questions/242552/some-textures-missing-after-exporting-to-gltf (Question by Alon, Answered by Blunder)

• https://www.youtube.com/watch?v=eYvgFWEiNp8 (Ryan King Art on Youtube)

• https://www.youtube.com/watch?v=JE2Zmy088zc (Kenan Proffitt on Youtube)