ブログ · 5 ページ目
開発とデザイン、あとは雑記。
モデリングなしで立体感を出す — 手で三角形を組む浮島
島の岩はモデリングツールから書き出したものではありません。五層の不規則なリングを実行時に組み上げ、頂点色とフラットシェーディングだけで石らしく見せています。
千二百インスタンス — 庭を数回の描画に収める
草六百、花百二十、苔石八十五、低木四十二。庭の密度は数を減らすのではなく、InstancedMesh で同じ種類を一描画にまとめて作ります。
シーンの光 — 三つの灯りと一度だけ計算する影
半球光が環境色、キーライトが向きと影、リムライトが島を背景から引き剥がし、残る七つの点光源は灯りを足すだけです。
二つのシェーダーで水をつくる — 水たまり・小川・滝
島に水面シミュレーションも反射もありません。ShaderMaterial は二つだけで、寝ている水と落ちる水を担当し、time と night を共有します。
3D の読み込み予算 — チャンク分割・可視になってから読み込み・止めどき
3D ページの費用は三つあります。ダウンロード、初回フレームのコンパイル、毎フレームの描画。それぞれに別々の予算を決めないと、見栄えが引っかかりに変わります。
sibling-index() と sibling-count()：CSS がついに自分が何番目かを知る
Firefox 154 がこの二つの関数を Baseline に押し上げた。兄弟の中での位置と兄弟の総数を返すので、時間差アニメーション、順序に応じた配色、均等割りまで CSS で計算でき、要素ごとのインライン変数が要らなくなる。