12/3

Three.js

アンチエイリアス

なんかポストプロセスで以下の名前を見る気がするので一応

• SSAA（スーパーサンプリングアンチエイリアス）
  レンダリングするピクセル数が4倍になる。パフォーマンスに影響
• MSAA（マルチサンプリングアンチエイリアス）
  エッジのみ計算。Three.jsのantialias: trueだとこれ。

シャドウアクネ

以下の値を調整

• bias
  平らな面に有効
• normalBias
  丸い面に有効

参考

Three.jsのShader章のはじめについて、見返すと有用な学習リンクいっぱいある。

https://shaderific.com/glsl.html ここに書いてあるGLSLの組み込み関数を自在に操れるようになると、もっと幅も理解も深まるんだろうな

将来的にこの人の動画でShaderToyを始めたい。
The Art of Code Youtube Channel: https://www.youtube.com/channel/UCcAlTqd9zID6aNX3TzwxJXg

trainingの復習

• 同じようなオブジェクトを複数作る場合、InstancedMesh(同じジオメトリ)とBatchedMesh(同じマテリアル)が効率的。
• cameraを複数レンダリングする場合、renderer.setScissorTest(true)と毎フレームsetScissorとsetViewportが必要
• 対数補正。e^5→e^6と、対数が1増えるごとに2.7倍ほどになり、対数をホイールで一定数増やすことによって自然に大きくなるカメラ移動している

Javascript

美しい配列のシャッフル

function shuffle<T>(array: T[]) {
 for (let i = array.length - 1; i > 0; i--) {
  const j = Math.floor(Math.random() * (i + 1));
  [array[i], array[j]] = [array[j], array[i]];
 }
}

• Math.random()周りがきれいになるので、上からループ
• 配列の分割LOOPでシャッフル。右辺が評価される→代入 という順番をわかった途端、単純に見える

感想

Three.jsの公式にmanualをやっていなかったそういえば。今見てみると結構有用なこといっぱい書いてる。three-trainngあとdecalとdepthが残っているが、公式のmanualをやります。

今日はなんだかThree.jsの高みを色々見せつけられた。Youtubeで日本人の解説動画みてみたり、それ経由でGPU GEMSとかいう馬鹿みたいに難しい本みて何も理解できなかったり。

上達しようとすると、ほんとに大学レベルの数学・物理が必要なんだね。逃げなければよかったのにね。

Today I was shown the heights of Three.js in various ways.
Trying to get better really requires university-level math and physics. I wish I hadn't run away.