Copying Rendered Sprite to New Texture

[Blackdrazon]

So in my previous post on these forums, I got help using some PIXI filters.  Great.  Now, I want to turn the filtered result into a new Texture object so that I can use it in a 3rd party system.  I basically just need a "screenshot" of the filtered results. Once I have the new texture, I no longer need the original Sprite (at least not for this system). The new texture doesn't need to update or anything like that.

I thought I had a potential approach, but it's not working. Just in case I'm barking up the wrong tree, first I want to confirm that I'm going about this in the most efficient manner. First we create the base Sprite and give it the filters in question.  Because I want to apply the shaders, I think I need to render the sprite to canvas first, so I try to do so on an off-screen canvas.  Last, I attempt to create a new texture using the fromCanvas method.  If that's the wrong way to go about this, let's talk about a better way instead.

If that is the right way to go about it, here's the problem: fromCanvas never captures the texture. I must be doing something wrong at some stage.  Here's the code.  Note that instead of using an off-screen canvas, I'm currently using an on-screen canvas, because I wanted to confirm that the image is rendering correctly on the second canvas.  It is.

// Create the main stage.
var width = window.innerWidth;
var height = window.innerHeight;
var renderer = new PIXI.WebGLRenderer(width, height);
document.body.appendChild(renderer.view);

var stage = new PIXI.Container();

// Create the offscreen sprite and stage.
var offscreenSprite = PIXI.Sprite.fromImage('Base3.png');

/* Code to create and apply filters here. */

var offscreenStage = new PIXI.Container();
var offscreenRenderer = new PIXI.WebGLRenderer(offscreenSprite.width, offscreenSprite.height);
offscreenStage.addChild(offscreenSprite);

// Put view onscreen for testing purposes.
document.body.appendChild(offscreenRenderer.view);

It doesn't seem to matter whether I try to capture the texture before or during the main loop.  Here's before:

offscreenRenderer.render(offscreenStage);
requestAnimationFrame(update);
var sprite = PIXI.Sprite.from(baseTexture);
sprite.x = width / 2;
sprite.y = height / 2;
sprite.anchor.set(0.5);
stage.addChild(sprite);

function update() {
    requestAnimationFrame(update);
    renderer.render(stage);
    renderer.render(offscreenStage);
}

And here's the alternate approach, capturing the texture during the main loop. This version even tries to update the texture during the main loop, even though I don't want to do that.  It doesn't help!

offscreenRenderer.render(offscreenStage);
requestAnimationFrame(update);

var sprite;
var firstPass = true;

function update() {
    requestAnimationFrame(update);
    renderer.render(stage);
    renderer.render(offscreenStage);
	
	if(firstPass ) {
		var baseTexture = PIXI.BaseTexture.fromCanvas(offscreenRenderer.view);
		sprite = PIXI.Sprite.from(baseTexture);
		sprite.x = width / 2;
		sprite.y = height / 2;
		sprite.anchor.set(0.5);
	}
	else {
		sprite.texture.update();
	}
}
update();

Using console.log, I can confirm that fromCanvas is returning the default, empty results.  There's no on-screen results, because the onscreen sprite has no texture.  Any ideas?

 

[ivan.popelyshev]

Because webgl. You cant just take data from webgl canvas, you have to use PIXI extract methods (look them up in docs).

Also there's a better with using renderTexture, you really dont need extra renderer for those operations. Please look at RenderTexture example in pixi examples.

[Blackdrazon]

Thanks, I'll look those up and come back if I have any more trouble!