vite typescript 에서 glsl 컴파일 에러 해결하기

 

//vertexshader
void main()
{
    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
    // gl_PointSize = 10.0 / -mvPosition.z;
    gl_Position = projectionMatrix * mvPosition;
}

이렇게 vertex shader에서 mvPosition이 없는 예약어라는데.

이건 glsl을 몰라서 그런게 아닌가 싶다. 

 

glslify-loader

raw-loader와 더불어 npm에서 glslify-loader를 설치한다.

npm install raw-loader

npm install glslify-loader

 

이렇게 depencency에 둘 다 설치되었다.

 

vite glsl

이게 오류가 나는 이유가 아무래도 vite로 호스팅하였을 때, glsl을 인식 못하는 문제로 보인다.

npm i vite-plugin-glsl --save-dev

vite에서 glsl을 사용할 수 있는 플러그인을 설치하고.

 

vite configㄹ르 통해서 glsl을 사용하도록 세팅해준다.

 

이제 이렇게 shader 오류가 해결되었다.