オービタルシミュレータ
実装方法の技術解説

水素原子軌道の理論的基礎

非相対論的な水素様1電子原子では、核と電子の相対運動に対する時間に依存しないSchrödinger方程式を解く。 電子と核の換算質量を $\mu$ とすると、Hamiltonianと固有値方程式は、

である。Coulombポテンシャルが球対称なので、固有関数は球座標で動径関数と球面調和関数へ変数分離できる。

エネルギー固有値と縮退

換算質量に対応するBohr半径を $a_\mu=4\pi\varepsilon_0\hbar^2/(\mu e^2)$ とすると、束縛状態のエネルギーは主量子数だけに依存する。

スピン、微細構造、Lamb shiftを無視すれば、固定した $n$ に対する空間軌道の縮退度は$\sum_{l=0}^{n-1}(2l+1)=n^2$ である。多電子原子では電子間反発と遮蔽により、この $l$ に関する縮退は一般に解ける。

球面調和関数

複素球面調和関数は角運動量演算子の同時固有関数である。

化学で用いる $p_x,p_y,p_z$ や5つのd軌道、7つのf軌道は、通常 $m$ と$-m$ の複素関数から作る実線形結合である。本シミュレータの角度多項式も、この実軌道と同じ対称性と節集合を持つ。

動径関数と陪ラゲール多項式

$\rho=2r/(na_\mu)$ と置くと、規格化された動径関数は次式で表される。

ここで $L_q^\alpha$ はラゲールの陪多項式であり、Rodrigues型の定義は、

である。指数減衰、原点近傍の $r^l$、陪ラゲール多項式の零点が、それぞれ動径方向の外形と節を決める。

節の数

複素 $Y_l^m$ の絶対値は $\phi$ に依存せず、振幅の節は $P_l^{|m|}(\cos\theta)$ が与える$l-|m|$ 個である。実線形結合では $\cos(m\phi)$ または $\sin(m\phi)$ に由来する$|m|$ 枚の方位角方向の節面が加わり、角度節の総数は $l$ となる。

可視化モデルの位置づけ

本シミュレータは、水素様原子軌道の厳密な波動関数 $\psi_{nlm}(r,\theta,\phi)=R_{nl}(r)Y_l^m(\theta,\phi)$ を 直接等値面化したものではない。p・d・f軌道については実球面調和関数と同じ節構造を持つ斉次多項式を単位球面上で評価し、 その絶対値を方向依存半径へ写像する「振幅極座標曲面」を生成する。s軌道の動径節は同心球、3p・4p・4dの動径節は相似な角度曲面の入れ子で表す。

技術構成

UIと状態管理はReact 19.2.6とTypeScript、ページ構造はNext.js 16.2.6互換環境、バンドルはVinext 0.0.50とVite 8.0.13で構成する。 3D描画はThree.js 0.185.1、数式組版はKaTeX 0.18.1、レイアウト・テーマ・ブレークポイントはCSSで実装する。

1. State軌道群、テーマ、曲面の透過モード、ローブ形状、メッシュ精細度をReact stateとして保持する。
2. Geometry選択状態から軌道定義を取得し、CPU側でThree.js BufferGeometryを生成する。
3. Scene正位相・負位相メッシュ、xyz軸、照明、透視投影カメラをカードごとに構築する。
4. InteractionOrbitControlsがカメラ姿勢と距離を更新し、WebGLRendererが既存メッシュを再描画する。

TypeScriptデータモデル

「軌道群」と「構成軌道」を分離する。p軌道群は3構成、3d・4dは5構成、4fは7構成、混成軌道は方向ごとに2〜6構成を持つ。

type OrbitalComponent = {
  id: string;
  latex: string;
  kind: "s" | "angular" | "hybrid";
  angular?: AngularKey;
  radialNodes?: number;
  direction?: [number, number, number];
};

type OrbitalSet = {
  key: OrbitalKey;
  button: string;
  title: string;
  quantum: string;
  description: string;
  components: OrbitalComponent[];
};

angular は後述する多項式 $F(x,y,z)$ のキー、radialNodes は表示する入れ子曲面数を決める整数、direction は混成軌道の主軸方向である。数式ラベルはLaTeX文字列として保持し、KaTeXでHTMLへ変換する。

実装されている全角度関数

角度評価点は単位球面上にあり、$x^2+y^2+z^2=1$ を満たす。実装は規格化係数を含まない実多項式を使うが、 軌道ごとに最大絶対値で再規格化するため、非零の全体定数倍は生成曲面に影響しない。

p軌道

$F=x,y,z$ はそれぞれ原点を通る1枚の節平面を持つ。符号は対応軸の正負に一致するため、2つのローブは必ず逆位相となる。 2p、3p、4pは同じ角度関数を共有し、違いは後述する動径方向の入れ子数だけである。

d軌道

$d_{xy},d_{yz},d_{xz}$ は2枚の直交節平面、$d_{x^2-y^2}$ は$x=\pm y$ の2平面を持つ。$d_{z^2}$ の節は$2z^2=x^2+y^2$ の二重円錐であり、その内外が逆位相になるため、極方向の2ローブと赤道面付近の環状領域が現れる。

f軌道

7関数はいずれも3次斉次多項式であり、因数分解された各因子が節平面または節円錐を与える。$f_{z^3}$、$f_{xz^2}$、$f_{yz^2}$ は平面と二重円錐の組合せ、 残る4関数は3枚の節平面を持つ。表示順序は上段3、中央1、下段3となるようデータ配列を並べ替えている。

描画曲面の厳密な媒介変数表示

球面格子の分割数はメッシュ精細度 $m$ から次式で決定する。

初期値 $m=58$ では $(N_\theta,N_\phi)=(58,86)$ となる。端点を含む標本角は次式である。

$j=0$ と $j=N_\phi$ は幾何学的に同じ子午線だが、UV状の格子を閉じるため頂点を重複させる。各方向単位ベクトルは、

であり、選択軌道の多項式値と離散標本上の最大値を、

と定義する。球殻縮尺 $s_k$ における実装上の半径は、

であり、BufferGeometryへ格納する頂点は、

である。したがって描画曲面は、連続表現では次の2枚の符号別媒介曲面とみなせる。

「ローブの太さ」スライダー

$A=|F|/\max(M,10^{-4})$ と置けば、節と極大方向を除く領域では $0<A<1$ であり、 指数に対する感度は次式になる。

ここで $\log$ は自然対数を表す。

したがって $\gamma$ を大きくすると中間振幅方向の半径だけが縮み、ローブは細く鋭くなる。小さくすると同じ領域が膨らみ、太く丸くなる。 一方、主軸上の極大では $A=1$ なので $1^{\gamma}=1$、最大ローブ長は変わらない。節上も$A=0$ のままなので、節集合そのものも変わらない。UIは $0.30\leqq\gamma\leqq3.00$ を0.01刻みで更新し、 p・d・f軌道のBufferGeometryを入力イベントごとに再生成する。s軌道と楕円体モデルの混成軌道にはこの指数を適用しない。 スライダーは左を「細い」、右を「太い」に統一するため表示方向を反転し、左端を $\gamma=3.00$、右端を$\gamma=0.30$ に対応させる。

規格化を軌道ごとに行うため、異なる軌道間の絶対振幅は比較できない。表示されるのは各軌道内部の角度分布と節構造である。

「メッシュ精細度」スライダー

スライダーは $m$ を2刻みで変更し、左端の $20\times30$ から右端の$120\times176$ まで球面格子を再生成する。値を上げるほど輪郭と鏡面反射は滑らかになるが、頂点数と三角形数、および再生成時間は増加する。 特に大きな $\gamma$ で細くしたローブは角度方向の変化が急になるため、高精細設定の効果が大きい。 同じ $(N_\theta,N_\phi)$ をs軌道と混成軌道のSphereGeometryにも適用するため、全軌道で精細度が揃う。

符号分離と三角形インデックス

1球殻・1位相につき頂点数は $(N_\theta+1)(N_\phi+1)$。格子セル数は$N_\theta N_\phi$、符号制約がなければ最大三角形数は $2N_\theta N_\phi$ である。 初期値ではそれぞれ5133頂点、4988セル、9976三角形となる。

セル左上を $a=i(N_\phi+1)+j$ とすると、他の頂点番号は、

となる。各セルの候補三角形は $(a,b,d)$ と $(b,c,d)$。正位相メッシュでは3頂点すべてが

を満たす三角形だけを採用する。負位相メッシュでは不等号を $F_q<0$ に置き換える。

節をまたぐ三角形を生成しないため、正負曲面は幾何学的に接続されない。頂点配列自体は両位相で同一サイズを持つが、index bufferだけが異なる。 法線は最終index設定後に computeVertexNormals() で面積加重平均から生成する。

for each cell (a, b, c, d):
  if samePhase(a, b, d): indices += [a, b, d]
  if samePhase(b, c, d): indices += [b, c, d]

positive phase: F >= 0
negative phase: F < 0

s軌道・動径節・球殻パラメータ

s軌道

s軌道は角度関数を用いず、同心SphereGeometryで表す。球殻数を $N=n-l=n$、内側からの番号を$i=0,\ldots,N-1$ とすると半径は、

位相は内側を正として $(-1)^i$ で交互に切り替える。実際の値は次表のとおり。

半透明時、単一球殻の1sは $\alpha=0.92$。複数球殻ではコード上の式$\alpha_i=0.18+0.10(N-i)$ により内側ほど濃くする。実際の水素様s軌道の動径節位置とは一致しない。

p・d軌道の動径節

角度曲面の球殻数は $N=n-l$、すなわち動径節数 $n-l-1$ に1を加えた値である。 内側からの縮尺は、

位相色は球殻ごとに交換する。外側球殻を含む奇数番目の位相反転により動径方向の符号変化を表すが、球殻間の連続な関数値や真の零点半径は計算しない。 不透明モードではすべて $\alpha=1$、depthWrite=true とし、外側曲面が内側曲面を完全に隠す。

混成軌道の楕円体モデル

混成軌道は角度多項式を標本化せず、主軸が方向単位ベクトル $\boldsymbol d$ に一致する2楕円体で構成する。 このため、角度振幅 $|F|$ のべき指数である $\gamma$ は混成軌道には定義されず、そのままでは太さを変更できない。 代わりに楕円体の軸方向半径を保ったまま、2本の垂直方向半径へ共通係数 $\lambda_{\perp}$ を掛ける。 任意点 $\boldsymbol p$、中心 $\boldsymbol c$ に対する変位ベクトル、軸方向のスカラー座標、垂直成分ベクトルを、それぞれ

と置くと、大ローブは次の楕円体である。

これは半径0.62の球へ局所スケール $(0.72\lambda_{\perp},0.72\lambda_{\perp},1.58)$ を適用した値$0.62(0.72\lambda_{\perp},0.72\lambda_{\perp},1.58)=(0.4464\lambda_{\perp},0.4464\lambda_{\perp},0.9796)$ に対応する。逆位相の小ローブは、

であり、半径0.42、局所スケール $(0.72\lambda_{\perp},0.72\lambda_{\perp},1.15)$ に由来する。Three.jsのQuaternionは$\hat{\boldsymbol z}=(0,0,1)$ を $\boldsymbol d$ へ写す最短回転として生成する。

混成軌道の太さスライダー

混成軌道を選ぶとUIは形状指数 $\gamma$ のスライダーを、横幅係数 $\lambda_{\perp}$ のスライダーへ差し替える。 定義域は $0.35\leqq\lambda_{\perp}\leqq1.80$、初期値は $\lambda_{\perp}=1.00$ である。 値を増やすと大小両ローブが軸と垂直な方向だけに太くなり、減らすと細くなる。長軸半径、中心位置、方向ベクトル、相互角は変化しない。$\lambda_{\perp}$ も物理定数ではなく、模式的な楕円体の視覚パラメータである。

方向ベクトルの全定義

位相色、材質、不透明度

正負位相は電荷ではなく波動関数の符号である。テーマごとの正位相色A・負位相色Bは次のとおり。

全曲面にMeshPhysicalMaterialを用い、材質定数は以下で固定する。

emissive色は位相色をRGB空間で0.13倍したもの。不透明モードでは transparent=false、$\alpha=1$、depthWrite=true。半透明モードでは表のαを採用し、$\alpha\leqq0.82$ の曲面だけdepthWrite=false として内側球殻を見せる。両面描画のため side=DoubleSide とする。

単一角度球殻のαは0.94、混成軌道の大・小ローブは0.94と0.92であり、半透明モードでも深度を書き込む。 動径節の観察対象となる複数球殻だけが低αかつ深度非書込みになる。

座標軸、照明、カメラ

xyz軸

各正軸は原点から長さ1.82のArrowHelperとして生成する。矢尻長0.14、矢尻幅0.065。軸ラベルspriteは$2.00\hat{\boldsymbol x},2.00\hat{\boldsymbol y},2.00\hat{\boldsymbol z}$ に置き、scaleは0.34である。 軸色はx #EF6461、y #57BD85、z #5D9CEC。

カメラ

PerspectiveCameraの垂直視野角は34°、nearは0.1、farは100。共通視線方向は、

であり、カメラ位置は $\boldsymbol c=D\hat{\boldsymbol v}$。upベクトルを $(0,0,1)$ に固定してz軸を画面上向きに投影する。

OrbitControlsの最小距離は $0.5D$、最大距離は $1.7D$、回転速度0.72、ズーム速度0.82、 dampingFactorは0.075。パンは無効である。軌道群内では全カードが同一の視線方向・距離を使う。

照明と出力

• HemisphereLight：sky #FFFFFF、ground #172036、強度1.5。
• 主DirectionalLight：白、強度3.6、位置 $(4,4,5)$。
• rim DirectionalLight：正位相色A、強度2.2、位置 $(-4,-1,2)$。
• 出力色空間：sRGB。tone mapping：ACES Filmic。露出1.22。
• device pixel ratio：$\min(\mathrm{devicePixelRatio},2)$。

実行時計算、再生成条件、資源解放

角度関数とメッシュは毎フレーム計算しない。React effectの依存値は構成軌道、位相色A・B、透過モード、ローブ形状指数、混成軌道の横幅係数、メッシュ精細度、初期距離であり、 これらが変わったときだけシーンを破棄して再生成する。回転中のフレームループは次の2処理だけである。

function render() {
  controls.update();
  renderer.render(scene, camera);
  frame = requestAnimationFrame(render);
}

各角度球殻は正負2メッシュを持つ。初期設定では1メッシュ当たり5133頂点を確保し、全角度軌道群の生成量は次表のとおり。

index bufferに採用される三角形数は各角度関数の符号領域によって異なり、1位相・1球殻当たりの上限 $2N_\theta N_\phi$ 未満となる。

cleanupではrequestAnimationFrameを停止し、ResizeObserverとOrbitControlsを解除する。scene graphを走査してGeometry、Material、 軸ラベルのCanvasTextureをdisposeし、最後にWebGLRendererをdisposeしてcanvasをDOMから除去する。

レスポンシブ配置アルゴリズム

通常軌道群はCSS Gridの列数を構成軌道数へ設定する。d軌道では6仮想列を使い、上段2カードを各3列幅、下段3カードを各2列幅にする。 f軌道も6列を使い、上段と下段は各カード2列幅、中央カードは中央2列だけを占有する。6構成の$d^2sp^3$ は広い画面で3列×2段とする。

760px以下では特殊なgrid-column／grid-row指定を解除し、自動配置へ戻す。560px以下では1列へ落とすため、軌道カードを見るための横スクロールは発生しない。 各カードのcanvasはResizeObserverで実寸を取得し、カメラaspectとrenderer寸法を同期する。