Qt3D中QGLView(而非QGLWidget)上的过度绘制和后期渲染效果

Question

我目前正在用C++/Qt5编写一个使用Qt3D模块的游戏。

我可以在QGLView上渲染场景（QGLSceneNodes），但现在只能使用用一些GUI元素来过度绘制场景。我还没有决定是使用QML还是C++来定义界面的外观，所以我对两者的解决方案都持开放态度。（请注意，QML模块称为QtQuick3D，C++模块称为Qt3D，它们都是Qt5的一部分。）

我非常喜欢基于QML的解决方案

我该如何进行一些套印

以下事情必须是可能的：

• 在给定的屏幕坐标下绘制2D项目（图像），当然支持alpha通道
• 使用系统字体绘制文本，可以先在图像上绘制，然后将其用作Qt3D OpenGL上下文中的纹理
• 在屏幕坐标中对鼠标输入做出反应（与3D场景对象拾取相反）

我认为这一切都有可能只使用另一个用于2D GUI部分的QGLSceneNode。但我认为，在渲染过程中（使用顶点着色器），为了重新定向和重新定位某些场景节点而对其进行定位和定向是没有意义的，会引入数值错误，而且似乎效率低下。

使用另一个"GUI"顶点着色器是否正确

（如何）使后期渲染效果和套印效果协同工作

如果我能做以下后期渲染效果，那就太好了：

• 读取先前渲染的场景，应用一些2D图像效果（我可以想象将这些效果实现为片段着色器，并使用此效果着色器在最终屏幕上渲染先前渲染的缓冲区）。这使我能够使GUI的某些部分看起来像带有模糊效果的玻璃
• 一些更高级的效果可以使场景看起来更逼真：深度&运动模糊、依赖热量的空气闪烁、光晕效果。它们都可以在渲染期间使用片段着色器（这不应该是问题的一部分）和额外的缓冲区来描述。它们应该放在主屏幕渲染过程和GUI过度绘制之间，这就是我在这个问题中包含它的原因

当我使用一个特殊的着色器程序实现过度绘制时，我看到了一个问题：我无法访问GUI后面的像素来应用一些效果，比如高斯模糊，使GUI看起来像玻璃我必须将场景渲染到另一个缓冲区，而不是QGLView上。这是我的主要问题

Answer 1

我在通过qglwidget制作opengl游戏时也遇到过类似的问题，我提出的解决方案是使用正交投影来渲染临时构建的控件。在主draw函数的末尾，我调用一个单独的函数来设置视图，然后绘制2d位。至于鼠标事件，我捕获发送到主窗口小部件的事件，然后使用命中测试、递归坐标偏移和允许嵌套控件的伪回调的组合。在我的实现中，我一次一个地将命令转发到顶级控件（主要是滚动框），但如果需要动态添加控件，则可以轻松添加链表结构。我目前只是使用四边形将零件渲染为彩色面板，但添加纹理甚至使其成为响应动态照明的3d组件应该很简单。有很多代码，所以我只想把相关的部分拼凑起来：

void GLWidget::paintGL() {
  if (isPaused) return;
  glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
  glPushMatrix();
  glLightfv(GL_LIGHT0, GL_POSITION, FV0001);
  gluLookAt(...);
  // Typical 3d stuff
  glCallList(Body::glGrid);
  glPopMatrix();
//non3d bits
  drawOverlay(); //  <---call the 2d rendering
  fpsCount++;
}

以下是为二维渲染设置模型视图/投影矩阵的代码：

void GLWidget::drawOverlay() {
  glClear(GL_DEPTH_BUFFER_BIT);
  glPushMatrix();   //reset
  glLoadIdentity(); //modelview
  glMatrixMode(GL_PROJECTION);//set ortho camera
  glPushMatrix();
  glLoadIdentity();
  gluOrtho2D(0,width()-2*padX,height()-2*padY,0); // <--critical; padx/y is just the letterboxing I use
  glMatrixMode(GL_MODELVIEW);
  glDisable(GL_DEPTH_TEST);  //  <-- necessary if you want to draw things in the order you call them
  glDisable( GL_LIGHTING );  //  <-- lighting can cause weird artifacts
  drawHUD();  //<-- Actually does the drawing
  glEnable( GL_LIGHTING );
  glEnable(GL_DEPTH_TEST);
  glMatrixMode(GL_PROJECTION); glPopMatrix();
  glMatrixMode(GL_MODELVIEW); glPopMatrix();
}

这是处理hud内容的主要绘图功能；大多数draw函数类似于大的"backroundpanel"块。你基本上是推送模型视图矩阵，像在3d中一样使用平移/旋转/缩放，绘制控件，然后弹出矩阵：

void GLWidget::drawHUD() {
  float gridcol[] = { 0.5, 0.1, 0.5, 0.9 };
  float gridcolB[] = { 0.3, 0.0, 0.3, 0.9 };
//string caption
  QString tmpStr = QString::number(FPS);
  drawText(tmpStr.toAscii(),120+padX,20+padY);
//Markers
  tGroup* tmpGroup = curGroup->firstChild;
  while (tmpGroup != 0) {
    drawMarker(tmpGroup->scrXYZ);
    tmpGroup = tmpGroup->nextItem;
  }
//Background panel
  glEnable(GL_BLEND);
  glTranslatef(0,height()*0.8,0);
  glBegin(GL_QUADS);
    glColor4fv(gridcol);
    glVertex2f(0.0f, 0.0);
    glVertex2f(width(), 0);
    glColor4fv(gridcolB);
    glVertex2f(width(), height()*0.2);
    glVertex2f(0.0f, height()*0.2);
  glEnd();
  glDisable(GL_BLEND);
  glLoadIdentity(); //nec b/c of translate ^^
  glTranslatef(-padX,-padY,0);
//Controls
  cargoBox->Draw();
  sideBox->Draw();
  econBox->Draw();
}

现在是控件本身。我的所有控件，如按钮、滑块、标签等，都来自一个带有空虚拟函数的公共基类，这些函数允许它们以不可知的类型相互交互。这个库有一些典型的东西，比如高度、坐标等，还有一些指针来处理回调和文本呈现。还包括一个通用的hitest（x，y）函数，它告诉它是否被点击了。如果你想要椭圆控件，你可以将其设为虚拟控件。这是一个简单按钮的基类、打击率和代码

class glBase {
public:
  glBase(float tx, float ty, float tw, float th);
  virtual void Draw() {return;}
  virtual glBase* mouseDown(float xIn, float yIn) {return this;}
  virtual void mouseUp(float xIn, float yIn) {return;}
  virtual void mouseMove(float xIn, float yIn) {return;}
  virtual void childCallBack(float vIn, void* caller) {return;}
  bool HitTest(float xIn, float yIn);
  float xOff, yOff;
  float width, height;
  glBase* parent;
  static GLWidget* renderer;
protected:
  glBase* callFwd;
};

bool glBase::HitTest(float xIn, float yIn) { //input should be relative to parents space
  xIn -= xOff; yIn -= yOff;
  if (yIn >= 0 && xIn >= 0) {
    if (xIn <= width && yIn <= height) return true;
  }
  return false;
}
class glButton : public glBase {
public:
  glButton(float tx, float ty, float tw, float th, char rChar);
  void Draw();
  glBase* mouseDown(float xIn, float yIn);
  void mouseUp(float xIn, float yIn); 
private:
  bool isPressed;
  char renderChar;
};
glButton::glButton(float tx, float ty, float tw, float th, char rChar) :
glBase(tx, ty, tw, th), isPressed(false), renderChar(rChar) {}
void glButton::Draw() {
  float gridcolA[] = { 0.5, 0.6, 0.5, 1.0 };//up
  float gridcolB[] = { 0.2, 0.3, 0.2, 1.0 };
  float gridcolC[] = { 1.0, 0.2, 0.1, 1.0 };//dn
  float gridcolD[] = { 1.0, 0.5, 0.3, 1.0 };
  float* upState;
  float* upStateB;
  if (isPressed) {
    upState = gridcolC;
    upStateB = gridcolD;
  } else {
    upState = gridcolA;
    upStateB = gridcolB;
  }
  glPushMatrix();
  glTranslatef(xOff,yOff,0);
  glBegin(GL_QUADS);
    glColor4fv(upState);
    glVertex2f(0, 0);
    glVertex2f(width, 0);
    glColor4fv(upStateB);
    glVertex2f(width, height);
    glVertex2f(0, height);
  glEnd();
  if (renderChar != 0) //center
    renderer->drawChar(renderChar, (width - 12)/2, (height - 16)/2);
  glPopMatrix();
}
glBase* glButton::mouseDown(float xIn, float yIn) {
  isPressed = true;
  return this;
}
void glButton::mouseUp(float xIn, float yIn) {
  isPressed = false;
  if (parent != 0) {
    if (HitTest(xIn, yIn)) parent->childCallBack(0, this);
  }
}

由于像滑块这样的复合控件有多个按钮，滚动框有平铺和滑块，所以对于绘图/鼠标事件，所有这些都需要递归。每个控件还具有一个通用回调函数，该函数传递一个值和它自己的地址；这允许父母测试每个孩子，看看是谁在打电话，并做出适当的回应（例如向上/向下按钮）。请注意，子控件是通过c/dtor中的new/delete添加的。此外，子控件的draw（）函数是在父控件自己的draw）调用过程中调用的，这使得一切都是自包含的。这是一个包含3个子按钮的中级幻灯片的相关代码：

glBase* glSlider::mouseDown(float xIn, float yIn) {
  xIn -= xOff; yIn -= yOff;//move from parent to local coords
  if (slider->HitTest(xIn,yIn-width)) { //clicked slider
    yIn -= width; //localize to field area
    callFwd = slider->mouseDown(xIn, yIn);
    dragMode = true;
    dragY = yIn - slider->yOff;
  } else if (upButton->HitTest(xIn,yIn)) {
    callFwd = upButton->mouseDown(xIn, yIn);
  } else if (downButton->HitTest(xIn,yIn)) {
    callFwd = downButton->mouseDown(xIn, yIn);
  } else {
    //clicked in field, but not on slider
  }
  return this;
}//TO BE CHECKED (esp slider hit)
void glSlider::mouseUp(float xIn, float yIn) {
  xIn -= xOff; yIn -= yOff;
  if (callFwd != 0) {
    callFwd->mouseUp(xIn, yIn); //ok to not translate b/c slider doesn't callback
    callFwd = 0;
    dragMode = false;
  } else {
    //clicked in field, not any of the 3 buttons
  }
}
void glSlider::childCallBack(float vIn, void* caller) { //can use value blending for smooth
  float tDelta = (maxVal - minVal)/(10);
  if (caller == upButton) {//only gets callbacks from ud buttons
    setVal(Value - tDelta);
  } else {
    setVal(Value + tDelta);
  }
}

现在我们有了可以渲染到opengl上下文中的自包含控件，所需要的只是顶级控件的接口，例如glWidget中的鼠标事件。

void GLWidget::mousePressEvent(QMouseEvent* event) {
  if (cargoBox->HitTest(event->x()-padX, event->y()-padY)) { //if clicked first scrollbox
    callFwd = cargoBox->mouseDown(event->x()-padX, event->y()-padY); //forward the click, noting which last got
    return;
  } else if (sideBox->HitTest(event->x()-padX, event->y()-padY)) {
    callFwd = sideBox->mouseDown(event->x()-padX, event->y()-padY);
    return;
  } else if (econBox->HitTest(event->x()-padX, event->y()-padY)) {
    callFwd = econBox->mouseDown(event->x()-padX, event->y()-padY);
    return;
  }
  lastPos = event->pos(); //for dragging
}
void GLWidget::mouseReleaseEvent(QMouseEvent *event) {
  if (callFwd != 0) { //Did user mousedown on something?
    callFwd->mouseUp(event->x()-padX, event->y()-padY); 
    callFwd = 0; //^^^ Allows you to drag off a button before releasing w/o triggering its callback
    return;
  } else { //local
    tBase* tmpPick = pickObject(event->x(), event->y());
    //normal clicking, game stuff...
  }
}

总的来说，这个系统有点麻烦，我还没有添加一些功能，比如键盘响应或调整大小，但这些功能应该很容易添加，可能需要回调中的"事件类型"（即鼠标或键盘）。您甚至可以将glBase子类化为最顶层的小部件，它甚至允许它接收parent->childcallback。尽管这是一项艰巨的工作，但该系统只需要普通的c++/opengl，而且它使用的cpu/内存资源比原生的Qt要少得多，可能只有一两个数量级。如果你需要更多信息，只需询问即可。

Answer 2

如果您让一个类从qglwidget继承，那么调整大小和事件很容易实现这是一个短视频，应该可以帮助你开始

https://www.youtube.com/watch?v=1nzHSkY4K18

关于绘制图像和文本，qt有qpainter可以帮助您做到这一点，使用QGLContext(http://qt-project.org/doc/qt-4.8/qglcontext.html)将当前上下文传递给它，并在特定的cordinate处渲染您的标签/图像/小部件，但请确保此函数调用是绘制事件中的最后一个，否则它将不会在上

为了对鼠标事件做出反应，使您的类包含QMouseEvent标头，然后您可以在小部件中获取鼠标的坐标，并通过重载受保护的事件mouseMoveEvent（QMouseEvent*event）｛event->pos（）；｝