Show error message when applying shader to different GL context

[aferriss]

Nature of issue?

Using the same shader more than once causes either nothing or an odd looking tessellated plane to be rendered on the screen. I made an alpha editor sketch to show the issue.

The use case I'm imagining for using the same shader more than once is when you want to do some kind of multi-pass effect like a gaussian blur. It would be great to just write one shader that you could pass a direction uniform to, rather than have two separate shaders with almost exactly the same code.

A simple workaround is just to make two shader variables with the same shader source. WebGL doesn't spit out any errors as far as I can tell. Though it does say something whever I use createCapture with a shader and a createGraphics layer. Error: WebGL warning: drawElements: Active texture 0 for target 0x0de1 is 'incomplete', and will be rendered as RGBA(0,0,0,1), as per the GLES 2.0.24 $3.8.2: The dimensions of level_base are not all positive.

• Found a bug
• Existing feature enhancement
• New feature request

Most appropriate sub-area of p5.js?

• Color
• Core/Environment/Rendering
• Data
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Which platform were you using when you encountered this?

• Mobile/Tablet (touch devices)
• Desktop/Laptop
• Others (specify if possible)

Details about the bug:

• p5.js version: 0.6.1
• Web browser and version: Chrome 66 and Firefox 60
• Operating System: Linux / Ubuntu 16.04
• Steps to reproduce this: https://alpha.editor.p5js.org/aferriss/sketches/r1NNRmSRM

[aferriss]

Possibly related to this, I've also noticed that p5 won't let you use createShader() if you're not in WebGL mode on the main canvas, even if you have some WebGL createGraphics layers initialized. You can however do:

let layer, shade;
function setup(){
  createCanvas(400,400);
  layer = createGraphics(400,400,WEBGL);
  shade = layer.createShader(vertSrc, fragSrc);
}

However, if you try to use the shader with anything but the layer it was created with, you'll get that same oddly tessellated plane. So this wouldn't work:

let layer, secondLayer, shade;
function setup(){
  createCanvas(400,400);
  layer = createGraphics(400,400,WEBGL);
  secondLayer = createGraphics(400,400,WEBGL);

  shade = layer.createShader(vertSrc, fragSrc);
}

function draw(){
  secondLayer.shader(shade);
  rect(0,0,width, height);
}

Here's another alpha editor example

[Spongman]

im not sure, but I don't think the browser will let you use a WebGL program in a different context than the one it was created in. There should probably be some better error messages here.

[aferriss]

@Spongman I think you're correct but is createGraphics() creating a new GL context or is it creating a framebuffer? I was assuming a framebuffer but if it's an entirely new context then yes an error message would be great.

[lmccart]

@aferriss it's creating a new context, so we can add an error message here

[kjhollen]

thanks for testing out the shader stuff @aferriss! let us know what else you find.

[aferriss]

@lmccart thanks :D

[kjhollen]

Updated title to reflect work needing to be done!

[aferriss]

I was also thinking about this recently. Is there a reason why we couldn't implement something that would keep a global list of the loaded shaders, and duplicate them when needed for additional contexts? How does this work currently? It looks to me like the renderer of the shader isn't set until shader() is called but I haven't looked into it too deeply.

I know that creating and compiling shaders can be a blocking operation, but if it only needs to happen once I think it might not be an issue.

Also it looks like some day in the future this might work with the shared resources webgl spec (though that day is not today sadly)