dWolf Posted January 21, 2020 Share Posted January 21, 2020 Hi all. I'm starting with PixiJS now and want to know about Render () In the ScratchCard example (https://pixijs.io/examples/#/demos-advanced/scratchcard.js), its possible "paint" an image in my board, its very NICE! But, how can I watch to do some action when all image is "painted" in screen? Can I watch this? If yes, How? I want do an action when my image is all "painted" e other if my image is 50% "painted" Thank You all! ❤️ Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted January 21, 2020 Share Posted January 21, 2020 Yeah, i think @eXponeta solved that for his game. He can make you simple demo because his code is usually reusable dWolf 1 Quote Link to comment Share on other sites More sharing options...
dWolf Posted January 21, 2020 Author Share Posted January 21, 2020 Thank you @ivan.popelyshev for the answer and for tell me it is possible! @eXponeta Can you share with me some example/orientation/demo to do this? Thank you guys! Quote Link to comment Share on other sites More sharing options...
eXponeta Posted January 21, 2020 Share Posted January 21, 2020 (edited) Hey! In my case i use canvas 2d render for mathematics calculation and RenderTexture for view. I update image on both, but math texture is 512, when view texture is 2048. Why? Because there are some botlenecks: 1. GPU is waiting when you request pixels from GPU to CPU for calculating. I got lag about 30ms when request 2048x2048 texture on mobile, this is long time, and drops framerate twice. Reading of 512 is faster, but in some cases you can use smallest images. 2. Iteration over buffer with 512x512 (or more) pixels is very heavy. I pass this task to Web Worker. (Really i use adaptive resolution for filling percentage calc: 16x16 for <10%, 128x128 for <25%, 256x256 < 75%< 512x512 > 95%) Is best way: use RenderTexture for painting and visuallise in main thread, then use OffscreenCavas for Chrome with 2d context for percentage mathing in WebWorker directly. For other browsers use getImageBitmap or gl.readPixels, and then pass pixel buffer to worker. Edited January 21, 2020 by eXponeta dWolf 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted January 22, 2020 Share Posted January 22, 2020 @dWolf Welcome to the forums! As you see, answer to your question is not safe for newbie it requires knoweldge of both how can you get data from canvas2d and webgl, and webworkers. At least its in production. If you want just a prototype with small texture - using PIXI extract plugin on renderTexture and iterating through pixels should work. Extract is bundled in PixiJS, it wont be a problem to find it. If you want to go into production and cover all the devices - well, you have to learn all those things @eXponeta mentioned. dWolf 1 Quote Link to comment Share on other sites More sharing options...
dWolf Posted January 22, 2020 Author Share Posted January 22, 2020 @ivan.popelyshev Yeah, the answer is not for newbies, I will need to learn this to implement. (im doing this right now) Can I stay this post OPEN to make new questions when I need? TY @eXponeta for the answer! My case its much more simple than your, but I will need to learn what you say to implement. Thank you! ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
dWolf Posted January 22, 2020 Author Share Posted January 22, 2020 This is a github pages with my project https://playdwolf.github.io/ So, when I remove all content, add a click in all content. I will need to do all this solution? Ty 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.