munshkr / flok

Web-based P2P collaborative editor for live coding sounds and images
https://flok.cc
GNU General Public License v3.0
244 stars 37 forks source link

[Hydra] WEBGL mode in P5js #277

Open aaronsherwood opened 2 months ago

aaronsherwood commented 2 months ago

Can't seem to get webgl mode to work when using p5js shaders in Hydra: Uncaught Error: shader() is only supported in WEBGL mode. Here is the code:

p5 = new P5({width: window.innerWidth, height:window.innerHeight, mode: 'WEBGL'})
shader = p5.loadShader("https://raw.githubusercontent.com/aaronsherwood/liveCoding/main/Class_Examples/shaders/basic.vert", "https://raw.githubusercontent.com/aaronsherwood/liveCoding/main/Class_Examples/shaders/ocean.frag");

p5.pixelDensity(1);
p5.draw = () => {
  shader.setUniform("time", time * 0.3);
  shader.setUniform("resolution", [width, height]);
  shader.setUniform("mouse", [p5.mouseX, p5.mouseY]);
  p5.shader(shader);
  p5.rect(0, 0, width, height);
}
p5.hide();
s0.init({
  src: p5.canvas
})
src(s0).out()

This works fine in normal hydra, see here.

aaronsherwood commented 2 months ago

PS I had a version of flok-web 0.4.12 on my computer and in that version it works.

AakSin commented 2 months ago

Typing "WEBGL" as "webgl" in lowercase seemed to fix the issue on my end. The type definitions for p5 seem to all be using lowercase values.

image
munshkr commented 2 months ago

Thanks for reporting this. That's weird, maybe the bundled version of P5 that flok uses is different from the one Hydra uses. I'll take a look.