円柱の曲面に文字や図形を表示したい。

Question

いつもお世話になっています。

前提・実現したいこと

表題通りです。
円柱の曲面に文字や図形を表示したいです。

テクスチャマッピングなるもので要件を満足する方法があるのですが、
エディター内で、文字や図形の大きさを直接弄ることが出来ないので
他に良い方法がないものかと思案しております。

該当のソースコード

こちらを参考にしました。
円柱のコードですが、ここに追加する形で実現したいです。

import processing.opengl.*;
float rad = 0;
void setup(){
size(400, 400, OPENGL);
}
void draw(){
rad = rad + 1;
noStroke();
directionalLight(255,255,255,1,1,-1);
background(0);
translate(width/2, height/2,0);

pillar(150, 50 , 50);   //円柱の作成(長さ,上面の半径,底面の半径)
}
void pillar(float length, float radius1 , float radius2){

float x,y,z;
pushMatrix();
//上面の作成
beginShape(TRIANGLE_FAN);
y = -length / 2;
vertex(0, y, 0);
for(int deg = 0; deg <= 360; deg = deg + 10){
x = cos(radians(deg)) * radius1;
z = sin(radians(deg)) * radius1;
vertex(x, y, z);
}
endShape();              //底面の作成
beginShape(TRIANGLE_FAN);
y = length / 2;
vertex(0, y, 0);
for(int deg = 0; deg <= 360; deg = deg + 10){
x = cos(radians(deg)) * radius2;
z = sin(radians(deg)) * radius2;
vertex(x, y, z);
}
endShape();
//側面の作成
beginShape(TRIANGLE_STRIP);
for(int deg =0; deg <= 360; deg = deg + 5){
x = cos(radians(deg)) * radius1;
y = -length / 2;
z = sin(radians(deg)) * radius1;
vertex(x, y, z);
x = cos(radians(deg)) * radius2;
y = length / 2;
z = sin(radians(deg)) * radius2;
vertex(x, y, z);
}
endShape();
popMatrix();
}

Answer 1

3Dモデルの表面に何かの画像を描画したい場合、テクスチャーマッピング以外にそれができる方法はないと思います。

エディター内で、文字や図形の大きさを直接弄ることが出来ない

これはテクスチャーにする画像を別途外部に画像ファイルとして用意しなければならないということをおっしゃっていると思います。しかしテクスチャーにする画像(PImage)は画像ファイルをロードする方法以外に、プログラムから任意のテキストや画像や図形を描画して生成することもできます。

以下に簡単な例を挙げます。テクスチャーイメージを生成するためにcreateTextureメソッドを追加しています。それ以外に元のコードを変更した部分には//***とコメントを付けておきました。

import processing.opengl.*;

float rotation = 0; //***
PImage texture;     //***

void setup() {
  size(400, 400, OPENGL);
  
  texture = createTexture();  //***
}

PImage createTexture() {
  PImage img = createImage(314, 150, RGB);
  PGraphics g = createGraphics(img.width, img.height);
  g.beginDraw();
  g.noStroke();
  g.fill(255);
  g.rect(0, 0, g.width, g.height);
  
  g.fill(255, 0, 0);
  g.textSize(64);
  g.text("Texture", 5, 60);
  
  g.fill(0, 0, 255);
  g.textSize(64);
  g.text("mapping!", 15, 120);
  
  g.endDraw();
  img.pixels = g.pixels;
  return img;
}

void draw() {
  rotation += 1;  //***
  noStroke();
  directionalLight(255, 255, 255, 1, 1, -1);
  background(0);
  translate(width / 2, height / 2);
  
  pillar(150, 50 , 50);  //円柱の作成(長さ,上面の半径,底面の半径)
}

void pillar(float length, float radius1, float radius2) {
  float x, y, z;
  float tx, ty; //***

  //pushMatrix(); //***不要

  //上面の作成
  beginShape(TRIANGLE_FAN);
  y = -length / 2;
  vertex(0, y, 0);
  for(int deg = 0; deg <= 360; deg = deg + 10){
    x = cos(radians(deg)) * radius1;
    z = sin(radians(deg)) * radius1;
    vertex(x, y, z);
  }
  endShape();

  //底面の作成
  beginShape(TRIANGLE_FAN);
  y = length / 2;
  vertex(0, y, 0);
  for(int deg = 0; deg <= 360; deg = deg + 10){
    x = cos(radians(deg)) * radius2;
    z = sin(radians(deg)) * radius2;
    vertex(x, y, z);
  }
  endShape();
  
  //側面の作成
  beginShape(TRIANGLE_STRIP);
  texture(texture);                 //***
  for(int deg =0; deg <= 360; deg += 5){
    float radian = radians(-deg + rotation); //***
    float cos = cos(radian);        //***
    float sin = sin(radian);        //***
    x = cos * radius1;              //***
    y = -length / 2;
    z = sin * radius1;              //***
    tx = texture.width * deg / 360; //***
    ty = 0;                         //***
    vertex(x, y, z, tx, ty);        //***
    x = cos * radius2;              //***
    y = length / 2;
    z = sin * radius2;              //***
    ty = texture.height;            //***
    vertex(x, y, z, tx, ty);        //***
  }
  endShape();

  //popMatrix(); //***不要
}

• pushMatrix, popMatrix

なにやら呪文のように書いてありますが、現在のコードではなんの座標変換もしていないため冗長です。

• rad

元のコードには回転アニメーションを意図したかのようにradという変数がありますが意味のある働きをしていません。上のコードでは回転するようにrotationという変数に置き換えて実装しています。

• 側面の回転方向

元のコードではradians(deg)でsin/cosにより座標計算していますが、そのままでテクスチャーをマッピングすると左右が逆転した画像が描画されるため角度の符号を逆にしています。

Comments

[P5_USER]

KSwordOfHasteさん
ありがとうございます。

なるほど、てっきり静的な画像しか入力できないものと思っていました。
PImageがこれを可能にしてくれるのですね。

確認なんですけれども、
1)図形も同じようにPImageで作成することで、tweakモードでも対応できる動的な画像が生成される。

2)横倒し円柱に縦書き数字(よく道路のバイトでカチカチ押しているカウンタのようなもの)の場合は、g.Text()の文字を1文字区切りで座標を指定しなければならない。

ということでしょうか。

[KSwordOfHaste]

１）について、tweak今初めてしったのでちょっとやってみましたが、テクスチャー生成をdraw()から呼び出すなどしてフレーム描画ごとに毎回動かすようにしていればtweakモードでライブ変更できると思います。setupのように初回しか実行されない部分はtweakで変更しても画面に反映されない（なんだか当たり前？）ように見えました。

2)今回初めてPGraphics使ってみたんですが要するにウィンドウへの表示用の機能はこいつにもついている（というか同じインターフェースなのかも）感じでした。Processingの描画機能にあるものならなんでも使えると思います。縦書き文字をどう実装すべきかは自分はやったことないので調べないとわかりません。

[P5_USER]

分かりました。
ありがとうございます!