12/17

日記

2025/12/17

レンダリング

レイアウトツリー構築（Rendering）

Loading→ScriptingでJSの実行が終わると、Renderingフェーズに移行する。

Renderingフェーズという名前が、Frame全体の流れレンダリングとややこしいので、レイアウトツリー構築と呼ぶ。

  • Calculate Style
    まずCSSルールのマッチング処理で、CSSセレクトとDOM要素を総当りで判別する。
    DOM要素100個、CSSルールセット50個だと5000回マッチング処理が行われる。
    これでDOM要素に対して適合するCSSルールセットがわかる。

    そして詳細度を計算しどのルールセットが当たるか算出する。

  • Layout

    DOMツリー内のすべてのノードの視覚的なレイアウト情報の計算を行う。

button { opacity: 0 }
buttonの部分はCSSセレクト、{}内はCSSルール。
全部合わせてCSSルールセット。

Painting

レイアウトツリー構築のLayoutでレイアウト情報の算出が終わると、レンダリング結果の描画に移行。
このPainting処理でユーザーが見ることができる実際のピクセルを描画する。

  • Paint
    内部の低レベル2Dグラフィックエンジン向けの命令を生成。
    このグラフィックエンジンはSafari以外はだいたいブラウザで同じ。
  • Rasterize
    生成された命令を用いて、レイヤー単位でピクセルを描画。
    レイヤーは上に重なるコンテンツがある場合に生成され、z軸の上下で一枚の絵に合成される。
  • Composite Layers
    ピクセルにしたレイヤーを合成して最終的なレンダリング結果を生成。
    translate3dとか使っていると、GPUによる合成が行われる。

再レンダリング

JSコードやイベントによってレンダリングは再度引き起こされる。

レンダリングエンジンは、これまでの描画をなるべく再利用しようとするが、再レンダリングが引き起こされる原因によってどの処理が再度引き起こされるのかは変わる。

例えばDOM操作すると、レイアウト情報が変わるのでLayoutフェーズが再度引き起こされる。

JSでどのコードでどのフェーズが引き起こされるかを把握しておくと、上級者になれるかも。

Three.js

earth要復習。

テクスチャの読み込みとかは良い。atmosphereからで

  • 昼・夜の部分でそれぞれの色でテカらせる
  • specular反射
  • 地球の外側に、一番外がぼやっとしていて中がくっきりの大気圏を作る

OrthographicCamera

下の感じで、最後二行でぴったりいい感じになる理由がわからなかったけど、

const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, NEAR, FAR);
camera.zoom = 0.1;
 
tick() {
 const aspect = width / height
 camera.left = -aspect;
 camera.right = aspect;
}

例1: 横長のビュー（aspect1 = 2）

  • left = -2, right = 2 → 幅が 4 単位
  • top = 1, bottom = -1 → 高さが 2 単位
  • アスペクト比 = 4:2 = 2:1

例2: 縦長のビュー（aspect1 = 0.5）

  • left = -0.5, right = 0.5 → 幅が 1 単位
  • top = 1, bottom = -1 → 高さが 2 単位
  • アスペクト比 = 1:2 = 0.5:1

例3: 正方形のビュー（aspect1 = 1）

  • left = -1, right = 1 → 幅が 2 単位
  • top = 1, bottom = -1 → 高さが 2 単位
  • アスペクト比 = 1:1

上下を固定し、左右を aspect1 に比例させることで、正しいアスペクト比を維持できる。

CSS

text-shadowの理解を深めた。何個も重ね合わせていることとかよく見るので。

text-shadow: 1px 1px 0 #ccc,
　2px 2px 0 #ccc,
　3px 3px 0 #ccc,
　4px 4px 0 #ccc,
　5px 5px 0 #ccc,
　6px 6px 0 #ccc,
　7px 7px 0 #ccc,
　8px 8px 0 #ccc,
　9px 9px 0 #ccc,
　10px 10px 0 #ccc;

3引数目はぼかし。

ペラペラの影を同じ方向に重ね合わせることで、厚みのある文字を再現している。3次元と相性が良いかもしれない。

https://site-training-zeta.vercel.app/site5

スクショコピー

ctrl+shift+control+4で、スクリーンショットを保存せずコピーすることができる。
かなり便利。

所感

githubのprojectsとかBacklogとか色々見ていて、これだけでタスク管理とかできるのかなと思った。

こんなにgithubが高機能だとは・・・

I have no idea GitHub was this powerful

‹

12/16

日記

2025/12/16