Jump to content

Copying Rendered Sprite to New Texture


Blackdrazon
 Share

Recommended Posts

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?

 

Link to comment
Share on other sites

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.

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.

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...
 Share

  • Recently Browsing   0 members

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