SHAPE SCRIPT

This app offers a Javascript interface to the powerful OpenCascade geometry kernel (via a WASM module). It allows you to script complex shapes using either the high-level APIs provided or OpenCascade's own lower-level methods. It pairs a modern code editing environment (Monaco) with an advanced model viewer that lets you select and interact with the faces, edges and vertices of the resulting shapes. Once created, you can interrogate shapes or export them in a wide range of geometry file formats. The unique benefit of using OpenCascade is that faces are defined using continuous functions rather than discrete facets, so it accurately retains surface outlines and edges over multiple operations.

Screenshot of new Shape Script app
Figure 1: A screenshot of the new ShapeScript app running in a web browser.
Launch app in new tab...

Overview

This app is very similar to OpenJSCad and ImplicitCAD , but uses the more powerful OpenCascade geometry kernel for many of its operations. Its development was heavily influenced by the work of Johnathon Selstad (zalo) and his Cascade Studio project on GitHub, but this one uses my own API and framework for displaying and selecting shapes.

This app also uses the Monaco code editor which powers Microsoft Visual Studio Code . This includes full-featured editing with IntelliSense and type definitions for all Javascript and OpenCascade objects and methods, as well as the higher-level APIs. The editor component is also dynamically resizable, so you can expand it or move it out of the way as required.

Available APIs

Coding directly with OpenCascade classes and methods can be quite daunting, so this app provides a high-level CAD API that lets you use OpenCascade in a much simpler and more intuitive way. The app also provides a mid-level OCC API that mediates between CAD and OpenCascade, but offers much greater flexibility and control whilst still maintaining a similarly intuitive method structure.

In addition to these two APIs and OpenCascade, you can use some of my framework classes to generate faceted geometry that can be used as the basis for OpenCascade meshes. These classes also provide access to quick-hull, concave-man, perlin-noise, delaunay triangulation, marching cubes, surface nets and volumetric voxelisation algorithms that can be used in all sorts of ways to generate complex shapes.

Generator Classes
Utility Classes

Figure 2 shows an example of some polyhedron geometry generated using framework classes, and then sliced up into 3 separate levels for later use in the outer facade for a three storey/story pavilion.

Figure 2: An example model generated using PD.Polyhedron and then sliced into 3 levels for use in an external facade.

Surfaces and Edges

Architects and engineers who use BIM expect to be able to generate technical drawings from their models, not just shaded images or 3D renders. Technical and architectural drawings such as elevations and sections typically don’t use surface shading, so rely on lines drawn at edges and surface boundaries in order to be intelligible.

Unfortunately, the output of most CSG libraries is an unstructured mesh, which is often just a soup of triangles. This is perfectly suitable for 3D renderings that use shading and textures to visually define a form, but generating technical drawings from triangle meshes requires a lot of post-processing and heuristic inference.

The benefit of the OpenCascade kernel is that it allows 3D shapes to be defined in terms of surfaces and edges, as either planar or curved faces, and preserves that information in a useable form throughout all operations, as shown in Figures 3 and 4.

Figure 3: An example surface selection showing project hierarchy and selection information.
Figure 4: The same example showing edge selection.

Main Features

The following are some of the stand-out features of this app:

  • It uses the powerful OpenCascade WASM CSG engine, a robust geometry kernel capable of handling complex shapes, NURBS surfaces, spline curves and other advanced operations beyond just constructive solid geometry (CSG).

  • OpenCascade internally defines both curved and planar surfaces as bounded continuous functions rather than discrete facets, so the results of multiple geometric operations preserve smoothly curved faces and edges, making the results far better suited for representation within technical drawings.

  • It leverages the power and flexibility of the Javascript programming language to create script files for generating complex shapes, sculptural forms or BIM geometry.

  • The interactive 3D viewer allows you to select surfaces, edges and vertices of generated shapes. This allows you to visually and interactively examine the shape and create arrays of selected face, edge and vertex indices for further processing - such as applying fillets and chamfers.

  • The app uses the Monaco code editor which also powers Microsoft Visual Studio Code. This includes IntelliSense with full type definitions for all new and existing objects and methods. The editor is also resizable so you can expand it or move it out of the way as required.

  • In addition to OpenCascade objects and methods, you can also use the PD.Shape and PD.Polyhedron classes, as well as framework classes to access quick-hull, concave-man, perlin-noise, delaunay triangulation, marching cubes, surface nets and volumetric voxelisation algorithms.

  • Shapes can be exported to a range of geometry file formats, including .GLTF, .GLB, .USDZ, .3MF and .3DM, as well as the standard .OBJ, .STL and .PLY formats. You can also copy shapes as a BIM.Element for pasting directly into my future BIM platform apps.

  • The app supports the File System API , meaning that you can work directly with script files on your local device or a network shared file system. Thus, in browsers that support it, you can use the Open File... menu item to load in a script file stored on your machine, and then automatically update the same file by selecting the Save Changes menu item. In browsers that do not support it (Safari/Firefox), it will fallback to the standard upload/download process. Of course you can still use the Load Session... and Save Session... options in all browsers to save scripts to local storage.

Display Options

My new web framework offers a range of standard display and view settings, as well as date, time and location settings for simulating shadows and sky conditions. These can be accessed in the various panels within the SETTINGS sidebar.

Figure 5: An example of some of the display options available in the `SETTINGS` panel.

Debugging Scripts

Unfortunately the app does not yet have good support for debugging scripts, mainly as they run entirely separately within a web-worker. Whilst you can cancel an ongoing script, any errors or exceptions are only really caught at the invocation point. I’m still working on this, but in the interim I have provided a reasonably comprehensive logging system within the APIs that you can access using the Show Process Log... item in the CODE menu. As shown in Figure 6, this details the outcome and timings of each API call so you can at least see where it is failing.

Figure 6: The process log generated when creating the shape shown in Figure 5 above.

Help with Future Development

Despite its relatively simple interface, this tool’s use of OpenCascade makes it pretty powerful, and there aren’t too many types of geometry that you won’t be able to create with it. Unfortunately, my focus is still on finishing my BIM framework, so I can’t spend the amount of time that I would like on the development of tutorials, more example models and some really good documentation.

If you are interested and think you may have some time to help, I would really like to hear from you (see contact form). As a taster, the following are some particular areas that I would really like to work on but can’t.

  • I have some pretty comprehensive documentation available in JSDoc format, but there are no good Bootstrap v5 templates available. I use DocStrap as my template of choice, but it is still based on Bootstrap v3 and doesn’t support light/dark modes. I have developed a process that uses jsdoc-to-markdown to generate documentation pages compatible with this website, but that process doesn’t handle methods that use a single config argument very well, listing each optional property of the config object as separate arguments. You can see the issue in this example . This can be manually edited, but has to be done every time the documentation is (re)generated. Thus, I can supply all the base material, but having some well formatted and readable documentation for each of the various classes that scripts can use would be really great.

  • If you look at the existing documentation for the PD.Shape and PD.VolumeArray classes, there are many more ways of generating and manipulating geometry than I have been able to include in the existing examples. Some additional examples and/or tutorials that investigate more deeply things like using surface nets with volumetric data, super-shapes and spherical harmonics, convex hulls, offset hulls, Perlin noise, twisting and scaling shapes along an axis, and the metaballs features would be very useful.

  • Plus several others that I haven’t worked out how best to describe yet…


Change Log

1.0.0 2025年09月06日

  • Initial release.

AltStyle によって変換されたページ (->オリジナル) /