Three.js에서 GLSL 사용

 

Three.js에서 GLSL을 사용하는 방법은 주로 THREE.ShaderMaterial을 통해 이루어지지만, 그 외에도 여러 다른 방식으로 GLSL 셰이더를 활용할 수 있습니다. Three.js는 WebGL을 기반으로 하므로, 다양한 형태로 GLSL을 사용해 그래픽 효과를 제어할 수 있습니다. ShaderMaterial 외에 GLSL을 사용할 수 있는 방법을 살펴보면 다음과 같습니다:

 

1. RawShaderMaterial

• THREE.RawShaderMaterial은 THREE.ShaderMaterial과 비슷하지만, 더 저수준의 셰이더 코드를 작성할 수 있도록 해줍니다. ShaderMaterial은 Three.js의 내부 구조(매트릭스 변환, 조명 처리 등)를 자동으로 추가하지만, RawShaderMaterial은 이러한 부분을 직접 정의해야 합니다.
• Three.js의 내장된 셰이더 구문을 사용하지 않고, WebGL의 표준 GLSL 셰이더 코드를 직접 작성할 수 있습니다.

const material = new THREE.RawShaderMaterial({
  vertexShader: `
    attribute vec3 position;
    uniform mat4 projectionMatrix;
    uniform mat4 modelViewMatrix;
    void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    void main() {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Red color
    }
  `
});

사용 목적: 커스텀 셰이더의 모든 부분을 제어하고 싶을 때 사용합니다. 이를 통해 Three.js의 기본 셰이더 코드를 우회하고, 원시 GLSL 코드를 사용하여 성능 최적화나 특정 효과를 구현할 수 있습니다.

2. onBeforeCompile 메소드

• onBeforeCompile 메소드는 Three.js의 기본 Material (예: MeshStandardMaterial, MeshBasicMaterial)을 사용하는 중에 셰이더를 수정할 수 있는 강력한 방법입니다.
• 이 방법을 사용하면 기본 셰이더를 수정하면서 커스텀 GLSL 코드를 삽입할 수 있습니다. Three.js가 자동으로 제공하는 편리한 기능(예: 조명 계산, 그림자 처리 등)을 그대로 사용하면서도, 셰이더 코드를 직접 수정할 수 있다는 장점이 있습니다.

const material = new THREE.MeshStandardMaterial({
  color: 0x00ff00
});

material.onBeforeCompile = (shader) => {
  shader.fragmentShader = shader.fragmentShader.replace(
    '#include <dithering_fragment>',
    'gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);'
  );
};

사용 목적: 기본 제공되는 Material을 사용하면서, 셰이더의 특정 부분만 수정하고 싶을 때 유용합니다.

3. WebGLRenderer의 직접적인 GLSL 제어

• Three.js의 WebGLRenderer는 WebGL을 직접 호출할 수 있는 저수준 렌더러입니다. 이 렌더러를 통해 직접 GLSL 코드를 제어하거나, WebGL 셰이더를 직접 다룰 수 있습니다.
• 이 방법은 Three.js의 상위 추상화 레이어를 우회하고 순수 WebGL을 사용할 수 있게 해줍니다

const gl = renderer.getContext();
const program = gl.createProgram();
// WebGL API를 통해 직접 셰이더 프로그램을 작성하고 사용할 수 있음

사용 목적: Three.js에서 제공하는 셰이더 시스템을 완전히 우회하고, WebGL을 통해 완전한 제어권을 가지려는 경우에 적합합니다. 그러나 대부분의 경우에는 ShaderMaterial이나 RawShaderMaterial로 충분합니다.

 

4. THREE.NodeMaterial (실험적)

• THREE.NodeMaterial은 Three.js에서 실험적으로 제공하는 시스템으로, 노드 기반 셰이더를 구성할 수 있는 방식입니다. 이 방식은 GLSL 코드를 직접 작성하는 대신, 비주얼 프로그래밍 또는 노드 기반의 시스템을 사용하여 셰이더를 구성하는 방식입니다.
• 노드 시스템을 사용하여 GLSL 코드로 변환되는 고수준의 추상화된 셰이더를 만들 수 있습니다.

const colorNode = new THREE.ColorNode(0x00ff00);
const material = new THREE.NodeMaterial(colorNode);

사용 목적: GLSL 코드를 직접 작성하지 않고도, 셰이더 효과를 그래프 형태로 구성하고 싶을 때 사용됩니다.

 

5. Post-Processing에서 GLSL 사용

• Three.js에서 후처리(Post-Processing) 효과를 만들 때도 GLSL을 사용할 수 있습니다. 후처리 효과는 장면이 렌더링된 후에 화면에 추가적인 효과를 적용하는데, 이를 위해 커스텀 셰이더가 사용됩니다.
• Three.js의 EffectComposer와 같은 클래스는 이러한 후처리 작업을 지원하며, ShaderPass를 통해 GLSL 셰이더를 사용해 화면에 블러, 색상 보정, 글로우 등의 효과를 적용할 수 있습니다.

const composer = new THREE.EffectComposer(renderer);
const customShader = {
  uniforms: {
    tDiffuse: { value: null }
  },
  vertexShader: /* GLSL 코드 */,
  fragmentShader: /* GLSL 코드 */
};

const shaderPass = new THREE.ShaderPass(customShader);
composer.addPass(shaderPass);

사용 목적: 장면의 후처리 효과(예: 블러, 색상 왜곡 등)를 GLSL을 통해 추가하고 싶을 때 사용됩니다.

 

요약:

• THREE.ShaderMaterial은 GLSL을 사용하는 가장 일반적인 방법이지만, RawShaderMaterial, onBeforeCompile, WebGLRenderer, NodeMaterial, Post-Processing 등 다양한 방법을 통해 Three.js에서 GLSL을 사용할 수 있습니다.
• 셰이더의 복잡도와 Three.js 기본 기능의 사용 여부에 따라 적합한 방법을 선택할 수 있습니다.