WebGL export flickers black on resizing

Report · Feb 27, 2018

We are currently using a WebGL exported animation in a webpage that we want to be responsive. Out of the box the exported WebGl code doesn't seem to support this functionality so I have had to use the inbuilt setViewport and setLocalTransform functions to achieve the responsive scaling.

This works well, however it appears that the code sometimes causes the canvas to turn black and throws a heap of errors when being resized.

This is from build 18.0.0.107

[Error] WebGL: INVALID_ENUM: activeTexture: texture unit out of range
activeTexture
Df (flwebgl-0.2.min.js)
jh (flwebgl-0.2.min.js)
e (flwebgl-0.2.min.js)
Fj (flwebgl-0.2.min.js)
Cl (flwebgl-0.2.min.js)
sf (flwebgl-0.2.min.js)

[Error] WebGL: INVALID_VALUE: uniform1i: invalid texture unit
uniform1i
uniform1i (flwebgl-0.2.min.js)
Rg (flwebgl-0.2.min.js)
e (flwebgl-0.2.min.js)
e (flwebgl-0.2.min.js)
Fj (flwebgl-0.2.min.js)
Cl (flwebgl-0.2.min.js)
sf (flwebgl-0.2.min.js)

I've tried to make sure the resizing is happening before a frame is rendered and other ways to try work around the issue but nothing has worked so far.

We have tried the CreateJs export but this is far to performance intensive for our intended purpose.

The SVG export just hangs and doesn't complete not matter how long we leave it. So it would seems we are only left with the WebGL for now.

Hopefully someone can shed some light on how to resolve this.

Report · Mar 01, 2018

Hi.

My best guess is that it has to do with canvas size and/or the viewport size. I only get this weird black screen when scaling to small or large values.

Maybe you could try to limit the the width and the height.

Report · Mar 01, 2018

Hey,

Yeah it does seem to happen at smaller or larger sizes more than anything but i have had it happen at all values. It does work when it's initialised at any size however, so i believe it's something in the logic of setting the viewport?

Limiting the size would ruin the responsiveness we are after so it's not a great solution unfortunately.

Report · Mar 01, 2018

Not really a solution, but may help.....

Using threejs (webgl) and html5 canvas ( Within Animate CC ).

You need to refresh ( pretty much re-initialise the render with the new canvas values ) once resized to limit any weirdness with the drawingbuffer. (As the drawingbuffer then sends its content back to the composer that then places the content onto the webpage being rendered on screen, so if the two are not in sync weirdness happens)

You normally handle this by creating an event listener for "onWindowResize" and set a function to update the render.

or call "resizeCanvas" if using a render loop.

Some guys have had luck just by enabling "preserveDrawingBuffer" but its has a bit of a performance cost.

Regards,