Enhancement: custom font

[lebryk]

Is it posible to use other fonts in vector_text() or change default font to other?

[dragondgold]

Any updates on this?

[z3dev]

Basically, no. The current font (1) is a series of points and pretty fixed at this point.

In order to support "fonts", the whole concept of 2D vector graphics needs to be supported. It's not impossible but it would take a whole new library, and other changes.

However, there are some great tools for converting images (including letters, words, text) to DXF, EPS, PS, SVG, etc. You might be interested in some of those. Potrace is probably the most well used and versatile; http://potrace.sourceforge.net/

So, you could convert an image (with those nice fonts) to DXF, and import into OpenJSCAD.org. I have converted several images (of text) to DXF and SVG with great success. Quite impressive.

In addition, SVG support is coming soon (less fonts). There are many applications that can produce SVG files, and export fonts as SVG paths. Those SVG paths will be importable into OpenJSCAD.org.

[focomoso]

Does anyone know how blocksCAD manages to do it?

linear_extrude( height=3, twist=0, center=false){
  text("hello", font = "Nimbus Sans", size = 10);
}

Works fine...

[eric-schleicher]

Fwiw, opentypejs is the way to get this supported.

Would be a great addition here. On Feb 23, 2016 3:11 PM, "James H. Kelly" notifications@github.com wrote:

Does anyone know how blocksCAD manages to do it?

linear_extrude( height=3, twist=0, center=false){ text("hello", font = "Nimbus Sans", size = 10); }

Works fine...

— Reply to this email directly or view it on GitHub https://github.com/Spiritdude/OpenJSCAD.org/issues/72#issuecomment-187957919 .

[focomoso]

Ahh, I missed that. I suppose I could take a look to see how easy / hard it would be to add to openjscad.

[z3dev]

No idea. I see the following library in the BlockCAD page source but know nothing about this.

[focomoso]

I'm looking at it now. Doesn't look too crazy. I forked and will see what I can come up with.

[z3dev]

Super. Let me know if you have any questions...

[focomoso]

My questions are mostly about how the project is organized. Since you're not using browserify or something similar, my initial approach was to just add opentype.js directly from the index page, but I'm unable to access the opentype global (it's definitely being loaded and is available on the global scope, but not in openscad.js). Is there a better way to do this? I may not be getting how the project is laid out in general.

[z3dev]

i see...

the JSCAD scripts are executed via Worker threads. this allows the GUI to remain active while the script is being evaluated.

the down side of this approach is that the Worker thread has to "know" which libraries to import. There's a table of libraries being passed to the Worker thread. You find the short table in openjscad.js, function rebuildSolidAsync().

To continue development, I suggest adding the opentype.js library into that list.

[focomoso]

Thanks, I'll give it a shot.

[focomoso]

I was able to import opentype but, unfortunately, opentype.js does not play well with web workers. There are cross origin issues when loading the fonts and it needs a drawing context (such as canvas) to do it's magic.

I'll keep digging.

[eric-schleicher]

Interesting...

It needs a canvas to finish opening a font? Or to draw?

In my totally unrelated project im using opentypejs to extract the glyphs and draw nativetly in svg paths. Im working directly with the command arrays and dont use a canvas to draw... but it definately available if opentype is using it under the hood since my use isnt using workers...

Or are you getting stopped by the cross origin issue first? Perhaps You might download the font outside the worker context and pass it off as base64 encoded buffer...

From github docs page: "If you already have an ArrayBuffer, you can use opentype.parse(buffer) to parse the buffer. This method always returns a Font, but check font.supportedto see if the font is in a supported format. "

This would seem to allow a font to be handed over directly... a potentially reasonable approach

Then the worker can recieve the full font without having to download it. On Feb 27, 2016 10:30 AM, "James H. Kelly" notifications@github.com wrote:

I was able to import opentype but, unfortunately, opentype.js does not play well with web workers. There are cross origin issues when loading the fonts and it needs a drawing context (such as canvas) to do it's magic.

I'll keep digging.

— Reply to this email directly or view it on GitHub https://github.com/Spiritdude/OpenJSCAD.org/issues/72#issuecomment-189699376 .

[focomoso]

Thanks for the ideas. I was able to add an initFont() function to OpenJsCad.Processor that successfully loads the files, but I'm having a heck of a time figuring out how to pass the buffer into the worker. Neither the onmessage function in openjscad.js nor in jscad-worker.js seem to get called.

[z3dev]

Here's the flow (without technical details)... browser calls Processor.setJsCad(script,fileUrl)

• processor parses script to get array of parameters
• this.rebuildSolid()
• .. try
• .... this.rebuildSolidAsync()
• .. catch
• .... this.rebuildSolidSync()

Inside rebuildSolidAsync()

• get parameters
• get script
• worker = createJscadWorker( baseUrl+fileName, script, callBack() )
• get libraries

• worker.postMessage( {parameters, libraries} )

  // the callBack is called when the worker is complete, which loads the results into the viewer

The worker thread only has access to the parameters and the libraries. If you want to pass more data into the worker thread then the data needs to be provided in the parameters of postMessage().

What you might want to do at this point is force the use of the rebuildSolidSync() function. This function doesn't have limitations on what's accessible (It's just a normal function call). You can continue to develop the font support.

After completing the font support, we can talk about what is necessary inside the Worker.

[z3dev]

@focomoso How goes the new development? Did the tips help any?

[focomoso]

I got sidetracked... Will look at this over the weekend.

[z3dev]

Hi @focomoso Did you have time to make any progress?

[z3dev]

Any progress on the support for other fonts?

[faithhack]

Any progress on this? BlocksCAD's working support is in: blockscad/viewer.js (formally openjscad.js) pathToPoints(path, resolution) blockscad/text.js openscad-openjscad-translator/src/PrimitiveModules.js

It seems like text.js does the pre-loading of the fonts with opentype.load and the viewer.js handles turning the opentype.getPath() Path into points and paths for a 2D shape for the PrimativeModules.js Font. I'm not sure I understand the webworker issue (yet) but there is also webworker code in BlocksCAD viewer.js

[kaosat-dev]

@faithhack thanks for the informations ! it should be considerably easier to add support for it these days, as we cleaned up the code significantly :easier to see where/how webworkers are used ( and we switched to a browserify approach)

Honestly we ( @z3dev & I ) are already working on a ton of stuff, so not making any promises on this , but it would be nice ! @focomoso is this still a possibility for you ?

[profOnno]

I'm working on a opentype.js wrapper. I've got a prototype working, but for now it needs jscad to accept the main function to return a Promise. That requires rebuildSolids and jscad-worker to change a bit. See Promises in jscad: #396.

The key part is to use absolute URLs when using XMLHttpRequests. The opentype.js lib has an load function but this didn't work in the worker (still have to investigate), so I made an xhttp binary request to get the font. opentype.js can parse the result, and Bob's you uncle.

My version of csg-viewer:

[profOnno]

Did some more work, now most of the glyph are working, so now you can add a emoji on your cube(). I have a font2jscad script, this way fonts can be included in the current version (v1) of www.openjscad.org.

The opentype.jscad library still needs some attention and a lot of cleanup before I put the source on github.

ps. If you use this please check if you may use the font for you application. Not all fonts are free.

[z3dev]

@zfan40 Thanks for the interest in JSCAD. There was a new release which added enhancements to spacing, alignment, and sizes. Please see the User Guide, Text information.

Hopefully, that give you enough functionality until V2 arrives.

[cioddi]

Is there any info/documentation available on how the ttf fonts are converted into the format that is used in the examples? The ones in this folder https://www.openjscad.org/fonts/

I already found this repo https://github.com/ojsc/opentype.jscad and the correspondig converter but the solution appears to be incompatible with the current version of openjscad.

Thanks for any help and all the great work that has already been done on this project.

[cioddi]

I created a pull request (https://github.com/ojsc/opentype.jscad/compare/master...cioddi:patch-1) for https://github.com/ojsc/opentype.jscad to fix the example. It was just a minor incompatibility with the latest API. The functionality is at this point sufficient for me as it provides a way to use any ttf font with openjscad. Once V2 is released this will be deprecated anyway.

[3dpros]

has anyone tried to get the opentype.jscad working with this? https://github.com/danmarshall/jscad-gallery

[danmarshall]

@3dpros - we should add a font picker as an input type. Can you open a new issue at https://github.com/danmarshall/jscad-gallery ?

[3dpros]

@danmarshall Appreciate your reply, I created an issue for it! Any tips on how to get fonts working in the meantime, even just statically defined in a js file?

[z3dev]

I have a solution but it requires V2 of OpenJSCAD.org, and only CLI at this time. Interested in an adventure?

[3dpros]

I was hoping to integrate it somehow into Dan's project which has many of the features I am looking for in my application. It looks like it uses jscad-api which appears to not have the latest openjscad features. Unfortunately CLI won't work for my use case.

[z3dev]

I just created a new repository as part of the JSCAD Community called jscad-text. If anyone is interested this has the code to convert the SVG-like paths (from opentype.js) to JSCAD paths.

Extending this to work in V2 WEB / APP UI may be possible. Let me know if interested.

[z3dev]

V2 JSCAD can handle outline fonts via this library.

https://github.com/jscad-community/jscad-text

This library can be used as part of any V2 project. In addition, the library can be use via WEB or CLI.

[z3dev]

Closing as font outlines are now possible using V2 JSCAD, which has been released.

[Rlesjak]

@z3dev

Closing as font outlines are now possible using V2 JSCAD, which has been released.

Hi, is there any documentation on this?

I found this: https://openjscad.xyz/dokuwiki/doku.php?id=en:design_guide_text

But it was written before you closed this issue, also you mentioned this repository: https://github.com/jscad-community/jscad-text in which google fonts can be used, yet docs say only single-line fonts can be used. Can this repo be used to 'compile' google fonts for JSCAD?

In short: What I would like to do is generate/render 3D text via web (on browser) using some google fonts. I am just using @jscad/regl-renderer.

Here is my current demo.html file I created using examples, I would like to implements google fonts here. https://gist.github.com/Rlesjak/b65e84cdc8fa54b4e7301fa31c1eb589

[hrgdavor]

I have not played with ttf in jscad, but this might be useful: https://gero3.github.io/facetype.js/

[z3dev]

@z3dev

Closing as font outlines are now possible using V2 JSCAD, which has been released.

Hi, is there any documentation on this?

I found this: https://openjscad.xyz/dokuwiki/doku.php?id=en:design_guide_text

But it was written before you closed this issue, also you mentioned this repository: https://github.com/jscad-community/jscad-text in which google fonts can be used, yet docs say only single-line fonts can be used. Can this repo be used to 'compile' google fonts for JSCAD?

In short: What I would like to do is generate/render 3D text via web (on browser) using some google fonts. I am just using @jscad/regl-renderer.

@Rlesjak Welcome!

Correct. That little library can be used to build outlines from TTF fonts. You can play around and try some of the examples. The documentation also shows how to construct a project which includes the little library (and the opentype.JS library).

For Google fonts, the font has to be fetched from Google. The example only works for NPM (command line) based projects.

Are you building a website?

[hrgdavor]

I was very intrigued by the issue so I decided to try to make a version http://3d.hrg.hr/jscad/jscad_text/demo.html

I copied code from https://github.com/jscad-community/jscad-text to transform text command to polygons, then used some magic knowledge of how jscad geoms work to create a big geom2 with sides that match ccw for font outside and holes.

it is a bloody mess but it works, so go play with it :D :D :D

it also uses promise to wait for font to download and injects entities into render

just download files from http://3d.hrg.hr/jscad/jscad_text/

I think I am gonna make a jscad lib out of it :D

[Rlesjak]

@hrgdavor WOW! Thanks a lot for the help!

I tested it with a few additional fonts and it seems like on some fonts triangles get flipped. You can see it here: https://demo.rlesjak.info/jscad/fonts/

edit: It seems like it happens when two letters intersect.

[hrgdavor]

yes, that could be resolved by

A) separating polygons for each letter

• and realising which one a hole belongs to so to group them
• then making union while it is still 2d (union is much faster in 2d) and then extrude

B) but thinking of it, maybe just creating separate shape out of each poly, and doing union might do the trick too without being concerned which one is hole and which is area

---

I am looking to separate the useful code from there into a library that jscad scripts could use by importing, so If you make progress on this let me know. If you are unable to do it, I might give it a try later on when I got time to play with it more.

I like to chat about jscad so feel free to join discord server https://discord.gg/BVnJ27vgcD

[hrgdavor]

here is updated version that does union and subtract based on if path is CCW copied function that is not yet officially part of jscad #889

http://3d.hrg.hr/jscad/jscad_text/demo.html

[mark-hahn]

I've created a utility that converts single-line SVG font files into jscad text data format. SVG font files are nice because they are a standard and widely available. I've personally found TTF files to be a kludge with paths being retraced needlessly or open-path paths being closed and screwing things up.

The output can be a module to be imported, or the data can be directly injected into a jscad file. (I directly inject it into my code because I use https://www.openjscad.xyz and I don't know how to import modules in that environment).

You can find it at https://github.com/mark-hahn/jscad-font-gen. Enjoy ...