Use SVG file as texture ?

[Vousk-prod.]

Hi everyone!

 

Is there a way to use SVG files as textures for the materials in BJS ?

[Wingnut]

Hi VP!  I saw one version of a converter... once upon a time.  Brace yourself.

 

https://github.com/gabelerner/canvg/blob/master/canvg.js

 

Gruesome! 

 

Would you be so kind as to give us a success/fail report, if you decide to run with it?  (thx)

 

It almost seems wiser to render it in SVG, and use a screen grab to convert it to an image... non-realtime.  But if you want to manipulate the SVG DOM tree from within a BJS scene... then the screen grab method won't work, of course.

[iiceman]

Uhm.. you don't need a converter... you can simply assign them as a Texture just like you would do with a png or jpg, worked very well for me.

[Wingnut]

See, I THOUGHT I heard Iceman say something BEFORE... about using SVG's or having a demo or something... but I was scared to bring it up.    I know... when I was out looking for godray emitter textures... I found lots of circle.svg and triangle.svg basic shapes in the wikipedia commons, but they never worked... not once.  I had to put -svg into the search field just to get them out of my way. 

 

But... hmm... does Icedoggy know something?  Let's see it, I-man!    Maybe we're already fartin' thru silk!

[Dad72]

Just use the picture link should operate:

material.diffuseTexture = new BABYLON.Texture("images/myfile.svg", scene);

[Wingnut]

Well shut my mouth wide open!  Alright!  That was easy. 

http://playground.babylonjs.com/#4LZRS

[Wingnut]

But now....hmmm.

Does the SVG DOM tree exist?  Can we poke fun values at it?

<?xml version="1.0" standalone="yes"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Ski Trail Rating Symbols - Green Circle" viewbox="0 0 599 599" width="600" height="600">	<circle id="green_circle" fill="#393" cx="300" cy="300" r="250" /></svg>

http://playground.babylonjs.com/#4LZRS#1  ... alert(document.getElementById("green_circle")); is failing.

The svg namespace is being isolated from us, or... something.  iFrame-type of isolation, maybe.  *shrug*  I'm not searching for "green_circle" in the correct document.

[Dad72]

On 7/2/2015 at 11:25 AM, Wingnut said:

Does the SVG DOM tree exist? 

yes, this exist;

You need to do something like this:

var svgDoc = document.getElementById("svgObject").contentDocument;	var svgItem = svgDoc.getElementById("green_circle");

this should work, but the image svg is not local, so it does not work. (I think)

http://playground.babylonjs.com/#4LZRS#4

[iiceman]

Well, yeah, that's what I mean.. jut like normal textures But I don't think you can manipulate the SVG DOM... the texture doesn't look like it's an svg anymore when on the plane.. you can see that it is pixel based now when you zoom in close enough... I assume it get's converted internally... but I am just guessing

[Dad72]

But I don't think you can manipulate the SVG DOM

If if you can.  The <svg> is a web standard as <canvas>

[Wingnut]

I think there's some demented experiments that could be done, here.    Maybe BUILDING an SVG from within a BJS scene.  But, hmm.  Maybe find that internal SVG parser/renderer (that Iceman predicts exists somewhere in the browser)... grabs its render buffer data... and stuff it into a dynamicTexture. 

 

And do it repeatedly, so you can make real-time edits to the SVG doc.  coooool.  But we can do the same thing by live-manipulating the context2D canvas of our BJS dynamicTextures, I suppose. No need to fuss with dom elements.  *shrug*  We just need some fractal generators and a piece of PI.

[prvi_treti]

Sorry if irrelevant but,

 

Didn't have chance to check if exists but a builtin feature of using JPG with SVG mask would be nice addition.

[iiceman]

Just wondering: what for would you use it? For cropping an Image? I can't image to use it for masks other than rectangles. But yeah... that would be cool I guess

[prvi_treti]

Just wondering: what for would you use it? For cropping an Image? I can't image to use it for masks other than rectangles. But yeah... that would be cool I guess

 

It is primarily to replace lossless but bulky PNG (which have alpha transparency) assets with lossy but smaller JPG (no alpha transparency) assets

[iiceman]

I can recommend https://tinypng.com/ makes them way less bulky

 

On the other hand you could use svgs directly... not just as a mask... but make an svg define a shape and add the jpg as a texture to the shape. Then just the svg as your texture in babylon. Or am I missing a point here?

[prvi_treti]

I can recommend https://tinypng.com/ makes them way less bulky

 

On the other hand you could use svgs directly... not just as a mask... but make an svg define a shape and add the jpg as a texture to the shape. Then just the svg as your texture in babylon. Or am I missing a point here?

 

well, I don't limit usage with textures only, my primary interest is for sprite purposes. Other than that, tinyPNG isn't always desirable one (a virtually artifact free JPG is better on my own than quantizing PNG)

[Wingnut]

Hi guys.  Interesting conversation you are having, and all the comments I have seen... have good merit, in my mostly-lost view.

 

I wonder...  would we get more masking power/versatility by using a 2D canvas?  I think this is what Ice was saying, in a way, too.  Let's talk-out an example.

 

Let's say we have a JPG of some fancy carpet pattern.  We need it to be a CIRCLE with a soft, dithered edge (across a 10 pixel edge span, let's say).  We want to put this texture on a plane that has wood floor texture on it (also a JPG).

 

I think Ice is saying that... using our DynamicTexture-class, you could "build" this texture using the power of the context2d thing that our DynamicTextures use.  Context2d has lots of power, as you can see.  It could (likely) be told to fill the entire canvas with a wood floor pattern fill (from a JPG), then draw a soft-edge circle in the middle and fill the circle with fancy carpet pattern (from a JPG).  You just did a soft-edge mask of the carpet pattern, right?  Or you could initially fill the whole canvas with white, or black, and then put a soft-edged circle of carpet pattern upon it.

 

All of this might be possible using context2d without the need for any SVG.  There's a good chance that the SVG renderer in browsers... probably uses a context2d object, anyway.  SVG then is only a mechanism to create context2d objects.   Considering that we can manipulate context2d directly from JS... why use svg for constructing masks?   You can dynamically draw the mask yourself using the tons of toys on context2d.

 

But context2d is not all that easy to drive, eh?  I wish someone would write some cool math that would draw fun patterns on context2d's... and put them on dynamicTextured BJS shapes for us.  I bet mathematical pattern fills would be a fun hobby.

 

Again, I like this discussion.  Masking with svg.  Masking with context2d.  Maybe NEVER needing to mask... because of the power of context2d.  Maybe only applicable SOMETIMES.    It's fun having options!   I love having more than one way to do things.  Maybe MORE fun... are the surprising results we often get... from our experiments.

 

Here's a little playground that SamG wrote.  He didn't try to take over the planet or anything, but it shows some simple context2d manipulation of a BJS dynamicTexture.  I hope you don't mind the republishing, Sam.  http://www.babylonjs-playground.com/#1P3JT4#2  Notice that line 30 did not work for Sam.  No alpha.  But then he used it as an opacityTexture (line 31), and boom, alpha working fine.  That's likely irrelevant to our fun, here, but, it's still cool.  I read about it here.

[prvi_treti]

Of course you can "play" with canvas, it might be feasible depending on case especially for textures. But for tens of sprites , a solution like http://quasimondo.com/ZorroSVG/  basically using JPG is better imo.

[Wingnut]

Wow, that is a substantial amount of image size improvement!  Thanks for showing us that, mUnduli.  Interesting!