Sign in to follow this  
newJS

How to make waterfall using pixijs?

Recommended Posts

19 hours ago, mattstyles said:

That's nice using particles. Looks great.

Using a shader would also be an option for water simulation.

Actually I don't water simulation. I do an audio waterfall and I couldn't find a way still.

I make would like the following using WebGL with PixiJS. There will be about 32768 dots.

https://drive.google.com/file/d/1jG44SZXtJgPortNT0b3DfaQf00kLOoHg/view

Share this post


Link to post
Share on other sites

Will the dots be moving or is it just static? If it's static content then you could do that really easily with a 2d canvas using putImageData and use that canvas as a texture.

Or if those need to be moving then you could do them each be a 1x1 pixel sprite. 30k sprites should be ok.

Or you could render them as dots with a custom shader which would allow you to have millions of them.

Share this post


Link to post
Share on other sites
1 hour ago, Exca said:

Will the dots be moving or is it just static? If it's static content then you could do that really easily with a 2d canvas using putImageData and use that canvas as a texture.

Or if those need to be moving then you could do them each be a 1x1 pixel sprite. 30k sprites should be ok.

Or you could render them as dots with a custom shader which would allow you to have millions of them.

What I want to do is actually something like this.

https://drive.google.com/open?id=1j0uKGNVsFAd8Oq4ZgJrpSCnVufYiiRpD

Will keep coming 30k point continuously.  Last points will be added to the top of the canvas. At other points it will go down.

 

I was able to do it using PutImageData. 

But I don't know if it makes sense to use WebGL for a 30k dot. If it makes sense, I would consider switching to WebGL with PixiJS. But I have no idea how to do it using Pixi JS.

Share this post


Link to post
Share on other sites

I'd say that is a perfect use case for 2d canvas as with that you can scroll the whole content and draw only one line. Would make the thing pretty efficient. Something like this:

//Code might contain errors. Writing without checking.

//Setup
ctx.imageSmoothingEnable=false; //Dont use image smoothing to allow copy to go pixel perfect.

//Draw
function drawPoints( lineImageData ) 
{
  //Copy old canvas with offset.
  ctx.globalCompositeOperation = "copy";
  ctx.drawImage( ctx.canvas, -1, 0);
  //Reset composite
  ctx.globalCompositeOperation = "source-over";

  ctx.putImageData(lineImageData, ctx.canvas.width-1, 0);
}

As you dont have need for continous animation I'd say use 2d canvas for creating the audio waterfall image and if you need something more dynamic around the image or you need to move that, then you can wrap everything around pixi and use the waterfall as just a texture.

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.