If you want to write custom shaders for BabylonJS, you can either using Material Plugins or Node Materials. I find Material Plugins very hacky so I prefer Node Materials. However they tend to be a pain to write.
Enter BSL: a thin wrapper around the Node Material API to make it easier to read and write!
Instead of writing this:
const uv = new InputBlock("uv");
uv.setAsAttribute("uv");
const albedoTexture = new TextureBlock("albedoTexture");
albedoTexture.target = NodeMaterialBlockTargets.Fragment;
albedoTexture.convertToLinearSpace = true;
albedoTexture.texture = Textures.CRATE_ALBEDO;
uv.output.connectTo(albedoTexture.uv);
write that:
const uv = BSL.vertexAttribute("uv");
const albedoTexture = BSL.textureSample(Textures.CRATE_ALBEDO, uv, { convertToLinearSpace: true });
As you can see the BSL version is much more glsl-like and easier to read and reason about.
Instead of writing this:
const factor = new InputBlock("Mesh UV scale factor");
factor.value = new Vector2(2, 10);
const scaledUV = new MultiplyBlock("scaledMeshUV");
uv.output.connectTo(scaledUV.left);
factor.output.connectTo(scaledUV.right);
Write that:
const factor = BSL.vec(new Vector2(2, 10));
const scaledUV = BSL.mul(uv, factor);
The wrapper in self-contained in a single file, so you can either copy paste it in your code base or install it as a package:
npm install babylonjs-shading-language
Then, import it in your code:
import * as BSL from "babylonjs-shading-language";
You can find the documentation of the latest version here.
For specific versions, you can build the documentation locally with npm run docs and open the docs/index.html file in your browser.
I only wrapped the features that I need for my own projects, you may need to use the raw API for more advanced features. Don't worry you can use both at the same time!
I am always open to PRs to add more features to BSL so that we eventually reach feature parity with the raw API.