WebGL issues when running react three fiber project

[bellem3re]

Hi guys,

I'm trying to run code locally on my machine based off of an example I was given by someone in this community on a previous thread:
https://codesandbox.io/s/canvas-animated-texture-10p7ws

However when I run this code locally I'll sometimes warnings that prevent the cube from rendering properly:

When it should look like this:

Any pointers as to why this might be happening? A hunch that i have is that it might have something to do with the textureRef.current.needsUpdate on line 94.

[mwmwmw]

The error says "destination error bad dimensions"

From the error and looking at the cube, I can tell you need to set the canvas size to something that is a power of 2.

Ensuring that the canvas texture has the same width and height should fix the error.

In the original code,

There is a constant set for the texture size.

Line 13: const canvasSize = 512;

and the canvas size is set in a useEffect in GridBox

Starts on Line 95

  useEffect(() => {
    const canvas = canvasRef.current;
    canvas.width = canvasSize;
    canvas.height = canvasSize;
  });

[bellem3re]

Hello again! hahaha

Hm got it - however the canvas size is exactly the same as shown in your example. It's set to 512, and nothing has changed. On my machine, it's essentially a copy and paste of your example. Sometimes it renders properly and sometimes it doesn't

I'm using NextJS, if that helps at all. I cloned your example as a vanilla react project and it works wonderfully. However my project needs to be in NextJS for other reasons and this error only happens in the next project. Could be a red herring, though.

[mwmwmw]

That sounds suspiciously like a race condition.

But the canvas size is definitely the source of the error.

I update the code so that the canvas size gets set in the useFrame instead of in a useEffect.

Copy it again, and see if that works.

[bellem3re]

it works! saved yet again. Can you explain why useframe would work instead of useEffect? is it because sometimes the useFrame callback will get called before the useEffect callback?

[mwmwmw]

Exactly, the useEffect doesn't get time to set the canvas size before the rendering starts.

Which makes sense, and is odd that I don't see the same error.