uniformValuesとuniformsについて

クライアントレイヤーは

hoge: {
 fuga: 0;
}

となっていて、

setValues({
 hoge: {
 fuga: 0,
 },
});

や、

material.setUniformValues({
 hoge: {
 fuga: 0,
 },
});

のように値をセット可能

materialレイヤーは

hoge_fuga:number

となっていて、

material.hoge_fuga = 0;

のようにsetterを使って値をセット可能
あるいは、

<noiseMaterial
	mixDst_src={funkun}
	mixDst_colorFactor={0.5}
	scale={0.01}
/>

のように宣言的に値をセット可能

shaderレイヤーは

hoge_fuga:{value:0}

となっていて、shaderでは

uniform float hoge_fuga;

となっている

@roku-ft

samplingFx系

• rgbShift
• pixelate
• edge
• dotmatrix

... etc

検証

• rgbShiftとpixelateなど、samplingFxたちは1枚のシェーダーで同居可能かどうか?
  • つまりsamplingFxMaterialをつくって、マクロで制御することは可能なのか?
    • 前提知識:#ifdef や #ifndef といった条件文はコンパイル時にチェックがなされるので、マクロの更新後は再コンパイルを発火させている(version++)
  • rgb shiftをかけたあとに、edge処理をしたり、その逆はできる?
  • 可能な場合A,不可能な場合B

暫定方針 : A

たぶんできない。

暫定方針 : B

事前準備

• mixSrcとmixDstはobjectにしている。samplingFx系のsrcをsrcという名称にすると、ややこしいかもだから、textureにするといいかも?

  texture:{src:TexturePipelineSrc,resolution:THREE.Vector2}
  // たとえばblurのuniformとかはこういう感じになる?
  type BlurUniforms = {
  	texture_src: { value: TexturePipelineSrc };
  	texture_resolution: { value: THREE.Vector2 };
   blurSize: { value: number };
  } & BasicFxUniforms;
  //そしてvalueはこういう感じ
  texture?: {
   src?: TexturePipelineSrc;
   resolution : THREE.Vector2
  }

実装方針

• samplingFx系はそれぞれhookとして独立させる

  • useRgbShift や usePixelateなど

• samplingFxMaterial ?

  • samplingFx系は以下のuniformが共通だから、それをまとめるためならつくってもいいかも

  type HogehogeUniforms = {
  	texture_src: { value: TexturePipelineSrc };
  	texture_resolution: { value: THREE.Vector2 };
  } & BasicFxUniforms;

• srcシステムの導入

Srcシステム

• 前提

  • micSrc,mixDst,textureはsrcとなるtextureを受け取る

    • つまりvertexShaderでresolutionを制御している(画面ぴったりに描画する)

      #ifdef USF_USE_MIXDST
      	float mixDstAspect = mixDst_resolution.x / mixDst_resolution.y;
      	vec2 mixDstAspectAspectRatio = vec2(
      		min(aspectRatio / mixDstAspect, 1.0),
      		min(mixDstAspect / aspectRatio, 1.0)
      	);
      	vMixDstCoverUv = vUv * mixDstAspectAspectRatio + (1.0 - mixDstAspectAspectRatio) * .5;
      #endif

• 検証

  • 画面ぴったりに制御するコードはマクロで関数化できるのでは?

• 実装方針

  • mixSrc || mixDst || textureに応じてマクロの有効化
    • setupDefaultFlag 、 handleUpdateBasicFx で、mixSrc || mixDst || texture を判定して、srcがtrueかどうかを判定する。*** この時、下記その他の1を考慮した方がいいかも**
      • trueなら、resolution ぴったりに描画するマクロを有効にする
  • resolutionの自動取得
    • BasicFxMaterial の setUniformValues を修正
      • この時、下記その他の2を考慮した方がいいかも
      • mixSrc ,mixDst, textureのsrcがtrueなら、それらのresolutionを自動で取得するコードを追加。例: getTextureResolution || getSrcResolution
        • resolutionというpropsもあるので、
          • それぞれのresolution || 自動取得したresolution || size.width,size.height(画面幅)
            • という優先順位で
        • resolutionは今uniform値として渡しているが、ImageやVideoのsrc dataから取得できるはず。
          • ref:legacy/utils/useCoverTexture
            • videoTextureにもwidthとheightを付与することでクリアする(ref:blankCanvas/useVideoTexture)
        • そのコード自体は BasicFxLib にまとめるのが良さそう

その他

1. BasicFxLib.ts のsetupDefaultFlag ・ handleUpdateBasicFx について

   • handleUpdateBasicFxでの判定は、uniformの値で行っている.例えばsaturation・brightnessとかはどう判定する?
   • isMixSrc みたいなuniform値をつくるのがいいのでは? uniformValues?.mixSrcを判定するイメージ
     • flattenUniformValues を修正すればできそう?

2. flattenUniformValuesの実行場所

   • extend後のBasicFxMaterialの、setUniformValuesでflattenUniformValuesを実行するべき?

   setUniformValues(values?: { [key: string]: any }) {
    // THINK : `flattenUniformValues`するのはこのレイヤーの方がいいかも
    super.setUniformValues(values);
    // THINK : flattenUniformValuesしたあとで、containsBasicFxValuesに渡せばいい。containsBasicFxValuesでflattenUniformValuesを実行してるので、二度手間になっている
    if (BasicFxLib.containsBasicFxValues(values)) {
    this.updateBasicFx();
    }
    }

   • containsBasicFxValues ⇒ isContainsBasicFxValues にrename
   • containsBasicFxValuesには、flatten後のvaluesを渡す

@takuma-hmng8

フックのConfig値を更新する方法が無い

 const gaussianBlur = useGaussianBlur({
 size,
 dpr: 1,
 radius: 20, // 単純な引数なので更新できない
 sigma: new THREE.Vector2(1,1), // uniformの値なのでsetValues関数で更新が可能 
 src: tex,
 })

この場合、sigmaはuniformの値のためsetValues関数で更新可能だが、radiusはconfig値のため更新する方法がない。
そのため、更新できない値は明示的に分けるか、config値を更新する機能が必要になってきそう。

解決策

setConfigのような機能を作る?