Getting a strange error while using shader

p5.js Coding Questions
1

Am getting a very strange error when I use shader in my sketch.

Uncaught TypeError: Cannot read property 'isP3D' of undefined (sketch: line 5)

and this is the code

let img;

function preload(){
   img = loadImage('https://source.unsplash.com/random/1920x1080');
  magnify = createShader('shader/MagnifyingShaderVert.vert', 'shader/MagnifyingShaderVert.frag');  
  antialias = createShader('shader/FXAAShaderVert.vert', 'shader/FXAAShaderVert.frag');
}

function setup() {
  createCanvas(innerWidth, innerHeight, WEBGL);
  
  imageMode(CENTER);
}

function draw() {
  image(img, 0, 0);
  
  noLoop();
}

Any help appreciated.

1 Like
2

More on the JavaScript error:

1 Like
3

Looks like it could be a problem with loading the shader but it’s hard to tell just from the error. This is kind of a guess but you might need to use loadShader() instead of createShader() if the shader is in another file. I would recommend trying to get an example from this book working in p5js and then add your own shader.

2 Likes
4

Thanks for the info mate !

5

This is what I was looking for ! That template and docs for integrating shaders in P5 are just awesome !

However, I just noticed that am getting significantly low FPS on Firefox (16-20) compared to Chrome(60). I am making some computations on P5 side. Is P5 hindering FPS on Firefox ?

2 Likes
6

I would guess it has to do with the JavaScript engine in firefox rather than something you’re doing. You can read more about it here. I’ve found that the performance of WebGL is very dependent of the device you use, while it often works great on my laptop it hardly works on my old phone.

2 Likes