1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

東京海洋大学NePPAdvent Calendar 2024

Day 9

シェーダーにおけるatan2関数についての概要

Last updated at Posted at 2024-12-08

この記事は東京海洋大学NePPの Advent Calendar 2024の9日目です。

はじめに

今回は自分が個人的にatan2関数について思っていることについて書きます
使い方を知ってるとシェーダ―を書くときに表現の幅が広がるのかなと思ってます
Videotogif(1).gif

atan2とはそもそも

atanとはArc Tangent(アークタンジェント)関数でtan(タンジェント)の逆関数にあたります。
逆関数であるということは何ぞということなんですが、つまるところtanは角度を入力すると直角三角形の直角部分の2辺の比が返ってくる関数なのに対して、atanは2辺の比を入れると直角三角形の角度の部分が返ってくるというわけです(下図)
atan2は下図でいうところのaとbの値の2つを入力すると角度が返ってくるという関数になっています。
Trigonometry_triangle.svg.png
画像:https://ja.wikipedia.org/wiki/%E4%B8%89%E8%A7%92%E9%96%A2%E6%95%B0

使用時のお気持ち

こういう
Videotogif(3).gif
直線的な動きにしたいんじゃなくて
Videotogif(2).gif
こんな感じの円形の動きを作りたいときに使うという認識です

コードと解説

    col.rgb *= step(atan2(0.5-i.uv.x, 0.5-i.uv.y), _Threshold);

さきほどの動きを作りたいときは上記のコードをピクセルシェーダーに追加すればいいだけです。

解説

今回のatan2関数内では中心線と、中心座標(0.5, 0.5)ととある一点Pを結んだ直線がなす角度Θの値がそれぞれのピクセルに入力されるというイメージです
atan2イメージ.png

これの出力は以下のようになってちょうど円形に黒~白のグラデーションができるような見た目になります。
右半分が真っ黒になっているのは負の値が入っているからです
スクリーンショット 2024-12-09 005839.png
あとはこれにstep関数を適用して閾値を動かすせばいいという仕組みです。閾値以下の角度になる領域では1が入って、閾値以上の角度になる領域では0になるというイメージです

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?