Main-main dengan OpenGL shader memang mengasikkan 😀 Katakanlah saya punya sebuah video yang ingin saya tampilkan dalam OpenGL scene. Saya bisa memakai ffmpeg tuk mengekstrak setiap frame yang ada di dalamnya. Frame ini lalu diubah menjadi OpenGL texture sehingga dapat ditampilkan dalam OpenGL scene. GPU dan drivernya zaman sekarang sudah mendukung NPOT Texture alias tekstur yang ukurannya tidak perlu angka dari dua pangkat sekian sehingga setiap frame dari video bisa langsung begitu saja digunakan tanpa harus diubah ukurannya terlebih dahulu.
Kalau cuma menampilkan yang seperti ini, vertex dan fragment shader berikut sudah cukup tuk digunakan. Katakanlah mpv berisi model-view-projection matrix, coord adalah koordinat kotak video (range 0.0-1.0), textureId adalah (tentunya) texture id dari video frame.
Beberapa hari belakangan saya mencari2 cara tuk menampilkan video yang transparan. Satu teknik yang terpikirkan langsung oleh saya adalah dengan menggunakan Chroma Key sehingga saya cukup mencari warna tertentu dan menghapusnya agar tidak ditampilkan. Namun kalau pakai cara ini, bagaimana menampilkan gambar yang tampil/hilang secara bertahap (err.. fade-in/out)?
Setelah merenung lebih lanjut, saya jadi terpikir kalau saya punya akses ke alpha channel saya bisa menggunakan nilai si alpha untuk membuat warna RGB menjadi transparan. Namun apa artinya si video harus menampung gambar dengan channel RGBA? apa format kompresi yang banyak dipakai (spesifiknya h264) itu mendukung RGBA? Untung saja saya menemukan sebuah pertanyaan di StackOverflow yang menjawab pertanyaan saya ini 😀
Intinya, video diubah menjadi seperti berikut ini.
Bagian atas video berisi channel RGB dan bagian bawah video adalah alpha masknya. Kalau sudah begini, si video sendiri bisa dikompresi dengan format apapun karena pada dasarnya si video hanya berisi RGB stream biasa. Namun kita perlu melakukan sedikit usaha tambahan pada saat menampilkannya: ambil setengah gambar atas dan setengah gambar bawah, ambil nilai RGB dari gambar atas, ambil nilai (katakanlah) R dari gambar bawah, gabungkan kedua nilai ini dg menjadikan nilai R dari gambar bawah sebagai nilai Alpha dari warna akhir.
Kalau kalimat terakhir di atas diubah menjadi fragment shader, hasilnya kira2 akan seperti berikut.
Voila! eiya, jangan lupa nyalakan GL_BLEND dan set blend function-nya agar alpha value-nya beneran terpakai.
Main-main dengan OpenGL shader memang mengasikkan 😀 Katakanlah saya punya sebuah video yang ingin saya tampilkan dalam OpenGL scene. Saya bisa memakai ffmpeg tuk mengekstrak setiap frame yang ada di dalamnya. Frame ini lalu diubah menjadi OpenGL texture sehingga dapat ditampilkan dalam OpenGL scene. GPU dan drivernya zaman sekarang sudah mendukung NPOT Texture alias tekstur yang ukurannya tidak perlu angka dari dua pangkat sekian sehingga setiap frame dari video bisa langsung begitu saja digunakan tanpa harus diubah ukurannya terlebih dahulu.
Kalau cuma menampilkan yang seperti ini, vertex dan fragment shader berikut sudah cukup tuk digunakan. Katakanlah mpv berisi model-view-projection matrix, coord adalah koordinat kotak video (range 0.0-1.0), textureId adalah (tentunya) texture id dari video frame.
Beberapa hari belakangan saya mencari2 cara tuk menampilkan video yang transparan. Satu teknik yang terpikirkan langsung oleh saya adalah dengan menggunakan Chroma Key sehingga saya cukup mencari warna tertentu dan menghapusnya agar tidak ditampilkan. Namun kalau pakai cara ini, bagaimana menampilkan gambar yang tampil/hilang secara bertahap (err.. fade-in/out)?
Setelah merenung lebih lanjut, saya jadi terpikir kalau saya punya akses ke alpha channel saya bisa menggunakan nilai si alpha untuk membuat warna RGB menjadi transparan. Namun apa artinya si video harus menampung gambar dengan channel RGBA? apa format kompresi yang banyak dipakai (spesifiknya h264) itu mendukung RGBA? Untung saja saya menemukan sebuah pertanyaan di StackOverflow yang menjawab pertanyaan saya ini 😀
Intinya, video diubah menjadi seperti berikut ini.
Bagian atas video berisi channel RGB dan bagian bawah video adalah alpha masknya. Kalau sudah begini, si video sendiri bisa dikompresi dengan format apapun karena pada dasarnya si video hanya berisi RGB stream biasa. Namun kita perlu melakukan sedikit usaha tambahan pada saat menampilkannya: ambil setengah gambar atas dan setengah gambar bawah, ambil nilai RGB dari gambar atas, ambil nilai (katakanlah) R dari gambar bawah, gabungkan kedua nilai ini dg menjadikan nilai R dari gambar bawah sebagai nilai Alpha dari warna akhir.
Kalau kalimat terakhir di atas diubah menjadi fragment shader, hasilnya kira2 akan seperti berikut.
Rasanya dulu saya pernah melakukannya.. dan memang pernah =D
Setelah sebelumnya saya membuat screencast, maka agar dapat ditampilkan di web saya perlu mengubah formatnya menjadi format yang umum “diterima”, misalnya Flash Video alias FLV. Urusan konversi ini saya serahkan ke aplikasi mencoder.
Jangan tanya saya apa arti dari setiap parameter yang ada, soalnya saya ngga tau =D Oya, saya sedang membuat screencast tanpa suara jadi memang seluruh opsi yang berhubungan dengan suara tidak saya gunakan.
Tuk ngubah2 kualitas, bisa diatur nilai dari bitrate yang ingin digunakan. Contoh di atas menggunakan bitrate 2500 yang cukup menghasilkan hasil yang bagus untuk kasus saya. Lihat contoh videonya di bawah ini. Garis-garis yang ada cukup terlihat bagus dan tidak terlalu berbercak.
Rasanya dulu saya pernah melakukannya.. dan memang pernah =D
Setelah sebelumnya saya membuat screencast, maka agar dapat ditampilkan di web saya perlu mengubah formatnya menjadi format yang umum “diterima”, misalnya Flash Video alias FLV. Urusan konversi ini saya serahkan ke aplikasi mencoder.
Jangan tanya saya apa arti dari setiap parameter yang ada, soalnya saya ngga tau =D Oya, saya sedang membuat screencast tanpa suara jadi memang seluruh opsi yang berhubungan dengan suara tidak saya gunakan.
Tuk ngubah2 kualitas, bisa diatur nilai dari bitrate yang ingin digunakan. Contoh di atas menggunakan bitrate 2500 yang cukup menghasilkan hasil yang bagus untuk kasus saya. Lihat contoh videonya di bawah ini. Garis-garis yang ada cukup terlihat bagus dan tidak terlalu berbercak.
Akhirnya saya menemukan salah satu cara untuk membuat screencast berkualitas tinggi, yaitu dengan bantuan ffmpeg. Intinya adalah kita menyuruh si ffmpeg tuk merekam langsung sesi X11 yang ada, nanti si ffmpeg akan langsung meng-encode si video ke file dalam format dan pengaturan yang menurut saya cukup bagus. Entah apa itu 😀
okeh.. masalah selanjutnya adalah bagaimana cara mengkonversi formatnya menjadi format yang lebih bersahabat dengan web (flv? h264?) dan tetap mempertahankan kualitas.. perburuan masih berlanjut =D
Akhirnya saya menemukan salah satu cara untuk membuat screencast berkualitas tinggi, yaitu dengan bantuan ffmpeg. Intinya adalah kita menyuruh si ffmpeg tuk merekam langsung sesi X11 yang ada, nanti si ffmpeg akan langsung meng-encode si video ke file dalam format dan pengaturan yang menurut saya cukup bagus. Entah apa itu 😀
okeh.. masalah selanjutnya adalah bagaimana cara mengkonversi formatnya menjadi format yang lebih bersahabat dengan web (flv? h264?) dan tetap mempertahankan kualitas.. perburuan masih berlanjut =D