How to add a GLSL loader to an Angular project

2 min readJul 1, 2021

For quite some time now I’ve been learning shader programming and trying to get my head around all the exciting concepts involved with it. In a nutshell, a shader is a program that gets executed directly on the graphics processing unit (GPU). These programs are written in the OpenGL Shading Language (GLSL).

If you are also interested in learning shader programming, I highly recommend you to check out the following resources:

The Book of Shaders: Here you can learn fragment shader programming from the ground up with many examples and exercises.
Yuri Artyukh on YouTube: In his YouTube channel, Yuri Artyukh shares many practical tutorials on how to create stunning effects inspired by some of the most outstanding websites.

Within our company, Angular is the framework of choice for building our products and most of our client projects. In this short tutorial, I will show you how to add a custom webpack builder to an Angular project that allows you to directly import GLSL files. In my opinion, this method is much more elegant than using string literals, template strings or loading the GLSL file via the fetch API. Some advantages are:

Code highlighting for GLSL within the IDE
No confusing long strings
No loading of external GLSL files during runtime

The following steps are necessary to add the GLSL loader to an Angular project.

Create new Angular project

ng new shader-project

Install the custom webpack builder

npm install --save-dev @angular-builders/custom-webpack

Enable custom builder and webpack options in angular.json

In your angular.json find the architect.build section. Replace the line ”builder”: ”@angular-devkit/build-angular:browser”, with ”builder”: ”@angular-builders/custom-webpack:browser”,. Then add the following block to architect.build.options:

"customWebpackConfig": {
  "path": "./custom-webpack.config.js"
}

The build section of your angular.json now looks like this:

"architect": {
   ...
  "build": {
      "builder": "@angular-builders/custom-webpack:browser"
      "options": {
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js"
            }
      }
  ...
}

Install webpack loader modules

npm install --save glslify-loader raw-loader

Add custom webpack config file

Now create the custom-webpack.config.js file in the root of your project. This file extends the default Angular config with the loaders necessary for importing GLSL files.

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

Update the angular.json dev server

To also enable the custom webpack config for the dev server of the Angular project, locate the line ”builder”: ”@angular-devkit/build-angular:dev-server”, within the architect.serve section of the angular.json file and replace it with ”builder”: ”@angular-builders/custom-webpack:dev-server”,.

Use shader imports

Now you can import shader files directly. Depending on your IDE it might be necessary to add a @ts-ignore comment, in case the IDE won’t recognize the import.

// @ts-ignore
import vertex from './shaders/vertex.glsl';
console.log(vertex);