fix(frontend): ウォーターマーク配置のエフェクトが壊れている問題を修正

[kakkokari-gtyih]

What

#15136 の描画方式をGLSLに移植

Why

#15136 では発生していなかった不具合の修正

• ウォーターマークを回転させると歪む問題を修正
• ウォーターマークを敷き詰めると上下左右反転した素材が表示される問題を修正
• ウォーターマークを回転させた際に画面からはみ出た部分を考慮できるように

Additional info (optional)

一通り動いてそうだということは確認したものの、GLSLがわからないのであってるかどうかは不明

Checklist

• Read the contribution guide
• Test working in a local environment
• (If needed) Add story of storybook
• (If needed) Update CHANGELOG.md
• (If possible) Add tests

[codecov]

Codecov Report

❌ Patch coverage is 8.77193% with 52 lines in your changes missing coverage. Please review.
✅ Project coverage is 17.48%. Comparing base (aadc7bf) to head (6847248).
⚠️ Report is 1 commits behind head on develop.

Files with missing lines	Patch %	Lines
...c/utility/image-effector/fxs/watermarkPlacement.ts	15.15%	28 Missing ⚠️
...d/src/components/MkWatermarkEditorDialog.Layer.vue	0.00%	20 Missing ⚠️
...rontend/src/components/MkWatermarkEditorDialog.vue	0.00%	2 Missing ⚠️
packages/frontend/src/utility/watermark.ts	0.00%	2 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff              @@
##           develop   #16662       +/-   ##
============================================
- Coverage    45.74%   17.48%   -28.27%     
============================================
  Files         1781      878      -903     
  Lines       184584    81738   -102846     
  Branches      5457     1357     -4100     
============================================
- Hits         84437    14288    -70149     
+ Misses      100099    67443    -32656     
+ Partials        48        7       -41     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[syuilo]

/preview

[syuilo]

「敷き詰める」にしたときに回転や拡大縮小の中心が「位置」設定を考慮しないわね

[kakkokari-gtyih]

「敷き詰める」にしたときに回転や拡大縮小の中心が「位置」設定を考慮しないわね

それは #15136 の挙動に準じている（UIは変えてない）

[kakkokari-gtyih]

「敷き詰める」にしたときに回転や拡大縮小の中心が「位置」設定を考慮しないわね

それは #15136 の挙動に準じている（UIは変えてない）

敷き詰める際にoriginを考慮する需要ってあんまりなさそう（＋考慮できるようにすると複雑になる）と思ってそっちでは中央固定で書いてた記憶がある
UIをそっちに寄せるか、GLSLを考慮できるように書き換えるか（後者は私にその能力がない）

[syuilo]

ウォーターマークを敷き詰めると上下左右反転した素材が表示される問題を修正

この挙動を変更したいのであれば、フラグメントシェーダではなくテクスチャのWRAP属性で制御する方が自然かも

[kakkokari-gtyih]

• 「敷き詰める」にしたときに回転や拡大縮小の中心が「位置」設定を考慮しない
• フラグメントシェーダではなくテクスチャのWRAP属性で制御する
• マージンが各ウォーターマークごとのマージンとなっていない

をなおした

[syuilo]

/preview

[syuilo]

敷き詰めの原点がやっぱり左上基準っぽい

それ以外はよさそう

[kakkokari-gtyih]

たぶんなおった

[syuilo]

/preview

[syuilo]

/preview

[syuilo]

スライダー右にすると左回転、スライダー左にすると右回転になってるから符号を反転させないとダメそう

[syuilo]

あとマージンがサイズに影響するようになってる(例えばサイズを小さくするとマージンの設定は同じでもマージンも小さくなる)けどまあ難しければこのままでも良いっちゃいい

[kakkokari-gtyih]

あとマージンがサイズに影響するようになってる(例えばサイズを小さくするとマージンの設定は同じでもマージンも小さくなる)けどまあ難しければこのままでも良いっちゃいい

これもともと割合指定だったけどなんの割合かしら

[syuilo]

元画像に対する割合だわね(なおMisskeyのGLSL実装では大きさという概念は必ず割合で指定される)

[syuilo]

🙏🏻