Java软光栅渲染器-渲染状态
目标
考虑一个问题：如果我想控制物体渲染的方式，例如把背面剔除改成正面剔除，把三角形的填充模式改成线框模式，应该怎么办？
请看下图：
目前我想分别渲染出这5张不同的效果图，只能先去修改源代码，然后运行，再改源码，再运行，再改源码，再运行，再改源码，再运行...
好麻烦啊。
一种比较合理的方式，是在渲染管线中增加一些状态，根据Geometry的状态值来决定如何渲染它。本文的目标就是实现渲染状态管理，使每一个Geometry都可以用不同的方式来渲染。
实现
渲染状态与每个具体的Geometry有关，用于控制如何渲染它。它应该和Material放在一起，同样负责Geometry的外观。
渲染状态主要在渲染管线中使用。在我的程序中，Renderer需要使用它来决定如何进行背面剔除，SoftwareRaster需要用它来决定如何光栅化三角形。
定义RenderState
创建RenderState类。
package net.jmecn.material;
/**
* 渲染状态
*
* @author yanmaoyuan
*
*/
public class RenderState {
/**
* 剔除模式
*/
public enum CullMode {
NEVER, // 不剔除
FACE, // 剔除正面
BACK, // 剔除背面
ALWAYS // 完全剔除
}
/**
* 填充模式
*/
public enum FillMode {
POINT, // 点填充模式，在每个顶点绘制一个像素
LINE, // 线框模式，在每个边绘制一条直线
FACE, // 面模式，对每个面进行填充
}
private CullMode cullMode;
private FillMode fillMode;
public RenderState() {
fillMode = FillMode.FACE;
cullMode = CullMode.BACK;
}
public FillMode getFillMode() {
return fillMode;
}
public void setFillMode(FillMode fillMode) {
this.fillMode = fillMode;
}
public CullMode getCullMode() {
return cullMode;
}
public void setCullMode(CullMode faceCullMode) {
this.cullMode = faceCullMode;
}
}
在这个类中，我定义了两个枚举类型：
CullMode 用于描述面的剔除方式。默认值是BACK，即背面剔除。
- CullMode.NEVER 不剔除，正面和背面都能看到。
- CullMode.FACE 剔除正面，只有表面法线背向摄像机的面可见。
- CullMode.BACK 剔除背面，只有表面法线朝向摄像机的面可见。
- CullMode.ALWAYS 正反面都剔除，这个面彻底看不见了。
FillMode 用于描述光栅化阶段三角形的填充方式。默认值是FACE，即填充实心三角形。
- FillMode.POINT 点模式，只光栅化三角形的顶点。
- FillMode.LINE 线框模式，只光栅化三角形的边。
- FillMode.FACE 面模式，光栅化实心三角形。
本文开头给出的5个效果图，分别是这样组合的：
图一：CullMode.FACE, FillMode.LINE
图二：CullMode.BACK, FillMode.LINE
图三：CullMode.NEVER, FillMode.LINE
图四：CullMode.FACE, FillMode.FACE
图五：CullMode.BACK, FillMode.FACE
改进Material
在Material中增加RenderState成员，这样创建Geometry时就可以通过Material来调整RenderState中的状态值。
package net.jmecn.material;
/**
* 材质
*
* @author yanmaoyuan
*
*/
public class Material {
protected RenderState renderState;
public Material() {
renderState = new RenderState();
}
public RenderState getRenderState() {
return renderState;
}
public void setRenderState(RenderState renderState) {
this.renderState = renderState;
}
}
改写Renderer
修改Renderer中的cullBackFace方法，根据CullMode的值来决定如何剔除。
/**
* 剔除背面
*
* @param a
* @param b
* @param c
* @return
*/
protected boolean cullBackFace(Vector3f a, Vector3f b, Vector3f c) {
// 计算ab向量
Vector3f ab = b.subtract(a, a);
// 计算bc向量
Vector3f bc = c.subtract(b, b);
// 计算表面法线
Vector3f faceNormal = ab.crossLocal(bc);
float dot = faceNormal.dot(c);
CullMode cullMode = material.getRenderState().getCullMode();
switch (cullMode) {
case NEVER:
return false;
case ALWAYS:
return true;
case BACK:
return dot >= 0;
case FACE:
return dot < 0;
default:
return false;
}
}
改写SoftwareRaster
为了方便光栅器查询当前的渲染状态，为SoftwareRaster类增加一个RenderState成员，以及对应的set方法。
// 渲染状态
protected RenderState renderState;
public void setRenderState(RenderState renderState) {
this.renderState = renderState;
}
修改Renderer的render(Geometry )方法，在执行光栅化之前，先把RenderrState设置给SoftwareRaster。
/**
* 渲染单个物体
* @param geometry
*/
protected void render(Geometry geometry) {
// 设置材质
this.material = geometry.getMaterial();
// 设置渲染状态
this.raster.setRenderState(material.getRenderState());// <----- 加了这一句
// 提取网格数据..
// 遍历所有三角形
for (int i = 0; i < indexes.length; i += 3) {
// ...
}
}
修改SoftwareRaster的rasterizeTriangle方法，根据FillMode来决定如何进行光栅化。
/**
* 光栅化三角形
* @param v0
* @param v1
* @param v2
*/
public void rasterizeTriangle(RasterizationVertex v0, RasterizationVertex v1, RasterizationVertex v2) {
// 将顶点变换到投影平面
v0.perspectiveDivide();
v1.perspectiveDivide();
v2.perspectiveDivide();
Matrix4f viewportMatrix = renderer.getViewportMatrix();
// 把顶点位置修正到屏幕空间。
viewportMatrix.mult(v0.position, v0.position);
viewportMatrix.mult(v1.position, v1.position);
viewportMatrix.mult(v2.position, v2.position);
switch (renderState.getFillMode()) {
case POINT: {
rasterizePixel((int)v0.position.x, (int)v0.position.y, v0);
rasterizePixel((int)v1.position.x, (int)v1.position.y, v1);
rasterizePixel((int)v2.position.x, (int)v2.position.y, v2);
return;
}
case LINE : {
rasterizeLine(v0, v1);
rasterizeLine(v0, v2);
rasterizeLine(v1, v2);
return;
}
case FACE : {
// 按Y坐标把三个顶点从上到下冒泡排序
RasterizationVertex tmp;
if (v0.position.y > v1.position.y) {
tmp = v0;
v0 = v1;
v1 = tmp;
}
if (v1.position.y > v2.position.y) {
tmp = v1;
v1 = v2;
v2 = tmp;
}
if (v0.position.y > v1.position.y) {
tmp = v0;
v0 = v1;
v1 = tmp;
}
float y0 = v0.position.y;
float y1 = v1.position.y;
float y2 = v2.position.y;
if (y0 == y1) {// 平顶
fillTopLineTriangle(v0, v1, v2);
} else if (y1 == y2) {// 平底
fillBottomLineTriangle(v0, v1, v2);
} else {// 分割三角形
// 线性插值
// FIXME 需要透视校正
float t = (y1 - y0) / (y2 - y0);
RasterizationVertex middleVert = new RasterizationVertex();
middleVert.interpolateLocal(v0, v2, t);
if (middleVert.position.x <= v1.position.x) {// 左三角形
// 画平底
fillBottomLineTriangle(v0, middleVert, v1);
// 画平顶
fillTopLineTriangle(middleVert, v1, v2);
} else {// 右三角形
// 画平底
fillBottomLineTriangle(v0, v1, middleVert);
// 画平顶
fillTopLineTriangle(v1, middleVert, v2);
}
}
return;
}
}
}
改写测试用例
改写Test3DView这个测试用例，改变Material中的RenderState参数。
package net.jmecn.examples;
import net.jmecn.Application;
import net.jmecn.material.Material;
import net.jmecn.material.RenderState;
import net.jmecn.material.RenderState.CullMode;
import net.jmecn.material.RenderState.FillMode;
import net.jmecn.math.Vector3f;
import net.jmecn.renderer.Camera;
import net.jmecn.scene.Geometry;
import net.jmecn.scene.Mesh;
import net.jmecn.scene.shape.Box;
/**
* 测试3D观察的效果
* @author yanmaoyuan
*
*/
public class Test3DView extends Application {
public static void main(String[] args) {
Test3DView app = new Test3DView();
app.setResolution(400, 300);
app.setTitle("3D View");
app.setFrameRate(60);
app.start();
}
private Geometry geom;
private final static float PI = 3.1415626f;
private final static float _2PI = PI * 2;
private float angle = 0;// 旋转角度
@Override
protected void initialize() {
// 网格
Mesh mesh = new Box();
// 材质
Material material = new Material();
RenderState renderState = material.getRenderState();
// 不裁剪背面
renderState.setCullMode(CullMode.NEVER);
// 显示为线框
renderState.setFillMode(FillMode.LINE);
// 添加到场景中
this.geom = new Geometry(mesh, material);
rootNode.attachChild(geom);
// 调整摄像机的位置
Camera cam = getCamera();
cam.lookAt(new Vector3f(2, 3, 5), Vector3f.ZERO, Vector3f.UNIT_Y);
}
@Override
protected void update(float delta) {
// 每秒旋转180°
angle += delta * PI;
// 若已经旋转360°，则减去360°。
if (angle > _2PI) {
angle -= _2PI;
}
// 计算旋转：绕Z轴顺时针方向旋转
geom.getLocalTransform().getRotation().fromAxisAngle(Vector3f.UNIT_Y, -angle);
}
}
执行结果，其实就是图三。
另一个测试用例
Test3DView已经用了很久啦，就让它保持这个线框状态吧，是时候写个新的测试用例了。
package net.jmecn.examples;
import net.jmecn.Application;
import net.jmecn.material.Material;
import net.jmecn.math.Vector3f;
import net.jmecn.scene.Geometry;
import net.jmecn.scene.shape.Box;
/**
* 测试3D光栅化
* @author yanmaoyuan
*
*/
public class Test3DRasterization extends Application {
public static void main(String[] args) {
Test3DRasterization app = new Test3DRasterization();
app.setResolution(400, 300);
app.setTitle("Test 3D Rasterization");
app.setFrameRate(60);
app.start();
}
@Override
protected void initialize() {
// 初始化摄像机
getCamera().lookAt(new Vector3f(3, 4, 5),
Vector3f.ZERO, Vector3f.UNIT_Y);
// 添加到场景中
Geometry geom = new Geometry(new Box(), new Material());
rootNode.attachChild(geom);
}
@Override
protected void update(float delta) {}
}
这个测试用例没有设置RenderState，目的是测试默认值的光栅化方式。
结果其实就是图五。
总结
目标达成。通过RenderState可以更加灵活地控制不同物体的渲染方式，再也不用反复修改源代码了。