So, I've been using PIXI.js since v3 and am fairly familiar with drawing gradients using 2d canvas and turning it into an image so that I can use it in a WebGL renderer. But now it's 2020 and we're on PIXI.js v5 with a mid-level API and consumable components. I'm just now making the migration to v5 and am hoping that there is a plugin or feature that I can use to do radial and linear gradients directly in WebGL. You see, I'm porting an old AS1 game over from Flash to HTML5 and the game makes extensive use of radial gradients and morph shapes to create interesting effects like a semi-transparent bubble-shaped shields with a moving/rotating shimmer on it as well as smoke and fire/explosions. To date, I've been converting all of this to spritesheets. But it kinda sucks to use all that extra space. But it would also kinda suck to compile all of it using 2d canvas as a loading step in the game - especially as I consider increasing the framerate for these effects (the game typically runs at 12fps). Theoretically, it would take up a lot less space and time if I did it like it was done in Flash. That is, I define one or more morph shapes and can animate them using the fastest framerate I can up to the screen refresh rate. It's a mobile game (PWA), so framerate can be inconsistent. Rendering the morph shape at the ratio derived from the ticker delta time could provide a smoother animation.
That's my goal, so even if I handled the morph shape side of things, just hoping there's a fast/efficient solution for gradients outside of 2d canvas yet. Or, is there any plan to add such a feature with an estimated timeframe for completion?