軽さを保つしくみ

ページの地球儀は、簡単に重くなります。止まらないフレームのループ、モニターの大きさのキャンバス、地球儀ごとの WebGL コンテキストなどです。Chikyu は、決まりを守ってそれを避けます。

必要なときだけ描く

何も変わらない間は、何も動きません。平面の地球儀は、表示が落ち着いたときに SVG を描き直します。操作の途中は、変形1つだけを動かします。自動で回る速さはとてもゆっくり (恒星日で1回転) なので、描き直しは約1秒に1回で、その速さなら滑らかで正確です。リアルな地球は、何かが変わったときだけ、1秒に最大 30 回描きます (小さな端末では 20 回、電池が少ないときはさらに減らします)。画面の外にあるときや、タブが隠れているときは、まったく描きません。フレームのループ自体を止めます。

上限を決める

リアルな地球のキャンバスは、画面やピクセル比がどれだけ大きくても、1辺 4096 ピクセル、合計 600 万ピクセルまでです。画像は 3 つの大きさ (横 1024、2048、4096) があり、今の拡大率で1画素が画面のピクセルより少し大きくなる、最も小さいものを使います。拡大すると大きなものを読み込み、止めて数秒たつと解放します。メモリの少ないスマートフォンは 2048 までです。

WebGL のコンテキストは1つ

kazoku-ui の共有レンダラーは、ページに1つだけコンテキストを持ちます。リアルな地球が複数あるときは、それを共有し、一度に1つだけ描きます。押したりフォーカスしたりした地球が使い、ほかは最後の絵を表示したままです。要素をページから外すと、その要素が持っていた GPU のものはすべて解放されます。

純粋で小さい

globe() は純粋な関数です。時計も DOM も使わず、同じ引数なら同じマークアップを返します。輪郭は chizu の world-geo (Natural Earth の 1:110m。パブリックドメイン) から、読み込み時に1回だけ整えます。実行中に何かを取得することはありません。実行時の依存パッケージは d3-geo と chizu です。

style ではなく look の理由

最初のバージョンは、見た目を style 属性から読んでいました。style は HTML の本物の属性 (インラインの CSS) です。ブラウザーは解釈できない CSS を無視するので、普通の HTML では偶然動いていました。しかし React は文字列の style でエラーにし、Vue と Angular は解釈しようとします。look は同じ選択を、どのフレームワークも読まない名前にしたものです。style も今までどおり使えます。