White Paper for v2

[takuma-hmng8]

Material

FxMaterial , BasicFxMaterial , SamplingFxMaterial

BasicFx

Color correction and basic fx. like layer styles in photoshop

mix

• mixSrc
• mixDst

color adjustments この順番で適用される

• levels
• contrast
• colorBalance
• saturation
• brightness
• posterization
• black&White
• duotone
• threshold

misc

• vignette
• mask

Hooks

const {render,setValues,texture,material,scene,camera,renderTarget} = useSomeFx({size,dpr,...HooksProps,...FxValues,...BasicFxValues});

FXs

• useBlur (sf系)
• useMotionBlur (sf系)
• useFluid
• useNoise
• useBloom (sf系)
• useBrush
• useRipple
• useCloth
• useRawBlank
• useBlank
• useTextureTransition
• useGrid
• usePixelGeometry

Concept

• Mutable objects such as scenes and materials should be non-reactive.
• The fboAutoSetSize should be optional, as the resolution is updated to reactive but the render result is reset when renderTarget is setSize.

Materials

• createMaterialImpl

And the Material of almost all hooks is also exported

import {  NoiseMaterial } from "@funtech-inc/use-shader-fx";
import { extend } from "@react-three/fiber";

extend({ NoiseMaterial });

~~~
<mesh>
　<planeGeometry args={[2, 2]} />
　<noiseMaterial ref={ref} scale={0.01} />
</mesh>

[takuma-hmng8]

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;

となっている

[takuma-hmng8]

@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を渡す

[roku-ft]

@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のような機能を作る?

[takuma-hmng8]

• valuesとconfigで更新する方法が異なる
• configはreactiveに値を変更される
• setValuesで同様に更新できる方が直感的
• configの値をrefに格納して、setValuesで変更をチェックして、更新するとか
• その際なるべくMaterialの更新系はmaterialのメソッドに集約したい

[takuma-hmng8]

@roku-ft

• useResolutionの修正
  • useStateでmutableな値として変更した
  • resolutionはレンダー中に更新しちゃえばいいかなと
• useMutableConfig
  • ゴール
    • fx.setValuesでconfigも同様に更新
    • 変更時にcallbackをtriggerする
  • モチベーション
    • fx.setValuesでconfigも同様に更新するようにしたい
  • やったこと
    • useMutableConfigの追加
      • useRefに更新関数をつけた感じ
      • [config,setConfig]を返す

        • setConfigは更新用関数も受け付けるので、以下みたいな実装が可能

          setConfig((prev) => {
             // 変更がある場合だけsetBlurRadiusを実行する
             if (radius !== prev.radius) material.setBlurRadius(radius);
             return { radius };
          });