@z3dev said:

Also, please take a look at the minimal viewer, which is really compact.
https://github.com/jscad/OpenJSCAD.org/blob/master/packages/utils/regl-renderer/demo.html

This is exactly what I was looking for! Talk about an under-hyped feature

I'm now able to render my design in the browser, live, in less than 300kb total, using the regl-renderer! Even less bytes when gzipped.

And what's cool is these are my actual CAD files used in production, rendered in the browser super efficiently.

THANK YOU!

@hrgdavor all my code will be open source. Technically it already is, but I haven't completed PRs yet. [1] [2]

Really I just took the regl-renderer demo.html that @z3dev linked to and used it for my models. The only things I changed:

• Include from unpkg.com
• Remove the axes and grid
• Added auto-rotate code so that it would spin
• Some code style cleanup, mostly object value shorthand {camera, controls}
• Fought with CommonJS vs ES6 module differences.

The CommonJS vs ES6 module issue is preventing me from using the exact same jscad code for development and rendering. Right now I'm converting jscad CommonJS into ES6 for use in the browser. I might need to use babel or requirejs or something.

This is how I'm looking to show off the designs in my site:

Final update, I have a solution I am happy with.

I use browserify plus a small script to combine my designs + jscad modeling + regl-renderer into a single bundle.js. Then all I just include that script via standard <script> tag on my page.

Final size of bundle.js: 99.9kb gzipped

Less than 100kb for a fully draggable, zoomable 3d design, directly from CAD files! That's smaller than a screenshot would be.

Design is live here if you're curious (but the rest of the project is still work-in-progress).

@z3dev not sure where it should go in docs. But there's a couple cool things I've done with JSCAD that would be hard to do with any other CAD software.

• From the same source files, I can generate both the colorized "assembled" model above, and a "print version" that has the parts arranged for 3D printing.
• Integrated into github CI/CD so that I know immediately if I broke my designs. Could easily write tests for things like bounding box size.
• Use eslint to enforce style rules. Browserify to bundle with any other javascript.
• Able to put the design in a website super efficiently. Directly from the source CAD files, without rendering to a huge mesh file format.

@hrgdavor all my code will be open source. Technically it already is, but I haven't completed PRs yet. [1] [2]

Really I just took the regl-renderer demo.html that @z3dev linked to and used it for my models. The only things I changed:

• Include from unpkg.com
• Remove the axes and grid
• Added auto-rotate code so that it would spin
• Some code style cleanup, mostly object value shorthand {camera, controls}
• Fought with CommonJS vs ES6 module differences.

The CommonJS vs ES6 module issue is preventing me from using the exact same jscad code for development and rendering. Right now I'm converting jscad CommonJS into ES6 for use in the browser. I might need to use babel or requirejs or something.

This is how I'm looking to show off the designs in my site:

@z3dev said:

Also, please take a look at the minimal viewer, which is really compact.
https://github.com/jscad/OpenJSCAD.org/blob/master/packages/utils/regl-renderer/demo.html

This is exactly what I was looking for! Talk about an under-hyped feature

I'm now able to render my design in the browser, live, in less than 300kb total, using the regl-renderer! Even less bytes when gzipped.

And what's cool is these are my actual CAD files used in production, rendered in the browser super efficiently.

THANK YOU!

The thing that I don't like about my approach so far:

Size of my jscad code: 12.4kb
Size of rendered obj file: 1.8mb
Size of three.module.js: 1.2mb
Size of jscad-web.min.js: 1.2mb

So now I'm thinking about how to render a relatively simple object without increasing the page size by megabytes. That being said, jscad viewer looking more attractive by the above math...

Thanks for the ideas! I'm leaning more toward using three.js to render the file.

Currently the best path I've found after some experimentation:

1. Use jscad to export as .x3d
2. Convert that to .obj using external program (meshlab)
3. Render obj with three.js directly using OBJLoader

Color is preserved. Not terrible workflow. Ideal would be a OBJ or GLTF serializer in jscad so I could directly export to a format supported by three.js. I may look into how complicated that would be to write...

I'd like to embed a 3D visualization of a jscad model in my website. It would be cool if people can drag the object around instead of just a screenshot. I was wondering if anyone has suggestions for the best approach?

Approaches I've considered:

• Embed jscad directly in the website. The problem with this is that first of all I'm not sure if there is a straightforward way to do that with the library. Plus I don't need the entire editor experience, and I don't even really need to compile the jscad source on the fly, I just have a static model.
• Export in some format and render using another library such as three.js directly. My question then is what format to use? I would like to preserve colors if possible, so STL is no good. DXF or OBJ maybe?

Curious what others have done.