ボロノイによる シェーダー表現

ボロノイによる シェーダー表現 とうとう Twitter:@__tou__tou

• https://twitter.com/__tou__tou

自己紹介 とうとう @__tou__tou 仕事 VRの会社でエンジニアをやっています。Unity、リアルタイムサーバー、GCPをちょっと づつやっています。 趣味 ● ● VRChat つぶやきGLSL ○ ○ 260文字制限のピクセルシェーダー 最近始めました

• https://twitter.com/__tou__tou

グラデーション https://twigl.app/?ol=true&ss=-NZ5vNQupMNWjp7UhJL8

• https://twigl.app/?ol=true&ss=-NZ5vNQupMNWjp7UhJL8

回路っぽさ https://twigl.app/?ol=true&ss=-N_Yg3RZfqgSDGPs1nks

• https://twigl.app/?ol=true&ss=-N_Yg3RZfqgSDGPs1nks

緩急 https://twigl.app/?ol=true&ss=-N_dqqbFx-gathSib-MA

• https://twigl.app/?ol=true&ss=-N_dqqbFx-gathSib-MA

疾走感 https://twigl.app/?ol=true&ss=-N_hesLTWQDUNgE3EmCy

• https://twigl.app/?ol=true&ss=-N_hesLTWQDUNgE3EmCy

全部ボロノイがベースです！

ボロノイとは https://yomotsu.net/blog/2015/07/26/voronoi.html

• https://yomotsu.net/blog/2015/07/26/voronoi.html

ボロノイとは https://yomotsu.net/blog/2015/07/26/voronoi.html http://nomoreretake.net/2015/05/09/houdini_voronoifracture01/

• http://nomoreretake.net/2015/05/09/houdini_voronoifracture01/
• https://yomotsu.net/blog/2015/07/26/voronoi.html

ボロノイを表現するアルゴリズム 注意：表現のためのアルゴリズムであって、正確なボロノイ分割のアルゴリズムではない です！！！

アルゴリズム 1. 2. 3. 4. 格子を用意 それぞれの格子内のランダムな位置に母点 （M）をおく 任意の点(P)から最も近い母点との距離を計算 その距離(D)をつかって色を出力 https://thebookofshaders.com/12/?lan=jp

• https://thebookofshaders.com/12/?lan=jp

シンプルなボロノイをGLSLで書いてみる 受け取る変数 関数の定義 main関数 https://twigl.app?ol=true&ss=-N_wP8CqKx6jh-AxxAJZ

• https://twigl.app?ol=true&ss=-N_wP8CqKx6jh-AxxAJZ

シンプルなボロノイ このシェーダーが受け取る変数

シンプルなボロノイ main関数

シンプルなボロノイ

シンプルなボロノイ

シンプルなボロノイ

シンプルなボロノイ uvが右の図の点 P

ボロノイ境界をくっきり https://twigl.app?ol=true&ss=-N_ne7ZWTqLumZurBzWi

• https://twigl.app?ol=true&ss=-N_ne7ZWTqLumZurBzWi

ボロノイ境界をくっきり

マンハッタン距離 |x|+|y| https://twigl.app/?ol=true&ss=-N_wX0I-WuObg6xPgsLr

• https://twigl.app/?ol=true&ss=-N_wX0I-WuObg6xPgsLr

マンハッタン距離 |x|+|y| https://ja.wikipedia.org/wiki/%E3%83%9E%E3%83%B3%E3%83%8F%E3%8 3%83%E3%82%BF%E3%83%B3%E8%B7%9D%E9%9B%A2

• https://ja.wikipedia.org/wiki/マンハッタン距離

ミンコフスキー距離 (| x |^p + | y |^p)^(1/p) https://twigl.app?ol=true&ss=-N_wZ55BhhyAZsPM3dOB

• https://twigl.app?ol=true&ss=-N_wZ55BhhyAZsPM3dOB

ミンコフスキー距離 (| x |^p + | y |^p)^(1/p)

Unityに持っていく ChatGPTにお願いします。先ほどのミンコフスキー距離のボロノイを変換してもらいま す。https://twigl.app?ol=true&ss=-N_nkeEADT_lS_6bdlAS

• https://twigl.app?ol=true&ss=-N_nkeEADT_lS_6bdlAS

Unityに持っていく 変換後 https://github.com/tou-tou/ShaderSamplesUnity2019/blob/main/Assets/_00TouTouWork/Sha der/Minkowski.shader

• https://github.com/tou-tou/ShaderSamplesUnity2019/blob/main/Assets/_00TouTouWork/Shader/Minkowski.shader

おまけ 同じアルゴリズムで3Dverもできるのでは？ VR空間でみれたら面白そう！！！

３Dボロノイ風にしてみたい レイマーチング(3Dオブジェクトの描画ができる)と組み合わせてみた 1624文字 https://twigl.app?ol=true&ss=-N_nuchKU-x2tk7_fAr4

• https://twigl.app?ol=true&ss=-N_nuchKU-x2tk7_fAr4

短縮してみたり 254文字 RenardさんのつぶやきGLSL短縮テクニック https://qiita.com/Renard_Renard/items/ba13b6590dfbcefa7156

• https://qiita.com/Renard_Renard/items/ba13b6590dfbcefa7156

呟けなかったり 密度高めな回路っぽさ 光を考慮 https://twigl.app/?ol=true&ss=-N_iezTCIiYZz7uv6eR- https://twigl.app/?ol=true&ss=-N_YXkc7Csilt1Hun_UM

• https://twigl.app/?ol=true&ss=-N_iezTCIiYZz7uv6eR-
• https://twigl.app/?ol=true&ss=-N_YXkc7Csilt1Hun_UM

VRChatにもっていったり https://twitter.com/__tou__tou/status/1590713567413964801

• https://twitter.com/__tou__tou/status/1590713567413964801

参考 ボロノイアルゴリズム：https://thebookofshaders.com/12/?lan=jp

• https://thebookofshaders.com/12/?lan=jp