Add vite-plugin-glsl to support GLSL external shader files and add de…

…claration file to help Typescript to resolve shader import

package.json

@@ -21,6 +21,7 @@
     "@types/three": "^0.141.0",
     "sass": "^1.52.3",
     "typescript": "^4.7.4",
-    "vite": "^2.9.12"
+    "vite": "^2.9.12",
+    "vite-plugin-glsl": "^0.1.5"
   }
 }

src/example/example.ts

@@ -5,8 +5,6 @@ import { createLights } from './create-lights'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { calculateCanvasSize } from '../utils/calculate-canvas-size'
 import { animateCharacter, positionCharacter } from './transform-character'
-
-
 /**
  * Creates an example scene with a rotating character.
  */
@@ -75,4 +73,3 @@ animate()
     renderer.setSize(size.width, size.height)
   })
 }
-

src/shaders/example/fragment.glsl

@@ -0,0 +1,5 @@
+#version 120
+
+void main() {
+    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+}

src/shaders/example/vertex.glsl

@@ -0,0 +1,5 @@
+#version 120
+
+void main() {
+    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
+}

src/shaders/glsl.d.ts

@@ -0,0 +1,4 @@
+declare module "*.glsl" {
+  const value: string;
+  export default value;
+}

vite.config.js

@@ -0,0 +1,6 @@
+import glsl from "vite-plugin-glsl";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [glsl.default()] //For some reason, cannot resolve glsl(). Workaround found on vite-plugin-glsl issue (https://github.com/UstymUkhman/vite-plugin-glsl/issues/1#issuecomment-972660771)
+});