Typescript glsl 파일 import 하기

Typescript glsl 파일 import 

import vertexShader from './shader/vertexshader.glsl'
import fragmentShader from './shader/fragmentshader.glsl'

이거 이렇게 TS에서는 에러가 뜬다. 

 

shader.d.ts 

glsl 파일을 TS에서 어떻게 인식하게 하느냐. 

shader.d.ts 파일을 사용해서 .glsl 파일을 인식해야한다고 명시해주면 된다. 

 

이제 에러가 해결되었다. 

 

webpack 

하지만 shader.d.ts를 끄면 작동하지 않는 경우가 생긴다.

이럴 때 webpack를 사용한다.

 

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.glsl$|\.frag$|\.vert$/i,
        use: ['raw-loader'],
      },
    ],
  },
  
};

이렇게 각 파일 확장자를 규칙에 추가해준다. 

 

프로젝트의 root 위치에

shader.d.ts 와 webpack 설정 파일을 준비하면

 

이제 에러가 해결되었다. 

 

 

tsconfig.json

만약 위에까지 했는데도 또 빨간줄이 뜬다면, 

typescript config 설정을 해주어야한다.

 

tsconfig.json 을 만들고

 

{
  "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
  }
}

이렇게 넣어서 다시 실행해주면.

 

이제는 typescript에서 빨간줄이 해결되었다.