1/7

Three.js

２次元配列とは

• 1次元配列: [値1, 値2, 値3] （一次元）
• 2次元配列: [ [値1, 値2], [値3, 値4] ] （配列の中に配列）

manual

途中で「最適化」断念。一からちゃんと理解してやること・

OffscreenCanvas

OffscreenCanvasとは、WebWorkerでレンダリングを完結させるもの。

canvas.transferControlToOffscreen();でキャンバスのコントロールをオフスクリーンに転送。

• transferControlToOffscreenを呼ぶと、これをメインスレッドで使えない。
• canvasの取得直後または作成直後に呼び出さなければならない。
• OffscreenCanvasを使う場合、THREE.WebGLRendererはメインスレッドではなくWorker内で作成する必要
• WorkerはDOMにアクセスできない

一通り実装してみた。worker側で全three.jsの記述する感じだ。

DOM要素やwindowにアクセスできないから、そこを修正すればworkerファイル内でExperienceをインポートして使えるっぽい。

GPUComputationRendererなどのGPGPUを使った重い計算を使っているようなサイトでは、WebWorkerをつかって効果があるかと聞いたところ、あまりないらしい。GPUComputationRendererはGPUで計算するよう依頼しているので、メインスレッドは軽量だそうだ。

一部WebWorker

32-globeでの初期化時に大量の配列を使っているが、ここでクリティカルに使える。また、04-galazyで数万個のパーティクルの位置と色計算。これらも計算量が多いためWebWorkerでやるとよい。ただし、レンダリングをメインスレッドでしている場合、毎フレーム更新してworkerから送信はしない。

figma

バリアブル削除

バリアブル削除する時なにもないところクリックして編集する必要あるんかい。

でもちょっと楽しくなってきたかも。

テキストに背景色

shift + Aでオートレイアウトレイヤーで囲い、それに対して背景色をつける。

ネットで調べると、上から３個くらいはずっと四角形を書いて力技で背景にするという方法が書かれていて、figmaは誰でも使える分素人が書いている記事が多いんだなって思った。

font

• font-weight 400ってかなり薄くて見にくく感じてしまうけど違うのかな
• font-familyのvariablesはローカルバリアブルの文字列で指定する。

感想

three.js birdやっている途中で力尽きた。
本田圭佑の動画流れてきてみたら、どんなにやる気が無い日でもやらない日をつくってはいけないらしい。なるほど。

A video of Honda popped up, and I watched it, It seems he never allows himself to have a day where he does nothing, no matter how unmotivated he feels. He says it's better to sit down at your desk, even if the quality isn't top-notch