Sign in to follow this  
liajoy

can renderTexture be rendered by any renderer

Recommended Posts

Can I just new a CanvasRenderer or WebglRenderer to render renderTexture? Seems dosen't work. So renderTexture only can be rendered by it's own renderer?
These codes are from offical renderTexture demo:

var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

var container = new PIXI.Container();
app.stage.addChild(container);

var texture = PIXI.Texture.fromImage('required/assets/basics/bunny.png');

var bunny = new PIXI.Sprite(texture);
container.addChild(bunny);

var brt = new PIXI.BaseRenderTexture(300, 300, PIXI.SCALE_MODES.LINEAR, 1);
var rt = new PIXI.RenderTexture(brt);

var sprite = new PIXI.Sprite(rt);

sprite.x = 450;
sprite.y = 60;
app.stage.addChild(sprite);

container.x = 100;
container.y = 60;

const renderer = PIXI.autoDetectRenderer();

app.ticker.add(function() {
	//app.renderer.render(container, rt);
  	renderer.render(container, rt);
});

Share this post


Link to post
Share on other sites
24 minutes ago, ivan.popelyshev said:

There's no code that automatically uploads renderTexture changed by CanvasRenderer to webgl. However, it is possible to hack! Tell me why do you need that and maybe I'll do it or at least recommend which files you have to change.

Sorry, i've made a mistake, please see the code again. it's not a CanvasRenderer to webgl problems.
The reason is I want to make a inverted mask and I use Graphics draw white background and draw black shapes according inputed params, then render Graphics to a renderTexture so I can use alpha mask.
But I don't want  the class access the .app.renderer. 

 

Share this post


Link to post
Share on other sites

If your shapes don't intersect, you can make a Graphics with holes in webgl :) However, edges might look bad because AA doesn't work in webgl in that case.

"Texture.fromCanvas(myCanvas)" should do the trick if you want a texture, that 's slow, but its fine if you want to make that mask only one time. You can use HTML5 Canvas2d API instead of pixi graphics to draw on canvas without using CanvasRenderer.

Do you need a sample code for that or did I explain it good enough?

Share this post


Link to post
Share on other sites
13 hours ago, ivan.popelyshev said:

If your shapes don't intersect, you can make a Graphics with holes in webgl :) However, edges might look bad because AA doesn't work in webgl in that case.

"Texture.fromCanvas(myCanvas)" should do the trick if you want a texture, that 's slow, but its fine if you want to make that mask only one time. You can use HTML5 Canvas2d API instead of pixi graphics to draw on canvas without using CanvasRenderer.

Do you need a sample code for that or did I explain it good enough?

Thanks a lot!
But I nedd use mask many  times,  it's used as a eraser for brush, so every time when mousemove event trigger, it'll be re-rendered.
There are three solution, I don't know which is the best:
1. If I can access app.renderer, use Graphics.generateTexture then update sprite.
2. If I can access app.renderer, draw in canvas and made texture from canvas as what you said.
3. Use app.renderer to render the renderTexture.
4. If I can use anyrenderer to render the renderTexture
haven't tried, but I guess 3 is the best performance? If 4 is possible, it'll be nice and that's what I need

Share this post


Link to post
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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.