查看原文
其他

写给设计师的 Processing 编程指南(13) - 3D绘图

2016-10-31 Wenzy InsLab

三维是二维的进阶。在学习新的知识点前,希望你已经在二维绘图上足够娴熟。

用代码在三维空间绘图,与 3dMax ,Maya 这类三维软件相比,有完全不一样的体验。由于里面没有直观的界面来控制和调整物体的位置,所以写起来会比较抽象。其中有一难点,要熟悉空间坐标系以及对应的各种变换操作。

在平面上绘图只需考虑两个维度,x 轴和 y 轴。但在三维空间中,会多出一个 z 轴。

三维空间中的坐标系

下面先来看三维空间中的坐标分布情况


对比原来的平面坐标系可以发现,x,y 轴的方向与原来是一致。新增加的 z 轴,正方向朝向的是观察者。它表示深度,物体的远近也取决于 z 轴上的数值。

而三维空间中的坐标系原点,与平面二维坐标系的坐标原点位置是一致的。都处于窗口的左上方,上图为了便于演示各个坐标轴的朝向,才对原点进行了平移。下图才是坐标系的默认状态


  • 注:添加了旋转动画效果展示深度

在绘图时,这个坐标系在头脑中必须非常明晰,包括各轴的正方向、负方向。为了加深印象,便于理解。下面再针对具体的坐标点做一些举例。

假设网格之间的距离为 50,某个空间坐标数值为(300,0,0),它便会处于以下位置。


  • 注:坐标原点进行过平移处理

当空间坐标值为 (-300,0,0) 时,便会往左偏移


坐标值为 (0,300,0)


坐标值为 (0,0,300)


坐标值为 (300,300,300)


绘制正方体

前面用了较多篇幅去讲坐标系。这是 3D 绘图的基础。只有熟悉它,才能在空间随心所欲地按自己的构想画出点线面。

下面正式进入绘图部分。从最简单的图形开始,在窗口中绘制一个正方体。

代码示例(13-1):

boolean showWire; void setup() {  size(700, 700, P3D); } void draw() {  background(0);  if (showWire) {    // 关闭填充,只显示线框    fill(255);  } else {    // 开启填充    noFill();    stroke(255);  }  translate(width/2, height/2, mouseX);  strokeWeight(3);  box(100); } void mousePressed() {  showWire = !showWire; }

运行效果:


代码说明:

  • Processing  默认绘图采用的二维模式。因此在进行三维绘图前,需要先进行一些设置。size 函数是一个可重载的参数,最后一个参数可以设置成 P3D 或 OPENGL 模式。不同模式会对应不同的渲染器。P3D 最简单,兼容性最强。OPENGL 效率更高,能够使用显卡加速。这里先选择 P3D 进行演示。

  • 例子中设置了一个布尔变量 showWire 用于切换显示模式。当点击鼠标时,showWire 的值会进行取反。从而影响到 draw 函数中的判定语句,实现切换效果

  • translate 的作用大家并不陌生,是对坐标系进行平移。它同时是一个可重载的函数,当输入的参数个数为 3 时,第 3 个参数便会影响 z 轴。前两个参数分别设置成了 width/2 和 height/2。所以坐标原点就恰好居中到屏幕中央,最后的参数由 mouseX 控制。因此左右移动鼠标,可以看到图形的远近发生变化

  • 这里看似物体的位置在移动。但实质上仅仅是坐标系的位置发生了变化,物体的坐标其实仍处于原点


旋转正方体

前面由于摄像机的视角是固定的,物体也没有旋转,所以很不立体,更像是平面的。下面介绍的 rotate() 函数,可以让正方体旋转起来。

rotate 函数有几种变式。分别是 rotateX,rotateY,rotateZ。它们会绕不同的坐标轴进行旋转。

其中,rotate 类的函数始终是以坐标原点为中心进行旋转的。所以若想某物体以自身为中心旋转,需要先使用 translate 将坐标原点变换到原物体的坐标上。

代码示例(13-2):

int rotateMode; void setup() {  size(700, 700, P3D); } void draw() {  background(0);  translate(width/2, height/2);  if (rotateMode == 0) {    rotateX(millis() * 0.002);  } else if (rotateMode == 1) {    rotateY(millis() * 0.002);  } else {    rotateZ(millis() * 0.002);  }  noFill();  strokeWeight(3);  stroke(255);  box(300); } void mousePressed() {  rotateMode++;  if (rotateMode == 3) {    rotateMode = 0;  } }

运行效果:


代码说明:

  • 鼠标单击便可切换不同的旋转模式,分别绕 x 轴,y 轴,z 轴进行旋转。整型变量 rotateMode 作为中介

  • 在绘制三维图形时,translate() 允许只传入两个参数。此时 z 坐标默认值为 0

关于 rotate 的旋转方向

rotate 函数的旋转方向是有固定规律的。当传入的参数为递增时,坐标系便会面朝旋转轴的正方向,进行逆时针旋转。与之相反,递减时则呈顺时针旋转。

下面是数值递增时的旋转情况。

rotateX(millis() * 0.001);


rotateY(millis() * 0.001);


rotateZ(millis() * 0.001);


除了用常规的方式记忆以外,还可以借鉴中学物理课上提到的右手螺旋定则(也叫安培定则)


所谓的右手螺旋定则,是一种判定电流和电流磁场的磁感线方向的方法。右手握住通电导线,大拇指朝向电流方向,其余四指的指向便会对应磁感线方向。

程序中没有电流,没有磁场。但可以用类似的方式来描述方向。例如,当 rotateX 传入的参数递增时,就可以采用“左手螺旋定则”。左手握住旋转的坐标轴 X 轴,大拇指朝向坐标轴的正方向,其余四指的指向便会对应旋转方向。当数值递减时,则采用“右手螺旋定则”,判定方法是一致的。右手握住旋转的坐标轴,大拇指朝向坐标轴的正方向,其余四指的指向便会对应旋转方向。(可对照前面的动图理解此法则)

3D 绘图的相关函数

前面只介绍了一个绘图函数 - box,下面将罗列 Processing 中内置的 3D 绘图函数以及对应的各种重载形式。

函数名函数功能参数说明
sphere(float r)绘制球体r:球体半径
sphereDetail(float a)设置球体精度a:球体精度
sphereDetail(float a,float b)设置球体精度a:球体经度精度,b:球体纬度精度
box(float size)绘制正方体size:正方体边长
box(float w,float h,float d)绘制长方体w、h、d 分别代表长方体的宽度,高度,深度

box 函数,它有两种重载形式。当参数个数为 1 时,数值就代表正方体的边长。参数个数为 3 时,可以分别控制长方体的长宽高。
sphere 函数可以绘制球体,结合 sphereDetail 可以设置球体精度。以上便是 Processing 中仅有的两种内置 3D 函数。

对 3D 绘图而言,仅用这两个函数显然是远远不够的。如果希望绘制一些更复杂的图形,则可以通过自定义函数的方式来实现。由于 3D 图形在程序中本质是由一个个面拼接而成的,所以只要定义好每个面的顶点位置,就能组成一个新的立体图形。下面将提供一个有关圆柱体绘制的函数。只要复制到程序中就可直接调用。

绘制圆柱体

代码示例(13-3):

void setup() {  size(700, 700, P3D); } void draw() {  background(0);  translate(width/2, height/2);  rotateX(millis() * 0.001);  rotateY(millis() * 0.001);  stroke(255);  strokeWeight(3);  noFill();  drawCylinder(int(mouseX * 0.05), 120, 350); } void drawCylinder(int sides, float r, float h) {  float angle = 2 * PI / sides;  float halfHeight = h / 2;  // 绘制顶面  beginShape();  for (int i = 0; i < sides; i++) {    float x = cos( i * angle ) * r;    float y = sin( i * angle ) * r;    vertex( x, y, -halfHeight );  }  endShape(CLOSE);  // 绘制底面  beginShape();  for (int i = 0; i < sides; i++) {    float x = cos( i * angle ) * r;    float y = sin( i * angle ) * r;    vertex( x, y, halfHeight );  }  endShape(CLOSE);  // 绘制侧面  beginShape(TRIANGLE_STRIP);  for (int i = 0; i < sides + 1; i++) {    float x = cos( i * angle ) * r;    float y = sin( i * angle ) * r;    vertex( x, y, halfHeight);    vertex( x, y, -halfHeight);  }  endShape(CLOSE); }

运行效果:


代码说明:

  • 函数 drawCylinder 可传入三个参数,其中 sides 代表圆柱的底面精度,r 表示圆柱半径,h 表示圆柱的高

  • 要绘制一个圆柱形,第一步要思考它能划分成哪些体块。理想状态下,圆柱的顶面和底面分别是两个圆形,而侧面,则是一个在空间上弯曲,带有弧度的曲面。但在计算机中,其实不存在“圆形”和“曲面”,它们是由更基本的单元构成的。例如程序中只显示边线的圆,就是由一根根的线段拼接而成,当数量足够多,就会变得平滑,也趋近于圆。而只显示填充色的圆,则是由三角面构成。曲面是同样的道理,构成元素也是三角面,当面数越多,图形就越光滑。

  • 因此,要绘制一个带有体积的图形,重中之重就要考虑如何在空间中绘制三角面。前面有提到过 triangle 函数,但它只能在二维平面上画三角形。如果要在空间中表示,就需必须要使用  beginShape ,endShape 和 vertex 函数。Vertex 是一个可重载函数,当传入的参数个数为 3 时,就表示空间坐标。“绘制顶面”与“绘制底面”的两段代码大家应该不会陌生,用三角函数计算得出圆的各个顶点,前后再用 beginShape 和 endShape 进行包裹,就能表示一个圆。

  • 而“绘制侧面”的代码,里面有一句命令“ beginShape(TRIANGLE_STRIP) ” ,TRIANGLE_STRIP 用于设置顶点的连线模式。它会决定点和点之间,是哪些共同组成一个三角面。当不填任何参数时,默认是根据点的先后顺序,连成一个多边形


  • 当使用 TRIANGLE_STRIP 后,会先将前三个坐标连成一个三角形,之后每增加一个坐标,便会和前两个坐标组成新的三角形。通过这种互相交替的方式,先后连接底面和顶面的顶点,就能生成曲面


  • 这段有关圆柱体的代码无需完全理解,随着学习的深入。会发现有大量的函数和类库是别人已经封装好的,对设计师而已没有必要过度深究这些底层知识。毕竟创作才是最终目的,只要了解调用的方法

除了这些有体积的绘图函数,前面在平面视图下提到过的 line,triangle,rect,ellipse 等函数也能在三维空间中正常显示。只是这类函数大多只有 x ,y 坐标。要表示深度关系,只能结合 translate 函数来对坐标系进行平移。其中 line 函数比较特殊,它允许重载,坐标部分可以多写一个 z 坐标。

函数名函数功能参数说明
line(float x1,float y1,float z1,float x2,float y2,float z2)绘制直线前三个参数代表直线端点 A 的空间坐标,后三个参数代表端点 B 的空间坐标

3D绘图函数-综合示例01

由于图形的绘制都大同小异,这里就不独立列举每个函数的使用方法。下面整合了一个实例。

代码示例(13-4):

int index; void setup() {  size(700,700,P3D); } void draw() {  background(0);  translate(width/2, height/2);  rotateX(millis() * 0.001);  rotateY(millis() * 0.0015);  noFill();  stroke(255);  strokeWeight(3);  switch (index) {      case 0:        box(300);        break;      case 1:        sphereDetail(12);        sphere(180);        break;      case 2:        line(-200, 0, 200, 0);        break;      case 3:        triangle(150, -200, 0, 150, -150, -200);        break;      case 4:        rectMode(CENTER);        rect(0, 0, 300, 300);        break;      case 5:        ellipse(0, 0, 400, 400);        break;      default:        break;  } } void keyPressed() {  if (keyCode == LEFT) {    index--;    if (index < 0) {      index = 5;    }  }  if (keyCode == RIGHT) {    index++;    if (index > 5) {      index = 0;    }  } }

运行效果:


代码说明:

  • rotateX 和 rotateY 的旋转速度略有不同,目的是为了让视角变化更丰富。

  • 为了观察空间体积,使用了 noFill 函数只显示线框

  • LEFT,RIGHT 作为特殊键值,分别代表方向键的左键和右键

  • 变量 index 代表了不同的模式。方向键的左键和右键,可以切换不同的图形

摄像机的控制

下面将介绍摄像机的用法,使用它可以更灵活地控制窗口视角。使用摄像机,需要用到一个名叫 “PeasyCam” 的库。这不是 Processing 中内置的,所以需要到 Libraries 处下载并安装。


安装完毕后,便能使用以下代码

代码示例(13-5):

import peasy.*; PeasyCam cam; void setup() {  size(700,700,P3D);  cam = new PeasyCam(this, 600); } void draw() {  background(0);  stroke(255);  noFill();  strokeWeight(3);  box(300); }

运行效果:



代码说明:

  • 通过 import 导入库

  • 在对 PeasyCam 对象初始化时,默认摄像机是朝向坐标原点的,其中第二个参数表示摄像机到目标的距离。

  • PeasyCam 集成了很多方便的功能,下面是操作方法

操作方式一览:

鼠标左键拖动(笔记本触摸板三指移动):会以原点为目标,旋转摄像机视角

鼠标右键上下拖动(笔记本触摸板双指移动):推拉摄像机,远近变化

鼠标左键拖动 + Command 键:平移摄像机

鼠标左键双击:恢复摄像机初始视角

  • 使用 PeasyCam 有一个好处,坐标原点会默认居中到屏幕中央。这样就无需每次使用 translate(width/2,height/2) 。

灯光系统

谈到三维绘图,不得不提到灯光。要使物体具有立体感,灯光是不可获缺的。Processing 中,就提供多种类型的灯光。如果你之前使用过 3dMax,Maya 这类三维动画软件,一定不会陌生。

在 Processing 中可以使用的灯光类型有这几类。


环境光:光在环境中进行了充分散射,没有光源位置和方向,强度均匀。
平行光:当某个光源距离物体接近无限远,就会产生平行光。在程序中无需设定位置,只有方向,常用于模拟太阳光照
点光源:点光源的光都会从某个点放出,它对各个方向的光照强度是一致的,并会随距离衰减。常用于模拟灯光
聚光灯:聚光灯是一种舞台灯光,投出的灯光近似于锥形。它有多个参数。如角度,集中度等。

下面先以点光源为例。

代码示例(13-6):

 import peasy.*;  PeasyCam cam;  void setup() {    size(700, 700, P3D);    cam = new PeasyCam(this, 500);  }  void draw() {    background(0);    // 启用灯光    pushMatrix();    pointLight(255, 255, 255, -150, -150, 150);    rotateX(millis() * 0.0005);    rotateY(millis() * 0.0005);    noStroke();    box(250);    popMatrix();    // 绘制灯光位置    noLights();    translate(-150, -150, 150);    fill(255);    sphere(10);  }

运行效果:


代码说明:

  • pointLight 函数的作用是在场景中启用点光源。使用时必须放在 draw 函数中,在它之后的绘图函数都会受到点光源的影响,产生光照效果。其中前三个参数代表光源颜色,后三个参数代表点光源的空间坐标

  • 由于灯光本身是不会被程序绘制出来,但为了更直观我们可以手动绘制。例如将灯光的坐标用球体表示。noLights() 函数的作用是关闭灯光,这样球体就不会受灯光影响,并会采用平涂的方式进行着色。若不使用 noLights(),由于程序里点光源的位置恰好处在球心当中,所以外表面就不会被照亮,下面是不使用 noLights() 的效果


  • 有一点值得注意,光源的位置会受 rotate ,translate 等函数的影响。例子中为了让点光源的位置固定在(-150, -150, 150),所以写在 rotateX 和 rotateY 之前

深入灯光系统

下面通过一个综合实例了解各种类型的灯光用法。

代码示例(13-7):

import peasy.*; PeasyCam cam; int index, lightMode; void setup() {  cam = new PeasyCam(this, 600);  size(700, 700, P3D); } void draw() {  background(50);  if (lightMode == 0) {    ambientLight(255, 0, 0);  } else if (lightMode == 1) {    directionalLight(0, 255, 0, mouseX, mouseY, 0);  } else if (lightMode == 2) {    // 绘制点光源位置    pushMatrix();    translate(-200, -200, 200);    fill(255);    sphere(10);    popMatrix();    // 开启点光源    pointLight(0, 0, 255, -200, -200, 200);  } else if (lightMode == 3) {    // 绘制聚光灯位置    pushMatrix();    translate(0, 0, 300);    fill(255);    sphere(10);    popMatrix();    // 开启聚光灯    spotLight(255, 255, 255, 0, 0, 300, 0, 0, -1, mouseX/float(width), mouseY/float(height) * 1000);  }  pushMatrix();  rotateX(millis() * 0.001 * 0.3);  rotateY(millis() * 0.0015 * 0.3);  noStroke();  switch (index) {  case 0:    box(300);    break;  case 1:    sphereDetail(200);    sphere(180);    break;  case 2:    stroke(255);    strokeWeight(3);    line(-200, 0, 200, 0);    break;  case 3:    triangle(150, -200, 0, 150, -150, -200);    break;  case 4:    rectMode(CENTER);    rect(0, 0, 300, 300);    break;  case 5:    ellipse(0, 0, 400, 400);    break;  default:    break;  }  popMatrix(); } void keyPressed() {  if (keyCode == LEFT) {    index--;    if (index < 0) {      index = 5;    }  }  if (keyCode == RIGHT) {    index++;    if (index > 5) {      index = 0;    }  }  if (keyCode == UP) {    lightMode--;    if (lightMode < 0) {      lightMode = 3;    }  }  if (keyCode == DOWN) {    lightMode++;    if (lightMode > 3) {      lightMode = 0;    }  } }

运行效果:

环境光:


平行光:


点光源:


聚光灯:


代码说明:

  • 键盘方向键的左右键可切换图形,上下键可切换光照模式

  • 环境光,平行光,聚光灯与点光源一样,需要写在 draw 函数中

  • 函数 ambientLight() 可创建环境光。里面的 3 个参数代表光源颜色,分别对应 R,G,B。环境光会从各个方向放出均匀的光线,因此例子中环境光一旦设置成红色,物体表面呈现的颜色就是均匀的。

  • 函数 directionalLight() 可创建平行光。前 3 个参数代表光源颜色,分别对应 R,G,B。后 3 个参数代表光线的指向方向,分别对应 x,y,z 轴。这里使用了 mouseX 和 mouseY 作为参数,因此可以通过移动鼠标来改变光源方向。

  • 点光源和聚光灯是有特定位置的,为了直观地显示。所以在前面使用 sphere 来绘制灯光。

  • 函数 spotLight() 可创建聚光灯。它的参数最为复杂,多达 11 个。前 3 个参数代表光源颜色,分别对应 R,G,B。后面的 3 个参数代表聚光灯的位置,紧跟后面的 3 个参数代表聚光灯的指向,分别对应 x,y,z 轴。倒数第二个参数代表光锥的角度,最后一个参数代表集中度(光线边缘的模糊程度)。

  • 除了 line 函数,其他绘图函数都会受灯光影响。

灯光的综合实例01

代码示例(13-8):

void setup() {  size(700, 700, P3D); } void draw() {  background(0,50,71);  translate(width/2, height/2);  pointLight(255, 0, 255, 200, -200, 200);  pointLight(0, 255, 255, -200, 200, 200);  int num = 5;  float interval = 120;  float w = (num - 1)* interval;  for (int i = 0; i < num; i++) {    for (int j = 0; j < num; j++) {      pushMatrix();      translate(-w/2 + i * interval,-w/2 + j * interval);      rotateX(millis()/1000.0 + i * 0.1);      rotateY(millis()/1000.0 + j * 0.1);      noStroke();      box(65);      popMatrix();    }  } }

运行效果:


代码说明:

  • 像现实中的灯光一样,程序中的光照效果也是可以叠加的。这里就设置了两个不同颜色,不同位置的点光源,这样可以使物体更有层次感

  • 局部变量 w 代表的是整个矩阵的宽度,通过间距和方体的数量可以计算得出。获得了 w 的数值之后,就可以计算偏移量,让整个矩阵恰好居中到屏幕中央

灯光的综合实例02

代码示例(13-9):

int num; float []x,y,z; void setup() {  size(700, 700, P3D);  num = 50;  x = new float[num];  y = new float[num];  z = new float[num];  for (int i = 0; i < num; i++) {    x[i] = random(-200, 200);    y[i] = random(-200, 200);    z[i] = random(-200, 200);  } } void draw() {  colorMode(RGB);  background(79, 50, 127);  translate(width/2, height/2);  pointLight(255, 0, 0, 200, -200, 200);  pointLight(255, 0, 255, -200, 200, 200);  rotateX(millis() / 1000.0);  rotateY(millis() / 1000.0);  for (int i = 0; i < num; i++) {    pushMatrix();    translate(x[i], y[i], z[i]);    rotateX(i * 0.2 + millis() * 0.004);    rotateY(i * 0.3 + millis() * 0.004);    noStroke();    box(30,10,90);    popMatrix();  }  for (int i = 0; i < num - 1; i++) {    if (random(1) < 0.08) {      colorMode(HSB);      stroke(random(255),255,255);      strokeWeight(4);      line(x[i], y[i], z[i], x[i + 1], y[i + 1], z[i+1]);    }  } }

运行效果:


代码说明:

  • colorMode(HSB) 的作用是将颜色模式设置为 HSB 模式。这样就能控制线条的色相产生随机变化。由于背景色的参数采用的是 RGB 模式,所以需要在开头使用 colorMode(RGB) 将模式切换回 RGB。

  • 第二个 for 循环,作用是对方体之间随机进行连线

灯光系统总结

Processing 的灯光系统有两个特性。一是没有投影,二是物体之间不会相互影响,光没有反射也没有折射。所以在真实感上比不上 Unity 这类游戏引擎,画面的精致程度也很难达到 C4D,Maya 等软件渲染出的效果。

尽管如此,作为一个不那么仿真,阉割版的灯光,只要参数调节得当,还是可以有不错的三维表现力。若是觉得无法满足创作需求了,就可以尝试学习一些更高阶的内容 - Shader Programming , 使用它就不会有以上的限制,可以用 GPU 充分挖掘图形的性能。

若想更多地了解 Shader,推荐 Patricio 的入门教程(

shadertoy 网站可以查看更多绚丽作品,你能从中领略 shader 的魅力。(


END

至此,基础部分已经完结。回顾前半部分的写作。整个过程并不轻松,作为基础教程,必须在有条件限制的情况下将核心概念讲清楚。保证通俗的同时,实例要简炼有趣。作为初稿,自我评价还算过关。

编程技能的修炼之路上,遵循某种“二八定律”。只要掌握 20 % 的核心概念,就能解决 80 % 的问题。虽然上部分涉及的知识点还远远不到 20 %,但只要把基础巩固好。就能更游刃有余地往下深入。

后面会开始进入新的章节。不谈技术的细枝末节,更多地围绕图形创作展开。敬请期待~


Processing 系列文章

[1][2][3][4][5][6]

[7][8][9][10][11][12]

资源索引

CreativeCoding学习资源索引

Twitter资源索引


您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存