在 OpenGL 的正交投影中使用纹理
Posted
技术标签:
【中文标题】在 OpenGL 的正交投影中使用纹理【英文标题】：Using textures in orthographic projection in OpenGL 【发布时间】：2020-01-04 14:04:52 【问题描述】：我目前正在使用 Python 和 OpenGL 编写一个主要的飞行显示器。由于我对 OpenGL 的经验为零（一般编码经验很少），所以我关注了 simple tutorial，介绍了用于 2D 应用程序的 OpenGL。有了这些基本知识，我才开始用多边形（GL_QUADS）和some copied code 来绘制文本。这给了我这个：
视觉结果令人满意，但约 450 次迭代/秒的性能是有问题的3).
所以我想尝试为整个人造地平线和无生命物体使用纹理，例如速度计的刻度、分隔线或“十字准线”。 我制作了一个 .png 文件来替换人工地平线（见底部），但我不知道如何渲染它。我发现的所有教程都是针对 C++ 的，并且给整个程序增加了很多复杂性，所以我想问一下是否有一种“简单”的方法可以为我的应用程序实现可移动纹理。
这是我当前如何计算地平线位置以及如何绘制它的模型（最后是完整的可运行代码）：
from OpenGL.GL import *
from OpenGL.GLUT import *
from OpenGL.GLU import *
from math import tan, radians
window_width = 800
window_height = 480
class Numbers:
mp = 0 #vertical middle point of horizon in pixels
rp = 0 #vertical right point of horizon in pixels
lp = 0 #vertical left point of horizon in pixels
def calc():
# mp- (pitch*(pixels/degree))
Numbers.mp = 240 - (Data.pitch * 8)
#offset is the vertical distance in pixels from mp
#offset =tan(roll) * pixels from horizontal middle point of screen to edge of artifical horizon
offset = tan(radians(Data.roll)) * 300
Numbers.rp = Numbers.mp - offset
Numbers.lp = Numbers.mp + offset
def horizon():
#sky
glBegin(GL_QUADS)
glColor3f(58/255, 109/255, 171/255)
glVertex2f(100, Numbers.lp)
glVertex2f(700, Numbers.rp)
glColor3f(0/255, 83/255, 165/255)
glVertex2f(700, 480)
glVertex2f(100, 480)
glEnd()
#ground
glColor3f(150/255, 70/255, 0/255)
glBegin(GL_QUADS)
glVertex2f(100, 0)
glVertex2f(700, 0)
glColor3f(140/255, 90/255, 0/255)
glVertex2f(700, Numbers.rp)
glVertex2f(100, Numbers.lp)
glEnd()
#devider line
glColor3f(255/255, 255/255, 255/255)
glBegin(GL_QUADS)
glVertex2f(100, Numbers.lp-1)
glVertex2f(700, Numbers.rp-1)
glVertex2f(700, Numbers.rp+1)
glVertex2f(100, Numbers.lp+1)
glEnd()
def iterate():
glViewport(0, 0, window_width, window_height)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
glOrtho(0.0, window_width, 0.0, window_height, 0.0, 1.0)
glMatrixMode (GL_MODELVIEW)
glLoadIdentity()
def showScreen():
#glutFullScreen()
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT)
glLoadIdentity()
iterate()
calc()
horizon()
glutSwapBuffers()
if __name__ == "__main__":
glutInit()
glutInitDisplayMode(GLUT_RGBA)
glutInitWindowSize(window_width, window_height)
glutInitWindowPosition(10, 10)
wind = glutCreateWindow(b"Pi2Fly")
glutDisplayFunc(showScreen)
glutIdleFunc(showScreen)
glutMainLoop()
真实图像从 180 到 180 到，但这对 SO 来说太大了
完整代码：
from OpenGL.GL import glVertex2f, glColor3f, glBegin, glEnd, GL_QUADS, GL_TRIANGLES
from OpenGL.GL import *
from OpenGL.GLUT import *
from OpenGL.GLU import *
from time import sleep, perf_counter, time
from math import tan, radians
import pygame
window_width = 800
window_height = 480
pygame.font.init()
font1 = pygame.font.Font (None, 40)
font2 = pygame.font.Font (None, 20)
font3 = pygame.font.Font (None, 25)
font4 = pygame.font.Font (None, 45)
class Numbers:
mp = 0
rp = 0
lp = 0
class Data:
roll = 20
pitch = 0
airspeed = 160
altitude = 4500
altitude_last = 0
altitude_now = 0
altitude_delta = 0
altitude_delta_table = 30 * [0]
time_last = 0
time_now = 0
c1 = True
c2 = True
c3 = 0
class FPS:
c = 0
fps = 0
def fps():
FPS.c += 1
try: FPS.last_clock = FPS.this_clock
except:FPS.last_clock = perf_counter()
FPS.this_clock = perf_counter()
if round(FPS.this_clock) > round(FPS.last_clock):
FPS.fps = FPS.c
FPS.c = 0
color = (255,198,0, 255)
drawText(5, 9, str(FPS.fps), color, font1)
drawText(55, 10, "FPS", color, font2)
def get_data():
#dummy data for artifical horizon
#pitch
if Data.pitch < 20 and Data.c1: Data.pitch += 0.03
if Data.pitch >= 20 and Data.c1: Data.c1 = False
if Data.pitch < 21 and not Data.c1: Data.pitch = Data.pitch - 0.03
if Data.pitch < -20: Data.c1 = True
#roll
if Data.roll < 20 and Data.c2: Data.roll += 0.02
if Data.roll >= 20 and Data.c2: Data.c2 = False
if Data.roll < 21 and not Data.c2: Data.roll = Data.roll - 0.02
if Data.roll < -20: Data.c2 = True
#airspeed
if Data.pitch > 0: Data.airspeed = Data.airspeed - 0.004 * Data.pitch
elif Data.pitch < 0: Data.airspeed = Data.airspeed + 0.004 * abs(Data.pitch)
#altitude
if Data.pitch > 0: Data.altitude = Data.altitude + 0.01 * Data.pitch
elif Data.pitch < 0: Data.altitude = Data.altitude - 0.01 * abs(Data.pitch)
#altitude_delta
Data.time_now = perf_counter()
if Data.time_now >= Data.time_last + 0.01:
if Data.c3 == 30: Data.c3 = 0
Data.time_last = Data.time_now
Data.altitude_last = Data.altitude_now
Data.altitude_now = Data.altitude
Data.altitude_delta_table[Data.c3] = Data.altitude_now - Data.altitude_last
Data.c3 +=1
Data.altitude_delta = (sum(Data.altitude_delta_table)/len(Data.altitude_delta_table))
def calc():
Numbers.mp = 240 - (Data.pitch * 8)
offset = tan(radians(Data.roll)) * 300
Numbers.rp = Numbers.mp - offset
Numbers.lp = Numbers.mp + offset
def frame():
#frame color = grey
glColor3f(100/255, 100/255, 100/255)
#horizon right line
glBegin(GL_QUADS)
glVertex2f(99, 0)
glVertex2f(100, 0)
glVertex2f(100, window_height)
glVertex2f(99, window_height)
glEnd()
#horizon left line
glBegin(GL_QUADS)
glVertex2f(700, 0)
glVertex2f(701, 0)
glVertex2f(701, window_height)
glVertex2f(700, window_height)
glEnd()
#right upper divider
glBegin(GL_QUADS)
glVertex2f(0, 430)
glVertex2f(100, 430)
glVertex2f(100, 431)
glVertex2f(0, 431)
glEnd()
#left upper divider
glBegin(GL_QUADS)
glVertex2f(700, 430)
glVertex2f(800, 430)
glVertex2f(800, 431)
glVertex2f(700, 431)
glEnd()
#right lower divider
glBegin(GL_QUADS)
glVertex2f(0, 50)
glVertex2f(100, 50)
glVertex2f(100, 51)
glVertex2f(0, 51)
glEnd()
#left lower divider
glBegin(GL_QUADS)
glVertex2f(700, 50)
glVertex2f(800, 50)
glVertex2f(800, 51)
glVertex2f(700, 51)
glEnd()
def horizon():
#sky
glBegin(GL_QUADS)
glColor3f(58/255, 109/255, 171/255)
glVertex2f(100, Numbers.lp)
glVertex2f(700, Numbers.rp)
glColor3f(0/255, 83/255, 165/255)
glVertex2f(700, 480)
glVertex2f(100, 480)
glEnd()
#ground
glColor3f(150/255, 70/255, 0/255)
glBegin(GL_QUADS)
glVertex2f(100, 0)
glVertex2f(700, 0)
glColor3f(140/255, 90/255, 0/255)
glVertex2f(700, Numbers.rp)
glVertex2f(100, Numbers.lp)
glEnd()
#devider line
glColor3f(255/255, 255/255, 255/255)
glBegin(GL_QUADS)
glVertex2f(100, Numbers.lp-1)
glVertex2f(700, Numbers.rp-1)
glVertex2f(700, Numbers.rp+1)
glVertex2f(100, Numbers.lp+1)
glEnd()
#crosshair
#indicator triangle shadow
glColor3f(187/255, 107/255, 1/255)
glBegin(GL_QUADS)
glVertex2f(400, 230)
glVertex2f(365, 215)
glVertex2f(400, 227)
glVertex2f(435, 215)
glEnd()
# indicator triangle
glColor3f(255/255, 198/255, 0/255)
glBegin(GL_QUADS)
glVertex2f(400, 240)
glVertex2f(365, 215)
glVertex2f(400, 230)
glVertex2f(435, 215)
glEnd()
#yellow indicator line
glColor3f(255/255, 198/255, 0/255)
glBegin(GL_QUADS)
glVertex2f(320, 241)
glVertex2f(320, 239)
glVertex2f(350, 239)
glVertex2f(350, 241)
glEnd()
glBegin(GL_QUADS)
glVertex2f(450, 241)
glVertex2f(450, 239)
glVertex2f(480, 239)
glVertex2f(480, 241)
glEnd()
color = (255, 255, 255, 0)
drawText(110, 10, str("roll: "+str(round(Data.roll))), color, font3)
drawText(620, 10, str("pitch: "+str(round(Data.pitch))), color, font3)
def speedometer():
#dial
ssp = 55 #start spacer
sp = 27 #spacer
color = (255,255,255,100)
drawText(14, ssp+sp*0, "0", color, font3)
drawText(10, ssp+sp*1, "20", color, font3)
drawText(10, ssp+sp*2, "40", color, font3)
drawText(10, ssp+sp*3, "60", color, font3)
drawText(10, ssp+sp*4, "80", color, font3)
drawText(5, ssp+sp*5, "100", color, font3)
drawText(5, ssp+sp*6, "120", color, font3)
drawText(5, ssp+sp*7, "140", color, font3)
drawText(5, ssp+sp*8, "160", color, font3)
drawText(5, ssp+sp*9, "180", color, font3)
drawText(5, ssp+sp*10, "200", color, font3)
drawText(5, ssp+sp*11, "220", color, font3)
drawText(5, ssp+sp*12, "240", color, font3)
drawText(5, ssp+sp*13, "260", color, font3)
#green area
glBegin(GL_QUADS)
glColor3f(35/255, 150/255, 29/255)
glVertex2f(40, 142)
glVertex2f(99, 142)
glVertex2f(99, 287)
glVertex2f(40, 287)
glEnd()
#yellow area
glBegin(GL_QUADS)
glColor3f(150/255, 100/255, 27/255)
glVertex2f(40, 287)
glVertex2f(99, 287)
glVertex2f(99, 360)
glVertex2f(40, 360)
glEnd()
#red area
glBegin(GL_QUADS)
glColor3f(151/255, 43/255, 29/255)
glVertex2f(40, 360)
glVertex2f(99, 360)
glVertex2f(99, 374)
glVertex2f(40, 374)
glEnd()
ll=35
l=15
w=1
ssp=64
glColor3f(255/255, 255/255, 255/255)
for x in range(0, 14):
ind_lines(ll, l, w, ssp+sp*x)
#knots
color = (0, 241, 250, 255)
drawText(60, 435, "kn", color, font4)
def speedometer_indicator():
ypos = 63 + round(Data.airspeed) * 1.35
glColor3f(0/255, 241/255, 250/255)
ind_lines(40, 59, 3, ypos)
color = (0, 241, 250, 255)
drawText(5, 435, str(round(Data.airspeed)), color, font4)
def altimeter():
color = (0, 241, 250, 255)
drawText(705, 435, str(round(Data.altitude)), color, font4)
drawText(784, 435, "m", color, font3)
def variometer():
color = (0, 241, 250, 255)
drawText(710, 10, str(round((abs(Data.altitude_delta*10)), 1)), color, font4)
drawText(765, 10, "m/s", color, font3)
if Data.altitude_delta*10 > 0:
glBegin(GL_TRIANGLES)
glVertex2f(767, 30)
glVertex2f(793, 30)
glVertex2f(780, 45)
glEnd()
if Data.altitude_delta*10 < 0:
glBegin(GL_TRIANGLES)
glVertex2f(765, 45)
glVertex2f(795, 45)
glVertex2f(780, 30)
glEnd()
def ind_lines(ll, l, w, sp): #ll=left limit,l=lenght, w=width, sp=spacer
#indicator lines
glBegin(GL_QUADS)
glVertex2f(ll, sp)
glVertex2f(ll+l, sp)
glVertex2f(ll+l, sp+w)
glVertex2f(ll, sp+w)
glEnd()
def drawText(xpos, ypos, textString, color, font):
textSurface = font.render(textString, True, color, (0,0,0,1))
textData = pygame.image.tostring(textSurface, "RGBA", True)
glRasterPos2d(xpos,ypos)
glDrawPixels(textSurface.get_width(), textSurface.get_height(), GL_RGBA, GL_UNSIGNED_BYTE, textData)
def draw_once():
speedometer()
frame()
def draw():
horizon()
speedometer_indicator()
altimeter()
variometer()
def iterate():
glViewport(0, 0, window_width, window_height)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
glOrtho(0.0, window_width, 0.0, window_height, 0.0, 1.0)
glMatrixMode (GL_MODELVIEW)
glLoadIdentity()
def showScreen():
#glutFullScreen()
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT)
glLoadIdentity()
iterate()
try:get_data()
except Exception as e:print("get_data:\t", e)
try:calc()
except Exception as e:print("calc:\t", e)
try:draw_once()
except Exception as e:print("draw_once:\t", e)
try:draw()
except Exception as e:print("draw:\t", e)
try:fps()
except Exception as e:print("fps:\t", e)
glutSwapBuffers()
if __name__ == "__main__":
glutInit()
glutInitDisplayMode(GLUT_RGBA)
glutInitWindowSize(window_width, window_height)
glutInitWindowPosition(10, 10)
wind = glutCreateWindow(b"Pi2Fly")
glutDisplayFunc(showScreen)
glutIdleFunc(showScreen)
glutMainLoop()
【问题讨论】：
【参考方案1】：您可以使用 pygame 加载纹理图像：
def LoadTexture(filename):
image = pygame.image.load(filename)
datas = pygame.image.tostring(image, 'RGBA')
texID = glGenTextures(1)
glBindTexture(GL_TEXTURE_2D, texID)
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, image.get_width(), image.get_height(),
0, GL_RGBA, GL_UNSIGNED_BYTE, datas)
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR_MIPMAP_LINEAR)
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR)
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE)
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE)
glGenerateMipmap(GL_TEXTURE_2D)
glBindTexture(GL_TEXTURE_2D, 0)
return texID
您也可以使用Pillow 和Numpy 来加载纹理图像：
from PIL import Image
import numpy
image = Image.open(filename)
imageData = numpy.array(list(image.getdata()), numpy.uint8)
texID = glGenTextures(1)
glBindTexture(GL_TEXTURE_2D, texID)
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, image.size[0], image.size[1],
0, GL_RGBA, GL_UNSIGNED_BYTE, imageData)
# [...]
当你想挑战Legacy OpenGL中的纹理时，你必须：
通过glTexCoord2f，在glVertex之前设置纹理坐标
通过glBindTexture绑定纹理
通过glEnable(GL_TEXTURE_2D)启用二维纹理
以下示例在整个视口上绘制一个四边形并在其上包裹一个纹理。例如：
def DrawTexture(texID, x, y, w, h):
glBindTexture(GL_TEXTURE_2D, texID)
glEnable(GL_TEXTURE_2D)
glColor4f(1, 1, 1, 1)
glBegin(GL_QUADS)
glTexCoord2f(0, 1); glVertex2f(x, y)
glTexCoord2f(0, 0); glVertex2f(x, y+h)
glTexCoord2f(1, 0); glVertex2f(x+w, y+h)
glTexCoord2f(1, 1); glVertex2f(x+w, y)
glEnd()
glDisable(GL_TEXTURE_2D)
注意，如果启用纹理，则默认情况下纹理元素的颜色乘以当前颜色，因为默认情况下纹理环境模式（GL_TEXTURE_ENV_MODE）为GL_MODULATE。见glTexEnv。
这会导致纹理纹素的颜色与您在glColor4f 设置的最后一种颜色“混合”。
在渲染纹理之前设置“白色”颜色，以解决您的问题：
glColor4f(1, 1, 1, 1)
同样，您可以将环境模式更改为GL_REPLACE，而不是：
glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_REPLACE);
此外，如果纹理部分透明，则必须在绘制纹理之前启用Blending：
glEnable(GL_BLEND)
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)
DrawTexture(....)
glDisable(GL_BLEND)
【讨论】：
谢谢，这非常有帮助。但我目前无法看到如何将不同的纹理分配给不同的四边形。您的第一个代码块将是“loadTexture(filename)”函数，第二个代码块将是您实际使用纹理的方式。纹理加载函数将返回什么以及如何在第二个代码块中使用该返回？ @GittingGud 纹理加载到 GPU 上，由纹理对象名称（texID - 在上面的示例中）标识。当然，您创建不同的纹理对象，每个纹理对象都有自己的 id。之前绘制一个四边形，您必须绑定正确的纹理对象 (glBindTexture(GL_TEXTURE_2D, texID))
这就解释了，感谢您的编辑。但是由于glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR_MIPMAP_LINEAR)，我现在收到“无效枚举数”错误。用GL_LINEAR 切换GL_LINEAR_MIPMAP_LINEAR 可以修复错误消息，但结果看起来很乱。 （而我只有 40FPS）
@GittingGud 你必须解释一下你的意思是搞砸了。
@GittingGud 在绘制纹理时启用Blending。请参阅答案的最后一部分。以上是关于在 OpenGL 的正交投影中使用纹理的主要内容，如果未能解决你的问题，请参考以下文章
如何使用正交投影在 OpenGL Core 3.3 中绘制一个圆？