Skip to main content
R
Roaming_Ant
Participant
February 27, 2018
Question

WebGL export flickers black on resizing

  • February 27, 2018
  • 1 reply
  • 723 views

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.

This topic has been closed for replies.

1 reply

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community Expert
Community Expert
March 1, 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.

R
Roaming_AntAuthor
Participant
March 2, 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.

    albertd9194959
    albertd9194959
    Inspiring
    March 2, 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,

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices