using custom shaders

[boyswan]

Is there currently a way to run custom shaders?

[Schmavery]

I think @bsansouci was playing with this at some point but we don't have any official support. Any idea of what kind of shader you would need or what kind of api you'd hope for?

[boyswan]

I have a simple example in processing"

void setup() {
  shader = loadShader("shader.glsl");
  canvas = createGraphics(640, 260, P2D);
  canvas.shader(shader);
  ...
}

 void draw() {
  shader.set("mouseX", mouseX);
  shader.set("mouseY", mouseY);
  canvas.beginDraw();
  canvas.image(kinect.getVideoImage(), 0, 0, 640, 260);
  canvas.filter(shader)
  ... 
}

Slightly pseudo-codey but a rough idea of something I'd be hoping for:

open Reprocessing;

let setup = (env) => {
  Env.size(~width=200, ~height=200, env);
};

let shader = {|
  attribute float time;
  attribute float mouseX;
  void main(void) {
    gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;
  }
|};

let shader1 = Shader.make(~shader);

let draw = (_state, env) => {
   shader1.set(~name="time", ~value=0.0);
   shader1.set(~name="mouseX", ~value=0.0);
   Draw.background(Constants.black, env);
   Draw.fill(Constants.red, env);
   Draw.rect(~pos=(50, 50), ~width=100, ~height=100, env);
   Shader.add(shader1);

 };

 run(~setup, ~draw, ());

[bsansouci]

Thanks for the code snippet. I think @Schmavery meant more: what are you trying to do that requires a shader? What kind of visual effect are you doing that can’t be done with the current setup.

[Schmavery]

Do you find that the shader.set api gives you enough flexibility to implement everything you need? Or do we also need to be able to add arbitrary data to shapes that get drawn/change their structure etc?

One challenge is that if we do this, we have to pick a glsl version to expose and probably stick with it. IIRC there are also some minor differences between web and native glsl that we had to work around. I'm not against exposing this api as a tool for advanced users if it's able to cover most usecases but I'd love to see some examples of what sort of things you could do with it :)

We used to have dreams of a glsl-like language for writing shaders written in an ocaml dsl or ppx that would typecheck at runtime haha.. but that sounds like a good thing to leave on the backburner lol.

[Schmavery]

Saving relevant link here for me to read through later: https://github.com/processing/processing/blob/master/core/src/processing/opengl/PGraphicsOpenGL.java#L6059