# Black textures since r135

**URL:** <https://discourse.threejs.org/t/black-textures-since-r135/55798>\
**Category:** Questions\
**Tags:** textures\
**Created:** [September 8, 2023, 1:47pm UTC](https://discourse.threejs.org/t/black-textures-since-r135/55798 "2023-09-08T13:47:32Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Everade](https://avatars.discourse-cdn.com/v4/letter/e/b5ac83/32.png) [@Everade](https://discourse.threejs.org/u/Everade)\
**Post date:** [September 8, 2023, 1:47pm UTC](https://discourse.threejs.org/t/black-textures-since-r135/55798/1 "2023-09-08T13:47:32Z")

</div>

Ever since i’ve updated my three.js from r128 to (initialy) 149 and beyond, the textures of my effect were no longer showing up. This has been an ongoing issue for over a year now and i can’t seem to figure out what’s wrong.

The issue can be found here, when clicking on any of the 3 images:

> **[Portfolio](https://pixelglance.com/portfolio.html)**
>
> The portfolio covers all of my latest designs.

I believe it’s related to the changes that took place in r135, so textures could no longer be resized if already initialized prior.  
Similiar to this report here i’ve had the same error:

> [@GL\_INVALID\_VALUE: Offset overflows texture dimensions](https://discourse.threejs.org/t/gl-invalid-value-offset-overflows-texture-dimensions/35561):
>
> Hi everyone, Something weird happened with my code… It was working perfectly 2 weeks ago and then I decided to reopen the project and I have this error with textures dimensions and image incomplete… any idea where it could come from? The two errors: [.WebGL-0x4c020e4000] GL\_INVALID\_VALUE: Offset overflows texture dimensions. THREE.WebGLRenderer: Texture marked for update but image is incomplete

And it seems that it was also caused by calling “.needsUpdate” just like in that support case.  
Commenting those specific entries got rid of the warnings, but the black textures persist.

The original code i’ve used can be found here:  
GridToFullscreen 1.0.0 [GitHub - Anemolo/GridToFullscreenAnimations: A set of grid-to-fullscreen animations with three.js](https://github.com/Anemolo/GridToFullscreenAnimations)

I’ve solely updated it for gsap3 and latest three.js compatibility with very minor changes.  
But must have missed something with three.js so that the textures are no longer showing during the animation phase.

---

<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:** [September 9, 2023, 8:50am UTC](https://discourse.threejs.org/t/black-textures-since-r135/55798/2 "2023-09-09T08:50:47Z")

</div>

How about filing an issue at [GitHub - Anemolo/GridToFullscreenAnimations: A set of grid-to-fullscreen animations with three.js](https://github.com/Anemolo/GridToFullscreenAnimations) and ask the original author to upgrade the project to the latest version of `three.js`? It seems the effect was originally written against `r104`.

---

<div class="post-metadata">

**Author:** ![Everade](https://avatars.discourse-cdn.com/v4/letter/e/b5ac83/32.png) [@Everade](https://discourse.threejs.org/u/Everade)\
**Post date:** [September 9, 2023, 9:57am UTC](https://discourse.threejs.org/t/black-textures-since-r135/55798/3 "2023-09-09T09:57:41Z")

</div>

I’ve opened an issue now. Just note that I’ve updated the specific portion i use already, so if the author follows the update steps given by three.js and gsap patch notes he will almost certainly run into the exact same issue. Which will bring me back here eventually.

It was fully functional with three.js r128 and broke when i updated to r149. Now using r156.1 though.

Would be really appreciated if you could take a look.

---

<div class="post-metadata">

**Author:** ![gkjohnson](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gkjohnson/32/2298_2.png) [@gkjohnson](https://discourse.threejs.org/u/gkjohnson)\
**Post date:** [October 6, 2023, 1:11am UTC](https://discourse.threejs.org/t/black-textures-since-r135/55798/4 "2023-10-06T01:11:52Z")

</div>

> It was fully functional with three.js r128 and broke when i updated to r149

Over 20 releases is a fairly big jump. That’s almost two years of updates. It would be best to incrementally try new versions between those two to pinpoint where it broke and check the migration guide for the given release.

---

<div class="post-metadata">

**Author:** ![Everade](https://avatars.discourse-cdn.com/v4/letter/e/b5ac83/32.png) [@Everade](https://discourse.threejs.org/u/Everade)\
**Post date:** [October 6, 2023, 2:24am UTC](https://discourse.threejs.org/t/black-textures-since-r135/55798/5 "2023-10-06T02:24:54Z")

</div>

I’ve created a pull request which includes all library updates for anyone who’s interested into testing it or is willing to help me out.

> <https://github.com/Anemolo/GridToFullscreenAnimations/pull/2>
>
> \* Updated TweenLite (gsap)v2.1.3 to gsap v3.12.2
> This also resolves a possib…le security vulnerability
> Removed CSSPlugin.min.js which is now part of gsap v3
> Removed EasePack.min.js as it appears to be unused
> \* Updated three.js from v104 to v156.1
> \* Updated GridToFullscreenEffect.js to accomodate gsap and three.js changes
> \* Updated imagesLoaded from v4.1.1 to v5.0.0

@gkjohnson  
Yea might be worth a try. Might look into it later this year.

---

<div class="post-metadata">

**Author:** ![Everade](https://avatars.discourse-cdn.com/v4/letter/e/b5ac83/32.png) [@Everade](https://discourse.threejs.org/u/Everade)\
**Post date:** [December 23, 2023, 4:35pm UTC](https://discourse.threejs.org/t/black-textures-since-r135/55798/6 "2023-12-23T16:35:08Z")

</div>

Unfortunately the creator is not interested into updating his project, even with offering a pull request of all my library updates.

I still believe the issue is related to .needsUpdate no longer being supported since r135.  
Are there any workarounds for .needsUpdate, or how am i supposed to update the texture now that this feature has been removed?

Currently the needsUpdate portion is commented, but that’s how it worked before.

```javascript
  createTextures(images) {
    const textures = [];
    for (let i = 0; i < images.length; i++) {
      const imageSet = images[i];
      const largeTexture = new THREE.Texture(imageSet.large.image);

      // So It doesnt get resized to the power of 2
      largeTexture.generateMipmaps = false;
      largeTexture.wrapS = largeTexture.wrapT = THREE.ClampToEdgeWrapping;
      largeTexture.minFilter = THREE.LinearFilter;
      //largeTexture.needsUpdate = true;
      const smallTexture = new THREE.Texture(imageSet.small.image);
      smallTexture.generateMipmaps = false;
      smallTexture.wrapS = smallTexture.wrapT = THREE.ClampToEdgeWrapping;
      smallTexture.minFilter = THREE.LinearFilter;
      //smallTexture.needsUpdate = true;
      const textureSet = {
        large: {
          element: imageSet.large.element,
          texture: largeTexture
        },
        small: {
          element: imageSet.small.element,
          texture: smallTexture
        }
      };

      textures.push(textureSet);
    }
    this.textures = textures;
    this.setCurrentTextures();
  }

```

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [December 23, 2023, 9:18pm UTC](https://discourse.threejs.org/t/black-textures-since-r135/55798/7 "2023-12-23T21:18:58Z")

</div>

`texture.needsUpdate` hasn’t been removed, and [remains supported](https://threejs.org/docs/?q=texture#api/en/textures/Texture.needsUpdate) in newer releases. Perhaps there’s something more subtle happening here, like setting `.needsUpdate` before the texture data has loaded? If it’s still not working, a minimal reproducible example would be helpful.

---

<div class="post-metadata">

**Author:** ![Everade](https://avatars.discourse-cdn.com/v4/letter/e/b5ac83/32.png) [@Everade](https://discourse.threejs.org/u/Everade)\
**Post date:** [January 17, 2024, 10:18pm UTC](https://discourse.threejs.org/t/black-textures-since-r135/55798/9 "2024-01-17T22:18:27Z")

</div>

Was able to fix it, it was actually related to texture.needsUpdate and r135 as expected.

I used the workaround as described here:

> [@GL\_INVALID\_VALUE: Offset overflows texture dimensions](https://discourse.threejs.org/t/gl-invalid-value-offset-overflows-texture-dimensions/35561/9):
>
> Do it like so for now: [Img Texture - JSFiddle - Code Playground](https://jsfiddle.net/qmy2tj7w/1/) You are running into the following issue: You potentially have to update your GLSL since the shader always uses the natural dimensions of your texture. Not the dimensions defined via CSS.