How to use custom shaders in an Angular app?

Question

I've got an angular 6 app where I'm trying to get to work some custom shaders from threejs.org examples. The thing is that you need to put your script tags with some shader settings into your html page, something like the following:

    <script type="x-shader/x-vertex" id="vertexshader">
        uniform float amplitude;
        attribute vec3 customColor;
        attribute vec3 displacement;
        varying vec3 vNormal;
        varying vec3 vColor;
        void main() {
            // ... some code
        }
    </script>

    <script type="x-shader/x-fragment" id="fragmentshader">
        varying vec3 vNormal;
        varying vec3 vColor;
        void main() {
            // ... some code
        }
    </script>

... and then after creating THREE.ShaderMaterial, create some mesh with this material, but angular removes script tags from its components' htmls, so I'm unable to use such a standart approach. How is one supposed to create and use vertex and fragment shaders in angular components? Will appriciate any advices and examples!

Answer 1

The thing is that you need to put your script tags with some shader settings into your html page, something like the following:

This is not a thing at all, it's just one (poor) pattern that you may find in various examples.

You can write your shaders and use them in a variety of way.

Let us first establish that shader is nothing more than a string.

So if you do something like this:

const myShader = 'dolphins shooting lazers out of their eyes'

const myMaterial = new THREE.ShaderMaterial({vertexShader: myShader})

Three.js won't complain (until you start rendering and WebGL actually complains), you gave the shader material a valid input type, it's just that the contents are invalid GLSL.

You could just do multi-line strings:

const shader = `
  uniform vec3 foo;
  varying vec3 bar;
  void main(){...}
`

Or you could fetch the file itself:

new THREE.FileLoader().load('my_shader.vert',(file)=>{
   myShader = file
   //make new THREE.ShaderMaterial() here
})

Or if you have something to interpret the require or import:

import myShader from './shaders/my_shader.vert'
const myShader = require('./shaders/my_shader.vert')

This would allow you to write a shader and have highlighting in a .vert | .frag | .vs | .fs | .glsl file, and either fetch it asynchronously, or inline it at build time.

Answer 2

Try to get shaders as text with HTTP Client :

Valid for Angular 6-8:

http.get('assets/shaders/particle.vert', {
  responseType: 'text'
}).subscribe(data => {
  vertexS1 = data;
})