Jump to content

dataURL of a texture with WebGL


Recommended Posts



I'm trying to get the dataURL of a RenderTexture using the WebGL renderer.

With the Canvas renderer, it's easy:


// ...var renderer = new PIXI.CanvasRenderer(width, height);// ...var canvasDataURL = renderer.view.toDataURL();var renderTexture = new PIXI.RenderTexture(42, 42);renderTexture.render(someDoc);var renderTextureDataURL = renderTexture.baseTexture.source.toDataURL();
But with WebGL I can't find how to do it. The baseTexture of a RenderTexture have an undefined source.

Also, with WebGL, if I want to be able to get the dataURL of the view/canvas, I have to modify the source of pixi to add the option preserveDrawingBuffer to the context here: https://github.com/GoodBoyDigital/pixi.js/blob/master/src/pixi/renderers/webgl/WebGLRenderer.js#L72


this.options = {                             alpha: this.transparent,                 antialias:!!antialias, // SPEED UP??     premultipliedAlpha:!!transparent,        stencil:true,    preserveDrawingBuffer: true,};                                       
My questions:

1. Is it possible to set preserveDrawingBuffer somewhere without modifing pixi's source ?

2. How to get the dataURL of a RenderTexture like in the first example, but for WebGL ? (When preserveDrawingBuffer is true)

3. Where does pixi issues drawing commands to WebGL context ? I'v read this ( http://stackoverflow.com/a/12548710 ) and I'm trying to find where/when should I get the dataURL of an element in the source without setting preserveDrawingBuffer to true.

By the way, I really love Pixi.js. A big thanks to all the contributors !

Link to comment
Share on other sites

No clue how it works with WebGL.

But I had the same issue when I was creating my PixiTexturePacker.


At some point I was just like..screw this...

if(renderer instanceof PIXI.CanvasRenderer) { canvasRenderer = renderer;} else { canvasRenderer = new PIXI.CanvasRenderer(width, height, null, true);}...var renderTexture = new PIXI.RenderTexture(width, height, canvasRenderer);...

So I just always created a canvas renderer instance. That way I had access to the renderTexture.baseTexture.source which I could draw on a canvas and then export the dataurl. Not like it makes a huge difference.

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