关闭

【LWJGL官方教程】纹理

标签: javalwjgl
1041人阅读 评论(0) 收藏 举报
分类:

原文:https://github.com/SilverTiger/lwjgl3-tutorial/wiki/Textures
译注:并没有逐字逐句翻译一切,只翻译了自己觉得有用的部分。另外此翻译仅供参考,请一切以原文为准。代码例子文件链接什么的都请去原链接查找。括号里的内容一般也是译注,供理解参考用。总目录传送门:http://blog.csdn.net/zoharwolf/article/details/49472857
好久没更新了,因为看书补知识(以及玩游戏)去了。这篇翻译了一半的时候,发现官网教程全面更新了OTL。还好变动不算太大,这篇只是增加了新版LWJGL里更方便的一个API代替原来的大量手动工作,原来的手动工作被放在后面当作附篇了,看看也不错。至于之前翻译的几篇有没有更新,哪天我再去瞅瞅,变化要是不大我就懒得再改了……毕竟以后还是有可能再更新的,这些翻译也不可能一直保持跟他们同步更新。
译注2:翻译得我有点云里雾里,我自己亲自写的时候才发现,从这篇开始这教程的质量明显下降,乱七八糟胡写一气,代码都没有摘清楚,错误之处不少,还有许多是范例自己的封装代码毫无说明直接复制粘贴上来,简直不负责任。强烈建议结合范例代码看此教程,不然肯定晕。其实还是很简单的。

在最后的教程中,我们看看怎样用shader来渲染场景和怎样在更新之间做插值。还有,学下怎样用纹理。

Creating a texture 创建纹理

既然已经知道怎样创建一个简单的shader程序了,我们就跳过初始化的部分。
生成纹理句柄并绑定的方法对现在的我们来讲应该不陌生了,就跟创建缓冲、顶点数组、shader和程序时那个相似。

int texture = glGenTextures();
glBindTexture(GL_TEXTURE_2D, handle);

现在我们有纹理句柄了,下步该开始设置纹理的wrapping和flitering的值。
但在那之前,应该注意opengl纹理跟纹理坐标映射关系的范围是从0.0到1.0的。这应该跟(x,y)坐标系统区分开来,所以叫它为(s,t)坐标系统,有时候你也能看到有人叫它(u,v)坐标,但是其实略有区别,不过大部分情况下就可以当作它们是一样的。
对OpenGL来说,我们就遵守其规格,用(s,t)坐标好了。
顺便一提,三维纹理坐标一般被称为(s,t,r)坐标系统。
举个例子,纹理坐标(0,0)是纹理的原点,在OpenGL里,这点是指左下角。具体规则如下:

  • (0,0) 左下角
  • (1,0) 右下角
  • (1,1) 右上角
  • (0,1) 左上角

Wrapping

当然你也可以用0.0到0.1区间之外的数值,根据你选择的wrapping模式,会自动处理。有四种:

  • GL_REPEAT 简单地重复纹理。
  • GL_MIRRORED_REPEAT 也重复纹理,但是超出的部分是镜象的形式。
  • GL_CLAMP_TO_EDGE 限定坐标在0.0在1.0之间
  • GL_CLAMP_TO_BORDER 提供0.0到1.0区间外的坐标一个特殊的边界颜色。

用glTexParameteri(target, pname, parameter)来设置wrapping模式,如下

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_BORDER);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_BORDER);

如果你用GL_TEXTURE_3D的话,也可以设置GL_TEXTURE_WRAP_R。

Filtering

下一个要设置的参数就是纹理的filtering,当你把纹理绽放到与原尺寸不同的新尺寸时,此设置生效。有以下两种值:

  • GL_NEAREST 选择跟所选的纹理坐标相近的值
  • GL_LINEAR 计算四周象素平均权值
    跟使用的wrapping模式差不多,用glTexParameteri(target, pname, parameter)方法:
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);

你也可以生成包含了一个既有图片又包含各种细节信息的mipmap。只需要调用glGenerateMipMap(target)即可。

glGenerateMipMat(GL_TEXTURE_2D);

用mipmap有四个不同的filtering参数:

  • GL_NEAREST_MIPMAP_NEAREST 匹配象素和样本的尺寸,使用最邻插值取样
  • GL_LINEAR_MIPMAP_NEAREST 用双线性插值取样
  • GL_NEAREST_MIPMAP_LINEAR 取两个mipmap,匹配象素和样本的尺寸,使用最邻插值取样
  • GL_LINEAR_MIPMAP_LINEAR 用三线插值取样
    你可以像设置GL_NEAREST和GL_LINEAR一样设置它们。

Uploading picture data 上传图片数据

设完纹理参数后,上传图片数据!
但是OpengGL里并没有直接读图片用的方法,我们可以用LWJGL里的STBImage。
只需几行代码,它支持的格式有JPEG、{NG、TGA、BMP、PSD、GIF、HDR、PIC和PNM。
读之前必须准备一些buffer来储存宽度、高度和图片成份(Image component,不知道怎么翻译好,暂时翻译成图片成分,就是图片一个象素中的RGBA值中的任意一个)

IntBuffer w = BufferUtils.createIntBuffer(1);
IntBuffer h = BufferUtils.createIntBuffer(1);
IntBuffer comp = BufferUtils.createIntBuffer(1);

如果你想要原点在左下角,而不是左上角,你可以调用stbi_set_flip_vertically_on_load(1),这样图片将以左下角为原点读取。
之后,你只要调用stbi_load(path, w, h, comp, req_comp),path是图片文件路径,w,h,comp用来存储之前说的宽度、高度和图片成份数目,用req_comp可以使每象素的的成份数为1、2、3、4,如果你设为0的话,那就用图片默认的成份数。如果读取失败,stbi_load 将返回null,但是你也可以通过调用stbi_failure_reason()来获取这个错误。

stbi_set_flip_vertically_on_load(1);
ByteBuffer image = stbi_load(path, w, h, comp, 4);
if (image == null) {
    throw new RuntimeException("Failed to load a texture file!"+ System.lineSeparator() + stbi_failure_reason());
}

int width = w.get();
int height = h.get();

除此之外,你也可以用AWT来读取图片,具体请看结尾的附篇。

最后我们可以调用glTexImage2D(target, level, internalFormat, width, height, border, format, type, pixels)把图片数据存储在GPU里。target显而易见,level指细节等级,传统的OpenGL的mipmap一直都有用到,在现在OpenGL里,这值设成0. 纹理中的颜色成分的数目由internalFormat来指定,width和height是图片的宽和高,border值是0,format指定纹理格式,type指定象素数据类型,最后的pixels是包含纯象素数据的缓冲。

glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA8, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, buffer);

接着只要把纹理放入shader就好了。

Using a texture in shaders 在shader中使用纹理

前边讲过怎样用shader了,现在来看看新的shader。

#version 150 core

in vec2 position;
in vec3 color;
in vec2 texcoord;

out vec3 vertexColor;
out vec2 textureCoord;

uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;

void main() {
    vertexColor = color;
    textureCoord = texcoord;
    mat4 mvp = projection * view * model;
    gl_Position = mvp * vec4(position, 0.0, 1.0);
}

我们的顶点shader变化不大,最大的不同之处是现在有一个vec2类型的texcoord用来传递给片段shader。

OpenGL 2.1版本也相似,我们只需要加入属性vec2 texcoord即可。

#version 120
attribute vec2 position;
attribute vec3 color;
attribute vec2 texcoord;

varying vec3 vertexColor;
varying vec2 textureCoord;

uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;

void main() {
    vertexColor = color;
    textureCoord = texcoord;
    mat4 mvp = projection * view * model;
    gl_Position = mvp * vec4(position, 0.0, 1.0);
}

目前还不算复杂,那么片段shader如何呢?这里我们使用采样器获取纹理颜色。

#version 150 core

in vec3 vertexColor;
in vec2 textureCoord;

out vec4 fragColor;

uniform sampler2D texImage;

void main() {
    vec4 textureColor = texture(texImage, textureCoord);
    fragColor = vec4(vertexColor, 1.0) * textureColor;
}

我们有一个新的uniform变量sampler2D,它用来指定片段应有的纹理颜色。
为了得到颜色,我们使用texture(sampler, texCoord)方法,然后我们可以将它与最后的输出颜色相乘。

在OpenGL2.1里,也几乎一样。

#version 120
varying vec3 vertexColor;
varying vec2 textureCoord;

uniform sampler2D texImage;

void main() {
    vec4 textureColor = texture2D(texImage, textureCoord);
    gl_FragColor = vec4(vertexColor, 1.0) * textureColor;
}

最大的不同这处就是我们用的是use texture2D(sampler, texCoord),因为在传统OpenGL里,我们不能用texture(sampler, texCoord)方法。

现在顶点shader里有一个新的值,指定顶点属性的代码也要微改如下:

/* Specify Vertex Pointer */
int posAttrib = program.getAttributeLocation("position");
program.enableVertexAttribute(posAttrib);
program.pointVertexAttribute(posAttrib, 2, 7 * Float.BYTES, 0);

/* Specify Color Pointer */
int colAttrib = program.getAttributeLocation("color");
program.enableVertexAttribute(colAttrib);
program.pointVertexAttribute(colAttrib, 3, 7 * Float.BYTES, 2 * Float.BYTES);

/* Specify Texture Pointer */
int texAttrib = program.getAttributeLocation("texcoord");
program.enableVertexAttribute(texAttrib);
program.pointVertexAttribute(texAttrib, 2, 7 * Float.BYTES, 5 * Float.BYTES);

当然我们还需要设置新的uniform值。但是因为只有一个纹理,所以这个是可选的,因为纹理的默认编号就是0.但是如果你有许多纹理的话,这步还是很重要的。

int uniTex = program.getUniformLocation("texImage");
program.setUniform(uniTex, 0);

接着创建一个材质块,在我们需要定义六个顶点,而不是四个,因为在现代OpenGL里只能渲染三角形。但是我们可以使缓冲对象元素(EBO,Element Buffer Objects),所以我们的VBO其实只含有四个顶点,EBO才用来指定正确的值。EBO的生成和VBO相似,但是绑定有所不同。

int ebo = glGenBuffers();
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, ebo);

现在你可以建一个IntBuffer来存VBO的序号。

IntBuffer elements = BufferUtils.createIntBuffer(2 * 3);
elements.put(0).put(1).put(2);
elements.put(2).put(3).put(0);
elements.flip();

glBufferData(GL_ELEMENT_ARRAY_BUFFER, elements, GL_STATIC_DRAW);

我们的VBO有四个顶点,将材质显示在屏幕中央。

long window = GLFW.glfwGetCurrentContext();
IntBuffer widthBuffer = BufferUtils.createIntBuffer(1);
IntBuffer heightBuffer = BufferUtils.createIntBuffer(1);
GLFW.glfwGetFramebufferSize(window, widthBuffer, heightBuffer);
int width = widthBuffer.get();
int height = heightBuffer.get();

float x1 = (width - texture.getWidth()) / 2f;
float y1 = (height - texture.getHeight()) / 2f;
float x2 = x1 + texture.getWidth();
float y2 = y1 + texture.getHeight();

FloatBuffer vertices = BufferUtils.createFloatBuffer(4 * 7);
vertices.put(x1).put(y1).put(1f).put(1f).put(1f).put(0f).put(0f);
vertices.put(x2).put(y1).put(1f).put(1f).put(1f).put(1f).put(0f);
vertices.put(x2).put(y2).put(1f).put(1f).put(1f).put(1f).put(1f);
vertices.put(x1).put(y2).put(1f).put(1f).put(1f).put(0f).put(1f);
vertices.flip();

int vbo = glGenBuffers();
glBindBuffer(GL_ARRAY_BUFFER, vbo);
glBufferData(GL_ARRAY_BUFFER, vertices, GL_STATIC_DRAW);

为了方便,缩放正交投影也要跟我们的窗口宽高相仿。

Matrix4f projection = Matrix4f.orthographic(0f, width, 0f, height, -1f, 1f);
int uniProjection = glGetUniformLocation(shaderProgram, "projection");
glUniformMatrix4fv(uniProjection, false, projection.getBuffer());

现在我们用EBO,不再用glDrawArrays(type, first, count)来渲染了,我们需要用glDrawElements(mode, count, type, offset)。mode是GL_TRIANGLES, count指定要画几个顶点,type指定EBO的序号类型,offset应该是清除。

glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

到目前为止,你应该可以用纹理和颜色来弄一些好看的场景了。比如可以来一个用纹理渲染文字

接下来讲怎样批量渲染,告别一成不变的场景。

附篇: Loading Textures with AWT 用AWT读取纹理

如果你不想用STB读取纹理,你可以用AWT的BufferedImage和ImageIO。
读图片操作,可以用InputStream 或者File 。
你可以用ImageIO.getReaderFileSuffixes()来得到支持的图片格式,但是ImageIO只能用来读jpg, bmp, gif, png, jpeg 或 wbmp文件。其他的文件格式应该写你自己的读取器,或者搜一些读图片用的插件库。

InputStream in = new FileInputStream(path);
BufferedImage image = ImageIO.read(in);

读图片到BufferedImage之后,原点是左上角,所以我们得垂直翻转图片。

AffineTransform transform = AffineTransform.getScaleInstance(1f, -1f);
transform.translate(0, -image.getHeight());
AffineTransformOp operation = new AffineTransformOp(transform, AffineTransformOp.TYPE_NEAREST_NEIGHBOR);
image = operation.filter(image, null);

现在原点在左下角了,可以提取每个象素,用getRGB(startX, startY, w, h, rgbArray, offset, scansize),scansize应该是图片宽度,offset值应该是0.

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

int[] pixels = new int[width * height];
image.getRGB(0, 0, width, height, pixels, 0, width);

这方法取到的象素是ARGB格式的。用LWJGL3的话,必须以ByteBuffer的格式上传数据,所以需要转换。还要注意OpenGL的颜色是以RGBA格式表示的,它要求每个元素都要占一个字节,所以我们的ByteBuffer需要预留的空间是 width * height * 4。

我们还需要做些位运算,让我们看看代码:

ByteBuffer buffer = BufferUtils.createByteBuffer(width * height * 4);

for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {
        /* Pixel as RGBA: 0xAARRGGBB */int pixel = pixels[y * width + x];

        /* Red component 0xAARRGGBB >> (4 * 4) = 0x0000AARR */
        buffer.put((byte) ((pixel >> 16) & 0xFF));

        /* Green component 0xAARRGGBB >> (2 * 4) = 0x00AARRGG */
        buffer.put((byte) ((pixel >> 8) & 0xFF));

        /* Blue component 0xAARRGGBB >> 0 = 0xAARRGGBB */
        buffer.put((byte) (pixel & 0xFF));

        /* Alpha component 0xAARRGGBB >> (6 * 4) = 0x000000AA */
        buffer.put((byte) ((pixel >> 24) & 0xFF));
    }
}

/* Do not forget to flip the buffer! */
buffer.flip();

位运算看起来有点复杂,我们先看看红色成分的部分。
我们有了ARGB格式的象素,在十六进制里它表示为0xAARRGGBB,但是我们只想要0xRR这部分。我们知道十六进制数值是以四位表示的,我们试着把0xGGBB移走,它们占了4*4位,所以我们要右移16位才能得到0x000AARR。为了得到红色成分,还要做一次按位与操作,除掉0xFF,最后得到0x000000RR,也就是我们要的0xRR。

通过足够的位运算,最后得到了所有的颜色数据到我们的ByteBuffer里,但是记着,千万别忘了flip缓冲对象,否则JVM会崩。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:30401次
    • 积分:704
    • 等级:
    • 排名:千里之外
    • 原创:13篇
    • 转载:0篇
    • 译文:28篇
    • 评论:1条
    文章分类
    最新评论