6-2 Post Process
그래픽 파이프 라인#
- geometry(reflow)
- fragment(repaint)
- post process
- geometry 와 fragment 가끝났더라도 바로 칠하지 않고 한번 더 가공할 수 있는 찬스를 준다.
fragment 가 완성되어 있는 픽셀 데이터라고 생각을 해보자 여기서 얼마든지 후 변형을 줄 수 있다.
- 리플이라는 수학적 공식으로 픽셀을 흐트려 뜨린다.
- 블러라는 공식을 통해서 완성되어 있는 픽셀값을 변형시킬 수 있다.
- 픽셀의 색깔, 밝기, 블러, 필터, 그 외에 수많은 변형을 가할 수 있다. 회오리 치게 만들 수도 있고, 물결치게 만들수도 있고 포스터 라이즈...
이런것들을 하기 위해서는 버퍼라는 개념이 필요하다
버퍼#
버퍼
픽셀 계산 후, 바로 그래픽 비트맵에 쓰는 것이 아니라 메모리에 넣고서, 메모리에서 조작한 이후에 그림을 그리는 개념이다
버퍼는 2차원 배열이라고 생각하면 된다. 좌표의 색상이 무엇인지를 기억한다.
- 기존의 브라우저는 버퍼의 개념이 없었기 때문에 fragment 까지만 처리가 되었다.
- IE5.5 이후에 모든 브라우저는 버퍼를 거치고 그림을 그리게 되었다.
예전에는 그림을 CPU 가 그렸고 그래프 파이프 라인을 타고 바로 그려졌다. 지금은 그림을 GPU 가 그린다 (대부분)
- GPU 는 그림을 그릴 때, CPU 가 만들어낸 이미지를 GPU 에 올려줘야지만 그릴 수 있다.
- GPU 에게 그림을 주기 위해서라도 버퍼 구조를 만들게 된다.
- Post Process 단계를 CPU 에게 혹은 GPU 에게 넘겨줄 수 있다.
- GPU 가 훨씬더 빠르다.
모던 브라우저는 CPU 를 이용해서 Geometry fragment 를 한다. 그 이후에 가공한 버퍼를 GPU 에게 넘겨 준 후 PostProcess 를 처리한 후
디스플레이에 화면이 보여진다.
CPU 와 GPU 에게 일을 양분하면서 자원의 최대 효율을 끌어낼려고 한다.
post process 를 쓰는 대표적인 것은 ?
- transform
- keyframe animation..
이때 CPU 가 널널해진다.