texSubImage2D: ArrayBufferView not big enough for request

Hey guys,

I’m trying to make this example work without parcel and node, have everything in one file now just for the sake of the example, but I cannot get it work. I’m pretty sure I’m just missing something super obvious to you guys
Link to my version.
I’m getting this error now:
WebGL: INVALID_OPERATION: texSubImage2D: ArrayBufferView not big enough for request

And I have no more idea where to go from here. Any help is greatly appreciated!

Hi ! I’m facing the exact problem with this tutorial… Did you find a solution? Currently working on it

@niklas Are you using the same three.js version like the tutorial or a higher one?

This error mean that texture data have few values.
Example: texture must have 4 chanells - rgba.
But in code we send only one channel - red and gets error.
Or different format of main texture and sended texture → THREE.RGBAFormat and THREE.RedFormat

1 Like

I’m currently using the last one !

Does it work if you use r136? That’s the version according to the respective GitHub repository.

Looking at the code of the example, it can’t work with latest three.js versions since it relies on THREE.RGBFormat which has been removed with r137. So the logic requires a minor rewrite since it has to manage a RGBA data texture (and not just RGB).

Maybe it’s best to file an issue at GitHub - akella/DistortedPixels and ask the original developer for an upgrade to the latest three.js version.

Actually yes I also noticed this change with the latest version - I modified the RGB to RGBA and it created the error.

I’ll probably file an issue on GitHub for this update.

But the answer of @Chaser_Code helped a lot - it’s working now even tho there are some pixels of the image not showing but i’ll check this out