Parametric generation with web/javascript

I am intrigued by this MakerCase tool and I am wondering how I would make my own parametric model generator.

There are situations where I have a parametric model and I want to publish it, but customizing parameters requires an external tool, like OpenSCAD for example. For someone to customize the model requires multiple steps, where one of the steps is installing a program, which is a tall ask.

What I am wanting is something that runs purely in the browser without any back-end, so it can be entirely hosted on GitHub (or any other static site) and it must directly generate the parameterized model for download, similar in a way to my test pattern generator.

What would be the recommended way to approach building such a tool?

The requirements are:

  • Must run entirely in browser using static data and no server computation
  • Must enable specification of parameters, generation, and download of SVG or STL models
  • Must be completely independent of external services, e.g. online Fusion 360 or OnShape hosted models are not allowed. Or TV for that matter, if it even still works.

These are some non-requirements:

  • Visualization/rendering optional, not required
  • Need not be pure js; solution may use WebAssembly, meaning C/C++, Rust, perhaps other libraries are allowed
  • Models need not be represented in a standard language or format. I can implement models in a custom format if necessary.

How would one go about implementing this?

5 Likes

Darn it you set high goals for yourself, you know it!
I do i.t. but never really approached this. Thingiverse always wow’ed me with the openscad plugin, (not really plugin but where you put in values and it spits out). So i myself would ponder that openscad must have a way to do this. Now at WHAT COST! The hardware required to do that and allow for multiple users would be quite high end. It may require a high end graphics card for number crunching.

Here is another one. Boxes.py boxes.py would indicate it is python!

Wow, does this help??? All Box Generators — boxes.py documentation

4 Likes

Who’s the audience, someone not opposed to using a minimal web equivalent of OpenScad, e.g. https://codepen.io or https://projects.codesandbox.io that loads some js library exposing primitives, manipulation operations and svg export functions?

https://www.makercase.com looks cool, author has done a bunch of interesting projects/companies.

Cheers for sharing Boxes.py , nice library, so many designs.

Can even run Python scripts directly within a browser these days, using WebAssembly based python compilers e.g. https://wasmeditor.com/

The idea is that it would completely hide the modeling, similar to MakerCase, and present only the customization options, and some documentation/instructions, plus a ‘download’ button (actually generates browser-side).

Each project/model would have its own URL on GitHub and would offer a handy way to share by just giving the URL. Printables is fine for static models but it falls short on customizable designs.

Maybe some query options in the URL could pre-populate the customization fields, so it’s also possible to share a specific customization of a model.

If a model has multiple parts, I guess that would be another desire, which is to download a zip file containing the parts, although that’s not necessary for the first iteration.

It wouldn’t even need to be terribly sophisticated… I’d love to have some simple parametrics like cut a hole x mm in diameter y mm deep using z bit parameters using current location as center point built into something like cnc.js

I should have done a bit more research first.

This web OpenSCAD port (cross-compile) proves that it’s possible.

Dumping someone into an editor is not very user-friendly though, and so I’d want to hack the UI to just be the parameters.

Possible, but it’s not yet apparent if it’s possible for me…

1 Like

That openscad library changes a lot of the issues.

I can imagine the parts needed to build the box site that can download svgs:

  • user interface to set parameters
  • regular mathy computation to generate the vertices and shapes needed
  • format output as svg. It isn’t bad

But that would only be usedul in very limited cases, like the box. Cases where you were going to get a lot of uses out of it, and it would be simple to generate the geometry yourself.

But the openscad library makes it way more useful. What you need is a sort of “vanilla” project. When you make a new project, you define:

  • A list of parameters. Maybe a json object with names and types. Future versions could support arrays or maps
  • The “hard coded” openscad file, which you would manually create offline.
    The vanilla project:
  • creates a simple UI for the user to set parameters
  • combines the results from the parameters with the openscad script
  • sends that to the library you linked l
  • shows the result with the stl viewer they used
  • builds the download stl for the user when they approve

I can easily see you making 25-50 of these. But even at 3-5, having that “scaffolding” ready would be a big help.

I suppose the minimum viable product doesn’t include the scaffolding, just a single proof of concept.

The ideal for me is if it could run on a smartphone. That is how you know you are pushing the limits.

2 Likes

100% agree Jeff. Once the groundwork is laid, it should be very quick to wrap a parametric model into a GitHub page by copy-pasting the vanilla project, tweaking the web UI (including adding instructions), and uploading the parametric model into the back-end.

I was unsure if I would have to do a lot of work to build that starting point, which might be beyond me, but now it looks like I can steal from existing work where they have done most of the hard part. They already have basically a superset of what I’m looking for so maybe I can prune it down and locate the right hooks to stuff my parameters and models.

1 Like

Okay this is really terrible and barely limping along but shows the concept:

https://vector76.github.io/web_customizer/

Stole a bunch of code and hacked it into submission. It’s not pretty; please don’t judge my javascript :laughing:

Right now the parameters have to be manually implemented in the HTML forms and manually bound in the javascript that invokes OpenSCAD. I’m sure there’s a nicer way.

2 Likes

Nice!

Are you wanting to work towards a markdown based solution. e.g. Something like GitHub - mermaid-js/mermaid: Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown where a model author writes markdown containing ``` code block tagged as MetaCad3 :slight_smile: (or what ever this effort is called), then an included library can interpret and render the warm fuzzy text field and button UI based parametric experience? Or working towards different authoring, and consumer, experience?

Guessing you already saw https://ochafik.com/openscad code GitHub - ochafik/openscad-wasm at editor-ochafik.com (last updated 2022/3) was forked from GitHub - DSchroer/openscad-wasm: Webassembly port of OpenSCAD (updated more recently 2022/12/24). DSchroer (Dev at Unity) has moved on to create GitHub - DSchroer/dslcad: DSLCad is a programming language & interpreter for building 3D models. “DSLCAD is a programming language & interpreter for building 3D models.” in Rust, so could be packaged in WebAssembly for WebAssembly. afaik DSLCAD only compiles to native app. Might be worth skimming through dslcad syntax if you’re looking to create a new model/language/representation as part of this effort.

2 Likes

It works on my phone! :tada:

There are many. I have enjoyed using react-bootstrap a lot. I have some colleagues that really like vue.js

This is exciting.

1 Like

Got most of the necessities working:

  • Query strings in the URL can specify the parameters
  • Support for numbers, boolean, and strings
  • All javascript is static and models can be added with only a html file for the UI and a zip file for the model
  • Arbitrary parameters defined in html file, not in javascript

Also I changed the name of the repository to “Web_OpenSCAD_Customizer” because “web_customizer” is not nearly descriptive enough.
https://github.com/vector76/Web_OpenSCAD_Customizer

Here is a nontrivial example of a customizable model:
https://vector76.github.io/Web_OpenSCAD_Customizer/gridfinity_bins.html

I posted the same gridfinity model to Printables but I’m guessing the majority of people are not willing to download OpenSCAD to take advantage of the customization, which makes me sad.

Now each model is just a html/zip file pair, and it works.

4 Likes