PPM 과 PNG 를 손으로 쓴다

목표

이미지 파일을 라이브러리 없이 직접 써서, 자기가 계산한 픽셀을 브라우저로 볼 수 있게 만듭니다. 이 실습이 끝나면 이 패스의 나머지 전부에서 결과를 눈으로 확인할 수 있습니다.

왜 중요한가

그래픽스 공부가 중간에 멈추는 가장 흔한 이유는 결과를 볼 방법이 없어서입니다. 그런데 이미지 파일 하나를 쓰는 일은 어렵지 않습니다. PPM 은 머리글 세 줄 뒤에 픽셀을 나열한 것이 전부이고, PNG 도 서명 8바이트에 청크 셋이면 됩니다. 압축과 CRC 는 표준 라이브러리의 zlib 이 해 줍니다.

직접 써 보면 따라오는 것이 있습니다. 픽셀이 행 우선으로 놓인다는 것, 좌표 (x, y) 의 위치가 (y * 폭 + x) * 3 이라는 것, 이미지의 y 는 아래로 자라는데 3D 수학의 y 는 위로 자란다는 것입니다. 이 세 가지는 뒤의 모든 실습에서 계속 나옵니다. 그리고 셰이더가 이상할 때 중간 값을 색으로 칠해 뽑아 보는 것이 가장 빠른 진단법인데, 그러려면 이 함수가 손에 있어야 합니다.

단계

1. 4x4 P6 PPM 을 /root/gfx/out/tiny.ppm 에 씁니다.
2. 256x256 그레이디언트를 /root/gfx/out/gradient.ppm 에 씁니다.
3. zlib 과 struct 만으로 PNG 를 써서 /root/gfx/out/gradient.png 를 만듭니다.
4. /root/gfx/out/index.html 을 만들고 HTTP 서버를 띄워 웹 미리보기로 봅니다.
5. 원을 채워 /root/gfx/out/shapes.png 를 만듭니다.
6. 직선 12개를 그어 /root/gfx/out/lines.png 를 만듭니다.
7. 둘을 합쳐 /root/gfx/out/final.png 와 /root/gfx/out/report.txt 를 만듭니다.

참고

• 파일은 반드시 open(path, "wb") 로 엽니다. 텍스트 모드로 열면 바이트가 변형될 수 있습니다.
• 서버는 nohup python3 -m http.server 8080 -d /root/gfx/out & 로 띄웁니다. 그다음 화면의 웹 미리보기 단추를 누르고 포트 8080 을 고른 뒤 http://localhost:8080/ 을 엽니다.
• 흔한 실수 하나: PNG 의 행마다 붙는 필터 바이트를 빠뜨리면 그림이 대각선으로 밀려 보입니다.
• 흔한 실수 둘: PPM 머리글의 숫자 사이는 공백, 줄 끝은 줄바꿈입니다. 여기가 어긋나면 파일 크기부터 달라집니다.

단계 7개

1. 4x4 짜리 PPM 하나
2. 256x256 그레이디언트
3. zlib 과 struct 만으로 PNG 를 쓴다
4. 브라우저로 내 그림을 본다
5. 원을 채운다
6. 직선을 긋는다
7. 합쳐 그리고, 센 값을 적는다