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?
