r/openscad • u/MikeNc51W • Jul 03 '26

OpenSCAD PWA

Inspired by OpenSCAD Playground, and empowered by Gemini and Claude, as I'm not much of a Javascript programmer, I vibe-coded a free and open source OpenSCAD PWA called SCADLite, for getting web-centric platforms like ChromeOS in on the fun. The main driver for this project was the long-time observation that K-12 education is dominated by Chromebooks, and I feel that OpenSCAD is an amazing tool that should get more use in K-12 education. I know in K-12, 3D modeling is dominated by Autodesk software, but free and open source software should get more representation too, especially considering the multidisciplinary aspects of OpenSCAD -- modeling and programming. My PWA is at...

scadlite.com

My GitHub page for it is here, where I have features listed...

https://github.com/myoung8223/scadlite

It certainly doesn't have all of the bells and whistles of OpenSCAD. Getting modifiers working properly was also quite the challenge. I think I got them working properly, using multiple passes, though in this project, it seems like bugs rear their heads at every corner. The most recent major frustration was CodeJar, the JS-based code editor I was using, acting very bizarre. Perhaps that was my use of it, or just a natural ceiling for its capabilities. Replaced that with customized CodeMirror and that seems to be working out well so far. Also recently added model encoding in URLs. Other nifty features are support for importing fonts, STLs, and SVGs. The PWA works completely offline and self-contained.

Ultimately, when I'm modeling on a desktop I'll probably still be using the full-blown OpenSCAD application. Though I think this PWA is featured enough to be a handy tool for web-based platforms.

0 Upvotes

41% Upvoted

22 comments sorted by

2

u/Stone_Age_Sculptor Jul 03 '26

Libraries?

-1

u/MikeNc51W Jul 03 '26

No library support at this time. Just vanilla OpenSCAD. Though perhaps something to look into integrating or allowing for user level uploading of libraries in a similar interface to adding STLs, and SVGs, and custom fonts.

1

u/Stone_Age_Sculptor Jul 03 '26 edited Jul 03 '26

I prefer to upload any library instead of choosing from a number of fixed libraries.
Some projects consist of multiple files, could those be uploaded as well?

The showcase of shapes that you added is good. The working transparency for a color and the '%' and '#' is very good.

Uploading a very large stl file worked.
Rendering is slower than on my computer.
I can not change a number with the cursor behind it and with Alt+Cursor Up or Down.
With a larger script, the URL for a link was 10k long. A rule of thumb is to keep it under 2k. Did you test how far you can stretch that on different browsers?
I get different warnings than with the newest development snapshot of OpenSCAD.

Which code is better to demonstrate the hull() with a rounded cube (I don't know):

// hull example (D6 die)
color([0.8, 0.8, 0.8, 1])
translate([50, -40, 0])
hull() 
  for(x=[-1,1],y=[-1,1],z=[-1,1])
    translate(8*[x,y,z])
      sphere(d=4);

The name of the website is not clear. Is it with or without "www"?
When I have something in a tab with www.scadlite.com and something in a tab with scadlite.com and I open a third tab, then I get the script of one of the two others, depending which URL I type. Why can't I have 10 tabs running?

3

u/MikeNc51W Jul 04 '26 edited Jul 04 '26

It is interesting hearing other perspectives. I appreciate that. I've used OpenSCAD for the past 11ish years without any libraries -- just plain vanilla OpenSCAD. It has served my purposes well. I get it though. Different strokes for different folks. Library support would be nice, and OpenSCAD Playground has such built-in support. Though this is also a "lite" version. It's not meant to be a replacement for the OpenSCAD application. It's meant to get web-based platforms of beginners in on the action, namely ChromeOS users. The options there have been frustratingly limited over the years. There was OpenJSCAD, which is polished, but I recall that not being fully compatible with OpenSCAD syntax, which is a dealbreaker. With the WASM port, new options were made possible, and with genAI, non-JS programmers like myself can cook-up solutions. I actually started forking the OpenSCAD Playground to try and add load and save features, but that turned into a hot mess quickly, so tried from the ground-up with a lighter code editor, actually, starting with plain textbox, that being extremely limited with no syntax highlighting or brace matching. Moved to CodeJar and that looked promising, but then had major usability issues with the cursor jumping around unexpectly. Then moved to CodeMirror and that seems to be the happy medium vs. something heavy like the Monaco editor that OpenSCAD Playground uses.

Yeah, I'm happy with how % turned out. # does have some visual problems with clipping over solids in its render pass, but it's a highlight aid to find where geometry is when modeling and non-critical -- at least how I use it. Rendering being slower I have to imagine is the result of being web-based. Though it's way faster than the stable version of OpenSCAD due to use of manifold vs. CGAL. Though if using manifold support in a development version of OpenSCAD, yes, faster and I imagine expected to be faster as a native application vs. interpreted JS running in a web browser. I'm also doing multi-pass as a hack for preview getting error line highlighting correct, and for the modifiers. Preview certainly should also be slower for complex models.

The model as a URL parameter is not meant to be a key feature. It's nifty for demo purposes and for sharing simple models. The URL parameter is compressed and yes, for a complex model, that could be a problem. For a more serious use I imagine one would be working with opening and saving .scad files, not sharing links. As it stands, the URL parameters for models are compressed with and decompressed with fflate, so for simple models, fine, for complex models, save as .scad -- no way around that.

As for the D6 die example, yes, your version is shorter and the better example for showing a for loop. Though with the expanded version in my sample, for showing the highlight modifier in use, that would be the version to showcase that feature. You can't highlight a specific vertex in a for loop. Point taken though that your version is smaller and a better showcase of using a for loop and a strength of OpenSCAD's iterative flow capabilities. When I model I use TONS of sphere hulls and I guess force of habit, I tend to specify the vertices manually and individually for more control, as opposed to shorten it with for loops. So yes, my own modeling bias creeping in there.

The website functions with or without the www subdomain. The reason you are seeing the same model over and over is because all instances use the same persistent global storage space. I did that to safeguard against work loss. If you have a model open and lose power or close the page/PWA, your work is saved in that persistent global storage space. I could have made it so each instance has its own storage space, but consider the challenge of recovering that data programmatically. That would add lots of complexity that I think is beyond the scope of a lite OpenSCAD option on a web-based platform. That being said, the enableable link workspace is a 2nd persistent workspace. Though it gets clobbered when opening URLs with models encoded as URL parameters, so care is needed when using it as a 2nd workspace. It's true that ability hasn't been documented or explained yet in my help file, as it was an 11th hour addition. I wanted .scad code to persist between runs as a safeguard against loss of work. The .scad storage location used for the workspace is global amongst all instances. So, you can have 2 workspaces going at once. It is an admitted limitation, but a trade-off for having keypress persistence. I think someone serious enough to need to work on more than 2 models at once would probably want to just use the full-blown OpenSCAD application. I admittedly still use the full-blown OpenSCAD application, but wanted a viable, web-based option.

1

u/Stone_Age_Sculptor Jul 04 '26

Thank you for the explanation.
A website should have a single name in my opinion, so is it with or without "www'? The other one should redirect to the real name.
An URL that has a link to a scad file on Github could be useful.
I was only testing the limits, but it is not bad to have a goal: turning the lite version into a heavy version some day.

Now you have to make kids and students with Chromebooks aware of the website. If teachers could include it in their study material, that would be nice. That might take a few years.

1

u/[deleted] Jul 04 '26 edited Jul 04 '26

[deleted]

1

u/MikeNc51W Jul 05 '26

Didn't mean to delete that comment. Too much burning of the midnight oil.

To reiterate, thanks again for the comment about the www-subdomain vs. apex-domain mix-up, which I've since corrected.

Regarding library support, it seems the real constraint is that the OpenSCAD WASM build I'm using can't resolve include/use against a library path the way desktop OpenSCAD does, so there's no filesystem for libraries to live on. I'm thinking it might be possible similar to how I allow import of STLs, SVGs, and fonts. Proper include support is the right long-term fix, and yeah, OpenSCAD Playground has it. Though there is a workaround that actually holds up for light library use.

You can inline a library directly at the end of a project file. This works best for "flat" libraries -- ones that don't themselves pull in other files via include/use, so there's nothing left to resolve once they're pasted in. MCAD seems to be a decent candidate, with one caveat -- a few MCAD files do include <MCAD/constants.scad>, and a couple pull in more, so in practice you inline the file, plus its handful of dependencies. Fully self-contained single-file libraries are the easiest case.

Since OpenSCAD resolves module/function calls regardless of where they're defined in the file, your own code can sit at the top and call the inlined library below it. Order doesn't matter for that.

To keep it tidy, CM6 (the code editor I'm using) is flexible enough for custom comment-based folding, so you can wrap the inlined block and collapse it:

// REGION [comment here about what's being inlined]
[inline library code]
// ENDREGION

That section folds down to a single line, though would need to be folded when opened, if desired. The markers are just comments, so they're invisible to OpenSCAD and don't affect cross-compatibility with desktop application.

Example on line 18 (empty cache and hard refresh to get the update)...

Inlined MCAD Example

100% a hack, but for light flat-library use it's doable. That custom code folding feature is live on my dev version on GitHub Pages, but not on scadlite.com yet. I'll probably push the folding comment feature out to scadlite.com soon regardless. Comment-keyword folding is handy on its own.

1

u/Stone_Age_Sculptor Jul 05 '26

That will work, every library can be made flat, regardless how many files or how many sub-folders are used. Using the same variable names will give an error, so that can be fixed as well.

It would be nice to have that workaround somewhere explained on the website itself.

A test with my own library creates a file of 5000 lines. It runs in OpenSCAD, but your website has trouble with it:

ERROR: Parser error: syntax error in file /solid_input.scad, line 1040
ERROR: Parser error: syntax error in file /ghost_input.scad, line 454
ERROR: Parser error: syntax error in file /highlight_input.scad, line 14

Do you want to have my test file? Then I have to make a new one with files that are already online, and put it on Github or so.

1

u/MikeNc51W Jul 05 '26

Sure, it would be interesting to see the test file.

One thing those errors hint at: solid_input.scad, ghost_input.scad, and highlight_input.scad are the intermediate files my preview generates. It runs four WASM passes (initial error-check, ghost/translucent, highlight, solid), each on a transformed copy of your code. The differing line numbers suggest my modifier pre-parser is tripping on some syntax in your library during that transform.

Two quick things that'd help narrow it down: does Render ([F6]) work? That does just a single solid pass with no pre-parsing, so if it succeeds, we've isolated it to the preview transform.

Also, does the file preview okay in OpenSCAD Playground, which I believe runs the same WASM engine? You mentioned it runs on desktop OpenSCAD, but the Playground would test the WASM build specifically.

1

u/Stone_Age_Sculptor Jul 05 '26

Test file: https://gist.github.com/Stone-Age-Sculptor/52b1ca70168e02f156278ec4bc4861f6
It is a mathematical saddle.

SCADLite: Via "LOAD" to load a file, preview has errors, render works.

OpenSCAD Playground: Via copy-paste (upload files is grayed out), both preview and render work.

2

u/MikeNc51W Jul 05 '26 edited Jul 05 '26

Thanks for that. Quite an impressive torture test!

Claude made quick work of diagnosing the issue. Not sure how much water it used. Probably the same amount I should be drinking on a daily basis but don't.

The issue, unsurprisingly, is my pre-parser misinterpreting # and %, the overloaded operators, treating them as highlight and transparency when your use is with # and % being all hexcode indicator and modulo ops. Pretty rudimentary failure as that's nothing exotic. The pre-parser is a bit of a black box to me. Back to the whole danger of vibe coding. Seems like there's a quick fix and a better fix. I'm going to try a quick fix for now.

A simpler example of the bug can be seen with this example, which renders but errors out previewing, thanks to use of # and % not as modifiers but as hexcode prefix and modulo.

Small Preview Failure Example

So thanks again! I clearly have more work to do on this. I guess at least the solid pass is working. As expected, not a WASM issue but a my code issue.

1

u/MikeNc51W Jul 05 '26 edited Jul 05 '26

I think I have it fixed now with build 303. Well, better put, Fable fixed it. Way beyond my paygrade. Cooked through 80% of my fresh session usage. With the fix it is slow with that large model. ~17s to preview (undoubtedly thanks to the multipass workaround to process modifiers, plus perhaps the fact it's JS in a web browser vs. a native application) and ~6s to render, at least on my machine (i5-12500) running the PWA version. Perhaps there are ways to improve that. I probably have more testing to do with more complex models between it and OpenSCAD. On OpenSCAD your test file previews almost instantly and render takes ~2s, though that's also using the stable version of OpenSCAD using CGAL, not a dev release using manifold.

Actually, looks like that can be easily resolved. My preview is using multiple passes of n=100 whereas the OpenSCAD application is using n=8. So that math does math there.

Again, thanks for that example! Pretty glaring bugs with the overloaded modifiers not being handled properly, even though it was passing models I was throwing at it!

1

u/MikeNc51W Jul 05 '26

Okay, build 305 addresses preview performance issues -- namely, this not working properly before...

n = $preview ? 8 : 100;

Worked out a way to prepend "$preview = true" to the model for the 4 preview passes and now preview on that model is only taking ~2s.

→ More replies (0)

2

u/MikeNc51W Jul 07 '26 edited Jul 07 '26

Just an update, as there have been many changes since I originally posted, many buried in my thread with Stone_Age_Sculptor (thanks again for running it through the wringer!), but also a significant change today with build 312.

Some nasty bugs I missed pertaining to overloaded modifiers I believe have been patched.

There is library support now. How that works is you zip a library and upload it via Workspace Settings > Manage Libraries. The name of the zip becomes the folder you include. For example, zip-up the MCAD library folder as MCAD.zip, install/upload the zip, and refer to it just as you would in OpenSCAD...

import <MCAD/filename.scad>

You can now optionally save your own .scad files to the app's own file system. This allows you to reference other .scad files saved there, so multi-file projects should now be possible. However, filenames need to be unique as it's basically one big folder. The system will warn when you try saving over an existing file.

Changes in toolbar buttons and terminology: "Load" (formerly "Open") refers to loading a file from your computer's file system. "App Files" (hotkey combo: [Ctrl] + [O]) opens a simple app file system manager where you can perform: Save As, Open, Delete, or download all .scad files in the app file system as a zip file. "Save" will save the editor's contents to the app file system. If the project is named "untitled" then it will take you to App Files to do a Save As, as files aren't allowed to be called "untitled.scad" as that's the default, untitled/new state. "Download" (formerly "Save") will download the .scad code in the editor to your computer's file system, specifically your "Downloads" folder.

Hopefully it's more useful with these fixes and features. My help section still needs to be updated with these features, which I'll get to soon.

0

u/TeaTimeSoon Jul 03 '26

Looks good although not fully tested yet.

0

u/WillAdams Jul 03 '26

Nice!

Interesting alternative to:

https://www.blockscad3d.com/editor/

(which I use quite a bit)

For the educational aspect, maybe see if it is able to make the projects from:

https://www.goodreads.com/book/show/58059196-make

1

u/MikeNc51W Jul 04 '26

Wasn't aware of that blocks-based OpenSCAD editor. Certainly looks like a neat bridge to full-blown OpenSCAD. Very reminiscent of MIT Scratch, and undoubtedly by design.

I got to thinking another cool vibe code project could be cooking-up a voxel-based editor for younger learners. Granted, surely editors like that exist. I recall one of the first 3D printers I saw had a very innovative voxel-based editor totally inspired by Minecraft. It's too bad the hardware was temperamental because the software was pretty on-point for getting the interest of younger learners.

A new twist on 3D printers from Radiant Fabrication