Tôi đã làm cái này vài ngày trước
Ban đầu tôi làm để thử triển khai “giả lập” độ sâu trường ảnh bằng CSS, còn video demo và nguồn cảm hứng từ shuding_ nằm ở tweet áp chót trong các liên kết ở cuối trang
Nhưng tối qua tôi chợt nhớ ra có ThreeJS nên đã viết lại bằng react-three-fiber; đây là lần đầu tôi dùng và tôi khá ấn tượng vì nó được thiết kế rất công thái học
Chưa ghi trong tài liệu, nhưng có thể kéo bằng chuột phải để di chuyển khung nhìn
Tôi thích tính tương tác của UI. Làm tốt lắm
Cũng thấy cả tính năng chưa được ghi tài liệu. Hơi lạ là trên macOS, ctrl+nhấp chuột trái cũng không di chuyển được
Tôi đã kỳ vọng nó sẽ tích hợp với OS để chụp ảnh chụp màn hình 3D ở giai đoạn trước bộ tổng hợp cửa sổ, gán độ sâu Z cho từng cửa sổ để chúng như đang nổi phía trên desktop và chồng lên nhau
Một “ảnh chụp màn hình 3D” như vậy khi xem bằng phép chiếu trực giao sẽ trông y hệt ảnh chụp màn hình bình thường, nhưng ngay khi thêm hiệu ứng độ sâu trường ảnh thì khác biệt sẽ lộ ra
Tất nhiên cũng có thể xem bằng phép chiếu khác, nghiêng nó trong không gian 3D như ở đây, thêm sương mù cho các cửa sổ ở xa, hoặc dùng nguồn sáng điểm để các cửa sổ thật sự đổ bóng lên nhau. Các vùng bán trong suốt cũng có thể cho nhiều ánh sáng đi qua hơn; lý tưởng nhất là có một trình xem có thể nhúng vào HTML5 làm được tất cả những việc này
Định dạng và trình xem kiểu này có vẻ có một ứng dụng khá rõ ràng: tái hiện cách bố trí cửa sổ AR có ánh xạ độ sâu của visionOS dưới dạng một snapshot tĩnh có thể “nhìn quanh”. Nếu gắn được bản đồ độ sâu tùy ý vào các cửa sổ của OS desktop 2D thì đó là phần thưởng thêm
Thứ gần giống nhất tôi từng thấy là trình xem debug UI của Xcode. Bạn có thể xoay mọi phần tử UI trong không gian 3D như một bản vẽ tách lớp
Tuy nhiên không có ánh sáng hay bóng đổ, và chỉ giới hạn ở các ứng dụng mà bạn có quyền truy cập debug
Amazon Fire Phone dường như cũng từng cố mô phỏng thời gian thực một giao diện điện thoại di động và góc nhìn 3D có thị sai, dùng nhiều camera theo dõi mắt ở mặt trước cùng con quay hồi chuyển + gia tốc kế. Trình xem tab trên Safari di động ngày xưa cũng làm các tab chuyển động theo hướng thiết bị
Một ngày nào đó tôi muốn thấy UI chiếu sáng toàn cục. Dù không thực dụng, nhưng sẽ rất hay nếu có cảm giác như đang xem trực tiếp những bản render Windows mà đội Microsoft Design từng đưa ra. Sẽ tốn điện khủng khiếp, nhưng bóng đổ mềm được path tracing chắc sẽ rất đẹp
Gần như đang tiến tới động cơ của VisionOS, tức một hệ điều hành định hướng không gian 3D
Dạo này tôi thường nghĩ ảnh chụp màn hình chưa đủ mờ, cái này đúng ý quá
Giới hạn độ sâu trường ảnh rất hữu ích để nhấn mạnh một yếu tố cụ thể trong ảnh, vì vậy nó gần như luôn được dùng trong ảnh chân dung
Ngoài ra, ảnh chân dung nên được chụp từ một khoảng cách nhất định bằng ống kính tele, vì nó ghi lại khuôn mặt mà người ta nhớ, chứ không phải khuôn mặt như họ thật sự nhìn thấy. Lý do cần điều chỉnh là với cùng cấu hình ống kính, chụp gần sẽ làm độ sâu trường ảnh nông hơn nhiều, còn chụp xa thì sâu hơn nhiều
Đây là một câu mỉa mai không cần thiết. Tôi sẽ không thích dùng ảnh chụp màn hình có độ sâu trường ảnh kiểu này để đính kèm báo cáo lỗi
Nhưng trên trang marketing, nó có vẻ là một hiệu ứng thị giác tốt để nhấn mạnh một phần cụ thể của ảnh chụp màn hình và làm nổi bật thông điệp muốn truyền tải
Đúng rồi, trước hết làm mờ ảnh chụp màn hình, rồi lại làm nó sắc nét bằng màn hình HiDPI /s
Có công cụ tương tự nào tạo video montage có độ sâu trường ảnh và xoay chậm từ một bộ ảnh chụp màn hình kèm chú thích không?
Trả lời câu hỏi thấy trong các bình luận khác: cái này được làm bằng three.js
Có thể hiểu là một cảnh 3D render hình ảnh trên một mặt phẳng 2D, và camera áp dụng một mức Gaussian blur cụ thể lên một phần của nó. Phóng to/thu nhỏ và xoay hình ảnh dùng orbit controls
Đây có phải chỉ là một cách nói hoa mỹ cho việc “làm mờ toàn bộ phần còn lại” trong ảnh chụp màn hình không? Cá nhân tôi thích cắt bỏ phần không cần thiết hơn
Khi muốn chỉ ra cần đi tới đâu trong một UI phức tạp, việc ảnh chụp màn hình vẫn giữ lại phần UI còn lại có thể hữu ích
Cắt bỏ thì mất manh mối điều hướng, nhưng để mọi thứ sắc nét thì có thể khó xem như UI thật; làm mờ có thể là một điểm thỏa hiệp
Trông thú vị. Ban đầu tôi tưởng phần xa tôi nhất trong ảnh chụp màn hình sẽ bị mờ và phần gần nhất sẽ được lấy nét, nhưng thực tế không hoạt động như vậy
Nếu có thể đánh dấu phần quan trọng, có lẽ nó dùng được để lấy nét vào một phần cụ thể của ảnh chụp màn hình
Nhấp vào một phần của hình ảnh thì nó sẽ lấy nét vào đó
Độ sâu trường ảnh nông được dùng trong nhiếp ảnh, và đôi khi trong điện ảnh, chính nhằm mục đích thu hút sự chú ý của người xem vào một yếu tố cụ thể
Tuy vậy, sau khi xem demo, tôi không chắc mình muốn dùng nó vào việc gì
Dùng làm nền cho những thứ như thumbnail video YouTube có vẻ thú vị
Tôi không muốn nó được dùng để truyền tải thông tin thực sự, nhưng có vẻ vẫn đủ để nhận ra đang dùng ứng dụng nào
Làm ơn hỗ trợ dán hình ảnh đi
Các ô nhập bắt phải chọn tệp từ hệ thống tệp thay vì dùng clipboard làm tăng ma sát sử dụng lên khoảng 5 lần theo cảm nhận của tôi. Điều này đúng với mọi nút tải ảnh lên mà tôi từng dùng
1 bình luận
Các ý kiến trên Hacker News
Tôi đã làm cái này vài ngày trước
Ban đầu tôi làm để thử triển khai “giả lập” độ sâu trường ảnh bằng CSS, còn video demo và nguồn cảm hứng từ shuding_ nằm ở tweet áp chót trong các liên kết ở cuối trang
Nhưng tối qua tôi chợt nhớ ra có ThreeJS nên đã viết lại bằng react-three-fiber; đây là lần đầu tôi dùng và tôi khá ấn tượng vì nó được thiết kế rất công thái học
Chưa ghi trong tài liệu, nhưng có thể kéo bằng chuột phải để di chuyển khung nhìn
https://depth-of-field.vercel.app/
Cũng thấy cả tính năng chưa được ghi tài liệu. Hơi lạ là trên macOS, ctrl+nhấp chuột trái cũng không di chuyển được
Tôi đã kỳ vọng nó sẽ tích hợp với OS để chụp ảnh chụp màn hình 3D ở giai đoạn trước bộ tổng hợp cửa sổ, gán độ sâu Z cho từng cửa sổ để chúng như đang nổi phía trên desktop và chồng lên nhau
Một “ảnh chụp màn hình 3D” như vậy khi xem bằng phép chiếu trực giao sẽ trông y hệt ảnh chụp màn hình bình thường, nhưng ngay khi thêm hiệu ứng độ sâu trường ảnh thì khác biệt sẽ lộ ra
Tất nhiên cũng có thể xem bằng phép chiếu khác, nghiêng nó trong không gian 3D như ở đây, thêm sương mù cho các cửa sổ ở xa, hoặc dùng nguồn sáng điểm để các cửa sổ thật sự đổ bóng lên nhau. Các vùng bán trong suốt cũng có thể cho nhiều ánh sáng đi qua hơn; lý tưởng nhất là có một trình xem có thể nhúng vào HTML5 làm được tất cả những việc này
Định dạng và trình xem kiểu này có vẻ có một ứng dụng khá rõ ràng: tái hiện cách bố trí cửa sổ AR có ánh xạ độ sâu của visionOS dưới dạng một snapshot tĩnh có thể “nhìn quanh”. Nếu gắn được bản đồ độ sâu tùy ý vào các cửa sổ của OS desktop 2D thì đó là phần thưởng thêm
Tuy nhiên không có ánh sáng hay bóng đổ, và chỉ giới hạn ở các ứng dụng mà bạn có quyền truy cập debug
Amazon Fire Phone dường như cũng từng cố mô phỏng thời gian thực một giao diện điện thoại di động và góc nhìn 3D có thị sai, dùng nhiều camera theo dõi mắt ở mặt trước cùng con quay hồi chuyển + gia tốc kế. Trình xem tab trên Safari di động ngày xưa cũng làm các tab chuyển động theo hướng thiết bị
Một ngày nào đó tôi muốn thấy UI chiếu sáng toàn cục. Dù không thực dụng, nhưng sẽ rất hay nếu có cảm giác như đang xem trực tiếp những bản render Windows mà đội Microsoft Design từng đưa ra. Sẽ tốn điện khủng khiếp, nhưng bóng đổ mềm được path tracing chắc sẽ rất đẹp
Dạo này tôi thường nghĩ ảnh chụp màn hình chưa đủ mờ, cái này đúng ý quá
Ngoài ra, ảnh chân dung nên được chụp từ một khoảng cách nhất định bằng ống kính tele, vì nó ghi lại khuôn mặt mà người ta nhớ, chứ không phải khuôn mặt như họ thật sự nhìn thấy. Lý do cần điều chỉnh là với cùng cấu hình ống kính, chụp gần sẽ làm độ sâu trường ảnh nông hơn nhiều, còn chụp xa thì sâu hơn nhiều
Nhưng trên trang marketing, nó có vẻ là một hiệu ứng thị giác tốt để nhấn mạnh một phần cụ thể của ảnh chụp màn hình và làm nổi bật thông điệp muốn truyền tải
Trông giống Screenstab [0], một Show HN trước đây
[0] https://www.screenstab.com/editor/
[1] https://news.ycombinator.com/item?id=34729849
Trả lời câu hỏi thấy trong các bình luận khác: cái này được làm bằng three.js
Có thể hiểu là một cảnh 3D render hình ảnh trên một mặt phẳng 2D, và camera áp dụng một mức Gaussian blur cụ thể lên một phần của nó. Phóng to/thu nhỏ và xoay hình ảnh dùng orbit controls
Đây có phải chỉ là một cách nói hoa mỹ cho việc “làm mờ toàn bộ phần còn lại” trong ảnh chụp màn hình không? Cá nhân tôi thích cắt bỏ phần không cần thiết hơn
Cắt bỏ thì mất manh mối điều hướng, nhưng để mọi thứ sắc nét thì có thể khó xem như UI thật; làm mờ có thể là một điểm thỏa hiệp
Trông thú vị. Ban đầu tôi tưởng phần xa tôi nhất trong ảnh chụp màn hình sẽ bị mờ và phần gần nhất sẽ được lấy nét, nhưng thực tế không hoạt động như vậy
Nếu có thể đánh dấu phần quan trọng, có lẽ nó dùng được để lấy nét vào một phần cụ thể của ảnh chụp màn hình
Tuy vậy, sau khi xem demo, tôi không chắc mình muốn dùng nó vào việc gì
Có lẽ nên thêm pixel RGB để trông chân thực hơn, giống như tôi từng làm trong Blender vài năm trước
https://blenderartists.org/t/rgb-display-shader/684533
Dùng làm nền cho những thứ như thumbnail video YouTube có vẻ thú vị
Tôi không muốn nó được dùng để truyền tải thông tin thực sự, nhưng có vẻ vẫn đủ để nhận ra đang dùng ứng dụng nào
Làm ơn hỗ trợ dán hình ảnh đi
Các ô nhập bắt phải chọn tệp từ hệ thống tệp thay vì dùng clipboard làm tăng ma sát sử dụng lên khoảng 5 lần theo cảm nhận của tôi. Điều này đúng với mọi nút tải ảnh lên mà tôi từng dùng