R3F, vite 환경에서 Shader 적용

• vite-plugin-glsl 설치
• vite.config.js 수정
• shader 적용하기
• vertex, fragment shader 작성

vite-plugin-glsl 설치

npm install vite-plugin-glsl

vite.config.js 수정

import glsl from 'vite-plugin-glsl';

export default {
  plugins: [glsl()],
};

shader 적용하기

import eyeVertexShader from "../shader/vertex.glsl";
import eyeFragmentShader from "../shader/fragment.glsl";

<mesh ...>
  <shaderMaterial
    attach="material"
    vertexShader={eyeVertexShader}
    fragmentShader={eyeFragmentShader}
  />
</mesh>

blending={THREE.AdditiveBlending} // 이미 화면에 보이는 색상과 어떻게 렌더링 할지 결정
THREE.AdditiveBlending은 색상을 대체하는 것이 아니라 더해준다.

depthTest={false} // 오브젝트가 앞에 있는지 뒤에 있는지 견절한다. false 해버리면 거리랑 상관 없이 언제나 앞에 나타난다.

attach="material" // 기존 material을 대체한다.

transparent={true} // alpha 투명도를 사용하게 해준다.

vertex, fragment shader 작성

Vertex Shader

void main()
{
    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
}

Fragment Shader

void main(){
    gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}