3/17

React

video要素にて、onLoadedDataとonLoaded違い。

onLoadedはリソースの読み込みが完了した時発火。

onLoadedDataはメディアの最初の1フレームが読み込まれたときに発火。

GLSL

一次元Noise

float i = floor(x); // integer
float f = fract(x); // fraction
y = rand(i);

だいたい整数部分と小数点部分を取ることから始まる。
rand(i)で四角い凸凹

これを
mix(ramd(i), rand(i + 1), smoothstep(0.0, 1.0, f));
とすると、滑らかでランダムな値が得られる。

ノイズの関数をみると、smoothstepが内部でやっている式を書いている場合がある。
float u = f * f * (3.0 - 2.0 * f );
mix(rand(i), rand(i + 1), u);
smoothstepと同じなので、怖がらない。

多次元ノイズ

一次元では線上の2点（fract(x) と fract(x)+1.0）の間を補間したが、
２次元平面上の正方形4つの角 （fract(st), fract(st)+vec2(1.0,0.0), fract(st)+vec2(0.0,1.0), fract(st)+vec2(1.0,1.0)）の間を補間する。

同様に、3次元では8つの角の立方体を補間。

ランダムな値の補間を行うもので、これらはバリューノイズと呼ばれる。ブロック状に見えてしまう。

float noise(vec2 st) {
  vec2 i = floor(st);
  vec2 f = fract(st);
  vec2 u = f*f*(3.0-2.0*f);
  return mix(
    mix(random(i + vec2(0.0, 0.0)), random(i + vec2(1.0, 0.0)), u.x),
    mix(random(i + vec2(0.0, 1.0)), random(i + vec2(1.0, 1.0)), u.x),
    u.y
  );
}