pongstylin Posted February 10, 2020 Share Posted February 10, 2020 (edited) 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? Edited February 10, 2020 by pongstylin Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 10, 2020 Share Posted February 10, 2020 (edited) We have one small example for it: https://pixijs.io/examples/#/textures/gradient-resource.js The problem with all Flash legacy is - people still didnt implement it in html5 renderers! Even Gradients are actually the bleeding edge. All coders who work on convertions or converters have their own implementations of gradients. I can give you parts of my code. Why didn't I put it in pixijs at least in a plugin? Because I have TONS of stuff like that! And removing dependence on my private engine takes time! For example, I have all flash blut-filters, and I dont have time to release them Here's . Whats "uDark, uLight"? How to convert flash values to the input? How to use that shader in Graphics element? - That I cant answer because it is actual work. Of course you can ask to prioritise it and post a bounty on https://opencollective.com/pixijs , but bounty system isnt ready yet So, you are asking for bleeding-edge stuff that does not exist in other webgl renderers but existed in Flash because Flash creators were very good with math and they made so many things that all WebGL communities cant actually re-implement it. You have two options: 1. Wait when pixijs team members who like vector process all my private code to create open-source version of gradients 2. Do it yourself, based on our tips If you actually implement solution, please share it here and I will mention it in PixiJS wiki. Estimated time: in 2017 I thought I could publish full flash Graphics (even SWF loading) in beginning of 2019. Now I think its close to the summer of 2020. RadialGradient.ts Edited February 10, 2020 by ivan.popelyshev Quote Link to comment Share on other sites More sharing options...
pongstylin Posted February 10, 2020 Author Share Posted February 10, 2020 Not complaining or pushing! If it gets done at all, it would make my day. I continue to be impressed by the evolution of the PIXI project. In the course of my own project, I have had to deal with a lot of maths of my own. The worst being implementing BOUNDED 2-finger panzoom up to my high standards of precision/quality or smoothly animating panning and zooming into another point in 2d space and back again. (Those small phone screens really stretch the imagination on how to make a largish game board usable) Of course, that is all 2d transformation stuff at which you guys are probably pros. I mention this to show my empathy for all the additional maths you guys have to deal with. I'll check out the resources to which you directed me. Thanks! ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 10, 2020 Share Posted February 10, 2020 (edited) > Not complaining or pushing! Thank you! No worries, I just have to underline the importance of gradients for future readers. > The worst being implementing BOUNDED 2-finger panzoom up to my high standards of precision/quality or smoothly animating panning and zooming into another point in 2d space and back again I know how easy to make single-finger (mouse). Scale, look where point under mouse went, change position accordingly. It shouldn't be a problem if you know how Transforms (position,scale,rotation,pivot) work and have experience with them from Adobe Flash But two finger - yeah, need more math maybe. > I mention this to show my empathy for all the additional maths you guys have to deal with. I actually graduated from Math dept, so its a heaven for me I love linear algebra. The problem is that I have really huge codebase that emulates Flash API but cant just share it because of depts and custom pixijs version. I think 1/4 or 1/3 of PixiJS v5 PR's are actually because of my Flash conversion project. Btw, its based on https://mozilla.github.io/shumway/ , one of big dead projects. Hope that RadialGradient source I posted in previous comment will give you enough tips for now Edited February 10, 2020 by ivan.popelyshev Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.