Bài viết nhanh này từ một thông tin mà một anh bạn trẻ chia sẻ. Hiện tại hiệu ứng 3D được các thuật toán facebook thực hiện. Tuy nhiên nguyên tắc này sẽ là cơ sở cho việc tạo hiệu ứng 3D quảng cáo trong những trang web khác như Pinterest hoặc HTML5

Ảnh tạo thành trên facebook là ảnh Depth Map Image hơn là một ảnh 3D thực sự. Bạn hãy rê chuột lên ảnh nhúng dưới đây để rõ hơn nhe

https://www.facebook.com/vietchigo2014/posts/2477245382596981

Kỹ thuật siêu việt này hoá ra lại khá đơn giản, bạn chỉ cần chuẩn bị 2 ảnh

  • Ảnh chụp bình thường định dạng png hoặc jpg.
  • Ảnh đen trắng phân tách không gian theo sắc độ. File ảnh này cùng kích thước và định dạng với ảnh gốc nhưng tên file có gắn thêm đuôi là _depth. Ví dụ vietchigo.pngvietchigo_depth.png

Tóm lại bạn chỉ cần chuẩn bị file _depth thôi và cách tìm hiểu hay nhất là bắt tay vào một ảnh cụ thể

Đây là 1 góc nhìn trong quán Caphe Miền Đông Thảo ở đường Nguyễn Trọng Tuyển, quận Phú Nhuận, được chụp vào 1 thời điểm nào đó trong quá khứ.

Bước 1: Phân tích mảng theo không gian chiều sâu khung cảnh

Trước tiên bạn cần phân tích các thành phần trong ảnh theo độ sâu không gian (đi sâu vào khung cảnh). Ở bức tranh trên, mình tách thành 6 mảng theo nguyên tắc các đối tượng càng xa sẽ càng đen

  • 4 mảng đứng
    • Mảng hậu cảnh xa nhất sẽ có màu đen
    • Mảng 1: vách tường bên phải có màu xám đậm
    • Mảng 2: Lùm cây bên trái có màu xám nhạt
    • Mảng 3 (tiền cảnh): Hàng rào sẽ có màu trắng
  • 2 mảng xuôi theo chiều sâu:
    • Mảng A: dãy nhà bên trái sẽ có màu gradient ở khu trung cảnh
    • Mảng B: nền đất trải dài từ tiền cảnh đến hậu cảnh, sẽ có màu gradient từ trắng đến đen

Bước 2: Áp màu vô mảng

Nguyên tắc là xa - đen, gần - trắng. Với 6 mảng phân tích trên nếu nhìn theo mặt bên sẽ có bức hình dưới đây

Các pixel trên 1 mặt đứng có cùng 1 màu (do có cùng độ sâu khung cảnh) và màu đó được xác định ngay tại vị trí đứng của nó. Điều đó cho ta 1 nguyên tắc tô màu như sau:

  • Các mảng đứng sẽ có màu solid là màu xám ở ngay vị trí "nó" đang đứng trên dãy màu gradient nền
  • Các mảng ngang sẽ là màu gradient xám có điểm đầu và điểm cuối tương ứng với vị trí của nó trên dãy gradient của nền

Kết quả ta sẽ có 1 bản đồ chiều sâu (depth map) dưới đây

Bước 3: lưu và upload file depth map

Bước này đơn giản nhưng do rất quan trọng nên cần nhấn mạnh ra 1 bước riêng. Bạn xuất file jpg hoặc png cho cả 2 file (cùng định dạng, cùng kích thước). File ảnh đen trắng có cùng tên và định dạng với file ảnh gốc nhưng thêm _depth. Ví dụ vietchigo.pngvietchigo_depth.png

Và upload cả 2 ảnh này lên facebook, bạn sẽ có 1 ảnh depth map nhờ vào thuật toán tự động của facebook.

No comments

Leave your comment

In reply to Some User

Các bài liên quan