Press Enter/Return to start Search

p5.jsでboxの1面にテクスチャをそれはそれは雑に貼る(もはや貼ってない)

最近ひたすらp5.jsを書いています。

Processing/openFrameworks畑の人が何かをブラウザ上で動かす必要が出てきたときに触りがちなp5.jsですが、書いてるうちに突っかかった部分が何箇所もあるので、なんとか解決(?)したところから上げていこうと思います。

この記事ではWEBGLモードでboxの１面にテクスチャを貼るときのことをご説明します。

—

p5.jsでテクスチャを貼るやり方自体は公式のreferenceやexampleのとおり、

みたいなやりかたがあるんですけど、これだと6面に貼るのがデフォルトで、1面だけでいいのに…みたいなことが発生します。

世の中には6面テクスチャを用意してmultiTextureみたいにやる方法もあるっぽいけど、ただ1面貼るだけなのに6面分用意するのは他の5面分のバッファはどうすんねんと思って、とても考えました。

私の結論としては貼らないが一番です。

–

textureはboxとかsphereとかの3Dprimitiveに貼るのが一般的かもですが、ふつうにshapeにも貼れます。

texture(img);
vertex(x1, y1, z, 0, 0);
vertex(x2, y1, z, 1, 0);
vertex(x2, y2, z, 1, 1);
vertex(x1, y2, z, 0, 1);
endShape(CLOSE);

みたいなかんじです。

これはこの作ったshapeの表裏にはられる感じになるんですけど、これを作ったboxのほんのちょっとまえに置く！！！
つまり、

    box(50, 50, 5);
    texture(img);
    vertex(-25, -25, 2.51, 0, 0);
    vertex(25, -25, 2.51, 1, 0);
    vertex(25, 25, 2.51, 1, 1);
    vertex(-25, 25, 2.51, 0, 1)
    endShape(CLOSE);

1面に貼れた！！！(貼れてない)

–

これを使うと他にも解決することがありまして、
テクスチャを貼るときに、imageを貼る以外にcreateGrapicsしてプログラム内で作った画像もテクスチャとして貼れるんですけど(公式example)何故かこの中でimage()が使えなかったのですが、

      texture(tex);
      vertex(-25, -25, 2.51, 0, 0);
      vertex(25, -25, 2.51, 1, 0);
      vertex(25, 25, 2.51, 1, 1);
      vertex(-25, 25, 2.51, 0, 1);
      endShape(CLOSE);

      texture(img);
      beginShape();
      vertex(-22, -11, 2.52, 0, 0);
      vertex(0, -11, 2.52, 1, 0);
      vertex(0, 11, 2.52, 1, 1);
      vertex(-22, 11, 2.52, 0, 1);
      endShape(CLOSE);

だいたいできた！！！(許してほしい)

ネットでしばらく調べて出てこなかったことなのでシェアします。

Back to Top