How to create shader.ts files from shader.fx files

Questions
1

Heya, I’m trying to add some stuff to the GridMaterial for my ground and have copied the ts and fx files for GridMaterial over into my ES6/TS/Webpack project and everything seems to be working well when I modify the vert and frag ts files directly. But I wonder how I can convert the fx files into the ts files like Babylon does? That way I can get the benefits of working with the fx files, mainly comments and extra white space.

PS if you imagine starting with @RaananW’s example project and adding the source files for the GridMaterial to the project, that’s where I’m at. Thanks for any pointers! :slight_smile:

2

Hi @Blake

I am not sure I get what you mean. Do you want to have a ts file that build a ShaderMaterial like this, but having the shader code as separate fx files?

1 Like
3

Thanks, that’s what I’m after but I also want the fx files to get bundled, rather than kept as separate files. :pray:

In my local repo of Babylon, in the GridMaterial folder there’s files GridMaterial.ts, grid.vertex.ts, grid.fragment.ts, grid.vertex.fx, and grid.fragment.fx, which I copied over to my project that’s based on this example.

It works if I modify the ts files grid.vertex.ts and grid.fragment.ts directly, but any modifications I make to the grid.fragment.fx and grid.vertex.fx files are ignored. I think it’s part of Babylon’s build process to automatically generate the ts files from the fx files but I can’t figure out how to do it in my own project. :thinking:

So ideally I want the separate fx files for convenience but also want them minified and bundled into the final, single js file. :slight_smile:

4

I have the shader code imported into ts file and bundled. Let me check how I did it.

5

Hi @Blake,

  1. I found this code in my webpack config file. It applies raw-loader and glslify-loader to .glsl, .frag, .vert files. You can add .fx to the regexp as well. You also need to add raw-loader and glslify-loader as dependencies.
            {
              test: /\.(glsl|frag|vert)$/,
              use: [
                require.resolve("raw-loader"),
                require.resolve("glslify-loader"),
              ],
            },
  1. Then in your ts file, you should be able to import the shader files like this. E.g. This is my shader code for trailings effects on the 400 flying arrows fired by bow units. :smile: I think I have some problem with import syntax, so I used the following instead. arrowTrailVert.default is the shader code as string text.
const arrowTrailVert = require("../../../scene/assets/shaders/arrowTrail.vert");
const arrowTrailFrag = require("../../../scene/assets/shaders/arrowTrail.frag");

Effect.ShadersStore["arrowTrailVertexShader"] = arrowTrailVert.default;
Effect.ShadersStore["arrowTrailFragmentShader"] = arrowTrailFrag.default;
  1. Bundling should just work. I found my shader code in <projectRootFolder>/dist/<projectName>/static/js/2.fd98e5e1.chunk.js.

I hope I don’t miss anything important.

4 Likes
6

Hurray, it worked! :grin: Thanks so much for hunting that down for me, I was chasing my tail all evening trying to get it sorted out! :beers: :+1:

3 Likes