▲

디더링(dithering) – Part 1

 (visualrambling.space)
2P by GN⁺ 2일전 | ★ favorite | 댓글 2개
  • 흑백 픽셀 배열로 여러 단계의 명암을 시각적으로 재현하는 원리를 설명
  • 디더링(dithering) 은 실제보다 더 많은 색상이나 명암 단계를 착시로 표현하는 기술
  • Ordered dithering 방식에서는 임계값 맵(threshold map) 을 사용해 각 픽셀의 밝기를 기준으로 흑백을 결정
  • 이 과정에서 픽셀 밀도 변화가 회색조의 느낌을 만들어내며, 원본 이미지의 형태를 유지
  • 글은 디더링의 기본 개념을 다루는 3부작 중 첫 번째로, 이후 임계값 맵 생성 알고리듬과 오차 확산(error diffusion) 을 다룰 예정

디더링의 개념과 원리

  • 디더링은 제한된 색상으로 더 많은 색조를 표현하기 위한 시각적 기법
    • 흑백 픽셀을 특정 패턴으로 배열해 여러 단계의 회색조 착시를 생성
    • 실제 색상 수를 늘리지 않고 시각적 다양성을 확보
  • 글에서는 회색조 이미지를 예시로 사용
    • 흑백만 표시 가능한 화면에서 각 픽셀을 가장 가까운 색상(검정 또는 흰색) 으로 변환
    • 단순 변환 시 명암 경계가 거칠고 세부 그림자 정보가 손실됨
  • 디더링은 일부 픽셀을 의도적으로 반대 색상으로 바꾸어 부드러운 명암 전환을 구현
    • 어두운 영역에는 검은 픽셀 밀도를 높이고, 밝은 영역에는 흰 픽셀 밀도를 높임
    • 결과적으로 픽셀 밀도 차이가 회색조의 착시를 형성

Ordered Dithering과 임계값 맵

  • Ordered dithering은 임계값 맵(threshold map) 을 사용하는 단순한 디더링 방법
    • 임계값 맵은 0(가장 어두움)에서 1(가장 밝음)까지의 밝기 값 그리드로 구성
  • 각 입력 픽셀의 밝기를 해당 위치의 임계값과 비교
    • 밝기가 임계값보다 크면 흰색, 작으면 검정으로 설정
    • 이 과정을 모든 픽셀에 반복해 흑백 패턴 이미지 생성
  • 임계값 맵은 입력 이미지의 밝기 분포에 따라 적절한 흑백 밀도 패턴을 출력하도록 설계
    • 밝은 영역은 흰색 비율이 높고, 어두운 영역은 검정 비율이 높음
    • 이러한 밀도 차이가 멀리서 볼 때 회색조처럼 보이는 효과를 만듦

대형 이미지 처리와 시각적 효과

  • 큰 이미지를 디더링할 때는 임계값 맵을 확장해 전체 이미지 크기에 맞춤
    • 각 픽셀의 밝기를 임계값과 비교해 흑백으로 변환하는 동일한 원리 적용
  • 결과적으로 이미지는 두 가지 색상만 사용하지만, 원본의 명암 구조를 유지
    • 색상 수는 줄었지만 픽셀 밀도 변화로 시각적 세부 표현 유지

디더링의 의미와 시리즈 구성

  • 디더링은 색상을 추가하는 것이 아니라 제거하면서 시각적 다양성을 만드는 기술
    • 작성자는 이를 “가진 것으로 최대한을 만들어내는 과정”으로 표현
  • 이번 글은 3부작 중 첫 번째로, 기초 원리와 시각적 이해에 초점을 맞춤
    • 다음 글에서는 임계값 맵 생성 알고리듬을, 마지막 글에서는 오차 확산(error diffusion) 을 다룰 예정
  • 시리즈는 디더링의 다양한 알고리듬적 접근과 시각적 결과의 차이를 탐구할 계획

작성자 및 프로젝트 소개

  • visualrambling.space는 Damar가 운영하는 개인 프로젝트
    • 다양한 주제를 시각적으로 탐구하고 설명하는 인터랙티브 콘텐츠 제작
    • 다루는 주제에는 Three.js, WebGL, 디더링, 시각화, 인터랙티브 학습 등이 포함
  • Damar는 X/Twitter 계정(@damarberlari)을 통해 새로운 비주얼 아티클을 지속적으로 공유 예정
▲
GN⁺ 2일전  [-]
Hacker News 의견

  • 이건 halftone 기법임. 즉, 실제 팔레트보다 더 많은 색이 있는 것처럼 보이게 하는 방식인데, 내가 보기엔 dithering은 아님
    dithering은 팔레트가 충분히 크지 않아 생기는 밴딩(banding) 을 없애는 기술이라고 생각함
    여기서 보여준 halftone은 2색 팔레트를 약 20색 정도로 확장하지만 여전히 밴딩이 뚜렷함
    이런 밴딩은 색을 훨씬 더 많이 쓰거나(예: 256단계 그레이스케일, RGB라면 256³) 혹은 dithering으로 제거할 수 있음
    아마 마지막에 예고된 error diffusion 기법이 내가 말하는 그 부분일 것 같음
    dithering의 핵심은 노이즈인데, 이 데모에는 노이즈가 전혀 없음. 모든 게 결정적(deterministic)임
    그래도 프레젠테이션 자체는 정말 멋졌음

    • error-diffusion dithering이나 blue-noise/white-noise 패턴을 사용하는 dithering도 사실 결정적임
      일반적으로 노이즈는 양자화(quantization) 과정에서 생기며, dithering은 그 노이즈를 형태 조정하는 기술임
      여기서 사용된 Bayer-matrix ordered dithering은 노이즈를 고주파 영역에 집중시켜 눈에 덜 띄게 하지만, 저주파 영역에는 여전히 밴딩이 남음
      Dave Long이 말했듯이 Bresenham 선 알고리즘도 일종의 dithering으로 볼 수 있음. 신호가 밝기가 아니라 펜의 위치인 셈임
      관련 논의가 며칠 전에도 있었음 — 이 스레드 참고
    • 네가 말한 걸 보고 찾아봤는데, 이런 기법도 여전히 ordered dithering으로 불린다고 함
      위키피디아 문서
    • 밴딩을 줄이거나 없애는 dithering은 정말 인상적임
      예전에 NeXT 컬러 머신은 12비트(채널당 4비트) 디스플레이였지만, dithering을 잘 쓰면 24비트 true color처럼 보였음
    • 나는 픽셀 아티스트인데, 이 기법을 쓰는 사람들은 전부 dithering이라고 부름
    • 이름 그대로 ordered dithering이라 부름

  • Daniel Shiffman의 Coding Train 영상 두 개를 추천함
    Turning Images into Dots: The Magic of Dithering
    Coding Challenge 181: Weighted Voronoi Stippling

  • 흥미로운 주제였음. 애니메이션도 좋았고 노력의 흔적이 보였음
    하지만 이런 인터랙티브 프레젠테이션은 전통적인 블로그 글보다 읽기 어려움
    글의 구조가 한눈에 안 들어오고, 문장 단위로 읽어야 해서 빠르게 훑어보기 힘들었음

    • 이건 블로그보다는 비디오에 가까운 형식으로 보는 게 맞을 듯함
      사용자가 속도를 조절할 수 있는 인터랙티브 비디오 느낌임
      나도 평소엔 텍스트를 선호하지만, 이런 형식은 괜찮은 변주라고 생각함

  • 나는 여러 디자인 프로젝트에서 ordered와 error diffusion dithering을 시각 언어로 사용했음
    특히 테크/컴퓨터/블록체인 관련 작업에서 정적 또는 애니메이션 형태로 활용했음
    이런 오래된 기술에는 묘한 따뜻함과 향수가 있어서 새로운 아이디어와 결합하기 좋음
    내 작업 예시는 인스타그램에 있음:
    D.Y.O.R. / Printed / Titles / Dithering 실험

    • 좋은 링크였음. 나도 레트로 스타일 포트폴리오를 만들며 retro shader를 실험 중임
      내 사이트 olsz.me 참고

  • 예전에 두 가지 dithering 간 전환을 만든 적 있음
    GitHub 프로젝트

  • 이걸 정말 좋아하고 싶었는데, 움직이는 패턴 위의 텍스트를 읽는 게 너무 힘들었음

    • 나도 7초 정도 버텼음

  • 시각화 방식은 멋졌지만 threshold map 부분이 이해되지 않았음
    맵을 어떻게 만들고 임계값을 어떻게 정하는지 설명이 부족했음
    저자에게 너무 당연해서 생략된 건지 모르겠음

    • ordered threshold map을 만드는 건 꽤 복잡한 아이디어가 필요함
      핵심은 ‘threshold’ 개념을 기억하는 것임. 회색 픽셀이 임계값을 기준으로 흑백으로 바뀜
      예를 들어 dithered_color = (raw_color > threshold_color) ? white : black
      threshold를 랜덤으로 써도 됨. 평균값이 0.5가 되면 원래 회색을 잘 근사함
      중요한 건 흰 픽셀이 점점 늘어날 때 서로 붙지 않게 하는 것임.
      50% 회색은 체커보드 패턴, 25%는 2x2 중 한 픽셀만 흰색 등으로 설계할 수 있음
      이런 실험은 ShaderToy에서 직접 해보면 재미있음
    • 2편에서 threshold map을, 3편에서 error diffusion dithering을 다룬다고 함
    • 시각화는 아름다웠지만 나도 threshold map 부분이 헷갈렸음
      처음엔 ‘이진 이미지’를 입력으로 쓰는 줄 알았는데, 나중엔 회색 영역을 입력으로 쓰더라
    • 다음 편은 드래곤볼 Z 예고편처럼 느껴졌음

  • dithering은 10비트 색상을 지원하지 않는 모니터에서도 충분히 10비트처럼 보이게 함
    밴딩이 사라지고 노이즈가 색 깊이 부족을 가려줌
    즉, 현대에도 유용한 기술임. 단순히 레트로 아트용이 아님

    • 맞음. 하지만 대부분의 소프트웨어는 이걸 하지 않음
      사람들은 여전히 팔레트 dithering만 떠올림
      8비트/채널은 충분하지 않음. 감마 보정 때문에 실제로는 약 220단계 정도임
      나는 이런 문제를 해결하려고 Rust crate dithereens를 유지보수 중임
      README 상단의 그래디언트를 보면 왜 중요한지 바로 알 수 있음
    • 현대 인쇄에서도 dithering을 씀
      고비트 이미지를 10비트나 8비트로 줄일 때 랜덤 dithering이 충분히 효과적임
      Photoshop은 16비트→8비트 변환 시 기본적으로 dithering을 적용함
      다른 소프트웨어는 그렇지 않아서, 큰 포스터를 인쇄할 때 밴딩이 생기면 바로 깨닫게 됨
    • LCD 패널은 오래전부터 temporal dithering을 사용해 더 높은 비트 깊이를 흉내냄
      6비트 TN 패널을 8비트처럼 보이게 했고, 지금은 HDR-10에도 쓰임
      이 방식은 픽셀을 빠르게 깜빡여 색을 섞는 단순한 알고리즘임
      Frame rate control 위키 문서

  • 프레젠테이션 형식이 훌륭했고 다음 파트도 기대됨
    예전에 ZX Spectrum Raytracer에서 ordered dithering을 써봤는데, 구현이 간단하고 결과가 좋았음
    프로젝트 링크
    80년대에는 성능 문제로 잘 안 썼던 듯함. 90년대 Windows 3.1이나 Monkey Island VGA 배경에서는 본 기억이 있음

  • 멋진 데모였지만, dithering을 “더 많은 색조의 환상(illusion) ”이라 부르는 건 정확하지 않은 것 같음
    dither된 이미지를 저역통과 필터로 처리하면 실제로 그 중간 색조가 존재함
    마치 클래스 D 앰프가 펄스 신호를 내보내지만, 필터 후엔 실제 아날로그 음이 되는 것처럼
    결국 우리의 시각과 거리 자체가 그 필터 역할을 하는 셈임

    • 그래도 나는 그걸 환상이라 부름
      주의 깊게 보면 실제로 그 색이 존재하지 않음을 알 수 있음
      흑백 픽셀만으로 회색을 인식하지만, 동시에 그게 착시임을 인지할 수 있음
      그래서 ‘illusion’이라는 표현이 맞다고 생각함
답변달기
▲
chinnotching 2일전  [-]

텍스트는 빼고, 영상만 강당에서 강의한다는 인터렉티브 비디오로의 접근으로, 강단을 찢어버릴정도의 폭풍간지 아이템입니다. 이미지 그레이스케일을 3d로 레이어화 시켜 보여주는 장면은 굉장히 친절한 설명이라 생각 됩니다

답변달기