P5.js: Implement image() for webgl mode

[kjhollen]

Nature of issue?

• [ ] Found a bug
• [ ] Existing feature enhancement
• [x] New feature request

Most appropriate sub-area of p5.js?

• [ ] Color
• [ ] Core
• [ ] Data
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [x] WebGL
• [ ] Other (specify if possible)

Feature enhancement details:

image() only works in 2D mode currently, but it would be great for WEBGL mode, too. I think it could be implemented in a pretty straightforward way using other parts of the API: begin/endShape with vertex, and the p5.Texture cache in the renderer.

this is a nice self-contained issue and would be great for a new contributor who wants to write some webgl code. see: WebGL Module Architecture for relevant documentation.

[bomoko]

raises hand
I'd love to take a swing at this, if nobody else is working on it yet?

[lmccart]

go for it!

[Siiiimon]

the WebGL Module Architecture link might be borked...

[lmccart]

@Siiiimon thanks! updated

[mohhasbias]

Is this issue solved?
The status is still open.

[unjust]

yea what's the status of this?

[vedhant]

If no one is working on this currently, I am willing to contribute to this issue!

[bomoko]

Yeah, I'm not sure about the status of this - I submitted a PR (#2211) back in 2017, but nothing came of it. I'm going to close that since things have changed significantly since there form an architecture perspective and open it up for whomever is interested in addressing it.

[wanbinkimoon]

this feature is needed

[stalgiag]

Hi @vedhant work is very welcome on this issue. Do you still want to contribute to it?

[vedhant]

@stalgiag Yup certainly!

[vedhant]

I'm having a issue using beginShape() with texture().
I have opened up an issue for this. #3606

[stalgiag]

@vedhant responded in that issue!

[vedhant]

var img;
function preload() {
//any image not given in base64 format like data:image/png;base64,iVBORw0KGgoAA....
 img = loadImage('some_image.png');
}

function setup() {
  createCanvas(500, 500, WEBGL);
}

function draw() {
  background(153);
  rotateZ(frameCount * 0.01);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);

  texture(img);
  box(200, 200, 200);
}

@stalgiag I get an error when i try to render an non base64 image (data:image/png;base64,iVBORw...) using texture()

Error message
Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded

[stalgiag]

@vedhant I am a bit confused by what you mean. None of the working examples (manual test, reference, unit tests) for texture() use base64 images, but you are saying that only base64 images work for you? That error you are getting seems to be a cross-origin request error. Are you running your sketch on a local server?

[vedhant]

@stalgiag thanks! It was a cross-origin request error and I fixed it.