셰이더 재질
셰이더 재질 (shader material) 은 커스텀 셰이더로 렌더링된다. 이를 위해서는 GLSL (openGL Shading Language) 코드로 작성된 정점 (vertex) 셰이더와 프래그먼트 (fragment) 셰이더가 필요하며, 각각 정점의 위치와 색상을 기술한다. 이 코드들은 WebGL을 이용해 GPU에서 실행되므로,
ShaderMaterial은WebGLRenderer로만 제대로 렌더링된다. 이 글에서는 Three.js에서 셰이더를 사용하는 방법을 설명한다.
ShaderMaterial은 다음과 같이 정의할 수 있다.
const material = new THREE.ShaderMaterial({
uniforms: {
time: { value: 1.0 },
resolution: { value: new THREE.Vector2() }
},
vertexShader: /* glsl */ `...`,
fragmentShader: /* glsl */ `...`,
})
uniforms 안의 속성들은 vertexShader와 fragmentShader에서 접근할 수 있으며, 모든 정점에 대해 동일한 값을 가진다. GLSL 변수의 타입에는 float, vec2, vec3, vec4, sampler2D가 있으며, 이에 대응하는 JavaScript의 타입은 각각 Number, THREE.Vector2, THREE.Vector3(또는 THREE.Color), THREE.Vector4, THREE.Texture이다.
| GLSL | JavaScript |
|---|---|
| float | Number |
| vec2 | THREE.Vector2 |
| vec3 | THREE.Vector3 or THREE.Color |
| vec4 | THREE.Vector4 |
| sampler2D | THREE.Texture |
ShaderMaterial의 vertexShader와 fragmentShader는 코드를 텍스트 형식으로 받는다. 이 코드는 HTML에서 <script type="x-shader/x-vertex">나 <script type="x-shader/x-fragment"> 안에 작성한 뒤 document.getElementById('vertex').textContent로 읽을 수 있다.
<!-- index.html -->
<html>
<head>
<script id="vertex" type=“x-shader/x-vertex”>
...
</script>
<script id="fragment" type=“x-shader/x-fragment”>
...
</script>
</head>
<body>
</body>
</html>
또는 외부 파일에서 백틱(`)을 이용한 여러 줄 문자열로 선언한 뒤, import vertex from './shader/vertex.js'처럼 import할 수도 있다.
// vertex.js
export const vertex = `
/* glsl */
...
`
이어지는 글들에서는 GLSL의 기초를 소개하고 ShaderMaterial을 이용해 지구를 만든다.