Javascript and WGSL

[Atticus-X]

WebGPU-'s function createShaderModule takes a template literal and not a string. So, I-'ve had problems adding an "#include" directive like I-'ve done with OpenGL-s' shaders. It seems like the only way to achieve the same effect is with template literal interpolation.

Example:
#include "QuadTree.glsl";
#include "Light.glsl";
...
...

Great tutorial by the way!

[greggman]

WebGPU-'s function createShaderModule takes a template literal and not a string.

This might be one of those semantic things but WebGPU only takes strings. From the spec

dictionary GPUShaderModuleDescriptor : GPUObjectDescriptorBase {
  required USVString code;       <========---------- string
  ....
};

A template literal generates a string

const a = 'foo';
const b = `foo`;
const c = 'f' + 'oo';
const d = `f${'oo'}`;
const x = 'oo';
const e = `f${x}`;

a, b, c, d, and e are exact the same. They are all a string with the contents 'foo'

As for doing things like includes, preprocessing is explicitly out of scope. The topic is complex and the solution is to provide your own preprocessor with the features you personally want.

In C/C++ land people want #include to read a file at compile time. There is no compile time for JavaScript so that's not an option. Making a network call for some file is also arguably bad for a spec that's supposed to work in all kinds of environments. So, it's left to you.

• If want your include to call out to the network, you can write that.
• If you want some build step to include files as part of a builder like rollup or webpack or esbuild then you can make that.
• If you want named snippets like three.js then you can do that.
• If you want a full on macro based preprocessor for making shader DSLs you could do that.

At some point, maybe one of the preprocessors will become common.

Here's one

https://github.com/toji/wgsl-preprocessor

As a example of an extremely simple build time preprocessor, the webgpu-samples rollup based builder defines a wgsl rule that takes a text file with raw WGSL inside and converts it to

export default `<content-of-wgsl-file>`;

at build time. It doesn't do any other preprocessing, but it's an example of making a build time rule where you could add more preprocessing if you want