Cara Membuat Efek Gambar 3D Palsu dengan WebGL

Pelajari cara membuat efek 3D "palsu" interaktif untuk gambar dengan peta mendalam dan WebGL biasa.

Lihat demo Unduh Sumber

Dari sponsor bulanan kami: HelloSign API: Semua yang diinginkan dan disukai pengembang. Coba gratis hari ini.

WebGL menjadi sangat populer akhir-akhir ini karena memungkinkan kita membuat grafik interaktif unik untuk web. Anda mungkin telah melihat efek distorsi teks terbaru menggunakan Blotter.js atau garis WebGL animasi yang dibuat dengan perpustakaan THREE.MeshLine . Hari ini Anda akan melihat cara cepat membuat efek 3D "palsu" interaktif untuk gambar dengan WebGL biasa.

Jika Anda menggunakan Facebook, Anda mungkin telah melihat pembaruan foto 3D untuk umpan berita dan VR . Dengan kamera telepon khusus yang menangkap jarak antara subjek di latar depan dan latar belakang, foto 3D menghidupkan pemandangan dengan kedalaman dan gerakan. Kami dapat membuat ulang efek semacam ini dengan foto apa saja, beberapa pengeditan gambar dan sedikit pengkodean.

Biasanya, efek semacam ini akan bergantung pada Three.js atau Pixi.js, pustaka yang kuat yang datang dengan banyak fitur dan penyederhanaan yang berguna saat pengkodean. Hari ini kami tidak akan menggunakan perpustakaan apa pun tetapi pergi dengan API WebGL asli.

Jadi mari kita gali.

Mulai

Jadi, untuk efek ini kita akan menggunakan API WebGL asli. Tempat yang bagus untuk membantu Anda memulai dengan WebGL adalah webglfundamentals.org . WebGL biasanya dimarahi karena verbosenenya. Dan ada alasan untuk itu. Dasar dari semua efek shader layar penuh (bahkan jika itu 2D) adalah semacam bidang atau jala, atau disebut quad, yang membentang di seluruh layar. Jadi, berbicara tentang menjadi verbose, sementara kita hanya akan menulis THREE.PlaneGeometry(1,1)dalam three.js yang menciptakan bidang 1 × 1, inilah yang kita butuhkan di WebGL:

let vertices = new Float32Array([
   -1, -1,
   1, -1,
   -1, 1,
   1, 1,
 ])
 let buffer = gl.createBuffer();
 gl.bindBuffer( gl.ARRAY_BUFFER, buffer );
 gl.bufferData( gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW );

Sekarang kita memiliki pesawat, kita dapat menerapkan vertex dan shader fragmen untuk itu.

Mempersiapkan gambar

Agar efek kita berfungsi, kita perlu membuat peta kedalaman gambar. Prinsip utama untuk membangun peta kedalaman adalah bahwa kita harus memisahkan beberapa bagian gambar tergantung pada posisi Z mereka, yaitu menjadi jauh atau dekat, karenanya mengisolasi latar depan dari latar belakang.

Untuk itu, kita dapat membuka gambar di Photoshop dan mengecat area abu-abu di atas foto asli dengan cara berikut:

Gambar ini menunjukkan beberapa gunung di mana Anda dapat melihat bahwa semakin dekat objek ke kamera, semakin terang area tersebut dicat dalam peta kedalaman. Mari kita lihat di bagian selanjutnya mengapa naungan semacam ini masuk akal.

Shader

Logika rendering sebagian besar terjadi di shader. Seperti yang dijelaskan dalam dokumen web MDN:

Shader adalah sebuah program, ditulis menggunakan OpenGL ES Shading Language (GLSL), yang mengambil informasi tentang simpul yang membentuk bentuk dan menghasilkan data yang diperlukan untuk membuat piksel ke layar: yaitu posisi piksel dan warna. Ada dua fungsi shader yang dijalankan saat menggambar konten WebGL: vertex shader dan fragmen shader.

Sumber yang bagus untuk mempelajari lebih lanjut tentang shader adalah The Book Of Shaders .

Vertex shader tidak akan berbuat banyak; itu hanya menunjukkan simpul:

attribute vec2 position;
    void main() {
    gl_Position = vec4( position, 0, 1 );
}

Bagian yang paling menarik akan terjadi dalam shader fragmen. Mari kita memuat dua gambar di sana:

void main(){
    vec4 depth = texture2D(depthImage, uv);
    gl_FragColor = texture2D(originalImage, uv); // just showing original photo
}

Ingat, gambar peta kedalaman hitam dan putih. Untuk shader, warnanya hanya angka: 1 putih dan 0 hitam pekat. The uvvariabel adalah menyimpan informasi dua peta dimensi yang pixel untuk ditampilkan. Dengan dua hal ini kita dapat menggunakan informasi mendalam untuk memindahkan piksel dari foto asli sedikit.

Mari kita mulai dengan gerakan mouse:

vec4 depth = texture2D(depthImage, uv);
gl_FragColor = texture2D(originalImage, uv + mouse);

Begini tampilannya:

Sekarang mari kita tambahkan kedalaman:

vec4 depth = texture2D(depthImage, uv);
gl_FragColor = texture2D(originalImage, uv + mouse*depth.r);

Dan inilah kita:

Karena teksturnya hitam dan putih, kita bisa mengambil saluran merah ( depth.r), dan mengalikannya dengan nilai posisi mouse di layar. Itu berarti, semakin terang pixelnya, semakin banyak ia bergerak dengan mouse. Di sisi lain, piksel gelap hanya akan tetap di tempatnya. Ini sangat sederhana, namun menghasilkan ilusi 3D yang bagus dari suatu gambar.

Tentu saja, shader mampu melakukan semua jenis hal gila lainnya, tapi saya harap Anda menyukai eksperimen kecil ini "memalsukan" gerakan 3D. Biarkan saya tahu apa yang Anda pikirkan tentang hal itu, dan saya berharap dapat melihat kreasi Anda dengan ini!

Referensi dan Kredit

• Perpustakaan Gyronorm oleh Doruk Eker
• Foto oleh Cosmic Timetraveler
• Foto oleh Chelsea Ferenando
• Foto oleh Rio Syhputra
• Phoyo oleh Jonatan Pie

Temukan proyek ini di Github

Lihat demo Unduh Sumber