Hello, I am interested in achieving super crisp graphics with Touchdesigner. Wondering if there is anything planned in development, and/or if there is anything us users could accomplish on our own?
The capability seems to be there, based on my googling. What do you guys think? How far off are we from real-time animated vector graphics?
Hi! Im using 2 directions to get similar results, hope this helps a bit.
First one is to use sops with a constant texture. Since geometry is based on vectors, the only difference is that you have a z axis as well . If you keep that at zero you’ll have a really powerful toolset to generate and modify 2D vector based content.
A second approach is to use fonts. If i have fixed vector shapes i want to use i generate a Font from these. There are several Free Font builders online where you could easily copy paste shapes from illustrator .
Shouldn’t TD be able to do something equally as crisp and performant? I’m trying to understand on a low level what the differences are, so that I can be either proactive or content, but I don’t quite understand it yet…
It’s just a matter of time and priorities. We are working on a new Line MAT that will allow for nice vector line rendering. I’ve started work on signed distance field text rendering a while ago, but haven’t gotten around to finishing it.
TouchDesigner doesn’t have direct support for vector graphics in TOPs yet is the main reason. The SVG TOP is a little old (the 088 way we got svg in) and basically rastorizes the svg into TOPs. But now you can use the Web Render TOP for that and much more text formatting options, we are getting great results from it.
Have you given the Web Render TOP a shot?
Got it. I understand there are probably a million things you guys are trying to add to touchdesigner. It is all much appreciated!
I am starting to dig into the web render top, which does seem like a good solution for the text formatting side of things. Trying to figure out how to deliver dynamic html to it generated from table dats. Is there a preferred way of updating a html file every frame? So that the web render content can be updated as quickly as a text top?
If you want to change the content on a website fast: instead or loading another html page, the fastest approach is to use Javascript to change the content & layout - like all current websites do.
You can build a webpage with full CSS and call any Javascript function from Python in TouchDesigner, using the executeJavascript function in the WebrenderTOP class..
The Webrender TOP also has a great option to render any page with transparent background which helps you to composite the result in your TOP chain.
Working on converting a table DAT to dynamic html. Had to do a weird expression to convert python DAT expressions to javascript, but seems to be working…
If you point the webrender top to a html file like this:
[code]
...
...
...
...
[/code]
Then use a table DAT like this:
and a dat execute with this script:
def onRowChange(dat, rows):
for r in rows:
script = 'document.getElementById("'+str(dat[r,0])+'").innerHTML = "'+str(dat[r,1])+'";'
print(script)
op('webrender1').executeJavaScript(script)
return
It changes the divs when you change the table
Now the question is, is there a more elegant way of passing python variables to the javascript?
coincidentally I’ve been working on a similar component and some ideas over the last couple weeks. One thing that I just added last week was the ability to load custom fonts into the stylesheet. For it to work I use a default html page such as:
It gives me a style tag to load up my own styles as well as a body tag to load in custom content. Also I set the background to transparent and am making sure to have 0 margins so I can treat the whole thing as a pixel canvas.
To get the custom font thing going, use this:
cssRule = "\"@font-face\",\"font-family:'{0}'; src: url('{1}');\",0"
# setup first font
ruleSet = cssRule.format('quote',tdu.expandPath(quoteFont))
style = 'document.styleSheets[0].addRule({0})'.format(ruleSet)
webRender.executeJavaScript(style)
You can now use a font-family called ‘quote’ in any of you style tags which will call up the font you specified in quoteFont (I tried ttf fonts without an issue)
Obviously the Idea goes much further as you can address any part of the html you are passing into the webRender TOP. Update one element in your text by identifying it via a tag… Well packaged this becomes a great dynamic text edit and formatting solution.
Something I haven’t solved yet is the problem of special characters - somehow those get destroyed on the way to the webrenderer…
Hey snaut, love your .format() method with executeJavaScrpt()! That’s great - does wonders for live updated CSS. One note though - I had to change .addRule() to .insertRule() (which has a slightly different syntax) for the javascript to work. Not sure why.
I’m trying to load a local font file just like in your example, but it doesn’t seem to work for me. Just to double check that my font file paths were correct, I tried opening the same HTML file in chrome (outside Touchdesigner) and it loads the fonts correctly, but it seems like the font file isn’t getting loaded by the WebRender TOP Touchdesigner.
Is there anything I have to enable to make sure the chrome process running in the WebRender TOP has access to my file system?
