# Environment mapping

**URL:** <https://discourse.processing.org/t/environment-mapping/37678>\
**Category:** Coding Questions\
**Created:** [June 21, 2022, 10:13pm UTC](https://discourse.processing.org/t/environment-mapping/37678 "2022-06-21T22:13:07Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![DaveH](https://avatars.discourse-cdn.com/v4/letter/d/85e7bf/32.png) [@DaveH](https://discourse.processing.org/u/DaveH)\
**Post date:** [June 21, 2022, 10:13pm UTC](https://discourse.processing.org/t/environment-mapping/37678/1 "2022-06-21T22:13:08Z")

</div>

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

```auto
 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…

```auto
    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

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [June 22, 2022, 5:48am UTC](https://discourse.processing.org/t/environment-mapping/37678/2 "2022-06-22T05:48:25Z")

</div>

Hi @DaveH,

lean back and enjoy one of [Dan’s Tutorials](https://youtu.be/3tTZlTq4Cxs)

And … as you see the function [texImage2D](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texImage2D) expects a pixelarray …

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

```

means you can use …

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

```

as an input for it …

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![DaveH](https://avatars.discourse-cdn.com/v4/letter/d/85e7bf/32.png) [@DaveH](https://discourse.processing.org/u/DaveH)\
**Post date:** [June 22, 2022, 8:22am UTC](https://discourse.processing.org/t/environment-mapping/37678/3 "2022-06-22T08:22:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![DaveH](https://avatars.discourse-cdn.com/v4/letter/d/85e7bf/32.png) [@DaveH](https://discourse.processing.org/u/DaveH)\
**Post date:** [June 22, 2022, 9:53am UTC](https://discourse.processing.org/t/environment-mapping/37678/4 "2022-06-22T09:53:35Z")

</div>

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

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

```

Everything is great now thanks for the help.

Dave H.

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [June 22, 2022, 2:58pm UTC](https://discourse.processing.org/t/environment-mapping/37678/5 "2022-06-22T14:58:58Z")

</div>

> [@DaveH](#):
>
> It turns out I needed the width and height using this one…
> 
> `gl.texImage2D(target, level, internalFormat, widthT, heightT, 0, format, type, graphic`

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 … 🙄

---

<div class="post-metadata">

**Author:** ![DaveH](https://avatars.discourse-cdn.com/v4/letter/d/85e7bf/32.png) [@DaveH](https://discourse.processing.org/u/DaveH)\
**Post date:** [June 22, 2022, 4:19pm UTC](https://discourse.processing.org/t/environment-mapping/37678/6 "2022-06-22T16:19:31Z")

</div>

> [@mnse](#):
>
> Accidently copied the wrong [link] from the reference page …

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

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [June 22, 2022, 5:21pm UTC](https://discourse.processing.org/t/environment-mapping/37678/7 "2022-06-22T17:21:44Z")

</div>

thx! I meant line … 🙂