Jump to content

Use SVG file as texture ?


Recommended Posts

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




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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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)


Link to comment
Share on other sites

Well, yeah, that's what I mean.. jut like normal textures :P 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 :P

Link to comment
Share on other sites

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


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.

Link to comment
Share on other sites

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 :P


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

Link to comment
Share on other sites

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


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)

Link to comment
Share on other sites

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.

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