Merge pull request #11 from Exomus/10-configuration-of-webpack-to-import-glsl-files-is-missing

fix: fix the configuration of Angular's webpack to accept glsl files in imports

Author: Adam N

angular.json

@@ -15,8 +15,11 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-builders/custom-webpack:browser",
           "options": {
+            "customWebpackConfig": {
+              "path": "./custom-webpack.config.js"
+            },
             "outputPath": "dist/three-template",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -65,7 +68,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular-builders/custom-webpack:dev-server",
           "configurations": {
             "production": {
               "browserTarget": "three-template:build:production"

custom-webpack.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(glsl|vs|fs|vert|frag)$/,
+        exclude: /node_modules/,
+        use: [
+          'raw-loader',
+          'glslify-loader'
+        ]
+      }
+    ]
+  }
+}

package-lock.json

@@ -18,13 +18,16 @@
     "@angular/platform-browser": "^14.0.0",
     "@angular/platform-browser-dynamic": "^14.0.0",
     "@angular/router": "^14.0.0",
+    "glslify-loader": "^2.0.0",
     "lil-gui": "^0.16.1",
+    "raw-loader": "^4.0.2",
     "rxjs": "~7.5.0",
     "three": "^0.141.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
+    "@angular-builders/custom-webpack": "^14.0.0",
     "@angular-devkit/build-angular": "^14.0.3",
     "@angular/cli": "~14.0.3",
     "@angular/compiler-cli": "^14.0.0",

package.json

@@ -0,0 +1,25 @@
+# GLSL Files
+
+Some IDE will not recognize the import so you will need either one of the two following solutions.
+
+## First method
+
+You need to add `//@ts-ignore` above the imports of the GLSL files.
+
+For example :
+
+```typescript
+//@ts-ignore
+import vertexShader from 'src/shaders/example/vertex.glsl'
+```
+
+## Second method
+
+You add a file `glsl.d.ts` in the shader folder with inside:
+
+```typescript
+declare module '*.glsl' {
+  const value: string
+  export default value
+}
+```

src/shaders/example/README.md

@@ -0,0 +1,3 @@
+void main() {
+    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+}

src/shaders/example/fragment.glsl

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

src/shaders/example/glsl.d.ts

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