WebGL-셰이더
셰이더는 GPU에서 실행되는 프로그램입니다. 셰이더는 OpenGL ES 셰이더 언어 (ES SL로 알려짐)로 작성됩니다. ES SL에는 자체 변수, 데이터 유형, 한정자, 내장 입력 및 출력이 있습니다.
데이터 유형
다음 표에는 OpenGL ES SL에서 제공하는 기본 데이터 유형이 나열되어 있습니다.
Sr. 아니. | 유형 및 설명 |
---|---|
1 | void 빈 값을 나타냅니다. |
2 | bool 참 또는 거짓을 허용합니다. |
삼 | int 이것은 부호있는 정수 데이터 유형입니다. |
4 | float 이것은 부동 스칼라 데이터 유형입니다. |
5 | vec2, vec3, vec4 n 성분 부동 소수점 벡터 |
6 | bvec2, bvec3, bvec4 부울 벡터 |
7 | ivec2, ivec3, ivec4 부호있는 정수 벡터 |
8 | mat2, mat3, mat4 2x2, 3x3, 4x4 부동 행렬 |
9 | sampler2D 2D 텍스처에 액세스 |
10 | samplerCube 큐브 매핑 된 텍스처에 액세스 |
예선
OpenGL ES SL에는 세 가지 주요 한정자가 있습니다.
Sr. 아니. | 한정자 및 설명 |
---|---|
1 | attribute 이 한정자는 버텍스 셰이더와 버텍스 별 데이터에 대한 OpenGL ES 간의 링크 역할을합니다. 이 속성의 값은 버텍스 셰이더가 실행될 때마다 변경됩니다. |
2 | uniform 이 한정자는 셰이더 프로그램과 WebGL 응용 프로그램을 연결합니다. 속성 한정자와 달리 uniform의 값은 변경되지 않습니다. 유니폼은 읽기 전용입니다. 기본 데이터 유형과 함께 사용하여 변수를 선언 할 수 있습니다. Example − 유니폼 vec4 lightPosition; |
삼 | varying 이 한정자는 보간 된 데이터에 대한 정점 셰이더와 조각 셰이더 사이의 링크를 형성합니다. float, vec2, vec3, vec4, mat2, mat3, mat4 또는 배열과 같은 데이터 유형과 함께 사용할 수 있습니다. Example − 다양한 vec3 표준; |
정점 셰이더
정점 셰이더는 모든 정점에서 호출되는 프로그램 코드입니다. 한 곳에서 다른 곳으로 지오메트리 (예 : 삼각형)를 변형 (이동)합니다. 정점 좌표, 법선, 색상 및 텍스처 좌표와 같은 각 정점의 데이터 (정점 별 데이터)를 처리합니다.
버텍스 쉐이더의 ES GL 코드에서 프로그래머는 데이터를 처리하기 위해 속성을 정의해야합니다. 이러한 속성은 JavaScript로 작성된 Vertex Buffer Object를 가리 킵니다. 다음 작업은 정점 변환과 함께 정점 셰이더를 사용하여 수행 할 수 있습니다.
- 정점 변환
- 정상 변환 및 정규화
- 텍스처 좌표 생성
- 텍스처 좌표 변환
- Lighting
- 색상 재료 적용
미리 정의 된 변수
OpenGL ES SL은 정점 셰이더에 대해 다음과 같은 미리 정의 된 변수를 제공합니다.
Sr. 아니. | 변수 및 설명 |
---|---|
1 | highp vec4 gl_Position; 정점의 위치를 유지합니다. |
2 | mediump float gl_PointSize; 변환 된 포인트 크기를 유지합니다. 이 변수의 단위는 픽셀입니다. |
샘플 코드
정점 셰이더의 다음 샘플 코드를 살펴보십시오. 삼각형의 꼭지점을 처리합니다.
attribute vec2 coordinates;
void main(void) {
gl_Position = vec4(coordinates, 0.0, 1.0);
};
위의 코드를주의 깊게 살펴보면 우리는 이름을 가진 속성 변수를 선언했습니다. coordinates. (이 변수는 방법을 사용하여 Vertex Buffer Object와 연관됩니다.getAttribLocation(). 속성coordinates 셰이더 프로그램 개체와 함께이 메서드에 매개 변수로 전달됩니다.)
주어진 정점 셰이더 프로그램의 두 번째 단계에서 gl_position 변수가 정의됩니다.
gl_Position
gl_Position은 정점 셰이더 프로그램에서만 사용할 수있는 미리 정의 된 변수입니다. 정점 위치를 포함합니다. 위의 코드에서coordinates속성은 벡터의 형태로 전달됩니다. 정점 셰이더는 정점 별 작업이므로 각 정점에 대해 gl_position 값이 계산됩니다.
나중에 gl_position 값은 기본 어셈블리, 클리핑, 컬링 및 정점 처리가 끝난 후 기본 요소에서 작동하는 기타 고정 기능 작업에 사용됩니다.
이 튜토리얼에서 개별적으로 논의 할 정점 셰이더의 가능한 모든 작업에 대한 정점 셰이더 프로그램을 작성할 수 있습니다.
조각 셰이더
ㅏ mesh 여러 삼각형으로 구성되며 각 삼각형의 표면은 fragment. 조각 셰이더는 각 조각의 모든 픽셀에서 실행되는 코드입니다. 이것은 개별 픽셀의 색상을 계산하고 채우기 위해 작성되었습니다. 다음 작업은 조각 셰이더를 사용하여 수행 할 수 있습니다.
- 보간 된 값에 대한 연산
- 텍스처 액세스
- 텍스처 적용
- Fog
- 색상 합계
미리 정의 된 변수
OpenGL ES SL은 조각 셰이더에 대해 다음과 같은 미리 정의 된 변수를 제공합니다.
Sr. 아니. | 변수 및 설명 |
---|---|
1 | mediump vec4 gl_FragCoord; 프레임 버퍼 내에서 조각 위치를 유지합니다. |
2 | bool gl_FrontFacing; 전면 프리미티브에 속하는 조각을 보유합니다. |
삼 | mediump vec2 gl_PointCoord; 점 내에서 조각 위치를 유지합니다 (점 래스터 화만 해당). |
4 | mediump vec4 gl_FragColor; 셰이더의 출력 조각 색상 값을 유지합니다. |
5 | mediump vec4 gl_FragData[n] 색상 부착을 위해 조각 색상 유지 n. |
샘플 코드
다음 조각 셰이더 샘플 코드는 삼각형의 모든 픽셀에 색상을 적용하는 방법을 보여줍니다.
void main(void) {
gl_FragColor = vec4(0, 0.8, 0, 1);
}
위의 코드에서 color값은 변수에 저장됩니다 gl.FragColor
. 프래그먼트 셰이더 프로그램은 고정 함수 변수를 사용하여 출력을 파이프 라인에 전달합니다. FragColor는 그중 하나입니다. 이 변수는 모델 픽셀의 색상 값을 보유합니다.
셰이더 프로그램 저장 및 컴파일
셰이더는 독립적 인 프로그램이므로 별도의 스크립트로 작성하여 응용 프로그램에서 사용할 수 있습니다. 또는 직접 저장할 수 있습니다.string 아래와 같이 형식입니다.
var vertCode =
'attribute vec2 coordinates;' +
'void main(void) {' +
' gl_Position = vec4(coordinates, 0.0, 1.0);' +
'}';
셰이더 컴파일
컴파일에는 다음 세 단계가 포함됩니다.
- 셰이더 개체 만들기
- 생성 된 셰이더 개체에 소스 코드 연결
- 프로그램 컴파일
정점 셰이더 만들기
빈 셰이더를 생성하기 위해 WebGL은 createShader(). 셰이더 개체를 만들고 반환합니다. 구문은 다음과 같습니다.
Object createShader (enum type)
구문에서 볼 수 있듯이이 메서드는 미리 정의 된 열거 형 값을 매개 변수로 받아들입니다. 여기에는 두 가지 옵션이 있습니다.
gl.VERTEX_SHADER 버텍스 셰이더 생성 용
gl.FRAGMENT_SHADER 조각 셰이더를 만들기 위해.
셰이더에 소스 연결
메서드를 사용하여 생성 된 셰이더 객체에 소스 코드를 첨부 할 수 있습니다. shaderSource(). 구문은 다음과 같습니다.
void shaderSource(Object shader, string source)
이 방법은 두 개의 매개 변수를받습니다.
shader − 생성 된 쉐이더 객체를 하나의 매개 변수로 전달해야합니다.
Source − 셰이더 프로그램 코드를 문자열 형식으로 전달해야합니다.
프로그램 컴파일
프로그램을 컴파일하려면 다음 방법을 사용해야합니다. compileShader(). 구문은 다음과 같습니다-
compileShader(Object shader)
이 메서드는 셰이더 프로그램 개체를 매개 변수로받습니다. 셰이더 프로그램 개체를 만든 후 소스 코드를 첨부하고 해당 개체를이 메서드에 전달합니다.
다음 코드 스 니펫은 정점 셰이더와 조각 셰이더를 만들고 컴파일하여 삼각형을 만드는 방법을 보여줍니다.
// Vertex Shader
var vertCode =
'attribute vec3 coordinates;' +
'void main(void) {' +
' gl_Position = vec4(coordinates, 1.0);' +
'}';
var vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, vertCode);
gl.compileShader(vertShader);
// Fragment Shader
var fragCode =
'void main(void) {' +
' gl_FragColor = vec4(0, 0.8, 0, 1);' +
'}';
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, fragCode);
gl.compileShader(fragShader);
결합 된 프로그램
두 셰이더 프로그램을 만들고 컴파일 한 후 두 셰이더 (정점 및 조각)를 모두 포함하는 결합 프로그램을 만들어야합니다. 다음 단계를 따라야합니다-
- 프로그램 개체 만들기
- 두 셰이더 연결
- 두 셰이더 연결
- 프로그램 사용
프로그램 개체 만들기
방법을 사용하여 프로그램 개체 만들기 createProgram(). 빈 프로그램 개체를 반환합니다. 구문은 다음과 같습니다.
createProgram();
셰이더 연결
메서드를 사용하여 생성 된 프로그램 객체에 셰이더를 연결합니다. attachShader(). 구문은 다음과 같습니다.
attachShader(Object program, Object shader);
이 방법은 두 개의 매개 변수를받습니다.
Program − 생성 된 빈 프로그램 개체를 하나의 매개 변수로 전달합니다.
Shader − 컴파일 된 셰이더 프로그램 (정점 셰이더, 조각 셰이더) 중 하나를 전달합니다.
Note −이 방법을 사용하여 두 셰이더를 모두 연결해야합니다.
셰이더 연결
방법을 사용하여 셰이더 연결 linkProgram(), 셰이더를 연결 한 프로그램 개체를 전달합니다. 구문은 다음과 같습니다.
linkProgram(shaderProgram);
프로그램 사용
WebGL은 useProgram(). 링크 된 프로그램을 전달해야합니다. 구문은 다음과 같습니다.
useProgram(shaderProgram);
다음 코드 조각은 결합 된 셰이더 프로그램을 만들고, 연결하고, 사용하는 방법을 보여줍니다.
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);