THREE.JS 에서 SHADERMATERIAL 사용하기

Three.js에서 제공해주는 예제들을 하나하나 보다 보면 Shader를 직접 만들어서 사용하는 예제들이 많다.
Three.js에서 제공해주는 Material 중에서 직접 셰이더를 작성해서 적용할 수 있는 ShaderMaterial이 있어서 간편하게 셰이더를 적용해 볼 수 있다.
다만 셰이더를 작성하는 GLSL이 생소하고 예제를 보면서 이해하기에는 어려움이 많아 기본적인 셰이더의 예시를 제공해주는 블로그가 있어서 참고하였다.

An Introduction to Shaders - Part 1

Vertex Shader

버텍스 셰이더는 버텍스의 위치 정보를 담고 있는 gl_Position을 결정하는 것이 중요하다.

<script id="vertexShader" type="x-shader/x-vertex">
  void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
</script>

Fragment Shader

프래그먼트 셰이더는 마지막에 gl_FragColor에 (R, G, B, A) 값을 설정하는 것이 중요하다.

<script id="fragmentShader" type="x-shader/x-fragment">
  void main() {
    gl_FragColor = vec4(0.0, 0.5, 1.0, 1.0); // R, G, B, A
  }
</script>

JavaScript

script 태그의 id를 이용하여 셰이더의 내용을 불러와서 ShaderMaterial의 매개변수에 각각 넘겨주면 된다.

var geometry = new THREE.BoxGeometry(20, 20, 20);
var vShader = document.getElementById("vertexShader").innerHTML;
var fShader = document.getElementById("fragmentShader").innerHTML;

var material = new THREE.ShaderMaterial({
  vertexShader: vShader,
  fragmentShader: fShader,
});

var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

https://302chanwoo.com/lab/three/shadermaterial_basic.html

Vertex Shader

Fragment Shader

JavaScript

참고 자료