つぶやきProcessing specularMaterial()活用術

こんにちは、AQUARING かに です。

今回は、前回の記事で紹介した ellipsoid() などの丸みのある3D形状と supecularMaterial() の組み合わせでの表現テクニックを紹介します。

supecularMaterial() の書き方

// Grayscale (+ Alpha)
specularMaterial(gray, [alpha])

// RGB (+ Alpha)
specularMaterial(v1, v2, v3, [alpha])

// p5.Color
specularMaterial(color)

引数には色を指定するだけですが、specularMaterial() は3Dオブジェクトの鏡面反射を表現するマテリアルのため、ライティングと併用する必要があります。
つぶやきProcessingでのライティングは、短い文字数で ambientLight() と directionalLight() の両方が同時に適用できる lights() をよく使います。​

specularMaterial()による、金属やプラスチックのようなつるつるした質感。

作例

半透明マテリアル

t=0
draw=_=>{t++||noStroke(createCanvas(W=800,W,WEBGL))
X=rotateX
Y=rotateY
box(W*3)
X(.1)
lights`#つぶやきProcessing`
specularMaterial(W)
P=_=>{scale(1,-1)
for(i=4;i--;)push(p=PI/2),Y(i*p-t/99),translate(113,82),Y(p),X(-PI*.194-p),pop(ellipsoid(200,6,200,3))}
P(P(fill`#27f8`))} pic.twitter.com/6XmsSMOmVa

— // wat 🦀 (@watabo_shi) July 31, 2022

マテリアルを透過させることで向こう側のメッシュの鏡面反射まで透けて見えるようになって、かなりリアルな見た目が作れます。
このスケッチでは specularMaterial() に白を指定していますが、fill() でアルファを指定しています。

specularMaterial(W)// 白
fill`#27f8`// 16進数 4桁目がアルファ

背景にもマテリアルを適用

t=0
draw=_=>{t++||noStroke(createCanvas(W=800,W,WEBGL))
r=W/4
X=rotateX
lights`#つぶやきProcessing`
box(W*3)
specularMaterial('#0f08')
shininess(19)
X(R=t/r)
E=_=>{for(i=2;i--;){push()
translate(0,i?r:-r)
pop(ellipsoid(r,40,r,4,60))}}
E(rotateY(R))
E(X(p=PI/2))
E(rotate(p))} pic.twitter.com/phUpAkAoEL

— // wat 🦀 (@watabo_shi) August 2, 2022

box(W*3) として大きめの立方体の内側をレンダリングすることで background() の代わりにするテクニックをよく使うのですが、この box() にもマテリアルとライティングが適用されるようにしたら背景がいいかんじのグラデーションになります。

lights`#つぶやきProcessing`// ライティング
box(W*3)// 背景代わりのbox
supecularMaterial('#0f08')// 半透明マテリアル

透過デプス描画順問題の解消

t=0
draw=_=>{t||noStroke(createCanvas(W=800,W,WEBGL))
Y=rotateY
Z=rotate
lights`#つぶやきProcessing`
box(W)
specularMaterial('#f408')
shininess(9)
drawingContext.depthFunc(519)
Z(t+=.005)
Y(t)
for(i=9;i--;)push(Y(.698)),Z(.52),translate(0,0,311),scale(1,1,.1),pop(torus(99,33,6))} pic.twitter.com/cPLmICtk8m

— // wat 🦀 (@watabo_shi) August 4, 2022

3DCGに半透明マテリアルを適用すると、角度によっては描画順の関係で正しく後ろ側が透過しない場合があります。
このスケッチでは WebGLRenderingContext.depthFunc() を指定することで描画順問題を解消しています。

drawingContext.depthFunc(519)

↓ ↓ ↓

gl.depthFunc(gl.ALWAYS)// 深度に関係なく常に描画

まとめ

specularMaterial()、lights() と丸みのある ellipsoid() や torus() などの3D形状を組み合わせると、文字数制限下でもかなりリッチな表現ができるので、みなさんもぜひやってみてください〜！