Jump to content

Modify texture on the fly?


Recommended Posts


Is it possible to modify a texture on the fly? My goal is to have a bunch of particles (images) accumulate on the "floor" of my game, but there will be millions of these after playing some time, and I don't want to have a sprite for each! Instead, I'd like to just overwrite regions of the "floor" image and then recycle the sprites. This amounts to "stamping out" an image many times on a texture.

After some searching I found RenderTexture, and it looks like it *might* do what I want, but probably not. Here is the code I've tried:

// The goal is to create a floor that accumulates "chunks" but not to need a separate sprite for each chunk, because there will be millions of chunks after playing for some time!

// Create the floor texture.
floor_texture = PIXI.RenderTexture.create({width:800, height:600});

// Create a sprite that will display this texture
floor_sprite  = new PIXI.Sprite(floor_texture);
floor_sprite.anchor.set(0.5, 0.5);
floor_sprite.x = 400;
floor_sprite.y = 300;

// Add the floor sprite to my stage.

// Create a test sprite to try to "stamp out" all over the floor
sp = PIXI.Sprite.from('myimage.png');
sp.x = 100;
sp.y = 100;

// Now try to stamp it out in two places
renderer.render(sp, floor_texture);
sp.x += 100;
renderer.render(sp, floor_texture);

// Make sure we cannot see the sprite, just the floor!
sp.visible = false;

Note the sprite `sp` is invisible, so I know it's just the floor_sprite I'm seeing. Indeed I can see the desired image in the desired location, but after stepping `sp.x` by 100, the image just moves.

Is there a method for writing the current state of a texture to it's "underlying" or "base" texture, so that I only have to keep one texture in memory?

Thanks in advance!


Link to comment
Share on other sites

Hello and Welcome to the forums!

I think you need more experience with renderTextures, in general.

Why not just re-use renderTextures that are too far away?

I dont understand what is your problem :( There are just so many things to explain, like, why dont you use third parameter in "render" as false

First you should read about tilemaps in general: https://github.com/pixijs/pixi-tilemap/issues/75#issuecomment-589615977

Then you have to decide which algorithm you use. Whether its Carmack "use four parts of renderTexture", or "handle many renderTextures , collect far away, reuse", or simple algo that i love about "refill when camera goes out of window".

When you fix the algorithm you have to make a simple demo and report concrete case, what exactly is not working like you want.

right now I dont understand whether we should have algorithm discussion or pixijs-renderTexture related question. renderTexture does not store extra data of where sprite was rendered inside.

Link to comment
Share on other sites

Oh, wait, you want particles that move or what? If they move then renderTexture's are just not possible there. 10000 renders at same frame => no  way.

If you dont want to create that many sprites, you have to make your own generated mesh. Take https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js and after you go through all "webglfundamentals" tutorial, you'll be able to embed your own particles with shader in pixi mesh. Without that knowledge, I'm afraid you wont understand how to make something that takes several drawcalls maybe several buffer uploads without 1 million js objects. One cannot just make 100k bunnies without understanding of some low-level techniques :(

Edited by ivan.popelyshev
Link to comment
Share on other sites

Thanks for the reply! It's hard to ask the right question before I know what's possible, so forgive my difficulty. I played around a bit more, and I think I see the "purpose" of RenderTexture now, and can maybe phrase my question better:

In this example:


the bunny container "container" is rendered ("stamped") onto the RenderTexture instance "rt" with the command

app.renderer.render(container, rt)

My question was simpler than interpreted (my fault!). I was basically just asking if I could prevent the RenderTexture from being cleared prior to "stamping", which I can, like this:

app.renderer.render(container, rt, false)

as per this example:


This doesn't clear "rt" prior to rendering, allowing me to stamp one sprite or container as many times as I want without adding new resources. Alien chunks will soon begin leaving streaks. :)

Anyway, thanks for helping! I think we were talking about different things, but sometimes just seeing the language experts use conveys the mindset required to find the solution.

Stay safe during the weirds!


PS- I'm actually super glad I couldn't figure this out quicker. In the meantime, I just went with "a lot" of chunk sprites, which allowed me to have subsequent explosions push them around some more. Super satisfying.

Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...