▲

포일 스티커 효과 구현

 (4rknova.com)
1P by GN⁺ 17시간전 | ★ favorite | 댓글 1개
  • 포일 스티커 효과를 구현하는 셰이더 소스 코드로, 표면의 반사와 반짝임을 실제처럼 시뮬레이션함
  • 금속성, 거칠기, 무지갯빛 반사와 같은 다양한 특성을 세밀하게 조정 가능함
  • 포일 표면의 미세입자(플레이크) 효과와 각도에 따라 변하는 무지갯빛 색상 연출이 핵심임
  • 환경맵 샘플링, 프레넬 효과, AO 그림자 및 알파 커트오프 등 다양한 물리 기반 그래픽스 기술을 활용함
  • 실제 2D/3D 환경에서 고품질 포일 스티커 렌더링에 활용할 수 있는 고급 셰이더 구현임

개요

이 내용은 포일 스티커처럼 반짝이는 시각적 효과를 구현하는 GLSL 셰이더 코드임. 금속성, 무지갯빛, 표면 미세입자 효과, 환경 반사 등을 복합적으로 처리해 고품질의 시각적 질감을 만들어내는 목적임. 2D 텍스처와 환경맵, 다양한 조정 파라미터를 활용해 현실적인 포일 효과를 생성함.

주요 변수 및 상수

  • 다양한 유니폼(uniform) 변수로 효과 조정 가능
    • 예: uFlakeSize(플레이크 크기), uRoughness(거칠기), uMetalness(금속성), uIridescence(무지갯빛) 등
  • 텍스처와 환경맵, 그리고 월드 좌표계 정보 지원

주요 함수 구조

해시 함수(hash)

  • 미세입자(플레이크) 효과에 필요한 난수값 생성에 사용

환경맵 좌표 변환(dirToEquirectUv), 환경맵 샘플링(sampleEnvRough)

  • 환경맵에서 방향에 따른 샘플링을 지원
  • 거칠기(lod) 에 따라 적절한 mip level을 적용함

무지갯빛 효과(iridescenceColor)

  • 각도와 표면 두께에 따라 동적으로 색상을 생성
  • 실제 포일 표면처럼 보는 각도에 따라 색상이 변함

휘도(luminance)

  • 컬러의 밝기 정보를 계산하여 후처리 등에 반영

셰이더 메인 로직

알파 컷오프 및 전면/후면 처리

  • base 텍스처의 알파값으로 픽셀 생존 여부 결정
  • 전면/후면에 따라 AO 강도, 벗겨짐(peeled) 처리 및 색상 조정

반사, 플레이크, 무지갯빛, 금속성 처리

  • 표면 법선(normal), 시야 백터, 반사 벡터, 환경 반사 등을 계산
  • 플레이크 효과를 위해 위치별 hash 및 각도 랜덤 오프셋 적용
  • 플레이크의 밝기, 마스킹, 부스트 등을 세밀하게 컨트롤
  • perturbedNormal을 사용해 플레이크 표면의 변위 반영
  • 플레이크와 주변 컬러를 무지갯빛 색상과 함께 혼합

환경맵 조합 및 최종 컬러 산출

  • 플레이크 강도에 따라 거칠기를 동적으로 변화
  • 메탈/노멀/반사 마스킹, 프레넬 계산 등으로 현실성 상승
  • diffuse(확산), spec(반사) 성분을 혼합해 최종 컬러 생성
  • base 알파와 함께 최종 색상으로 출력

시사점

이 셰이더는 포일 재질 특유의 복잡한 시각 효과(강한 반사, 미세입자, 무지갯빛 등)를 현실감 있게 재현하는 데에 적합함. 다양한 파라미터로 효과를 정밀하게 조절할 수 있어 유연한 커스터마이징과 고가시성 포일 스티커 렌더링이 가능함. 3D, 2D 웹, 게임, 인터랙티브 UI 등 다양한 곳에 활용 장점이 큼.

▲
GN⁺ 17시간전  [-]
Hacker News 의견

  • 예전에 모바일 게임 개발을 했을 때, 멋진 카드에 실제 3D 오브젝트처럼 폰 기울기에 따라 “광택”이 달라지는 효과를 넣은 적이 있음. 요즘 iOS에서는 이런 스티커 효과를 기본으로 지원한다고 하여 신기함을 느낌

  • Magic 카드 마켓플레이스 사이트에서 호일 카드에 간단한 CSS 효과를 적용하고 있음. 그런데 실제 Magic 카드에서 볼 수 있는 다양한 호일 효과를 퍼포먼스 저하 없이 Svelte CRUD UX에 맞춰 좀 더 현실감 있게 구현하려면 어떤 방법이 있을지 항상 고민 중임

    • 이와 관련해 pokemon-cards-css 레포지토리를 꼭 참고해보길 추천함

  • 셰이더 기술이 정말 흥미로움. 웹사이트 Shadertoy에서 다양한 셰이더를 직접 실습해볼 수 있음

  • Tim Oliver가 Threads의 "golden ticket"에 적용된 홀로그래픽 호일 효과 제작 경험에 대해 멋진 프레젠테이션을 한 적 있음. 해당 영상은 여기에서 볼 수 있음

  • 이 효과가 정말 멋지고 시각적으로도 뛰어남을 느끼지만, 사실 반짝이 호일 효과 자체는 그렇게 선호하지 않음. 스티커나 카드에도 적용되어 있지만 이런 스타일보다는 부드러운 금속성 광택이 포인트로만 들어갈 때가 더 보기 좋다고 생각함. 나만 이런 의견인 것처럼 보이지만, 이 효과의 대중적 인기를 볼 때 여전히 소수 취향인 것 같음

  • 정말 멋진 효과임. Alan Zucconi가 CD 렌더링을 위해 만든 회절격자 셰이더가 떠오름. 관련 내용은 여기에서 확인 가능함

  • 기대 이상으로 멋진 결과물임. 설정값을 조정해가며 방 전체의 반사 이미지를 살펴보는 과정이 재미있었음

    • 나도 반사 맵이 궁금해서 찾아봤음. 알고 보니 해당 방은 폴란드에 위치한 Jedlinka Palace임. 실제 텍스처 이미지는 여기에서 볼 수 있음

  • iOS에서는 휴대폰을 기울일 때 반응하는 스티커 “shiny” 효과가 있음. 이걸 처음 봤을 때 정말 감탄했음

  • 오프토픽이긴 하지만, 이 글을 보며 AI가 앞으로 이런 효과 구현법도 학습할 수 있겠구나 하는 생각이 들었음. 한편으로는 북마크를 굳이 모아놓지 않아도 될 만큼 AI가 궁극의 북마크 역할을 해준다는 점에서 해방감을 느낌. 하지만 이런 멋진 포스트가 AI에게 제대로 인정받지 못할 것 같아 아쉽고 씁쓸한 측면도 있음

    • 앞으로도 북마크를 유지하는 것이 좋을 것 같음. 지금 구글 검색만으로도 많은 정보가 잊혀지고 있는데, AI 시대엔 더 많은 정보가 쉽게 사라질 수 있기 때문임
    • 결국 AI가 이런 포스트도 작성하게 될 것이고, AI가 또 AI로부터 배워나가는 상황이 될 거임. 그러다 보면 예술적 감각을 가진 프로그래머나 전문가가 사라지고, 그냥 컴퓨터가 자동 생성한 비즈니스 솔루션을 조합하는 평범한 직업만 남게 될지도 모른다는 생각이 듬

  • 바로 이런 예상치 못한 흥미로운 글들을 볼 수 있어서 정말 기쁨

답변달기