以前から気になっていたBlenderに入門してみました。 少し前に触り始めて、最近ようやく慣れてきて形になるものを作れるようになってきました。
特にBlenderでのモーションというか、動画の作成はキーフレームによる制御になるので、その感覚に慣れる時間が必要でしたね。
モデリングとかはやってみたいけど、やることが多くて発散しそう。 当面は基本図形を使った練習や作品作りをしていきたいかな。 モーショングラフィックスみたいなものをつくれるようになりたい。
練習程度の動画を2つ作ってみました。 簡単なマテリアルやテクスチャは扱えるようになってきました。 モーションは単純な移動、回転、拡大縮小くらいのやり方は理解できたかな。
扱うオブジェクトが増えると考えたり、動きを制御するのが大変そう。 クラスとか関数みたいな定義ってできたりするのかな。
しばらくの間はちょこちょこBlenderで遊んでいきます。
p5.jsで自作したShapeにシェーダーを適用していきます。
自作Shapeは前回の記事で扱った正多角形を使います。
自作図形にシェーダー適用する際に必要なことが2つあります。
textureModeの設定
vertex関数でテクスチャ座標(uv座標)を設定
この2つの設定を行うことで、自作した図形にシェーダーが適用されます。
setupとしてtextureMode(NORMAL);を宣言する必要があります。
これにより自作図形にシェーダーを適用するテクスチャモードを選択します。
createCanvas(500, 500, WEBGL); colorMode(HSB); textureMode(NORMAL); theShader = createShader(vs, fs); noStroke();
上のような形でsetupしておきます。 Shaderは適用したいものを用意して下さい。
図形を作成する際はvertex()関数でテクスチャ座標(uv座標)を指定する必要があります。 テクスチャ座標はテクスチャの貼り付ける位置情報の様なものです。
vertex(x, y, z, u, v)と引数を渡すことで定義されます。
このu, vは0から1の間で指定する必要があります。 図形の大きさを1として引数を計算することになります。
正多角形を描画するコードにテクスチャ座標の設定を追加しました。
function Polygon(x, y, size, pointNum){
const outsideRadius = size;
const angleStep = 2*PI/pointNum ;
let angle = 0;
beginShape();
for(let i=0;i<=pointNum;i=i+1){
let px = x + outsideRadius*cos(angle);
let py = y + outsideRadius*sin(angle);
vertex(px, py, 0, 0.5+cos(angle)/2, 0.5+sin(angle)/2);
angle = angle + angleStep;
}
endShape(CLOSE);
}
vertex(px, py, 0, 0.5+cos(angle)/2, 0.5+sin(angle)/2);として、頂点の座標を0から1に正規化した値をセットします。
実際にシェーダーを適用した正多角形が下になります。 例として正六角形を描画しました。
また、今回は2色のグラデーションを描画する以下のShaderを使っています。
let vs = `
precision highp float;
attribute vec3 aPosition;
attribute vec2 aTexCoord;
varying vec2 vTexCoord;
uniform mat4 uProjectionMatrix;
uniform mat4 uModelViewMatrix;
void main() {
vec4 positionVec4 = vec4(aPosition, 1.0);
vTexCoord = aTexCoord;
gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
}
`;
let fs = `
precision highp float;
varying vec2 vTexCoord;
uniform vec3 u_color0;
uniform vec3 u_color1;
void main() {
vec2 b = vTexCoord;
vec3 c0 = u_color0 / 255.0;
vec3 c1 = u_color1 / 255.0;
vec3 col = (c0 * (b.x+b.y)/2.0) + (c1 * (2.0-b.x-b.y)/2.0) ;
vec4 gcolor = vec4(col, 1.0);
gl_FragColor = gcolor;
}
`;
次に正多角形で、外周のみの描画をした図形にシェーダーを適用します。 真ん中が空いた様な図形ですが、設定することは変わりません。
頂点座標をセットする際に、テクスチャ座標を指定していきます。
function outlinePoly(x, y, size, weight, pointNum){
const outsideRadius = size;
const insideRadius = size - weight ;
const angleStep = 2*PI/pointNum ;
let angle = 0;
beginShape(TRIANGLE_STRIP);
for(let i=0;i<=pointNum;i=i+1){
let px = x + outsideRadius*cos(angle);
let py = y + outsideRadius*sin(angle);
vertex(px, py, 0, 0.5+cos(angle)/2, 0.5+sin(angle)/2);
px = x + insideRadius*cos(angle);
py = y + insideRadius*sin(angle);
vertex(px, py, 0, 0.5+cos(angle)/2, 0.5+sin(angle)/2);
angle = angle + angleStep;
}
endShape(CLOSE);
}
正六角形で中が空いた図形にシェーダー適用ができました。
三角形から十角形までを並べて描いた作例が下になります。 どの図形にもシェーダーでグラデーションを適用できています。
p5.jsで正多角形を描画する関数を作成していきます。
自分でShapeを作るにはbeginShape()とvertex()とendShape()を使えば自作図形を描くことができます。
正多角形は一つの円周上に等しい角度間隔で点を置き、それを線で結べば描けます。
関数Poligon()として正多角形を描く関数を作ってみました。
function Polygon(x, y, size, pointNum){
const Radius = size;
const angleStep = 2*PI/pointNum ;
let angle = 0;
beginShape();
for(let i=0;i<=pointNum;i=i+1){
let px = x + Radius*cos(angle);
let py = y + Radius*sin(angle);
vertex(px, py);
angle = angle + angleStep;
}
endShape(CLOSE);
}
この関数で六角形を描いてみると下になります。
Polygon(0, 0, 300, 6);
入力引数は
としています。pointNumを変えれば、目的の正多角形が描画されます。
次に正多角形で、外周のみの描画をする関数を作りました。
真ん中が空いた様な図形になります。
こちらはstroke()を使うと図形内部の線画描かれるので、noStroke()して使う方が良いですね。
function outlinePolygon(x, y, size, weight, pointNum){
const outsideRadius = size;
const insideRadius = size - weight ;
const angleStep = 2*PI/pointNum ;
let angle = 0;
beginShape(TRIANGLE_STRIP);
for(let i=0;i<=pointNum;i=i+1){
let px = x + outsideRadius*cos(angle);
let py = y + outsideRadius*sin(angle);
vertex(px, py);
px = x + insideRadius*cos(angle);
py = y + insideRadius*sin(angle);
vertex(px, py);
angle = angle + angleStep;
}
endShape(CLOSE);
}
beginShape(TRIANGLE_STRIP);を利用して描いているので、内部の線画見えます。
塗りつぶしで使う分には十分利用できるはず。
入力引数が一つ増えています。
このweightを変えれば、図形を細くしたり太くしたりできます。
上の二つの関数を使って、三角形から十角形までを並べて描いた作例が下になります。
noStroke()して描いています。
これを使うと簡単に正多角形を作品に取り入れることができる様になりました。 自作ライブラリ的に使っていきたいと思います。