---
title: ボロノイによる シェーダー表現
tags: 
author: [toutou node](https://convert.docswell.com/user/toutou)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/YJ9KNK5WJ3.jpg?width=480
description: ボロノイによる シェーダー表現 by toutou node
published: November 17, 24
canonical: https://convert.docswell.com/s/toutou/54VJM1-2024-11-17-155655
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/YJ9KNK5WJ3.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/GJ8RKRYR7D.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/LJLKZK427R.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/47M2V2K97W.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/P7RM2MX9J9.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/PJXVDV63EX.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/3JKQXQ1NJD.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/LE3P5PQZJ5.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/8EDLDL94JG.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/V7P2X2ZV78.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/2JVDLDWRJQ.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/5EGYXYD6EL.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/4JQM8M127P.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/K74V2VRPJ1.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/LJ13M3QX7G.jpg)

シンプルなボロノイ


# Page. 16

![Page Image](https://bcdn.docswell.com/page/GJWP3PMK72.jpg)

シンプルなボロノイ


# Page. 17

![Page Image](https://bcdn.docswell.com/page/4EZKVKQNE3.jpg)

シンプルなボロノイ


# Page. 18

![Page Image](https://bcdn.docswell.com/page/Y76Q5Q697V.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/G75RYR6DE4.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/9J2DGDNMJR.jpg)

ボロノイ境界をくっきり


# Page. 21

![Page Image](https://bcdn.docswell.com/page/DEY2V2PPEM.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/VJN8M85M78.jpg)

マンハッタン距離
|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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/YE9KNKYWE3.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/GE8RKR6RJD.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/LELKZK92JR.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/4JM2V2Z9JW.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/PJRM2M69E9.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/PEXVDVM37X.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/3EKQXQGNED.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/L73P5PNZE5.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/87DLDLW4EG.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/VJP2X29VJ8.jpg)

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


