pixijs / pixijs

The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
http://pixijs.com
MIT License
43.35k stars 4.75k forks source link

Play video .webm with alpha - vp9 #7140

Closed DarkSearinox92 closed 3 years ago

DarkSearinox92 commented 3 years ago

Hello guys,

i really don't understand why i can't reproduce correctly a video that i made on adobe after effect RGB+Alpha, rendered in quicktime .mov and recoded in .webm keeping Alpha.

I'm trying to reproduce this video in RPG MAKER MV, Pixi version 4.8.9

I really don't understand.

I found a similar thread and i read a lot of stuff about this problem. A similar thread was this: #4190

Someone connected it to another thread: #4089

But i really don't understand what i must do.

Please, help me. Is it so difficult play a video without background? T_T It always show Black background.

I would love to create transparent background video animations.

If you need other informations, please tell me.

Thanks to the good soul who will help me to solve this problem.

ivanpopelyshev commented 3 years ago

Since I dont actually remember this issue and how its related to RMMV, I'll need minimal reproduction for this. either zip-file with game and instructions on my email "ivan.popelyshev at gmail.com" , either repro in any codesandbox/codepen/jsfiddle/whatever

DarkSearinox92 commented 3 years ago

Since I dont actually remember this issue and how its related to RMMV, I'll need minimal reproduction for this. either zip-file with game and instructions on my email "ivan.popelyshev at gmail.com" , either repro in any codesandbox/codepen/jsfiddle/whatever

Ok,

i follow this guide for convert .mov to webm, using Shutter Encoder: https://www.reddit.com/r/VideoEditing/comments/hgn1gj/mov_to_webm_converter_keeping_alpha_transparency/

So i've done it doing this (Cattura1.JPG), then i see what code use (Cattura2.JPG) because Shutter Encoder is based on ffmpeg.

And i receive the Mov converted, that i've attached.

I prepared for you a simple Game Project where you have The RMMV project for see that if you run the Movie, it run with black background T.T

I think that i've done right the conversion of the .MOV to .webm ... i think that the problem is on Pixi <_> or other thing...

I've also upgraded pixi to 4.8.9, the latest that works fine with the engine.

I don't know what are you talking about when you say either repro in "any codesandbox/codepen/jsfiddle/whatever", please be more precise x_x

I've uploaded all things to MEGA, you will find it Screen and the project. The .webm is inside movie, of course.

I sent the link here and at your mail.

https://mega.nz/file/tIYAGbwZ#cP6wA7q1UjJWJhi9bFhZJkpJnHp5QcsAcN7Lk8Uj5DI

Thank you so much ç_ç

jonlepage commented 3 years ago

i never found codec setting who worked fine with alpha in pixi4< , may more luck for v5, i never testing in V5> ! Actually AE allowing png sequencing with alpha on export setting for your movie or animations. image

Than, you pack this in texturePacker as animations. https://www.codeandweb.com/texturepacker

Than you use sprite animation or any renderer method you want. https://pixijs.io/examples/#/sprite/animatedsprite-animationspeed.js

Sry i dont know more easy way for now ! related to this old issue. https://forums.rpgmakerweb.com/index.php?threads/how-play-video-with-alpha-vp9-alpha-encoding-webm-pixi-texture-fromvideo.82002/#post-1154320

jonlepage commented 3 years ago

I don't know what are you talking about when you say either repro in "any codesandbox/codepen/jsfiddle/whatever", please be more precise x_x

what ivan ask is you make a basic demo to test (easy debug environment). What you can do is upload your video on your github. and than preproduce the issue here. https://www.pixiplayground.com/#/edit/uAi295bP0-oscNsBhVaeL

i made template for you, just replace the video link with your GitHub raw link. line:39 use https://raw.githack.com for make a link and avoid Content-Type Corps politicly issue, or juste send your raw repo link, i can do for you.

jonlepage commented 3 years ago

ok is working in V5 https://www.pixiplayground.com/#/edit/UJy1wjcuqqkdLbF72OqzI

edit: since v5.1.1 only , < is black screen. https://www.pixiplayground.com/#/edit/ptyRP-8Bc44YAbOzuI-hh

DarkSearinox92 commented 3 years ago

ok is working in V5 https://www.pixiplayground.com/#/edit/UJy1wjcuqqkdLbF72OqzI

edit: since v5.1.1 only , < is black screen. https://www.pixiplayground.com/#/edit/ptyRP-8Bc44YAbOzuI-hh

Firstly thing: Thank you very very much for helping me providing what Ivan asked. I'm noob in this things and I didn't know this passage.

So basically, the animation works from Pixi 5.1.1... And this is a problem, because Pixi 5 breaks a lot of plugins made using PIXI 4.X T_T

I only need the code part that correct this bug. I think that it's not related to the major part of the code. Maybe they are few raws that fix this problem about alpha... Correct? I'm hoping that @ivanpopelyshev can find a solution for implement this fix in 4.8.9 if it's possible <_>

P.S. Do you think that the initial black 'flash' before animation is causing by the load of the content, or it's ALWAYS a thing like that? That if you play a video in Pixi with alpha in this way, it show first a black image, than the video with transparent background?

jonlepage commented 3 years ago

So basically, the animation works from Pixi 5.1.1... And this is a problem, because Pixi 5 breaks a lot of plugins made using PIXI 4.X T_T

what you can try , is update only the commit related to video . This one look the one who fix video blackscreen. https://github.com/pixijs/pixi.js/commit/4449645ed0abbdeeae775f0081ddcf3136354d86

But good luck , i cant help more !, replace only some portion of this code , make some test , but it can also break a lot of other things. If the code uses references only available in v5, its going to be hellish. And sadly ENTERBRAIN are very cautious and nervous about updates and track progress, one of the reasons why i not use anymore rpg maker. They are not listening to developers. Break changes are part of the life and progress of a technology and should not be a brake on the development of software. Imagine where adobe would be today. Where almost every update has break changes and broke scripts :)

Do you think that the initial black 'flash' before animation is causing by the load of the content, or it's ALWAYS a thing like that? That if you play a video in Pixi with alpha in this way, it show first a black image, than the video with transparent background?

no black background on my side before video or on first frame. image

ivanpopelyshev commented 3 years ago

Hm so I can investigate what was done in 5.1.1 that made it possible

DarkSearinox92 commented 3 years ago

ok is working in V5 https://www.pixiplayground.com/#/edit/UJy1wjcuqqkdLbF72OqzI edit: since v5.1.1 only , < is black screen. https://www.pixiplayground.com/#/edit/ptyRP-8Bc44YAbOzuI-hh

Firstly thing: Thank you very very much for helping me providing what Ivan asked. I'm noob in this things and I didn't know this passage.

So basically, the animation works from Pixi 5.1.1... And this is a problem, because Pixi 5 breaks a lot of plugins made using PIXI 4.X T_T

I only need the code part that correct this bug. I think that it's not related to the major part of the code. Maybe they are few raws that fix this problem about alpha... Correct? I'm hoping that @ivanpopelyshev can find a solution for implement this fix in 4.8.9 if it's possible <_>

P.S. Do you think that the initial black 'flash' before animation is causing by the load of the content, or it's ALWAYS a thing like that? That if you play a video in Pixi with alpha in this way, it show first a black image, than the video with transparent background?

Yes, that's definitively true. I hate the fact that they don't update nomore the core of MV when PIXI get an upgrade... only because it's out the new MZ -.- However if it's PIXI that change functions, scripts that are created for that particular version of PIXI, they will break. (correct me if i'm wrong)...

You're right for what i said about the first black frame. I see it when i was at work, on my phone and i don't know why it showed with the first frame black (in loading). Now i've retried from phone browser and it's ok! LOL very strange.

Hm so I can investigate what was done in 5.1.1 that made it possible

Dear @ivanpopelyshev , i really hope that you will find a solution. You will be my hero ç_ç i hope that it's only a little bug/implementation to resolve...

ivanpopelyshev commented 3 years ago

They wont update it, even opensource team cant do it, its not that easy, it requires me or author of MV :)

@DarkSearinox92 No guarantees, I have big queue of small requests like that and i pick at random. If its tied to mobiles - then its even worse and i wont be able to do anything

DarkSearinox92 commented 3 years ago

I know that they won't update it. This is the shame. And i know that it's not your fault, but of enterbrain.

@ivanpopelyshev I have no hurry. When you will be able to do it, i will be glad and very happy. However, what do you mean that for mobile it will not possible? What does it changes? I mean, if it's simple a part of script to correct, it impact on everything, no? Desktop and mobile didn't use the same part of code, fore show the video? I'm confused. The code is splitted in two different parts? I thought that the fix would be functionally for both...

ivanpopelyshev commented 3 years ago

Now i remember something, like, "do texImage2D only when the first frame is there for sure", Im investigating it

DarkSearinox92 commented 3 years ago

Now i remember something, like, "do texImage2D only when the first frame is there for sure", Im investigating it

I'm with you 😭