THREE.JS 에서 SHADERMATERIAL 사용하기

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

( https://aerotwist.com/tutorials/an-introduction-to-shaders-part-1/ )

일단 버텍스셰이더와 프래그먼트셰이더 두가지를 GLSL로 작성해야 한다. script 태그에 작성하거나 문자열로 작성할 수 있다.

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 );

출처