Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

using custom shaders #99

Open
boyswan opened this issue Jun 20, 2018 · 5 comments
Open

using custom shaders #99

boyswan opened this issue Jun 20, 2018 · 5 comments

Comments

@boyswan
Copy link

boyswan commented Jun 20, 2018

Is there currently a way to run custom shaders?

@boyswan boyswan changed the title shaders using custom shaders Jun 20, 2018
@Schmavery
Copy link
Owner

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
Copy link
Author

boyswan commented Jul 11, 2018

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
Copy link
Collaborator

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
Copy link
Owner

Schmavery commented Jul 12, 2018

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
Copy link
Owner

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

@Schmavery Schmavery mentioned this issue Jul 27, 2018
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants