- Giải thích nguyên lý tái hiện trực quan nhiều mức độ sáng tối bằng mảng pixel đen trắng
- Dithering là kỹ thuật biểu diễn bằng ảo giác thị giác nhiều màu sắc hoặc nhiều mức độ sáng tối hơn thực tế
- Trong phương pháp Ordered dithering, threshold map được dùng để quyết định đen hay trắng dựa trên độ sáng của từng pixel
- Trong quá trình này, sự thay đổi mật độ pixel tạo ra cảm giác thang độ xám, đồng thời giữ nguyên hình dạng của ảnh gốc
- Bài viết là phần đầu tiên trong loạt 3 phần nói về khái niệm cơ bản của dithering; các phần sau sẽ đề cập đến thuật toán tạo threshold map và error diffusion
Khái niệm và nguyên lý của dithering
- Dithering là kỹ thuật thị giác để biểu diễn nhiều sắc độ hơn với bảng màu hạn chế
- Sắp xếp các pixel đen trắng theo những mẫu nhất định để tạo ra ảo giác nhiều mức xám
- Tạo được sự đa dạng thị giác mà không cần tăng số lượng màu thực tế
- Bài viết sử dụng ảnh thang độ xám làm ví dụ
- Trên màn hình chỉ có thể hiển thị đen trắng, mỗi pixel được chuyển thành màu gần nhất (đen hoặc trắng)
- Nếu chuyển đổi đơn giản, ranh giới sáng tối sẽ thô và mất chi tiết vùng bóng đổ
- Dithering tạo ra chuyển tiếp sáng tối mượt hơn bằng cách cố ý đổi một số pixel sang màu đối lập
- Ở vùng tối, tăng mật độ pixel đen; ở vùng sáng, tăng mật độ pixel trắng
- Kết quả là chênh lệch mật độ pixel hình thành ảo giác thang độ xám
Ordered Dithering và threshold map
- Ordered dithering là phương pháp dithering đơn giản sử dụng threshold map
- Threshold map là một lưới giá trị độ sáng từ 0 (tối nhất) đến 1 (sáng nhất)
- Độ sáng của từng pixel đầu vào được so sánh với ngưỡng tại vị trí tương ứng
- Nếu độ sáng lớn hơn ngưỡng thì đặt thành trắng, nhỏ hơn thì đặt thành đen
- Lặp lại quá trình này cho mọi pixel để tạo ra ảnh mẫu đen trắng
- Threshold map được thiết kế để tạo ra mẫu mật độ đen trắng phù hợp theo phân bố độ sáng của ảnh đầu vào
- Vùng sáng có tỷ lệ màu trắng cao hơn, vùng tối có tỷ lệ màu đen cao hơn
- Chính sự khác biệt mật độ này tạo nên hiệu ứng nhìn từ xa giống như thang độ xám
Xử lý ảnh lớn và hiệu ứng thị giác
- Khi áp dụng dithering cho ảnh lớn, threshold map được mở rộng để khớp với kích thước toàn bộ ảnh
- Vẫn áp dụng cùng một nguyên lý là so sánh độ sáng từng pixel với ngưỡng để chuyển thành đen trắng
- Kết quả là ảnh chỉ dùng hai màu, nhưng vẫn giữ được cấu trúc sáng tối của ảnh gốc
- Dù số lượng màu giảm đi, chi tiết thị giác vẫn được giữ lại nhờ thay đổi mật độ pixel
Ý nghĩa của dithering và cấu trúc loạt bài
- Dithering là kỹ thuật tạo ra sự đa dạng thị giác bằng cách loại bỏ màu sắc chứ không phải thêm vào
- Tác giả mô tả đây là “quá trình tạo ra nhiều nhất có thể từ những gì đang có”
- Đây là bài đầu tiên trong loạt 3 phần, tập trung vào nguyên lý nền tảng và cách hiểu bằng trực quan
- Bài tiếp theo sẽ nói về thuật toán tạo threshold map, và bài cuối sẽ nói về error diffusion
- Loạt bài dự định khám phá nhiều cách tiếp cận thuật toán khác nhau của dithering và sự khác biệt trong kết quả thị giác
Giới thiệu tác giả và dự án
- visualrambling.space là dự án cá nhân do Damar vận hành
- Tạo ra nội dung tương tác để khám phá và giải thích trực quan nhiều chủ đề khác nhau
- Các chủ đề được đề cập gồm Three.js, WebGL, dithering, trực quan hóa, học tương tác
- Damar dự kiến sẽ tiếp tục chia sẻ các bài viết trực quan mới thông qua tài khoản X/Twitter (@damarberlari)
2 bình luận
Ý kiến Hacker News
Đây là kỹ thuật halftone. Tức là cách làm cho trông như có nhiều màu hơn bảng màu thực tế, nhưng theo tôi thì đây không phải dithering
tôi nghĩ dithering là kỹ thuật loại bỏ banding xảy ra khi bảng màu không đủ lớn
halftone được trình bày ở đây mở rộng bảng màu 2 màu lên khoảng 20 màu, nhưng banding vẫn còn rất rõ
kiểu banding này có thể được loại bỏ bằng cách dùng nhiều màu hơn rất nhiều (ví dụ: thang xám 256 mức, hoặc nếu là RGB thì 256³), hoặc bằng dithering
có lẽ kỹ thuật error diffusion được báo trước ở phần cuối chính là điều tôi đang nói tới
cốt lõi của dithering là noise, nhưng bản demo này hoàn toàn không có noise. Mọi thứ đều mang tính xác định (deterministic)
dù vậy thì phần trình bày thực sự rất tuyệt
thông thường noise xuất hiện trong quá trình lượng tử hóa (quantization), và dithering là kỹ thuật định hình noise đó
Bayer-matrix ordered dithering được dùng ở đây dồn noise vào dải tần cao để mắt khó nhận ra hơn, nhưng ở dải tần thấp thì banding vẫn còn
như Dave Long nói, thuật toán vẽ đường thẳng Bresenham cũng có thể xem là một dạng dithering. Chỉ là tín hiệu ở đây không phải độ sáng mà là vị trí cây bút
Cũng có bàn luận liên quan cách đây vài ngày — xem chuỗi này
Bài trên Wikipedia
trước đây các máy màu NeXT dùng màn hình 12-bit (4 bit mỗi kênh), nhưng nếu dùng dithering tốt thì trông như true color 24-bit
Tôi xin giới thiệu hai video của Daniel Shiffman trên Coding Train
Turning Images into Dots: The Magic of Dithering
Coding Challenge 181: Weighted Voronoi Stippling
Chủ đề rất thú vị. Hoạt ảnh cũng tốt và cho thấy đã bỏ nhiều công sức
nhưng những bài trình bày tương tác kiểu này khó đọc hơn bài blog truyền thống
cấu trúc bài không hiện ra ngay trong tầm mắt, và vì phải đọc theo từng câu nên rất khó lướt nhanh
cảm giác như video tương tác nơi người dùng có thể tự điều chỉnh tốc độ
bình thường tôi cũng thích văn bản hơn, nhưng tôi nghĩ đây là một biến tấu khá ổn
Tôi từng dùng ordered và error diffusion dithering như một ngôn ngữ thị giác trong nhiều dự án thiết kế
đặc biệt là dưới dạng tĩnh hoặc hoạt hình cho các công việc liên quan đến tech/computer/blockchain
những kỹ thuật cũ như thế này có một kiểu ấm áp và hoài niệm rất lạ, nên rất hợp để kết hợp với ý tưởng mới
Ví dụ tác phẩm của tôi có trên Instagram:
D.Y.O.R. / Printed / Titles / Thử nghiệm dithering
xem trang của tôi tại olsz.me
Trước đây tôi từng làm phần chuyển đổi giữa hai kiểu dithering
Dự án GitHub
Tôi rất muốn thích cái này, nhưng đọc chữ trên nền họa tiết chuyển động quá mệt
Cách trực quan hóa rất đẹp, nhưng tôi không hiểu phần threshold map
chưa có giải thích rõ về cách tạo map và cách xác định ngưỡng
không biết có phải với tác giả thì điều đó quá hiển nhiên nên lược bớt đi không
điều cốt lõi là phải nhớ khái niệm ‘threshold’. Pixel xám sẽ được đổi sang trắng hoặc đen dựa trên ngưỡng
ví dụ
dithered_color = (raw_color > threshold_color) ? white : blackbạn cũng có thể dùng threshold ngẫu nhiên. Nếu giá trị trung bình là 0.5 thì nó sẽ xấp xỉ màu xám gốc khá tốt
điều quan trọng là khi số pixel trắng tăng dần thì chúng không nên dính vào nhau.
màu xám 50% có thể được thiết kế thành mẫu bàn cờ, 25% thì chỉ một pixel trắng trong ô 2x2, v.v.
tự thử mấy thứ này trên ShaderToy sẽ khá vui
lúc đầu tôi tưởng đầu vào là ‘ảnh nhị phân’, nhưng về sau lại dùng vùng xám làm đầu vào
Dithering có thể khiến màu 10-bit trông đủ giống 10-bit ngay cả trên màn hình không hỗ trợ màu 10-bit
banding biến mất và noise che đi sự thiếu hụt về độ sâu màu
tức là đến nay nó vẫn là kỹ thuật hữu ích, không chỉ dành cho nghệ thuật retro
mọi người vẫn chỉ nghĩ tới palette dithering
8 bit/kênh là không đủ. Vì hiệu chỉnh gamma nên thực tế chỉ khoảng 220 mức
tôi đang duy trì Rust crate dithereens để giải quyết vấn đề này
chỉ cần nhìn dải gradient ở đầu README là thấy ngay vì sao nó quan trọng
khi giảm ảnh bit cao xuống 10-bit hoặc 8-bit thì random dithering là đủ hiệu quả
Photoshop mặc định áp dụng dithering khi chuyển 16-bit → 8-bit
nhiều phần mềm khác thì không, nên khi in poster lớn mà bị banding là bạn nhận ra ngay
trước đây nó khiến tấm nền TN 6-bit trông như 8-bit, và bây giờ còn được dùng cho HDR-10
đây là thuật toán đơn giản trộn màu bằng cách nhấp nháy pixel thật nhanh
Bài Wikipedia về Frame rate control
Định dạng trình bày rất xuất sắc và tôi mong chờ phần tiếp theo
trước đây tôi từng dùng ordered dithering trong ZX Spectrum Raytracer, triển khai đơn giản mà kết quả lại tốt
Link dự án
có vẻ trong thập niên 80 người ta không dùng nhiều vì vấn đề hiệu năng. Nhưng tôi có nhớ đã thấy nó trong nền của Windows 3.1 hay Monkey Island VGA vào thập niên 90
Demo rất hay, nhưng gọi dithering là “ảo giác về nhiều sắc độ hơn” thì có vẻ không thật chính xác
nếu xử lý ảnh đã dither bằng bộ lọc thông thấp, những sắc độ trung gian đó thực sự tồn tại
cũng giống như ampli lớp D xuất tín hiệu xung, nhưng sau lọc thì trở thành âm thanh analog thật sự
suy cho cùng thì chính thị giác của chúng ta và khoảng cách quan sát đóng vai trò như bộ lọc đó
nếu nhìn kỹ thì bạn sẽ thấy màu đó thực ra không tồn tại
ta nhận ra màu xám từ các pixel đen trắng, nhưng đồng thời cũng nhận biết đó là một dạng đánh lừa thị giác
nên tôi nghĩ cách diễn đạt ‘illusion’ là đúng
Bỏ phần chữ, chỉ giảng bằng hình ảnh trong khán phòng theo cách tiếp cận video tương tác, đây là một món cực ngầu đến mức như xé toang bục giảng. Cảnh thể hiện ảnh grayscale bằng cách phân lớp thành 3D là một lời giải thích cực kỳ dễ hiểu.