Jump to content

Convert WebGLTexture to Pixi.Texture?

Sebastian S

Recommended Posts

I'm returning a RenderTarget object from my Filters. I would like to use the Texture from the render target and apply it onto a Sprite Object.


My Code:

myBlurYFilter.renderCallback = (renderTarget) => {  this.mySprite.texture = renderTarget.texture;};

Added a callback function to the ApplyFilter function code:

        if(this.renderCallback !== null)            this.renderCallback(renderTarget)

Resulting ApplyFilter function:

BlurYFilter.prototype.applyFilter = function (renderer, input, output, clear){    var shader = this.getShader(renderer);    this.uniforms.strength.value = Math.abs(this.strength) / 4 / this.passes * (input.frame.height / input.size.height);    if(this.passes === 1)    {        renderer.filterManager.applyFilter(shader, input, output, clear);        if(this.renderCallback !== null)            this.renderCallback(output)    }    else    {        var renderTarget = renderer.filterManager.getRenderTarget(true);        var flip = input;        var flop = renderTarget;        for(var i = 0; i < this.passes-1; i++)        {            renderer.filterManager.applyFilter(shader, flip, flop, true);           var temp = flop;           flop = flip;           flip = temp;        }        renderer.filterManager.applyFilter(shader, flip, output, clear);        if(this.renderCallback !== null)            this.renderCallback(renderTarget)                renderer.filterManager.returnRenderTarget(renderTarget);    }};

How can I convert the WebGLTexture Object to a PIXI.Texture Object so that I can use it on a Sprite?

Link to comment
Share on other sites

Create a sprite, apply the filter to it and render that sprite to a renderTexture. Then use that render texture as the texture for drawing in your scene.


That will basically render the filter to a framebuffer and then you can use that framebuffer as a texture.

var sprite = new Sprite(someTexture);var renderTexture = new RenderTexture(renderer, width, height);// apply the filtersprite.filters = [myFilter];// render to a texturerenderTexture.render(sprite);// display it in the scenevar sceneSprite = new Sprite(renderTexture);stage.addChild(sceneSprite);
Link to comment
Share on other sites

@xerver I find your solution elegant, and it does work! 


However, My app requires about on average 20 RenderTextures to be created per second for about 3 seconds. And it needs to run on a mobile device. I have found that using RenderTextures in this way degrades the performance on a mobile device beyond the point of what a Filter will.


So I thought if there is a way to directly apply the Filters output onto the Sprite, we could eliminate the overhead incurred by creating RenderTextures so rapidly. 

Link to comment
Share on other sites

However, My app requires about on average 20 RenderTextures to be created per second for about 3 seconds

Created? Or rendered? You can call render() on a render texture repeatedly, do you actually need 20 different textures, or can you just use one that you update?

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