Tweakable Shader

Demos and projects
,
1

I made small package that makes it easy to create GUI for babylon js shader material’s uniform.

const shaderMaterial = new TweakableShader("shader-material", scene, {
  vertexShader: `precision highp float;
                attribute vec3 position;
                uniform mat4 worldViewProjection;

                void main() {
                    vec4 p = vec4(position, 1.);
                    gl_Position = worldViewProjection * p;
                }`,
  fragmentShader: `precision highp float;
                uniform vec3 color; // ts({ value: {r: 0, g: 255, b: 214, a: 0.5} })
                uniform float brightness; // ts({ value: 1.0, min: 0, max:1.0, step: 0.1 })
                void main() {
                    gl_FragColor = vec4(color , brightness);
                }`,
  needAlphaBlending: true,
});

This above code snippet will give you this result
tweakbale (2)

Based on glsl code and special comments it creates a GUI panel to tweak the uniforms.

Github Repo
npm

6 Likes
2

This is neat !!!

1 Like
3

Super cool! How do I get that into a Playground?

edit #1
I even asked my good friend Chat GPT but could not get a working scene, tweakable shader seems to be an external resource I don’t have

edit #2
Don’t listen to me, I get it now. NPM package. Not really Playground compatible

4

You can use it in playground like this

edit : Though tweak pane is in bit awkward position, I need to see if it can be made draggable

5

Thanks : )

6

Whoa! You are awesome! Thx!!!

1 Like
7

I’ve been looking through your TweakableShader index.js and must say your code is immaculate. Modern JavaScript at its finest. I thought I was getting proficient with JavaScript, but now I feel like I need to go back to school, lol.

Where’d you learn how to code like that? Are you a professional developer?

8

Cool, you could use this.constructor.name as the shader name instead of hardcoding customShader. As a side benefit, it could also support more than one shader that way too

9

Actually you shouldn’t follow my code for best practices, I don’t have good command over OOP paradigm since I started with react as soon as I finished JavaScript basics and been working as react js developer since couple of years (which is also my total professional experience). So tbh I won’t be able to guide you towards the resources to learn JavaScript. I guess the way I learned (anything that I learned) is through building stuff and I strongly believe in that. Best of luck : )

1 Like
10

Here { vertex: "custom", fragment: "custom", } ,right?

11

Totally agree

1 Like
12

Yea and the shader store’s “customFragment” and “customVertex”, which corresponds to “custom”. Naming in the shader class is pretty annoying and confusing.

.https://github.com/bhushan6/tweakable-shader/blob/91376eef25fa67877464feb2de6591750e56d6bd/package/src/index.js#L70

.https://github.com/bhushan6/tweakable-shader/blob/91376eef25fa67877464feb2de6591750e56d6bd/package/src/index.js#L76

I think just those 4 spots. (Im on my phone)

I would put some private variable on the class and assign it in the constructor like maybe

class TweakableShader {

_constructorName

constructor(){
this._constructorName = this.constructor.name
}

Shaderstore[this._constructorName] = …
}

(Forgive any typos)

1 Like
13

oh understood, Thanks. I didn’t know that and also missed it while reading docs I guess. Cool, will make those changes.