liajoy Posted November 15, 2018 Share Posted November 15, 2018 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); }); ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted November 15, 2018 Share Posted November 15, 2018 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. Quote Link to comment Share on other sites More sharing options...
liajoy Posted November 15, 2018 Author Share Posted November 15, 2018 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. ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted November 15, 2018 Share Posted November 15, 2018 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? Quote Link to comment Share on other sites More sharing options...
liajoy Posted November 16, 2018 Author Share Posted November 16, 2018 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 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted November 16, 2018 Share Posted November 16, 2018 so, Graphics with holes? Quote Link to comment Share on other sites More sharing options...
liajoy Posted November 19, 2018 Author Share Posted November 19, 2018 sorry, I didn't get the point about Graphics with holes. what dose it mean? Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted November 19, 2018 Share Posted November 19, 2018 addHole() method adds latest shape to holes. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.