2/18

Three.js

ポストプロセス

BloomPassはあまり使えない。UnrealBloomPassを使う。

circleを描く(glsl)

float circle(in vec2 _st, in float _radius){
 vec2 l = _st-vec2(0.5);
 return 1.0 - smoothstep( radius - (radius * 0.01), radius + (radius * 0.01),dot(l,l) * 4.0);
}

lで座標を中心にする（0.5, 0.5）

dot(l,l)は中心からの距離の2乗。lengthとかより軽量

*4は範囲が[0.5, 0.5]→[0.25, 0.25]なので。

GSAP

useGSAPにて、dependenciesを変えてもreturn内の関数は実行されない。実行されるようにするにはrevertOnUpdate: trueとする。

画面幅とかによって内容を変えたい時に重宝。