Environment mapping

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);

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?

Dave H

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
gl.texImage2D(..., buffer.pixels);

as an input for it …

— mnse

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.

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.

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:

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

thx! I meant line … :slight_smile: