Loading STEP files in OpenCascade.js

[sasan]

Hi everyone,

I'm working on a project that requires loading STEP files for further processing within the browser. I'm interested in using OpenCascade.js for this task, but I couldn't find any definitive information on whether it directly supports loading and parsing STEP files in JavaScript.

Has anyone had experience with loading STEP files in OpenCascade.js? If so, are there built-in functions or specific approaches recommended for achieving this?

I appreciate any insights or guidance you can provide!

[clinuxrulz]

Replicad uses opencascade.js. Here is how they load a STEP file:

https://github.com/sgenoud/replicad/blob/d7fcd2b6e2aeb60e00b91c9a1a92f55329bc01db/packages/replicad/src/importers.ts#L13-L35

Personally, I use compressed BREP files to keep the file size down:

function loadShapeFromBrepBase64String(base64String: string): Result<ShapeId> {
    let [ r, gc, ] = Replicad.localGC();
    try {
        let oc = getOC() as OC.OpenCascadeInstance;
        let data = base64ToUInt8Array(base64String);
        let data2 = Pako.ungzip(data);
        oc.FS.writeFile("./input.brep", data2);
        let shape = new oc.TopoDS_Shape();
        oc.BRepTools.Read_2(shape, "./input.brep", r(new oc.BRep_Builder()), r(new oc.Message_ProgressRange_1()));
        oc.FS.unlink("./input.brep");
        let id = generateUUID();
        shapesHeap.set(id, shape);
        return ok(id);
    } catch (e) {
        return err(`loadShapeFromBrepBase64String failed: ${ocErrorMessage(e)}`);
    } finally {
        gc();
    }
}

The data exchange module of opencascade shows all the file formats they provide readers/writers for:

https://dev.opencascade.org/doc/refman/html/module_dataexchange.html

os.FS is an emulated file system, the files are only read & written in memory. It is provided by emscripten when it compiles opencasecade to wasm. (opencascade.js)

You can obtain a blob for the file via <input type="file" ...

Here is an example:

<label class="nav-link" style="cursor: pointer;">
    <span>Import</span>
    <input
        type="file"
        hidden
        onInput={(e) => {
            let inputElement = e.currentTarget;
            let files = inputElement.files;
            if (files == null) {
                return;
            }
            if (files.length != 1) {
                return;
            }
            let file: Blob = files[0];
            import_(file);
        }}
        accept=".obj,model/obj"
    />
</label>