gin_graphic https://blog.hatena.ne.jp/gin_graphic/ ギンの備忘録 https://gin-graphic.hatenablog.com/ GLSL p5.js p5.jsで3D図形のBoxにシェーダーを適用させてみます。 Boxの法線 Boxの各面を塗り分ける まとめ 参考文献 Boxの法線 Box（立方体）は面を6面持つ3D図形です。 それぞれの面に対して垂直方向を表すのが法線になります。 6面の面はxyzの3方向に向いており、それぞれ+x方向、-x方向、+y方向、-y方向、+z方向、-z方向の法線となっています。 Boxの各面を塗り分ける 法線はattribute vec3 aNormal;で取り扱われています。 これを頂点シェーダーからフラグメントシェーダーへvarying vec3 vNormal;として渡します。 このvNormalがBox… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fgin-graphic.hatenablog.com%2Fentry%2F2021%2F01%2F17%2F214046" title="p5.js+シェーダー（GLSL） - Boxの法線で面を塗り分ける - ギンの備忘録" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/g/gin_graphic/20210117/20210117211427.png Hatena Blog https://hatena.blog 2021-01-17 21:40:46 rich https://gin-graphic.hatenablog.com/entry/2021/01/17/214046 1.0 100%