Transparente Gif not working as expected

[tinchoforever]

Hello everyone! I have tried the component using transparent gif and it seems that the material doesn't clean every frame and keeps all the frames while the animation continues. Any Idea why is this? Are there any work arounds or plans to fix it or where we can check to fix it?

Thanks!

his is the GIF http://belisario.herokuapp.com/belisariocorre_v01.gif

[tinchoforever]

`

``` ```

`

[mayognaise]

Hi @tinchoforever, sorry for late replying. I could reproduce the issue. I will debug it when I have time, though it's been hectic these days... :/

[aliy321]

is there another work around for this?

[mayognaise]

@tinchoforever @aliy321 hi! im so sorry for the late response. so i debugged and i could reproduce the issue. i assume it's how gif has made. it picks color different between previous and current frames and somehow this causes the error. i will debug more if i can make it work, but no guarantee if it is possible. thank you so much for your patient.

[keangame]

I just change aframe-gif-component.js as:

draw: function draw() {

      if (this.clearimg) {
        this.__ctx.clearRect( 0, 0, this.__width, this.__height);
    }else{
          this.__ctx.drawImage(this.__frames[this.__frameIdx], 0, 0, this.__width, this.__height);
          this.__texture.needsUpdate = true;
    }
      if (this.clearimg)
          this.clearimg = false;
     else
          this.clearimg = true;

  },

this may fix your problem.

[keangame]

maybe you can just clearRect before drawImage, for me it 's worked

[rttmax]

__draw: function __draw() { this.__clearCanvas(); this.__ctx.drawImage(this.__frames[this.__frameIdx], 0, 0, this.__width, this.__height); this.__texture.needsUpdate = true; } This is working for me.

[mayognaise]

@keangameThank you and I'm sorry for the late response. @rttmax Thank you so much for the response. It's a shame I didn't clear each frame... 😱 I will update this as soon as I get home.

[mayognaise]

hi @keangame @rttmax, do you mind to share the gif which actually works? I tried using the gif @tinchoforever shared and somehow it still didint work..

[rttmax]

i.e. http://i.stack.imgur.com/e8nZC.gif @tinchoforevers gif is working for me: <a-box position="0 0 0" width="1" height="1" depth="0" material="shader:gif;src:url(images/mouse.gif);" transparent="true" gif="" rotation="" scale="" visible="" geometry=""></a-box>

[wiseshrimp]

When I did this fix, this fixed transparent gifs but messed up non-transparent gifs. Did anyone find a fix to make both work?

Here's an example of what a non-transparent gif looks like. The smaller, black tesseracts are what it's supposed to look like. ^___^

[sambshapiro]

@wiseshrimp is right. Adding this.__clearCanvas(); to the draw function messes up non-transparent gifs.

I also tried this.__ctx.clearRect(0,0,this.__width,this.__height) but it has the same effect.

[kencessna]

Hi, sorry but I don`t get this working at all! I tried your basic script and the screen stays write even though the paths are correct. And when I build a scene with basic geo and map a gif on one of them it the object stays white too. Please help!

Thanks for developing all this! Cheers, Can

[tinchoforever]

Hello everyone with @rttmax fix works ;)

this.__clearCanvas(); this.__ctx.drawImage(this.__frames[this.__frameIdx], 0, 0, this.__width, this.__height); this.__texture.needsUpdate = true;

[tinchoforever]

You can check https://belisario.herokuapp.com/ and https://belisario.herokuapp.com/ar/index.html

[tinchoforever]

And the base is here https://github.com/tinchoforever/belisario.com.ar/blob/master/scripts/aframe-gif-shader.js

[sambshapiro]

@tinchoforever The fix only works if the gif is transparent; currently there is no solution that works for both transparent and non-transparent gifs.

[mayognaise]

Hi @rttmax I'm so sorry I didn't response when you give me the example. I totally missed your comment as I was busy at the moment. Thank you so much for fixing it. That's awesome.

@tinchoforever Thank you for sharing the link. However this link doesn't work for me. https://github.com/tinchoforever/belisario.com.ar/blob/master/scripts/aframe-gif-shader.js I guess maybe the repo is private?

@sambshapiro I'll integrate it and will make it work both transparent and not. Also the code is super old so will optimize it.. no more __ as standard..

@wiseshrimp Hmm I see.. I'm not sure if I can fix the issue..

[sambshapiro]

@mayognaise how will you determine whether or not the gif is transparent?

[mayognaise]

@sambshapiro i was gonna check if the material has transparent: true; 😆

[javismiles]

I have the same issue, the gif is not clearing the previous frames, could you please update us on what's the recommended fix for that?

[javismiles]

for this fix, can you please explain where exactly I have to add that code? thank you very much

__draw: function __draw() { this.__clearCanvas(); this.__ctx.drawImage(this.__frames[this.__frameIdx], 0, 0, this.__width, this.__height); this.__texture.needsUpdate = true; } This is working for me.

[javismiles]

friends, I implemented the fix below and it works, great, BUT fit flickers, obviously the canvas deletion makes it flicker, how can we eliminate the flickering? thank u

this.__ctx.clearRect( 0, 0, this.__width, this.__height); this.__ctx.drawImage(this.__frames[this.__frameIdx], 0, 0, this.__width, this.__height); this.__texture.needsUpdate = true;

[Angelo8828]

Sorry guys but any updates for this bug? Thanks

[tinchoforever]

Check here https://github.com/tinchoforever/belisario.com.ar/blob/master/scripts/aframe-gif-shader.js

As Javier said, some times there are some flickers... but it works.

Martín Nahuel Rabaglia

Tech & Experiences Director / Co-Founder

[image: Imágenes integradas 4]

genosha.com.ar http://www.genosha.com.ar/

Phone: (+54) 9 11 2386 6243

Skype: martin.rabaglia

C.A.B.A - Argentina

On Wed, Jan 3, 2018 at 5:24 AM, Angelo Salvador notifications@github.com wrote:

Sorry guys but any updates for this bug? Thanks

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mayognaise/aframe-gif-shader/issues/2#issuecomment-354957752, or mute the thread https://github.com/notifications/unsubscribe-auth/AAr6kFx15XsRjmbWNd8KY6FkIS5CFq51ks5tGzlYgaJpZM4Kw2Ok .

[vettorazi]

@javismiles hey, i am wondering the same thing. can you please tell where did you put this snnipet?

[pablodiegoss]

It's been a long time since this issue was opened, but i've fixed this problem on #8, thought would be nice to cite it here o/

i've been using this GIF component on a project, check it out if you like :)

[mayoyml]

@pablodiegoss sorry i havent responsed this for long! thank you so much for the contribution, will fix it this weekend!

[mayognaise]

Hi everyone here, I am so sorry it's been for so long since I commented last time... 🙏 I finally updated the package: https://www.npmjs.com/package/aframe-gif-shader @pablodiegoss I merged your PR, thank you so much 🙏

[Lizzy-gg]

Is the flickering of transparent animated gifs fixed yet? I still have this problem

[jrDev1]

I am having some really weird issues even with having the transparency set to false.

This is a black image with white background. It works fine on the MacBook but on iPhone it looks like that. Also looks like each gif frame is trimmed to the image then it fills in the background on its own (looking at the black edges of first pic...

[jrDev1]

Hello,

So I have figured out the issue with the black borders. It was because I was using the scale parameter. So I recommend to NOT use the scale parameter and use width and height parameters instead!

[dparker2]

Currently getting this behavior using the same banana gif in the example…