トップ › 技術ブログ › ブラウザで動くソリッド CAD

ブラウザで動くソリッド CAD — OpenCASCADE を WebAssembly で動かす

3D CAD（Gratias WebCAD）2026年10月21日Gratias 開発チーム

Gratias WebCAD は、インストールなしで、ブラウザだけで使える 3D CAD です。目指しているのは、3D CAD を触ったことがない人でも自力で始められること。そのうえで、作った形は見た目だけの網（メッシュ）ではなく、面と辺と体積を正確に持つ「ソリッド」です。その計算を受け持っているのが、オープンソースの CAD カーネル Open CASCADE Technology（OCCT）を WebAssembly にしたものです。この記事では、OCCT をブラウザで動かすための条件と、開発で実際にぶつかった問題を紹介します。

何ができるか

操作の流れは、広く使われている 3D CAD に合わせています。「スケッチを作成」で平面を選んで線や円を描き、拘束と寸法で形を決め、「押し出し」で立体にする、という順です。2026 年 10 月時点で、次のことができます。

• 形を作る：押し出し・回転・フィレット・面取り・シェル・穴・ブーリアン（結合・切り取り・交差）・パターン・ロフト・スイープ
• 設計を変えやすくする：パラメータ（名前付きの寸法）、構成表、履歴の編集と並べ替え
• 組立・図面・板金・CAM（工具の経路づくり）
• 書き出し：STEP・IGES・STL・OBJ・3MF・IFC、図面は PDF・DXF・DWG
• 取り込み：STEP・IGES・DXF・DWG・STL・OBJ・3MF・IFC

公開しているページでは、文書は使っている PC のブラウザの中に保存され、控えは .webcad ファイルとして書き出せます。

OCCT を WebAssembly にする

OCCT は C++ で書かれた大きなライブラリで、FreeCAD などのオープンソース CAD でも使われています。これを Emscripten というコンパイラで WebAssembly（ブラウザで動く機械語のような形式）にしたものを、opencascade.js というビルド系を使って作っています。いま配っているカーネルは OCCT 8.0.0 を元にしたもので、ファイルの大きさは約 25MB です。

カーネルは画面とは別のスレッド（Web Worker）で動かしています。重いブーリアン演算の間も、画面の回転や操作が止まらないようにするためです。さらに、このビルドは OCCT の中の並列処理を生かすために「マルチスレッド版」にしており、ここからブラウザ特有の条件が生まれます。

SharedArrayBuffer とクロスオリジン分離

WebAssembly でスレッドを使うには、複数のスレッドが同じメモリを読み書きできる SharedArrayBuffer が必要です。ところが SharedArrayBuffer は、CPU の脆弱性（Spectre）を突いた情報の盗み見に悪用できるため、ブラウザは「クロスオリジン分離」されたページでしか使わせません。分離されていないページでは、カーネルが起動すらしません。

分離するには、ページを返すときに次のヘッダーを付けます。実際に Gratias WebCAD のページが返しているものです。

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Resource-Policy: same-origin

この設定には、いくつかの帰結があります。

• ほかのサイトの資材を気軽に読めない。許可のない外部の画像やスクリプトは読み込めなくなるため、WASM・フォント・ライブラリはすべて同じサイトから配っています。結果として、外部の CDN には一切つなぎません。
• 配信先を選ぶ。静的なファイルを置くだけで動きますが、応答ヘッダーを足せる配信先であることが条件です。
• HTTPS が前提。社内の PC から IP アドレスに http で直接つなぐと、安全な接続とみなされず動きません。

スレッドの数は、使っている PC の論理コア数（navigator.hardwareConcurrency）に合わせて最初に用意します。

もう 1 つ、セキュリティの設定（CSP）でも工夫がありました。最初に使っていたカーネルは、C++ と JavaScript の橋渡しのコードを実行時に文字列から組み立てる作りで、CSP で 'unsafe-eval'（文字列のコード実行）を許す必要がありました。カーネルを作り直す際にこれを止めるオプションを付けた結果、今は WebAssembly の実行だけを許す 'wasm-unsafe-eval' で済んでいます。

カーネルを自分たちで作り直した理由

図面の機能を作るとき、見えない線を点線にする「隠線処理」が必要になりました。ところが、元にしたプロジェクトが配っていた WASM を調べると、OCCT の隠線処理の部品が 1 つも入っていませんでした。

幸い、配られていた WASM には、元にした OCCT のコミット、コンパイルの設定、外へ出している 321 個の名前の一覧まで、作り方の記録が同梱されていました。そこで同じ材料・同じ設定で作り直し、隠線処理の分だけを足しました。4 コアの環境で、橋渡しのコードの生成とコンパイル（5,359 ファイル）に約 50 分、OCCT 本体（静的ライブラリ 49 個）に約 25 分、最後のリンクに約 2 分半かかります。出来上がりは「立方体を角から見ると、見える辺が 9 本、隠れる辺が 3 本」になるかで確かめています。絵を見なくても数で言える確かめ方です。

課題 1：加工すると面を見失う

CAD には「加工すると、さっき選んだ面が分からなくなる」という古典的な問題があります。たとえば「押し出した板の上面」にスケッチを描いたあとで、前の工程にフィレットを足すと、上面は計算し直された新しい面に置き換わります。前の面を指していた参照が切れると、後ろの工程がすべて壊れます。

Gratias WebCAD でも、60 × 40 × 8 mm の板の画面を細かく点で調べて、面や辺がまだ選べるかを数えました。その結果、フィレットのあとでは、調べた 53 点がすべて選べなくなっていました。原因は、面の分類（上面・側面など）を押し出しの時点でしか記録しておらず、加工のあとに新しい形へ引き継いでいなかったことです。

そこで、OCCT が出す「どの面がどの面になったか」という履歴を使って分類を新しい形へ写すようにしました。ただし、フィレットは丸めた辺に接する面しか履歴に報告しません。無傷の上面は履歴に出てこないので、同じ平面の上にある面を探し直して補っています。直したあとは選べない点が 0 になり、上面 43 点・側面 5 点などとして選べるようになりました。それでも決められない場合のために、「押し出し1 の上面」のように、履歴の名前で面を選べる道も用意しています。

課題 2：数万本の辺

CAM の機能で、直径 2 mm の工具でポケットを削る経路を作ったところ、経路の点が 2 段で約 6 万点になりました。点と点の間を 1 本ずつ直線の辺にしてつなぐと、評価に 53 秒かかり、画面のプレビューではカーネルが落ちました。OCCT の辺は 1 本ごとに WASM の中のオブジェクトを作るため、数が多いとそれだけで重くなるのです。

経路 1 本を、すべての点を通る 1 次の B スプライン曲線 1 本で表し、辺 1 本にまとめると、2.6 秒になりました。見た目は同じ折れ線ですが、カーネルにとっては 1 本です。

同じ作業で、JavaScript 側の落とし穴にも当たりました。十数万の数の最小値を Math.min(...zs) で求めると、引数の展開でスタックが溢れて落ちます。大きくなりうる配列はループで数えるようにしています。

let zMin = Infinity;
for (const z of zs) if (z < zMin) zMin = z;

課題 3：試験で通っても、画面で落ちる

板金の厚みを変える機能で、Node.js 上の試験はすべて通ったのに、画面では失敗する、ということがありました。画面の経路では、形を一度 STEP に書き出して読み戻しています。読み戻すと、同じ形でも曲面の表し方が変わり（左手系の面が右手系に直るなど）、OCCT のオフセットの計算が通らなくなっていたのです。

この経験から、オフセット・シェル・ブーリアンを使う機能の試験には、STEP で読み戻した形も必ず入れています。また、重い計算は同じ試験を 5〜8 回続けて回し、結果が揺れないことを確かめてから先へ進めます。実際に、同じ試験を 6 回回して 2 回だけ失敗する、という揺れを見つけたことがあるためです。

まとめ

本物のソリッド CAD をブラウザで動かすには、OCCT を WebAssembly にするだけでなく、クロスオリジン分離のためのヘッダー、外部の資材に頼らない配信、CSP の調整といった、ページ全体の作りが関わります。そのうえで、加工後の面の参照、数万本の辺、読み戻した形での計算の違いなど、実際に使って初めて分かる問題を、数で確かめながら一つずつ解いてきました。インストールなしで、無料の登録だけで試せます。