Modify texture on the fly?

[gurkesaft]

Hello,

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.
stage.addChild(floor_sprite);

// 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;
stage.addChild(sp);

// 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!

Jack

[ivan.popelyshev]

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.

[ivan.popelyshev]

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 May 3, 2020 by ivan.popelyshev

[gurkesaft]

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:

https://pixijs.io/examples/#/textures/render-texture-basic.js

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:

https://pixijs.io/examples/#/textures/render-texture-advanced.js

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!

Jack

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.