셰이더엔 두 종류가 있다. 바로 정점 셰이더와 프래그먼트 셰이더 이다. 영어로 Vertex Shader, Fragment Shader 라고 하는데, 줄여서 vsh, fsh 라고도 부른다. 파일명도 줄인 이름과 동일하다. 프래그먼트의 경우 .frag 확장자도 사용한다고 하는데 이는 버전마다 상이한 것 같다. 일반적인 프로그램은 CPU가 실행한다. 하지만 셰이더는 GPU가 실행하게 되는데, 개발자가 직접 그래픽스 파이프라인 과정에 개입하기 위해 glsl언어로 만들어진 프로그램을 셰이더라고 한다. glsl 언어는 gpu가 이해하고 실행할 수 있게끔 만든 상위 레벨 셰이딩 언어라고 보면 된다. 문법의 기초는 C언어로 한다. 정점 셰이더 (Vertex Shader) 셰이더 종류 중 하나인 정점 셰이더는 캔버스가 ..
WebGL 의 작동 방식 GPU에서 그래픽 처리를 할 때 기본적으로 2가지 파트로 구동이 됩니다. 정점의 위치 값 등을 클립 공간으로 변환 처리 1의 부분을 기반으로 픽셀을 채움 이 과정을 호출하는 webgl 함수가 gl.drawArray(type, offset, count) 입니다. 우리가 설정한 버텍스 셰이더(이하 vsh) 에서 사전정의된 gl_Position 이라는 변수에 값을 넣는다면, 해당 값을 기준으로 실제 캔버스의 클립공간의 위치에 정의시킵니다. gl.drayArray 에서 우리는 type에 따라 GPU는 채울 픽셀의 경계선을 정합니다. 예를들어, gl.TRIANGLES 의 경우 삼각형임을 나타내므로, 정점 3개를 생성할 때마다 이 3 개의 정점으로 삼각형이 되는지 확인한 다음, 각 부분을 ..
WebGL 기초 Web GL 의 기초적인 흐름에 대해서 알아보고, 상용화된 함수들에 대해서도 설명한다. 기본 흐름 GL (WebGLRenderingContext) 우리가 자주 사용할 gl 객체란 캔버스로부터 가져올 수 있는 "webgl" 컨텍스트 이다. 각종 webgl 기능을 포함하고 있고, gpu가 실행하는 셰이더 프로그램의 변수, 버퍼 등에 참조할 여러 메서드들을 가지고 있다. glsl 셰이더의 컴파일, 프로그램 작성도 하는 핵심 객체입니다. gl.createShader(shaderType) : shader // gl.VERTEX_SHADER, gl.FRAGMENT_SHADER gl.shaderSource(shader, source) // 셰이더에 .vsh .fsh 소스 연결 gl.compileSha..
진짜 하도 까먹어서 정리하기로 했다. 클론코딩 여럿 진행하면서 정말 자주 사용되는 몇개만 간추려 놨고, 그 외에는 아래 첨부된 링크를 참조하길 바란다. 공통적 요소 대부분 콜백 함수에 사용되는 인자는 3개로 아래와 같다. element : 처리할 현재 요소 index : 처리할 현재 요소의 인덱스 값 array : filter를 호출한 배열 (O(N^2) 연산 시 사용될 것) 콜백 함수의 인자로는 아래 세개가 들어가며, 순서도 일치하기에 후에 코딩할 때 숙지하면 좋을 것 같다. Array.prototype.map() 각 모든 요소가 주어진 함수의 결과값을 토대로 재구성 됩니다. arr.map(callback(currentValue[, index[, array]])[, thisArg]) currentVal..
