Environment mapping

p5.js Coding Questions
1

Hi, I’m trying to use cubemaps in P5, they seem to work OK if I get the gl context, like

 const IDcanvas = document.getElementById("canvas");
  gl = IDcanvas.getContext("webgl");

… and do the OpenGL TEXTURE_CUBE_MAP stuff with gl using WebGL commands.
But that’s not the question.
If I have this…

    gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
   gl.texImage2D(target, level, internalFormat, format, type, faceTex);
    gl.generateMipmap(gl.TEXTURE_CUBE_MAP);

Each faceTex is an loaded texture, which is a JS Image
But I want faceTex to be a createGraphics context. So, how to I render each face myself before it gets used as a skybox. Is there a good way of getting WebGL to recognise an off-screen graphics buffer as a WebGL texture please?

Thanks.
Dave H

2

Hi @DaveH,

lean back and enjoy one of Dan’s Tutorials

And … as you see the function texImage2D expects a pixelarray …

texImage2D(target, level, internalformat, format, type, pixels)

means you can use …

buffer = createGraphics(...,WEBGL);
// paint stuff
buffer.loadPixels();
gl.texImage2D(..., buffer.pixels);

as an input for it …

Cheers
— mnse

1 Like
3

Thanks for the reply, mnse. I’ve enjoyed Dan’s videos, but he doesn’t cover cubemaps, as it’s not in p5, or processing. I didn’t realise the pixel format could be a simple array of data though, that’s brilliant. I will try that today.

4

It turns out I needed the width and height using this one…

gl.texImage2D(target, level, internalFormat, widthT, heightT, 0, format, type, graphics.pixels)

Everything is great now thanks for the help.

Dave H.

5

Sure, as it needs to know how the pixels are structured in the pixels array to transfer it from 1D to 2D. Accidently copied the wrong from the reference page … :roll_eyes:

6

The link was actually correct. Sorry, I’ll tick the little box for you! :smiley:

7

thx! I meant line … :slight_smile: