SDF Face Shadow

간단 요약: SDF Face Shader 자료 링크: https://blog.csdn.net/qjh5606/article/details/119958786 태그: Cartoon, Hair, NPR, SDF, Shader, Shadow, Unity

번역 본문

· 그림 23 그림 24 27

· 그림 25 그림 26 109·

저작권 CC 4.0 BY-SA

저작권 표시: 이 글은 블로거의 원본 글이며 [CC 4.0 BY-SA] (http://creativecommons.org/licenses/by-sa/4.0/) 저작권 계약을 따릅니다. 재인쇄 시 원본 소스 링크와 본 내용을 첨부해 주세요.

기사 태그: #자동운전

그림 27 이 문서에서는 툰 렌더링에서 섀도우 맵을 생성하기 위해 SDF(Directed Distance Fields)를 사용하는 방법을 자세히 설명합니다. SDF를 통해 객체 경계를 쉽게 계산하여 그림자 효과의 원활한 전환을 달성할 수 있습니다. 이 기사에서는 SDF의 기본 개념, 생성 알고리즘 및 보간을 위해 여러 중간 프로세스 맵을 결합하여 최종 섀도우 맵을 생성하는 방법을 다룹니다. 또한 실제 코드 구현 및 효과 표시도 공유하여 그래픽 렌더링, 앤티앨리어싱 및 글꼴 렌더링 분야에서 SDF 적용을 강조했습니다.

그래픽 기본 | SDF를 기반으로 한 만화 그림자 지도

기사 디렉토리

1. 서문

이전에 진행했던 카툰 렌더링을 되돌아보면 캐릭터 얼굴의 그림자는 섀도우맵을 이용하여 구현한 것이었습니다.

캐릭터 얼굴의 그림자를 보다 잘 제어하기 위해 얼굴 방향과 빛의 방향 사이의 각도를 계산하고 단색 FaceMap을 통해 판단합니다.

FaceMap의 각 픽셀은 다음을 나타냅니다. 픽셀이 그림자로 판단될 때 도달해야 하는 각도.

예를 들면:

방향광이 캐릭터를 향할 때 끼인각은 0°이고 해당 값은 0입니다. 이때 전체 FaceMap 면의 값은 0보다 큽니다. 그림자 조건이 충족되지 않습니다. 그러므로 모두 밝은 부분으로 판단된다.
방향광이 캐릭터의 얼굴 오른쪽을 향해 계속 회전하여 36°(표준화 값은 0.2, 36°를 180°로 나눈 값)에 도달하면 그림에서 0.2에 해당하는 선의 왼쪽 픽셀 값은 모두 0.2 미만이며 그림자 영역으로 판단됩니다. 오른쪽이 밝은 부분입니다.

그림 28: 여기에 이미지 설명 삽입

이 지도를 생성하는 방법은 다음과 같습니다.

아티스트가 완전한 그림을 수동으로 그립니다.
아티스트는 여러 개의 중간 공정 그림을 그리고 SDF를 통해 최종 결과물을 생성합니다.

일반적으로 완전한 질감을 그리는 것은 시간과 노력이 많이 들고, 효과를 수정하는 것도 불편합니다.

따라서 프로그래밍 방식으로 생성하려면 방법 2를 사용하는 것이 당연히 더 좋습니다.

이 문서에서는 방향성 거리 필드(SDF, Signed Distance Field)를 기반으로 그림자 맵 생성을 소개합니다.

그 중 혼합 카툰 라이트맵을 빠르게 생성하는 방법에서는 실행 가능한 EXE와 효과를 제공합니다.

그림 29: 여기에 이미지 설명 삽입 그림 30: 여기에 이미지 설명 삽입

저자의 구현은 Zhihu 전문가의 많은 기사와 코드를 참조합니다. 다음은 저자의 메모 중 일부입니다.

2. SDF(부호 거리 필드)

Signed Distance Field(SDF, Signed Distance Field)는 2D와 3D로 나눌 수 있습니다.

이 기사에서는 2D SDF가 사용되며 정의는 다음과 같습니다.

각 픽셀(복셀)은 자신과 가장 가까운 개체 사이의 거리를 기록합니다. **

물체 내에 있을 경우 거리는 음수이며, 거리가 멀수록 값은 작아집니다.
정확히 객체 경계에 있는 경우 값은 0입니다.
물체 외부에 있는 경우 거리는 양의 값을 가지며, 거리가 멀수록 값이 커집니다.

아래 그림은 예시입니다.

흰색 픽셀은 객체를 나타내고 검은색 픽셀은 비어 있습니다.

그림 31: 여기에 이미지 설명 삽입

그러면 해당 SDF 다이어그램은 다음과 같습니다.

사진 표시의 경우 방향 거리 값은 [0-1] 범위에 매핑됩니다, 0.5는 물체 내부와 외부 사이의 구분선을 나타냅니다.
원의 중심점은 물체의 가장 안쪽 부분이므로 가장 어둡고, 이미지의 네 모퉁이는 원에서 가장 멀리 있기 때문에 가장 흰색임을 확실히 알 수 있습니다.

그림 32: 여기에 이미지 설명 삽입

방향성 거리 필드에는 다음과 같은 다양한 응용 시나리오가 있습니다.

경계 융합;
앤티앨리어싱;
글꼴 렌더링;
그래픽 그리기; *…

국경 융합

아래 그림에서 A는 왼쪽에서 1/3이 검은색이라는 뜻이고, B는 왼쪽에서 2/3이 검은색이라는 뜻입니다. A와 B를 한 번 혼합하면 결과는 1/3 검정색(왼쪽), 1/3 회색(가운데), 1/3 흰색(오른쪽)입니다.

A에서 별도의 SDF를 수행하면 A의 모든 점에 대한 거리 함수 SDF(A)를 얻을 수 있습니다.

A의 흑백 구분선은 0입니다. 점이 흑백 구분선에 가까울수록 거리 함수의 값은 작아지고 0에 가까워집니다. 오른쪽(흰색)이 양수, 왼쪽(검은색)이 음수입니다.

같은 방법으로 B에 대해서도 별도의 SDF를 수행하여 SDF(B)를 얻습니다.

SDF(A)와 SDF(B)를 한 번 혼합하여 혼합(SDF(A), SDF(B))을 얻습니다.

그런 다음 블렌딩된 이미지의 중앙은 0이고 오른쪽(흰색)으로 갈수록 양수, 왼쪽(검은색)으로 갈수록 음수입니다.

이 블렌드(SDF(A), SDF(B))를 SDF를 통해 원래의 형태로 복원함으로써 0이 아닌 곳은 경계이고, 0이 아닌 곳은 그렇지 않다는 것을 알 수 있습니다. 즉, 두 개의 해당 SDF를 혼합하는 것은 실제로 경계를 혼합하는 것입니다.

그림 33: 여기에 이미지 설명 삽입

앤티앨리어싱 또는 SDF 기반 글꼴 렌더링

기존 렌더링 방법과 비교하여 SDF를 기반으로 렌더링된 텍스트는 무한히 확대되고 명확하게 유지되며 획, 글로우, 앤티앨리어싱 등의 효과를 거의 오버헤드 없이 얻을 수 있습니다.

각 픽셀의 저장된 색상 값을 텍스트 윤곽선에서 가장 짧은 거리로 바꿉니다.

픽셀이 텍스트 내부에 있으면 양수 거리가 사용되고, 텍스트 외부에 있으면 음수 거리가 사용되며 텍스트 윤곽선 거리는 0입니다.

따라서 픽셀이 판단되는 한 양수이면 색상이 출력되고 그렇지 않으면 색상이 폐기됩니다.

크기 18 글꼴:

그림 34: 여기에 이미지 설명 삽입

크기 18 글꼴의 비트맵은 15배 확대됩니다.

그림 35: 여기에 이미지 설명 삽입

SDF 기반 글꼴 렌더링은 15배 확대됩니다.

그림 36: 여기에 이미지 설명 삽입

그래픽 드로잉

유명한 ShaderToy 웹사이트에는 Raymarching과 결합된 SDF를 통해 달성된 드로잉 그래픽의 다양한 예가 있습니다.

iq大神블로그에서는 다양한 마법 연산을 보여줍니다.

그중 셀카소녀는 셀카를 찍는 소녀를 순전히 수학적 방법으로 그렸습니다.

그림 37: 여기에 이미지 설명 삽입

3. 그림자 이미지 생성

작가가 그린 중간과정의 여러 그림은 다음과 같다.

그림 38 최소. 0.47위안/일에 기사 잠금 해제 그림 39

그림 40

정말로 이 기회를 포기하시겠습니까?

복지 카운트다운

: :

그림 41 즉시 할인 ¥

일반 VIP 연간카드 이용 가능

즉시 사용

그림 42 상라이 93[팔로우](javascript:;)팔로우

27좋아요
좋아요

51](https://csdnimg.cn/release/blogv2/dist/pc/img/collectionCloseWhite.png)

4댓글
[ 공유](javascript:;)링크 복사 QQ에 공유 Sina Weibo에 공유 스캔
신고 제보

컬럼 디렉터리

[시뮬레이션 후 "SDF 반표준 연재장"에 있는 SDF 파일의 출처] (https://blog.csdn.net/qq_16423857/article/details/139705322)

나카이 블로그

06-15 그림59 3159

STA가 _SDF_를 생성하는 과정에서 2-DFF 동기화 로직에서 첫 번째 레벨 DFF의 셋업 및 홀드 체크 등 비동기 인터페이스 부분의 타이밍 체크가 비활성화(체크 시간을 완화하여)될 수 있다. 연결 지연 정보에 대해서는 말할 것도 없습니다. 장치의 지연은 일반적으로 장치 타이밍 라이브러리(타이밍 라이브러리)에 정의된 타이밍 아크를 기반으로 회로도에서 간접적으로 계산됩니다. 이러한 타이밍 호는 시뮬레이션 모델(블록 지정)에 정의된 IO 경로와 일대일로 일치해야 하며 백 라벨링 프로세스 중에 주석이 성공할 수 있습니다. 따라서 회로의 실제 타이밍 정보로 마킹하는 과정은 실제로는 기본 타이밍 정보를 덮어쓰는 과정이므로 백라벨링(back labeling)이라고도 한다.

PBR 렌더링, 아쿠아의 컴퓨터 그래픽 실습(단계적 요약)

Kaliaailia 블로그05-01 그림60 600

4.12 시작부터 5월 1일 말까지 검토 차원의 단계별 요약을 진행하고 앞을 내다보고 뒤돌아보는데 약 3주 정도 소요될 예정입니다. (물론 일시적으로 기억나는 것만)

댓글 4개 로그인되지 않았습니다. 댓글을 게시하거나 보기 전에 먼저 로그인하세요.

컴퓨터 그래픽_---SDF 소개

2-15

1._SDF_는 매우 빠릅니다. 2._SDF_에는 많은 저장 공간이 필요합니다. _SDF_의 전제는 점(음영점)을 계산하고 그 점에서 물체의 표면까지 가장 가까운 거리를 계산해야 한다는 것입니다. (음영점)이 개체 내부에 있으면 이 거리는 음수입니다. 움직이는 경계 : 다음과 같습니다 그림 1 그림 2 그림 세 번째는 윗부분을 흑백으로 그림 1.그림 하나는 움직이는 물체, 검은색은 물리 경계선은 구분선 2.그림 두 번째 물체의 경계는 그림...

SDF_(투영점)_cgal sdf 기준으로 추출된 뼈대의 산점

2-5

SDF 정식 영문명은 Shape Diameter Function, 즉 형상직경함수이다. _SDF_는 그리드 표면에 정의된 스칼라 함수입니다. 그리드 표면에서 인접한 지점의 체적 직경을 측정하는 방법을 나타냅니다. 볼륨 기반 형상 함수를 기반으로 동일한 객체의 자세 변화에 대해 대부분 독립성을 유지하고 다른 객체의 유사한 부분에 대해 유사한 값을 유지할 수 있습니다. 아래는 메시 표면의 SDF 값을 보여주는 그림입니다. 표면 메시에 점을 지정하면...

SDF(Signed-distance-field: direct distance field)(11): Shadow(WebGL 구현)

vily_lei의 칼럼

10-08 그림61 1548

Demo:http://www.artvily.com/sdf?sample=codeDemo&clip=shadow01 감사합니다:http://www.iquilezles.org/www/articles/rmshadows/rmshadows.htm 일반적인 3D 렌더링 엔진에서는 일반적으로 _shadow_에 섀도우맵을 사용하므로 하드웨어 리소스를 최대한 활용할 수 있습니다. 그리고...

[Unity Skybox]만화 렌더링에서 구름의 분산 효과를 얻는 방법

qq_41835314의 블로그

12-30 그림62 4406

스카이박스에서 구름의 소산 효과를 얻으려고 노력하는 참고 및 학습 과정을 기록합니다.

...SDF 간단한 그림 모양" 구현 [GLSL]_GLSL을 사용하여 sdf 붙여넣기 _그림_을 생성하는 방법...

2-12

이 문서에서는 GLSL을 사용하여 RoundedBox, Triangle 및 Circle을 포함한 Signed Distance Field(SDF) 기반 graph 모양을 구현하는 방법을 설명합니다. 색상 대비를 강화하고 줄무늬 효과를 생성하는 알고리즘을 수식을 통해 설명하고 직각 직사각형에 대한 코드 수정에 대한 제안을 제공합니다. 각 모양에 대한 ShaderToy 코드와 GLSL 주석도 표시됩니다. 1. RoundedBox: 효과 그림: ...

Glyphy: OpenGL ES2 최신 릴리스 기반의 고품질 SDF 텍스트 렌더러

gitblog_00708의 블로그

12-31 그림63 813

Glyphy는 OpenGL ES2 셰이딩 언어를 기반으로 하는 부호 있는 거리 필드(SDF) 텍스트 렌더러입니다. 대부분의 다른 SDF 기반 OpenGL 렌더러와 달리 Glyphy는 _SDF_를 텍스처로 샘플링하지 않고 대신 _SDF_의 벡터 표현을 직접 사용하여 GPU에 제출합니다. 이 방법은 텍스처 샘플링으로 인한 윤곽 왜곡과 품질 저하 문제를 방지하여 매우 높은 품질의 텍스트 렌더링 효과를 얻습니다. ## 프로젝트 기술 분석 G [Unity Cloud Dissipation] 이론 기본: _SDF_의 8SSEDT 알고리즘 구현

qq_41835314 님의 블로그

01-06 그림64 6194

먼저 _SDF_가 무엇인지, 무엇을 기록하는지, 무엇을 할 수 있는지 소개합니다. 둘째, 일반적으로 사용되는 알고리즘인 8SSEDT 알고리즘의 핵심 아이디어와 프로세스를 소개합니다. 마지막으로 VS에서 구현합니다. 이번 연구를 통해 _SDF_에 대해 더 깊이 이해하게 되었습니다.

후모방에서의 SDF 도입 및 적용

qq_34326957님의 블로그

07-26 그림65 6971

실제 디지털 회로 설계에서는 SDF 파일의 생성 및 내용 의미, SDF 백마킹 방법 및 원리를 숙지하여 설계 품질 및 타이밍 정확성을 보장하는 것이 매우 중요합니다.

[SDF(부호 거리 함수)를 사용한 그림자 계산의 수학적 원리에 대해 이야기합니다.] (https://blog.csdn.net/qq_33060405/article/details/145345960)

이 블로그는 게임 개발 기술, 실무 창업 경험, 인기 대학 강좌에 대한 유용한 정보를 중점적으로 다루고 있습니다. 여기에는 기술적인 깊이와 사고의 폭이 모두 있습니다. 개발자든, 기업가든, 대학생이든 여기에서 자신에게 맞는 성장 경로를 찾을 수 있습니다!

01-24 그림66 707

그림자 계산에 _SDF_를 사용하면 광원의 폐색을 효율적으로 판단하여 자연스러운 그림자 효과를 생성할 수 있습니다. 광선 추적 기술을 사용하면 부드러운 _그림자_를 얻을 수 있어 장면의 깊이와 현실감을 향상시킬 수 있습니다. 광원의 종류와 거리에 따라 그림자의 강도와 흐림 정도를 조정할 수 있어 렌더링 시 유연성과 표현력이 향상됩니다.

Unity SDF 붙여넣기 image 애플리케이션을 통해 2차원 캐릭터 얼굴의 _그림자_를 올바르게 계산하고 렌더링할 수 있는 셰이더 작성 방법을 단계별로 가르쳐줍니다(코드, 이미지 설명 및 원리 포함)

m0_49904624의 블로그

05-24 그림67 2743

[3-렌더-2 셰이더를 작성할 때 많은 초보자들이 원하는 얼굴 _그림자_를 정확하게 계산하지 못하는 경우가 많습니다. 이 튜토리얼에서는 캐릭터의 얼굴_그림자_를 정확하게 계산할 수 있는 셰이더를 작성하는 방법을 알려드립니다.] (https://blog.csdn.net/m0_49904624/article/details/139162756)

WebGL과 HTML5 기반의 인터랙티브 3차원 분자 구조 시각화 브라우저 구축

이 시스템은 PDB(Protein Data Bank), MOL, _SDF_와 같은 표준 화학 파일 형식의 구문 분석 및 로딩을 지원할 뿐만 아니라 원자 볼-스틱 모델(Ball-and-Stick), 공간 채우기 모델(Space-Filling), 와이어프레임 모델(Wireframe) 및 만화 스타일 2차 구조(예: α-helix...)를 구현합니다.

_SDF_인기추천의 개념을 이해하기 위한 사진 한 장

피질롱 3D 프로그래밍

10-29 그림 68 30,000+

본 글은 지극히 개인적인 이해를 반영한 것입니다. 오류가 있으면 정정해 주세요. SDF: 부호 있는 거리 필드(방향 거리 필드로 번역됨), "방향", "거리" 및 "필드" 세 단어는 _sdf_가 무엇인지 매우 정확하게 설명합니다. GPU Gems 3에서 _sdf_를 설명하는 방법은 다음과 같습니다. "_SDF_는 (다각형 모델) 물체 표면에 가장 가까운 거리로 구성된 샘플링 그리드입니다. 관례적으로 물체의 내부를 나타내려면 음수 값을 사용하고 물체의 외부를 나타내려면 양수 값을 사용합니다. SDF 개념은 graph 그래픽 및 관련 분야에 적용 가능합니다

sdf _atlas:SDF 글꼴 image 세트 생성 도구

05-09_SDF_Font_Graph_Set 생성 도구 Atlas 생성 도구와 함께 사용됩니다. 알고리즘을 설명하세요. 알고리즘은 런타임에 글꼴 _map_sets를 생성할 만큼 충분히 성능이 높기 때문에 주로 교육 목적으로 사용됩니다. 종속성 폐기물 소각로 사용 옵션: -h 이 도움말 -o 'filename' 출력 파일 이름(확장자 없음) -tw 'size' 아틀라스 이미지 너비(픽셀 단위), 기본값 1024 -th 'size' 아틀라스 이미지 높이(픽셀 단위)(선택 사항) -ur 'ranges' 유니코드 범위 'start1:end1,start:end2,single_codepoint' 공백 없음,

Blander는 타사 플러그인(그림 조각, 파란색 그림, 원리, 의사 코드 포함)을 사용하지 않고 SDF 붙여넣기 _그림_을 사용하여 2차원 캐릭터 얼굴의 올바른 _그림자_를 렌더링합니다.

m0_49904624의 블로그

11-05 그림69 1390

동시에 태양이 캐릭터의 오른쪽에 있을 때(캐릭터의 오일러 각도와 태양의 오일러 각도가 [π + 2kπ, 2π + 2kπ](k는 정수) 간격에 있음), 셰이더에서 읽은 각도는 여전히 [0 + 2kπ, π + 2kπ](k는 정수) 간격에 있기를 바라며(맵이 뒤집히기 때문에) 햇빛이 켜져 있을 때 문자의 오른쪽에 1에서 V 값을 뺀 값을 둡니다. SDF _map_의 원리는 캐릭터의 얼굴을 전체적으로 다루면서 동시에 V값을 설정하는 것입니다. 픽셀의 R 값(SDF _map_이 shadow 정보를 저장하는 채널에 따라 G 값, B 값 또는 알파 값일 수도 있음)이 V 값보다 작은 경우 픽셀은 어두운 면입니다. 값의 정수부분이 홀수인 경우, 2로 나눈 값의 소수부분은 소수부분의 값에 관계없이 0.5보다 크다.

얼굴 SDF shadow 앨리어싱 문제 탐색

UE4 엔진 기술 공유

03-02 그림70 1026

[최근 작업에는 얼굴 SDF _Shadow_가 포함됩니다. 인터넷의 일반적인 관행은 보간을 수행하지 않고 직접 단계적으로 하드 크롭을 수행하는 것입니다. Interpolation을 왜 안쓰는지 잘 모르겠어서 SmoothStep으로 간단하게 수정해서 효과를 봤습니다] (https://blog.csdn.net/grayrail/article/details/136414460)

[GAMES-202 실시간 렌더링] 2. Soft Shadow 02 (VSM, Moment Shadow Mapping, SDF Distance Field Soft Shadow)

기록할 만한 것을 기록하다

05-06 그림71 3055

그림자 맵을 생성하면서 깊이의 제곱을 저장하는 정사각형 깊이_맵_을 생성합니다. 두 채널을 별도로 저장할 수 있습니다. 추가 텍스처가 필요하지 않습니다. 매우 비용 효율적입니다. _map_에서 특정 영역의 평균값을 찾습니다. MipMap, 반복할 필요가 없습니다. O(1)으로 제곱된 깊이를 찾습니다. Figure 위의 특정 영역의 평균값은 여전히 MipMap입니다. O(1)은 두 가지 수단을 알고 있습니다. Var(X)=E(X2)−E2(X)Var(X)=E(X2)−E2(X) 공식에 따라 분산이 구해집니다. 체비쇼프 부등식에 따르면 P(x>t)≤σσ2+(t−μ)2P(x>

sdf 붙여넣기 그림 삼면 붙여넣기 방법

웹gpu

05-24 그림72 437

약간의 융기된 지면, UV가 지면에 따라 매핑되면 측면에 스트레칭이 있어야 합니다. 좋습니다. 제가 말하는 것은 프로그래밍된 지형입니다. 오늘은 마법의 수리방법을 보았습니다. 고치는 방법은 앞면, 윗면, 옆면에 각각 투영한 후 보간합니다. 보간에는 무엇을 사용해야 합니까? vec3 n = 절대(정상); n = n/(n.x+n.y+n.z); vec3 색상 = 텍스처(map, coord.yz * 스케일)*n.x+texture(map, coord.xz * 스케일)*n.y+texture(map, coord.xy * 스케일)*n.z; 이 길을 따라

컴퓨터 그래픽_----SDF 소개

VIPCCJ 블로그

09-11 그림73 10,000+SDF 소개 1. _SDF_는 매우 빠릅니다. 2. _SDF_에는 많은 저장 공간이 필요합니다. _SDF_의 전제는 점(음영점)을 계산하고 그 점에서 물체의 표면까지 가장 가까운 거리를 계산해야 한다는 것입니다. (음영점)이 개체 내부에 있으면 이 거리는 음수입니다. 움직이는 경계: 다음 그림 하나 그림 둘 그림 3은 윗부분의 흑백 그림 1.그림 하나는 움직이는 물체, 검은색은 물리적이고 경계선은 경계선 2.그림 두 번째 물체의 경계는 그림 3과 같다.그림 3과 그림 2는 SDF 표현을 이용하여 선형 보간을 하고, 흑백 _그림_을 반환하여 표현할 수 있다 shadow 이동 중입니다. 뒤에 있는 이론은 "최적의 전송"입니다. 적용 가능한 시나리오: 광선 추적, 조명에 사용됨