THREE.JS 입문 튜토리얼(2) 셰이더-1부_기본지식

번역
Three.js는 WebGL을 통해 JavaScript가 GPU를 작동하고 브라우저 측에서 진정한 3D를 구현할 수 있게 해주는 훌륭한 오픈 소스 WebGL 라이브러리입니다. 하지만 이 기술은 아직 개발 단계이고 정보가 극히 부족합니다. 매니아들은 기본적으로 Demo 소스 코드와 Three.js 자체의 소스 코드를 통해 배워야 합니다.

0. 소개
이미 "Three.js 사용 시작"이라는 글을 올린 적이 있습니다. 아직 읽어보지 않으셨다면 읽어보시기 바랍니다. 이 글의 기초는 해당 튜토리얼을 기반으로 합니다.

셰이더에 대해 논의하고 싶습니다. Three.js가 많은 문제를 해결하기 전까지 기본 WebGL은 훌륭했습니다. 때로는 특정 효과를 얻고 싶거나 화면에 표시되는 내용을 좀 더 자세히 살펴보고 싶을 수도 있습니다. 그러면 셰이더가 확실히 시야에 들어올 것입니다. 당신도 나와 같다면 지난 튜토리얼의 기본 사항보다 더 흥미로운 것을 구현하고 싶을 것입니다. 이 튜토리얼에서는 실제로 우리에게 지루한 작업을 많이 수행하는 Three.js의 기본 사항을 설명합니다.
시작하기 전에 이 튜토리얼에서는 셰이더 코드를 설명하는 데 꽤 많은 시간이 소요될 것이라는 점을 말씀드리고 싶습니다. 나중에 셰이더 코드를 기반으로 좀 더 나아가서 뭔가를 할 셰이더. 셰이더는 언뜻 이해하기 쉽지 않고 약간의 설명이 필요하기 때문이다.
1. 두 개의 셰이더
WebGL에는 고정 렌더링 파이프라인이 없으며 블랙박스 셰이더를 직접 사용할 수 없습니다. (역자 주: 지난 세기의 그래픽 카드는 기본적으로 고정 렌더링 파이프라인만 지원합니다. ) WebGL은 더 강력하지만 이해하고 사용하기 어려운 프로그래밍 가능한 파이프라인을 제공합니다. 간단히 말해서, 프로그래밍 가능한 렌더링 파이프라인은 프로그래머가 정점을 가져와 화면에 그리는 일을 담당한다는 의미입니다. 셰이더는 렌더링 파이프라인의 일부입니다.
1. 정점 셰이더
2. 프래그먼트 셰이더
알아야 할 것은 이 두 셰이더 모두 그래픽 카드에서 완전히 실행된다는 것입니다. GPU는 처리해야 할 데이터를 CPU에서 오프로드하고 GPU에 로드하여 CPU의 부담을 줄입니다. 최신 GPU는 셰이더가 호출해야 하는 작업 유형을 크게 최적화했으며 그렇게 할 가치가 있습니다.
2. 정점 셰이더
구체와 같은 기본 도형은 정점으로 구성되어 있죠? 정점 셰이더는 이러한 정점 중 하나를 차례로 전달하여 처리합니다. 각 정점을 처리하는 방법은 자유롭게 사용자 정의할 수 있지만 정점 셰이더가 해야 할 일 중 하나는 화면에서 정점의 최종 위치를 나타내는 4차원 배열인 gl_Position이라는 변수에 값을 할당하는 것입니다. 이는 그 자체로 흥미로운 과정입니다. 실제로 3차원 좌표(x, y, z 값이 있는 정점)를 2차원 화면으로 변환하거나 투영하는 방법에 대해 이야기하고 있기 때문입니다. 고맙게도 Three.js와 같은 도구를 사용하면 gl_Position에 매우 쉽게 액세스할 수 있습니다.
3. 프래그먼트 셰이더
이제 정점을 포함하는 3차원 개체가 생겼으니 개체를 2차원 화면에 투영해야 하는데 색상은 어디로 가나요? 질감과 조명은 어떻습니까? 이것이 프래그먼트 셰이더가 처리하는 것입니다.
버텍스 셰이더와 유사하게 프래그먼트 셰이더에는 완료해야 하는 작업이 있습니다. 즉, 프래그먼트 포인트의 최종 색상인 또 다른 4차원 부동 소수점 변수인 gl_FragColor 변수를 설정하거나 제거하는 것입니다. 조각이란 무엇입니까? 세 개의 정점이 있는 삼각형을 상상해 보세요. 조각은 이 세 개의 정점에서 계산된 삼각형 내부의 모든 점입니다. 따라서 조각 값은 정점 값에서 보간됩니다. 한 꼭지점의 색상이 빨간색이고 인접한 꼭지점의 색상이 파란색인 경우 빨간색 꼭지점 근처에서 빨간색에서 보라색으로, 마지막으로 파란색 꼭지점 근처에서 파란색으로 색상 그라데이션을 관찰할 수 있습니다.
4. 셰이더 변수
셰이더 변수에는 균일형(Uniforma), 속성(Attributes), 가변형(Varyings)의 세 가지 유형이 있습니다. 처음 이 세 단어를 들었을 때 이전에 사용했던 단어와 일치하지 않아서 혼란스러웠습니다. 하지만 이제는 다음과 같이 이해할 수 있습니다.
1. 유니폼 변수는 정점 셰이더나 프래그먼트 셰이더로 전달될 수 있습니다. 여기에는 포인트 라이트의 위치와 같이 렌더링 프로세스 전반에 걸쳐 변경되지 않은 변수가 포함됩니다. 원천.
2.속성 변수는 각 정점에 해당하며 정점 셰이더로만 전달될 수 있습니다. 예를 들어 각 정점에는 색상이 있습니다. 속성 변수와 정점 간의 관계는 일대일 대응입니다.
3.Varyings 변수는 버텍스 셰이더에서 정의되고 프래그먼트 셰이더에 전달되도록 준비된 변수입니다. 이를 보장하려면 두 셰이더에서 변수의 유형과 이름이 정확히 동일하게 지정되었는지 확인해야 합니다. 조명을 계산할 때 법선이 필요하기 때문에 일반적인 응용 프로그램은 법선 벡터입니다.
다음 튜토리얼에서는 이 세 가지 변수를 사용하고, 이 세 가지 변수가 실제로 어떻게 사용되는지 배우게 됩니다.
이제 정점 셰이더, 프래그먼트 셰이더, 세 가지 셰이더 변수에 대해 이야기했습니다. 이제 우리가 만들 수 있는 가장 간단한 셰이더를 살펴보겠습니다.
5. Hello World(번역자 Tucao: 프랑스어 자랑 좀 그만해주세요)
여기 가장 간단한 버텍스 셰이더가 있습니다:

코드 복사 코드는 다음과 같습니다.

/**
* 각 정점 좌표에 모델 뷰 행렬을 곱한 후 투영 행렬을 곱합니다
* 2D 화면의 좌표를 구합니다
*/
void main() {
gl_Position =projectionMatrix *
modelViewMatrix *
vec4(position,1.0);
}

간단한 프래그먼트 셰이더:

코드 복사 코드는 다음과 같습니다.

/**
* 모든 픽셀 색상을 분홍색으로 설정
*/
void main() {
gl_FragColor = vec4(1.0, / / R
0.0, // G
1.0, // B
1.0) // A
}

그게 다입니다. 지금 바로 실행해보면 화면에 "매트" 핑크색 모양이 나타나는 것을 볼 수 있습니다. 별로 복잡하지 않죠?

버텍스 셰이더에서는 Three.js를 통해 일부 유니폼 변수를 전달합니다. 두 개의 4×4 행렬 균일 변수가 있습니다: 모델뷰 행렬과 투영 행렬. 이 두 행렬이 어떻게 작동하는지에 대해 많이 알 필요는 없습니다. 간단히 말해서, 이 두 행렬은 3차원 점 좌표가 2차원 화면의 좌표에 투영되는 방식을 설명합니다.

사실 이 두 개의 짧은 단편만 다루었습니다. Three.js는 이를 셰이더 코드 앞에 추가하므로 걱정할 필요가 없습니다. 솔직히 말해서 Three.js는 조명 데이터, 노드 색상, 노드 법선 벡터 등과 같은 많은 항목을 코드 앞에 추가하기도 합니다. Three.js가 없었다면 이러한 개체를 직접 만들고 설정해야 했습니다.
6. 셰이더 소재 사용

코드 복사 코드는 다음과 같습니다

/**
* JQuery
*를 사용하여 DOM에서 셰이더 코드 텍스트를 추출할 수 있다고 가정합니다
*/
var vShader = $('vertexshader')
var fShader = $('fragmentsshader')
varshaderMaterial =
new THREE.ShaderMaterial ({
vertexShader: vShader.text(),
fragmentShader: fShader.text()
})

여기에서 Three.js가 컴파일되고 셰이더를 실행하고 생성한 재질에 연결하면 재질이 생성한 메시에 연결됩니다. 실제보다 더 쉬워지는 것은 아닙니다. 그럴 수도 있지만 우리는 브라우저 3D 프로그래밍에 대해 생각하고 있으며 이 주제에는 어느 정도 복잡성이 있을 것이라고 예상해야 한다고 생각합니다.

셰이더 재질과 같은 두 가지 다른 속성인 유니폼과 속성을 추가할 수도 있습니다. 벡터, 정수 또는 부동 소수점일 수 있지만 이전에 말했듯이 유니폼 변수는 모든 지점에서 일정하게 유지되므로 단일 값일 가능성이 더 높지만 속성 변수는 정점별로 있으므로 배열이어야 합니다. 메쉬에서 속성 변수와 정점은 일대일 대응을 가져야 합니다.
7. 요약
사실 이번 튜토리얼은 여기까지입니다. 사실 많은 이야기를 했지만 여러 면에서 훑어볼 뿐입니다. 다음 튜토리얼에서는 조명 효과를 시뮬레이션하기 위해 일부 속성 변수와 유니폼 변수를 전달하는 복잡한 셰이더를 제공할 것입니다.
이 튜토리얼의 소스 코드를 패키징했습니다. 다운로드하여 참조할 수 있습니다.