김서버의 프론트엔드 일기

정점쉐이더 -> 래스터라이저 -> 프레그먼트 쉐이더 -> 출력 병합기 -> 출력 gpu 렌더링 파이프라인에서 정점처리를 마무리 되고 나면, 그 다음 래스터라이저 단계를 진행된다. 래스터라이저는 프로그래머가 코딩을 하는 부분이 없고, GPU에서 알아서 처리하기 때문에 프로그래머가 신경을 써줄만한 요소는 잘 없다. 하지만 정점쉐이더(vertex shader) 프로그래밍 이후에 어떻게 처리가 되어, 우리가 코딩해야하는 프레그먼트 쉐이더(fragment shader)까지 도달하는지 알아볼 필요는 있다. 래스터라이저 개요 정점쉐이더가 출력한 정점들은 프리미티브라는 개체로 다시 조립이 된다. 이 프리미티브는 스크린에 그려질 형태로 변환된 후 프래그먼트로 분해되는데 이를 래스터화라고 부른다. 프래그먼트는 컬러 버퍼의..

GPU는 폴리곤메시를 입력 받아, 3차원의 폴리곤 메시를 2차원 형태로 바꾸고, 2차원 폴리곤 내부를 차지하는 픽셀들의 색상을 결정한다. 이 픽셀들은 컬러 버퍼에 기록되고, 주기적으로 스크린으로 복사된다. GPU의 렌더링은 파이프라인으로 구조로 구현되며, 그 순서는 다음과 같다. 정점쉐이더 -> 래스터라이저 -> 프레그먼트 쉐이더 -> 출력 병합기 -> 출력 여기서 쉐이더는 프로그래머가 프로그래밍 할 수 있는 부분이다. GPU를 렌더링 하기 위해서는 정점쉐이더와 프래그먼트 쉐이더 프로그램을 작성하면, 래스터라이저 출력 병합기는 하드웨어 단계에서 정해진 연산을 수행한다. 정점 쉐이더는 정점배열에 저장 된 모든 정점에 대해서 변환을 비롯한 다양한 연산을 수행한다. 래스터라이저는 삼각형들을 조립한 후, 각 삼..

컴퓨터 세상에는 다양한 물체들로 구성되어 있는데, 각 물체는 이동, 회전, 축소확대가 될 수 있으며, 이러한 행위들을 총칭하여 변환이라고 한다. 축소확대 2차원에서는 2 X 2 행렬로 표현된다. Sx 0 0 Sy 여기서 Sx와 Sy는 각각 x축과 y축 방향의 축소확대 인자이다. 이 인자가 1보다 크면 확대를, 작으면 축소를 의미한다. 2차원 벡터 (x,y)는 행렬-벡터 곱셈을 통해 축소 확대 된다. Sx 0 X x = Sx * x 0 Sy y Sy * y 회전 마찬가지로 2차원에서는 2 X 2행렬로 표현되며, 회전을 하기 위한 행렬식은 각도 O를 받았을 때, 다음과 같이 구성된다. Math.cos(O) -(Math.sin(O)) Math.sin(O) Math.cos(O) 위 행렬과 2차원 벡터 (x,y)..

3차원 물체를 표현하는 다양한 기법이 존재하지만, 실시간 그래픽스 영역에서는 폴리곤 메시를 압도적으로 많이 사용한다. 폴리곤 메시가 어떻게 생성되고, 저장이 되고 게임과 같은 런타임 응용프로그램으로 어떻게 전달이 되는지 알아보자 1. 폴리곤 메시 폴리곤 메시는 부드러운 곡면을 근사적으로 표현한 것이다. 따라서 "얼만큼 정점을 많이 사용하여 근사하게 할 것인 가" 라는 고민은 용량과도 연결 되어 있으며, 이는 성능이슈와도 연결이 된다. 정점의 갯수가 많으면 해상도가 높다고 말하며, 적으면 해상도가 낮다고 표현한다. 폴리곤 메시는 정점, 변, 면 으로 구성되며, 각종 3D 툴에서는 이런 면을 조작할 수 있는 기능들이 있다. 폴리곤 메시 표현 폴리곤 메시를 표현하는 가장 단순한 방법은 세 개의 정점을 순서대로..

3D나 컴퓨터 그래픽스 하면 엄청 어려운 수학을 해야한다고 생각이 될 것 인데, 우선 적어도 이번 요점 정리하는 컴퓨터그래픽스 기초 부분에서는 그렇게 어려운 수학이 필요없다. 하나씩 알아보자 행렬과 벡터 숫자들이 행과 열로 구성이 되어있는데, 프로그래밍을 공부한 사람들이라면 이미 배열이라는 이름으로 그 개념을 알게모르게 몸에 익혀있을 것이라고 가정하고 적어본다. a11 a12 a13 a21 a22 a23 a31 a32 a33 이와 같이 행과 열의 크기가 같으면 정사각행렬이라 한다. 행렬의 곱 두 행렬 A 와 B에서 A의 크기가 l x m 이고 B의 크기가 m x n 이면, A와 B의 곱의 크기는 l x n이 된다. a11 a12 b11 b12 b13 a21 a22 x b21 b22 b23 a31 a32 ..

개요 평소에 에디터에 관심이 많아서 이미지 에디터를 fabric.js 로도 만들어 보았었는데, 가장 대중적이고 많이 쓰는 WISIWYG 에디터도 한번 직접 만들고자 해서 만들었었습니다. WYSIWYG란? What You See Is What You Get의 줄임말로 직역하자면 "보는 그대로 얻어 낸다". 라는 뜻을 가지고 있는 에디터입니다. 보통 어떤 게시물을 써야 하는 기능을 넣을 때, 글 뿐만이 아니라 이미지와 동영상도 게시물에 같이 녹여져 있어야 할 때, 사용이 되는 에디터입니다. 유명한 오픈소스로는 Quill.js, frolara editor, summernote가 있겠습니다. 도전과제 사실 WYSIWYG는 document.execCommand 라는 함수를 사용하면 간단하게 구현할 수 있으나, 이..

개요 최근에 웹 컨퍼런스 중 구글의 최홍찬 개발자님의 web의 audio api 연사를 듣고 나서 media 관련으로 간단하게 서비스를 만들어 보자는 생각으로 시작이 되었었습니다. 구현할 기능 카메라에 찍히는 자신을 녹화하면서 실시간 자신의 모습을 확인하기 면접 질문을 랜덤으로 뽑아서 하나씩 보여주고, 문제를 넘길 때마다, 기록해서 vtt 파일로 저장하기 vtt파일과 녹화한 영상을 가지고 자막과 함께 자신의 녹화된 모습을 보면서 피드백할 수 있게 하기 사용한 주요 API - getUserMedia: 사용자의 카메라와 마이크의 입력을 받고, 그 입력값을 stream 방식으로 실시간 입력을 받을 수 있습니다. - MediaRecorder: js native객체로 stream에서 발행하는 데이터를 Blob 파..

개요 Service Worker 는 우리가 사용하는 브라우저의 캐시 중에 하나입니다. 이 Service Worker는 요즘 웹 푸시 메시지 보내기와, PWA의 핵심 기술로 사용이 되고 있습니다. 이 Service Worker와의 첫 인연은 그렇게 좋지 않았습니다. 왜냐하면 회사에서 웹 클라이언트에서 버그를 수정하거나, 기능을 추가하고 마스터에 버전을 올려도 계속해서 과거의 버전의 웹이 사용이 되는 현상이 있었습니다. 그래서 추후의 업데이트 때도, 이런 증상이 나타나면 곤란해지기 때문에 반드시 해결을 해야하는 문제였었고, 그때 당시 저는 제일 먼저 주로 캐시가 원인일 것으로 생각을 하고 원인을 분석을 했으나, 오랜 삽질 끝에 밝혀진 원인은 Service Worker가 설정이 됨으로 나타나는 현상이었습니다...