5강 알파와알파소팅
TRANSCRIPT
![Page 1: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/1.jpg)
Alpha / Alpha sorting
![Page 2: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/2.jpg)
실습 풀 여러 개 만들어 봤었지요?
알파에 관한 여러 문제점들과 궁금증들
여러분이 곧 만나게 될 그런 것들
![Page 3: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/3.jpg)
Alpha / Z buffer
![Page 4: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/4.jpg)
Alpha에 대해 알고 있는 것을 말해 보자
Z Buffer 에 대해 알고 있는 것을 말해 보자
블렌딩 옵션 얘기는 안할꼬야
정신없거등
![Page 5: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/5.jpg)
Z 값이란 무엇인가 모니터는 평면이긔
그럼 뭔가 깊이가 있어야 할 것 아니겠삼
한 블록을 한 픽셀이라고 생각해 보자
사실은 가로가 X.. 미안해…
![Page 6: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/6.jpg)
Z 값이란 이런거
![Page 7: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/7.jpg)
Z 값이란 이런거
![Page 8: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/8.jpg)
Z 값이란 이런거
사실은 이렇게 생긴거겠지
이걸 어디다 ‘써 놔야’ 겠지
깊이값이 많이 필요할거야
대충 float 값 정도 범위면
10^-38(10의 -38승)~10^38(10의 38승) 가능하려나?
0부터 ~ 1까지도 가능하겠네?
이거보다 정밀하면 충돌나겠네?
![Page 9: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/9.jpg)
Z Buffer 그래서 float 값으로
써 (그려) 놓아 봤습니다.
http://www.felixgers.de/teaching/jogl/depthbufferALgo.html
![Page 10: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/10.jpg)
Z Buffer
![Page 11: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/11.jpg)
Z 버퍼는 깊이값을 나타내는 버퍼 이미지이다.
물체는 그려질때 Z 버퍼에 자신의 픽셀 위치값을
쓴다
자신보다 앞 부분의 Z버퍼에 값이 씌여져 있으면
그 픽셀은 그리지 않는다.
![Page 12: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/12.jpg)
![Page 13: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/13.jpg)
이런 알파로 된 이미지가 있으면
이리 된단말 아닝교
![Page 14: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/14.jpg)
불투명 먼저, 반투명은 나중에 그린다
불투명은 순서 상관없이 맘대로 그린다.
반투명은 뒤에서부터 그린다. (이것이 “알파 소팅”) 실제로 이렇게 하고 있다.
이렇게 하면 해결된다.
![Page 15: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/15.jpg)
불투명 먼저, 반투명은 나중에 그린다
불투명은 순서 상관없이 맘대로 그린다.
반투명은 뒤에서부터 그린다. (이것이 “알파 소팅”) 실제로 이렇게 하고 있다.
이렇게 하면 해결된다.
“전부” 라고 한 적은 없다.
![Page 16: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/16.jpg)
이렇게 되고 싶은데
![Page 17: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/17.jpg)
왜 이런 일이 일어날까?
… 물론 소팅이 안된 상황때문이기도
하지만
![Page 18: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/18.jpg)
이 오브젝트들이
반투명이라고
생각해 보세요
일단 문제는 없음
어느 것이 앞에 있는건지
어떻게 판단하죠?
![Page 19: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/19.jpg)
어느 것이 앞에 있지요?
아래 판은 물이라고 칩시다
![Page 20: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/20.jpg)
게다가 이런 경우라면 어쩌라고
막 반투명 관 안에 반투명 심장있고 막 이래 막 알파있는 머리카락이 겹쳐있고 막 이래
![Page 21: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/21.jpg)
그래서 이렇게 된다.
![Page 22: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/22.jpg)
물체를 잘게 쪼갭니다
알파 부분을 최소화해서 그립니다
알파 테스팅을 사용합니다
Z Write를 사용하지 않습니다.
렌더링 레이어를 만듭니다
여러 Pass를 사용하여 그립니다
…등등 지금도 수많은 방법이 개발중.
![Page 23: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/23.jpg)
불투명을 먼저 , 반투명을 나중에 그린다.
반투명은 따로 모아서 뒤에 있는 것부터 그린다.
하지만 어떤 것이 뒤에 있는지 완벽히 알 수 없다.
그래서 각종 꼼수들이 사용되어야 한다. 알파 테스팅 (Cutout)
Z read / Z write
부끄럽구요
![Page 24: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/24.jpg)
말그대로 알파를 ‘테스트’ Cutout 이라고 불리기도 함. 1비트 알파로 만들어 버림
픽셀 연산이 필요 없으므로 극뽁.
Z 연산 이전에 알파를 검사하여 Z 값에 픽셀별로
영향을 주는 것으로… 보이지만 관련 문헌을 찾기 힘듬.
![Page 25: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/25.jpg)
프리우스. 아이온
엄청 많이 쓴다.사실상 해결책
![Page 26: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/26.jpg)
자연물에서도 꼭 사용
![Page 27: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/27.jpg)
토막상식 : 테스팅과 블렌딩을 같이 쓰는
고급 꼼수도 있다.
: 이렇듯 세상에 100% 는 없다.
![Page 28: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/28.jpg)
알파 테스팅의 장점
알파 테스팅의 단점
![Page 29: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/29.jpg)
Z test와 Write가 뭘까?
어디다 쓸까? 반투명인 것들이 제대로 나오게 하기 위해. 이펙트 쪽에서 특히.. 그래픽 디자이너가 직접적으로 쓸 일은 적다. 개념을 알고 있으면 문제 발생시 대처능력이 향상된다. Shader를 작성하게 된다면 쓰게 된다.
![Page 30: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/30.jpg)
Z Read(Test) = On Z Write = On
Z Read(Test) = Off Z Write = Off
읽기도 하고 쓰기도 한다.
읽지도 않고 쓰지도 않는다.
![Page 31: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/31.jpg)
Z Read(Test) = On Z Write = On
Z Read(Test) = Off Z Write = Off
Atlantica
굳이 쓴다면 스카이박스에
읽기도 하고 쓰기도 한다.
읽지도 않고 쓰지도 않는다.
![Page 32: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/32.jpg)
Z Read(Test) = Off Z Write = On
읽지는 않고 쓰기만 한다.
…어디다 쓰지?
(플렌은 Z read/Write가 모두 On)
![Page 33: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/33.jpg)
Z Read(Test) = Off Z Write = On
내 차례엔 무조건 그려진다. = 굳이 쓴다면 UI에
읽지는 않고 쓰기만 한다.
![Page 34: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/34.jpg)
Z Read(Test) = On Z Write = Off
읽기는 읽는데 쓰지는 않는다.
주전자가 반투명이라고 생각.불투명인 플렌과 만났을 때는?
반투명인 놈들끼리 만났을 때는?
![Page 35: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/35.jpg)
Z Read(Test) = On Z Write = Off
읽기는 읽는데 쓰지는 않는다.
![Page 36: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/36.jpg)
Z Read(Test) = On Z Write = Off
읽기는 읽는데 쓰지는 않는다.
이래도 완전 해결이 안 된다니…
![Page 37: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/37.jpg)
Z Read(Test) = On Z Write = Off
이 이외에도 문제가 있을…수 있음.
어쨌건 해결책.
![Page 38: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/38.jpg)
예를 들어 이런 사태도…있을 수 있다는 말이지
![Page 39: 5강 알파와알파소팅](https://reader031.vdocuments.pub/reader031/viewer/2022013118/559ee3f91a28ab420a8b46c5/html5/thumbnails/39.jpg)
알파 테스팅을 이용한다.
적절하게 Z write를 하지 않도록 한다. 이펙트에서는 기본이다.
100% 는 아니라는걸 잊지 말자.
다양한 해결책이 더 있다…