Update loader.resources texture

[JunkeyMcKrat]

I have a set of image textures produced from by loading an SVG dataURL with PIXI.loader.

I need a fairly performant way to change the underlying data of these textures. The name of the texture has to remain the same.

Any ideas?

[ivan.popelyshev]

Hello! Welcome to the forums!

Unfortunately, your question is not easy for the first one and its not obvious for me what exactly do you want. I will send the link to people who are experienced with SVG in pixi. I can also give you links to the source:

loader does care that its type was detected as image https://github.com/pixijs/pixi.js/blob/dev/packages/loaders/src/TextureLoader.js#L23

texture manages caching just in case you use from(url) later: https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/Texture.js#L401

baseTexture also does something https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/BaseTexture.js#L539

svg string goes through autodetect https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/BaseTexture.js#L54

svgresource is created because its test() method returned true https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/SVGResource.js

"source" field is used to store canvas to be uploaded.

canvas is uploaded here, when texture is bound: https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/BaseImageResource.js#L79

If you want to you have to make your own resource and somehow hack the loader, and that's a different topic, a big one too!, I dont have time to explain it right now. Maybe hacking SVGResource like "PIXI.resources.SVGResource.someFunction=myFunction" can be a good hack. "loadSvg", "upload" and other functions are your targets.

Wow, I actually wrote enough that 5 more minutes and i could publish article in Medium. A shame, I dont have medium and I dont publish half-cooked stuff like others usually do.

[JunkeyMcKrat]

Haha, that Medium article bit... so true.

So, a lot of this still goes over my head, because I'm relatively new to Pixi.js. Is the stuff loaded through PIXI.loader basically meant to be immutable? Is there a way to delete a resource that was loaded?

 

I'll explain my issue a bit deeper: My webapp lets the user create a drawing, which is saved as an SVG string and then sent to a PIXI application (via PIXI.loader) and displayed as a sprite.

When the user draws a new stroke in their drawing, causing the SVG string to be updated, I need the SVG data to be updated on PIXI's end as well.

 

I could feasibly load a new PIXI resource for every edit made to the drawing (as opposed to updating the existing one), but these drawings can be several hundred Kb's in size, so old drawings would need to be disposed of to avoid memory overhead.

[ivan.popelyshev]

OK, then you dont need loader at all. The canvas2d context allows to use drawImage(svgStuff, 0, 0) . PixiJS has CanvasResource that can be updated, something like that

var tex = Texture.fromCanvas(myCanvasWithSvg);

//update the canvas again
myCanvasContext.drawImage(newSvg);

tex.update(); // texture is updated, memory is re-used!

 You can look inside SVGResource to see the code how exactly string can be converted to something that can be drawn on a canvas, but you have to understand html5 canvas2d basics.

I

[JunkeyMcKrat]

That's better, but I wouldn't use Texture.fromCanvas because my SVG data has already been generated elsewhere (by Fabric.js, in this case).

Now I'm doing something like this:

PIXI.TextureCache[this.id].destroy();
                PIXI.TextureCache[this.id] = PIXI.Texture.fromImage('data:image/svg+xml;charset=utf8,'+ this.ass());

but I'm having an issue with fromImage(). I get this error: "The SVG image must have width and height defined (in pixels), canvas API needs them."

Where do I give it those width and height dimensions? 

 

BTW, I am using Pixi V.4.5.1

 

[ivan.popelyshev]

Sorry, cant help with 4.5.1 . SVG was broken several times in v4, and its different in v5. 

I suggest to do manually what pixijs does automatically : make a canvas from svg. draw svg every time its updated, tell pixi that texture based on canvas needs to be updated. The fact that we added SVG->canvas->texture conversion inside pixi doesn't mean we know everything about it. That conversion was modified so many times, and people always find something new for their case, like that width/height warning. You should do it manually.

[JunkeyMcKrat]

As of now, I am creating a new HTML image element with the src set to my SVG data, then using

PIXI.TextureCache[id].baseTexture.loadSource(imageElement);

to update.

[ivan.popelyshev]

well, it can work