Java软光栅渲染器-纹理

目标

• 创建纹理
• 实现纹理采样
• 实现二次线性滤波
• 实现纹理地址包裹
• 实现读取图片数据作为纹理

参考资料：

• OpenGL ES学习笔记（三）——纹理
• LearnOpenGL中文 第7章 纹理
• 纹理的滤波方式
• 纹理采样和过滤
• Mipmap与纹理过滤
• 纹理 放大缩小过滤
• 【图像缩放篇之一】近邻取样插值和其速度优化
• 【图像缩放篇之二】二次线性插值和三次卷积插值
• 【图像缩放篇之三】三次线性插值和MipMap链

实现

定义Texture

创建Texture类，它的主要作用是保存一幅图片数据，并提供sample2d方法，用于在fragmentShader中提供纹理采样。

package net.jmecn.material;

import net.jmecn.math.ColorRGBA;
import net.jmecn.math.Vector2f;
import net.jmecn.math.Vector4f;
import net.jmecn.renderer.Image;

/**
 * 纹理
 * 
 * @author yanmaoyuan
 *
 */
public class Texture {

    private int width;
    private int height;
    private byte[] components;

    public Texture(Image image) {
        setImage(image);
    }

    /**
     * 设置图像
     * @param image
     */
    public void setImage(Image image) {
        this.width = image.getWidth();
        this.height = image.getHeight();
        this.components = image.getComponents();
    }

    /**
     * 根据UV进行采样
     * 
     * @param uv
     * @return
     */
    public Vector4f sample2d(Vector2f uv) {
        return new Vector4f(0);
    }

}

为了便于使用，额外提供一个构造方法，将生成一个8x8的黑白相间图片。注意这里的黑色是纯黑，ALPHA通道的值也为0。

/**
 * 默认纹理，生成一个网格黑白相间的网格。
 */
public Texture() {
    Image image = new Image(64, 64);
        
    // 创建一个ImageRaster用来画图。
    ImageRaster raster = new ImageRaster(image);
        
    // 底色填充为白色
    raster.fill(ColorRGBA.WHITE);

    // 纯黑
    ColorRGBA color = new ColorRGBA(0x00000000);
    for (int y = 0; y < 64; y++) {
        for (int x = 0; x < 64; x++) {
            int i = x / 8;
            int j = y / 8;
            if ((i + j) % 2 == 0) {
                raster.drawPixel(x, y, color);
            }
        }
    }

    setImage(image);
}

在Material中添加Texture成员，并提供get/set方法。

package net.jmecn.material;

/**
 * 材质
 * 
 * @author yanmaoyuan
 *
 */
public class Material {

    protected Texture texture;
    protected RenderState renderState;

    public Material() {
        renderState = new RenderState();
    }

    public Texture getTexture() {
        return texture;
    }

    public void setTexture(Texture texture) {
        this.texture = texture;
    }

    public RenderState getRenderState() {
        return renderState;
    }

    public void setRenderState(RenderState renderState) {
        this.renderState = renderState;
    }

}

最邻近点采样

下面需要实现sample2d方法，先采用最邻近点采样。

创建getColor方法，用于从components中提取颜色，并保存为Vector4f()。

private final static float INV_SCALE = 1f / 255f;

/**
 * 提取颜色
 * @param x
 * @param y
 * @return
 */
public Vector4f getColor(int x, int y) {
    Vector4f color = new Vector4f();
    
    int index = (x + y * width) * 4;
    float r = (float)(0xFF & components[index]) * INV_SCALE;
    float g = (float)(0xFF & components[index+1]) * INV_SCALE;
    float b = (float)(0xFF & components[index+2]) * INV_SCALE;
    float a = (float)(0xFF & components[index+3]) * INV_SCALE;
    
    color.set(r, g, b, a);
    return color;
}

实现最邻近点采样。

/**
 * 最邻近点(NEAREST)采样
 * 
 * @param s
 * @param t
 * @return
 */
protected Vector4f nearest(float s, float t) {

    // 计算坐标
    float u = (float) (width - 1) * s;
    float v = (float) (height - 1) * (1 - t);

    // 取整
    int iu = (int) u;
    int iv = (int) v;

    Vector4f color = getColor(iu, iv);
    return color;
}

/**
 * 根据UV进行采样
 * 
 * @param uv
 * @return
 */
public Vector4f sample2d(Vector2f uv) {
    return nearest(uv.x, uv.y);
}

像素着色

SoftwareRaster中的fragmengShader终于有用武之地了。

在fragmengShader方法中进行纹理采样，并把纹理的颜色和原本的顶点颜色融合在一起。

/**
 * 片段着色器
 * @param frag
 */
private void fragmentShader(RasterizationVertex frag) {
    Texture texture = renderer.getMaterial().getTexture();
    if (texture != null && frag.hasTexCoord) {
        Vector4f texColor = texture.sample2d(frag.texCoord);
        frag.color.multLocal(texColor);
    }
}

测试用例

为了便于测试纹理，我先创建了一个四边形网格。它的中心位于模型空间的原点，正面朝向Z轴正方向。

package net.jmecn.scene.shape;

import net.jmecn.math.Vector2f;
import net.jmecn.math.Vector3f;
import net.jmecn.math.Vector4f;
import net.jmecn.scene.Mesh;
import net.jmecn.scene.Vertex;

/**
 * 四边形网格。
 * @author yanmaoyuan
 *
 */
public class Quad extends Mesh {

    public Quad() {
        
        // 顶底位置
        float[] positions = {
                -1, -1,  0,
                 1, -1,  0,
                 1,  1,  0,
                -1,  1,  0
        };
        
        // 顶点颜色
        float[] colors = {
                1, 1, 0, 1,
                0, 1, 1, 1,
                1, 0, 1, 1,
                1, 1, 1, 1
        };
        
        // 纹理坐标
        float[] texCoords = {
                0, 0,
                1, 0,
                1, 1,
                0, 1
        };
        
        // 顶点法线
        float[] normals = {
                0, 0, 1,
                0, 0, 1,
                0, 0, 1,
                0, 0, 1
        };
        
        // 顶点索引
        this.indexes = new int[]{
                0, 1, 2,
                0, 2, 3
        };
        
        this.vertexes = new Vertex[positions.length];
        
        for(int i = 0; i < indexes.length; i++) {
            int index = indexes[i];
            
            vertexes[index] = new Vertex();
            vertexes[index].position = new Vector3f( positions[index*3], positions[index*3+1], positions[index*3+2]);
            vertexes[index].normal = new Vector3f( normals[index*3], normals[index*3+1], normals[index*3+2]);
            vertexes[index].color = new Vector4f( colors[index*4], colors[index*4+1], colors[index*4+2], colors[index*4+3]);
            vertexes[index].texCoord = new Vector2f(texCoords[index*2], texCoords[index*2+1]);
        }
    }
}

然后编写测试代码如下：

package net.jmecn.examples;

import net.jmecn.Application;
import net.jmecn.material.Material;
import net.jmecn.material.Texture;
import net.jmecn.math.Vector3f;
import net.jmecn.scene.Geometry;
import net.jmecn.scene.shape.Quad;

/**
 * 测试纹理采样效果
 * @author yanmaoyuan
 *
 */
public class Test3DTexture extends Application {

    public static void main(String[] args) {
        Test3DTexture app = new Test3DTexture();
        app.setResolution(400, 300);
        app.setTitle("Test Texture");
        app.setFrameRate(60);
        app.start();
    }

    @Override
    protected void initialize() {
        // 初始化摄像机
        getCamera().lookAt(new Vector3f(1, 2, 3),
                Vector3f.ZERO, Vector3f.UNIT_Y);
        
        // 定义材质
        Material material = new Material();
        
        // 使用程序纹理
        Texture texture = new Texture();
        material.setTexture(texture);
        
        // 添加到场景中
        Geometry geom = new Geometry(new Quad(), material);
        rootNode.attachChild(geom);
    }

    @Override
    protected void update(float delta) {}

}

运行程序，效果如下：

可以看到，使用最邻近点（Nearest）算法进行纹理采样，像素边缘都明显的锯齿。其次，由于没有进行对纹理坐标进行透视校正，两个三角形各自使用仿射（Affine）变换来处理纹理坐标，导致纹理有些变形。

透视校正的问题，晚点再处理。下面继续实现另一种纹理采样方法。

双线性纹理采样

在Texture类中，实现bilinear采样算法。

/**
 * 二次线性(Bilinear)采样
 * 
 * @param s
 * @param t
 * @return
 */
protected Vector4f bilinear(float s, float t) {
    // 计算坐标
    float u = (float) (width - 1) * s;
    float v = (float) (height - 1) * (1 - t);

    // 取整
    int iu0 = (int) u;
    int iv0 = (int) v;
    
    int iu1 = iu0 + 1;
    int iv1 = iv0 + 1;
    
    if (iu1 > width - 1)
        iu1 = iu0;
    
    if (iv1 > height - 1)
        iv1 = iv0;

    // 四个采样点
    Vector4f c0 = getColor(iu0, iv0);
    Vector4f c1 = getColor(iu1, iv0);
    Vector4f c2 = getColor(iu0, iv1);
    Vector4f c3 = getColor(iu1, iv1);
    
    // 计算四个采样点的贡献值
    float du0 = u - iu0;
    float dv0 = v - iv0;
    float du1 = 1f - du0;
    float dv1 = 1f - dv0;
    
    // 计算最终的颜色
    c0.x = c0.x * du1 * dv1 + c1.x * du0 * dv1 + c2.x * du1 * dv0 + c3.x * du0 * dv0;
    c0.y = c0.y * du1 * dv1 + c1.y * du0 * dv1 + c2.y * du1 * dv0 + c3.y * du0 * dv0;
    c0.z = c0.z * du1 * dv1 + c1.z * du0 * dv1 + c2.z * du1 * dv0 + c3.z * du0 * dv0;
    c0.w = c0.w * du1 * dv1 + c1.w * du0 * dv1 + c2.w * du1 * dv0 + c3.w * du0 * dv0;
    
    return c0;
}

现在有两种采样算法，我们需要一个参数来决定如何进行采样。我们暂时不考虑纹理缩小时的MinFilter、MinMap、各向异性等算法，只区分最邻近采样和二次线性采样算法。

在Texture类中定义MagFilter枚举，并根据它的值来决定如何采样。

/**
 * 纹理放大时，如何滤波
 */
public enum MagFilter {
    NEAREST,    // 最邻近
    BILINEAR,   // 二次线性滤波
}

private MagFilter magFilter = MagFilter.BILINEAR;

/**
 * 设置放大滤波方式
 * @param magFilter
 */
public void setMagFilter(MagFilter magFilter) {
    this.magFilter = magFilter;
}

/**
 * 根据UV进行采样
 * 
 * @param uv
 * @return
 */
public Vector4f sample2d(Vector2f uv) {
    switch (magFilter) {
    case NEAREST:
        return nearest(uv.x, uv.y);
    case BILINEAR:
        return bilinear(uv.x, uv.y);
    }
    
    return new Vector4f(0);
}

再次执行测试用例，结果如下：

可以看出，相比于最邻近点采样，黑白色块的边缘比较平滑。

纹理包裹模式

纹理坐标通常的范围是从(0, 0)到(1, 1)，如果我们把纹理坐标设置为范围以外会发生什么？

定义WarpMode枚举类型，用来描述不同的包裹方式：

• REPEAT：纹理的默认行为。重复纹理图像。
• MIRRORED_REPEAET：和REPEAT一样，除了重复的图片是镜像放置的。
• CLAMP_TO_EDGE：纹理坐标会在0到1之间。超出的部分会重复纹理坐标的边缘，就是边缘被拉伸。
• CLAMP_TO_BORDER：超出的部分是用户指定的边缘的颜色。

在Texture类中添加代码如下：

/**
 * 纹理包围模式
 */
public enum WarpMode {
    REPEAT,             // 纹理的默认行为。重复纹理图像。
    MIRRORED_REPEAT,    // 和REPEAT一样，除了重复的图片是镜像放置的。
    CLAMP_TO_EDGE,      // 纹理坐标会在0到1之间。超出的部分会重复纹理坐标的边缘，就是边缘被拉伸。
    CLAMP_TO_BORDER     // 超出的部分是用户指定的边缘的颜色。
}

/**
 * 指定包围模式属于哪个轴
 */
public enum WarpAxis {
    S, T
}

private WarpMode warpS = WarpMode.REPEAT;
private WarpMode warpT = WarpMode.REPEAT;
private Vector4f borderColor = new Vector4f(0);

/**
 * 设置纹理包裹模式
 * @param mode
 */
public void setWarpMode(WarpMode mode) {
    warpS = mode;
    warpT = mode;
}

/**
 * 设置纹理包裹模式
 * @param axis
 * @param mode
 */
public void setWarpMode(WarpAxis axis, WarpMode mode) {
    switch (axis){
    case S:
        warpS = mode;
        break;
    case T:
        warpT = mode;
    }
}

/**
 * 设置边框颜色
 * @param borderColor
 */
public void setBorderColor(Vector4f borderColor) {
    this.borderColor = borderColor;
}

然后，实现纹理坐标处理。

/**
 * 根据UV进行采样
 * 
 * @param uv
 * @return
 */
public Vector4f sample2d(Vector2f uv) {
    float s = uv.x;
    float t = uv.y;
    
    if (s < 0 || s > 1 || t < 0 || t > 1) {
        if (warpS == WarpMode.CLAMP_TO_BORDER || warpT == WarpMode.CLAMP_TO_BORDER) {
            return borderColor;
        }
        
        s = warp(s, warpS);
        t = warp(t, warpT);
    }
    
    switch (magFilter) {
    case NEAREST:
        return nearest(s, t);
    case BILINEAR:
        return bilinear(s, t);
    }
    
    return new Vector4f(0);
}

/**
 * 纹理坐标包裹
 * @param value
 * @param mode
 * @return
 */
private float warp(float value, WarpMode mode) {
    switch (mode) {
    case REPEAT: {
        // 整数部分
        int n = (int) value;
        // 小数部分
        float frac = value - n;
        
        if (frac < 0) {
            frac = frac + 1f;
        }
        value = frac;
        break;
    }
    case MIRRORED_REPEAT: {
        // 整数部分
        int n = (int) value;
        // 小数部分
        float frac = value - n;
        
        if (frac < 0) {
            frac = - frac;
        }
        
        if (n % 2 != 0) {
            frac = 1 - frac;
        }
            
        value = frac;
        break;
    }
    case CLAMP_TO_EDGE:
        if (value < 0) {
            value = 0;
        }
        if (value > 1) {
            value = 1;
        }
        break;
    case CLAMP_TO_BORDER:
        break;
    }
    return value;
}

测试纹理包裹模式

先制作一张图片，命名为yan.bmp。在工程目录下创建res文件夹，把yan.bmp文件放进去。

读取图片

在Image类中，增加读取图片的代码。使用ImageIO将图片文件读取为BufferedImage，然后把数据写入Image类的components数组中。

public Image(String fileName) throws IOException {
    int width = 0;
    int height = 0;
    byte[] components = null;

    BufferedImage image = ImageIO.read(new File(fileName));

    width = image.getWidth();
    height = image.getHeight();

    int imgPixels[] = new int[width * height];
    image.getRGB(0, 0, width, height, imgPixels, 0, width);
    components = new byte[width * height * 4];

    for(int i = 0; i < width * height; i++) {
        int pixel = imgPixels[i];

        components[i * 4]     = (byte)((pixel >> 16) & 0xFF); // R
        components[i * 4 + 1] = (byte)((pixel >> 8 ) & 0xFF); // G
        components[i * 4 + 2] = (byte)((pixel      ) & 0xFF); // B
        components[i * 4 + 3] = (byte)((pixel >> 24) & 0xFF); // A
    }

    this.width = width;
    this.height = height;
    this.components = components;
}

编写测试代码

编写一个新的测试用例，故意把纹理坐标写成[0, 1]之外的值。把S轴的WarpMode设为REPEAT，T轴的WarpMode设为MIRRORED_REPEAT。

package net.jmecn.examples;

import java.io.IOException;

import net.jmecn.Application;
import net.jmecn.material.Material;
import net.jmecn.material.Texture;
import net.jmecn.material.Texture.WarpAxis;
import net.jmecn.material.Texture.WarpMode;
import net.jmecn.math.Vector2f;
import net.jmecn.math.Vector3f;
import net.jmecn.math.Vector4f;
import net.jmecn.renderer.Image;
import net.jmecn.scene.Geometry;
import net.jmecn.scene.Mesh;

/**
 * 测试纹理采样效果
 * @author yanmaoyuan
 *
 */
public class Test3DWarpMode extends Application {

    public static void main(String[] args) {
        Test3DWarpMode app = new Test3DWarpMode();
        app.setResolution(400, 300);
        app.setTitle("Test Texture");
        app.setFrameRate(60);
        app.start();
    }

    @Override
    protected void initialize() {
        // 初始化摄像机
        getCamera().lookAt(new Vector3f(1, 2, 3),
                Vector3f.ZERO, Vector3f.UNIT_Y);
        
        // 定义材质
        Material material = new Material();
        
        try {
            Image image = new Image("res/yan.bmp");
            Texture texture = new Texture(image);
            texture.setBorderColor(new Vector4f(0));
            texture.setWarpMode(WarpAxis.S, WarpMode.REPEAT);
            texture.setWarpMode(WarpAxis.T, WarpMode.MIRRORED_REPEAT);
            material.setTexture(texture);
        } catch (IOException e) {
            e.printStackTrace();
        }
        
        
        // 定义四边形网格
        Vector3f[] positions = {
            new Vector3f(0, 0, 0),
            new Vector3f(1, 0, 0),
            new Vector3f(1, 1, 0),
            new Vector3f(0, 1, 0),
        };
        Vector3f[] normals = {
            new Vector3f(0, 0, 1),
            new Vector3f(0, 0, 1),
            new Vector3f(0, 0, 1),
            new Vector3f(0, 0, 1),
        };
        Vector4f[] colors = {
            new Vector4f(1),      
            new Vector4f(1),      
            new Vector4f(1),      
            new Vector4f(1),
        };
        Vector2f[] texCoords = {
            new Vector2f(-2, -2),
            new Vector2f(2, -2),
            new Vector2f(2, 2),
            new Vector2f(-2, 2),
        };
        int[] indexes = {
            0, 1, 2,
            0, 2, 3,
        };
        
        Mesh mesh = new Mesh(positions, indexes, texCoords, normals, colors);
        
        // 添加到场景中
        Geometry geom = new Geometry(mesh, material);
        rootNode.attachChild(geom);
    }
    
    @Override
    protected void update(float delta) {}

}

运行程序，效果如下：

可以看到，水平方向（S轴）是直接重复出现相同纹理，垂直方向（T轴）则是像照镜像一样重复出现镜像纹理。

总结

目标达成。纹理坐标还需要做一些透视校正，这个留到后面再做。