# BoxGeometry materials order/orientation issue

**URL:** <https://discourse.threejs.org/t/boxgeometry-materials-order-orientation-issue/54769>\
**Category:** Questions\
**Tags:** textures, materials\
**Created:** [August 8, 2023, 9:17am UTC](https://discourse.threejs.org/t/boxgeometry-materials-order-orientation-issue/54769 "2023-08-08T09:17:20Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![electric.cicada](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/electric.cicada/32/34971_2.png) [@electric.cicada](https://discourse.threejs.org/u/electric.cicada)\
**Post date:** [August 8, 2023, 9:17am UTC](https://discourse.threejs.org/t/boxgeometry-materials-order-orientation-issue/54769/1 "2023-08-08T09:17:20Z")

</div>

Hi, I generate 6 images in a web worker and use them as follows:

```javascript
const segments = 10;
const geometry = new BoxGeometry(1, 1, 1, segments, segments, segments);
const materials: MeshBasicMaterial[] = [];

for (let i = 0; i < 6; i++) {
  // bitmaps is an array of ImageBitmap, transferred from the web worker
  const map = new CanvasTexture(bitmaps[i]);
  map.minFilter = LinearFilter;
  map.colorSpace = SRGBColorSpace;
  
  materials.push(
    new MeshBasicMaterial({
      side: BackSide,
      transparent: true,
      depthWrite: false,
      opacity: 0.8,
      blending: AdditiveBlending,
      map
    })
  );
}

const mesh = new Mesh(geometry, materials);

```

When I display the images in order (the `bitmaps` array element order is `px,nx,py,ny,pz,nz`), I get a correct cube map:

 ![cubemap](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/3/336c395a9f32a387c2980a43e7c5ecaa55231c14.jpeg)

But when I render the cube, it’s messed up:

 ![cube](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/a/da2047d09f6e00473c0e1b8744e49e9ebfa2e500.jpeg)

What am I doing wrong here? 😐

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 8, 2023, 9:19am UTC](https://discourse.threejs.org/t/boxgeometry-materials-order-orientation-issue/54769/2 "2023-08-08T09:19:52Z")

</div>

Can you try to create a `CubeTexture` based on your images and apply it to the `envMap` material property instead? Check out how [webgl\_materials\_envmaps](https://threejs.org/examples/#webgl_materials_envmaps) does it.

---

<div class="post-metadata">

**Author:** ![electric.cicada](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/electric.cicada/32/34971_2.png) [@electric.cicada](https://discourse.threejs.org/u/electric.cicada)\
**Post date:** [August 8, 2023, 10:07am UTC](https://discourse.threejs.org/t/boxgeometry-materials-order-orientation-issue/54769/3 "2023-08-08T10:07:57Z")

</div>

Thanks for your reply @Mugen87, I was thinking about it, but I can’t seem to find a way to create a `CubeTexture` directly from the `ImageBitmap`s, as far as I can see it only accepts image object, which means that I have to loop through all the ImageBitmaps, draw them on a canvas, then create a new image from the canvas’ `toDataURL()`. If that’s the only way, then I guess I will go with that of course 🙂

My confusion is coming from the fact, that before I moved the texture generation to the web worker, it was something like this:

```javascript
for (let i = 0; i < 6; i++) {
  material.uniforms.uIndex.value = i;

  maps.push(
    new THREE.MeshBasicMaterial({
      side: THREE.BackSide,
      transparent: true,
      depthWrite: false,
      opacity,
      map: cubeMap.getMap(material)
    })
  );
}

```

where `cubeMap.getMap(material: ShaderMaterial)` would render a plane to a `WebGLRenderTarget` and return its `.texture`, and it was working fine, everything was correct.  
I’m using the exact same code in the worker for rendering the texture, just not to a render target, but to an `OffScreenCanvas`, that’s the first difference, the second one is using `CanvasTexture` for the map, instead of `Texture`. Maybe one of these causes the issue?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 8, 2023, 11:05am UTC](https://discourse.threejs.org/t/boxgeometry-materials-order-orientation-issue/54769/4 "2023-08-08T11:05:43Z")

</div>

Any chances to share a live example that shows what you are doing? I would like to experiment a bit with this issue.

---

<div class="post-metadata">

**Author:** ![electric.cicada](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/electric.cicada/32/34971_2.png) [@electric.cicada](https://discourse.threejs.org/u/electric.cicada)\
**Post date:** [August 8, 2023, 11:19am UTC](https://discourse.threejs.org/t/boxgeometry-materials-order-orientation-issue/54769/5 "2023-08-08T11:19:48Z")

</div>

Definitely, I will put something together soon, thank you!

---

<div class="post-metadata">

**Author:** ![electric.cicada](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/electric.cicada/32/34971_2.png) [@electric.cicada](https://discourse.threejs.org/u/electric.cicada)\
**Post date:** [August 8, 2023, 2:27pm UTC](https://discourse.threejs.org/t/boxgeometry-materials-order-orientation-issue/54769/6 "2023-08-08T14:27:13Z")

</div>

@Mugen87 so here’s a working example, maps rendered correctly: [box-cube-map-main-thread](https://codepen.io/electric-cicada/pen/yLQrZxb)

And the other one (I skipped the web worker part, but I think it still demonstrates it well): [box-cube-map-worker](https://codepen.io/electric-cicada/pen/jOQRRoN)

---

<div class="post-metadata">

**Author:** ![electric.cicada](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/electric.cicada/32/34971_2.png) [@electric.cicada](https://discourse.threejs.org/u/electric.cicada)\
**Post date:** [August 8, 2023, 3:32pm UTC](https://discourse.threejs.org/t/boxgeometry-materials-order-orientation-issue/54769/7 "2023-08-08T15:32:44Z")

</div>

So, after digging a bit more, noticing that `flipY = false` makes no difference at all, and somehow stumbling upon `ImageBitmapLoader` and this text:

> Note that Texture.flipY and Texture.premultiplyAlpha with ImageBitmap are ignored. ImageBitmap needs these configuration on bitmap creation unlike regular images need them on uploading to GPU.

I went ahead and modified the example, so the `ImageBitmap` is flipped (unfortunately it adds Promises and some extra steps into the mix) and it solves the issue: [box-cube-map-worker-flip](https://codepen.io/electric-cicada/pen/dyQLEjw) 🥳