opengl - 一步将剪切的图像与背景混合到目标中

标签 opengl 3d shader direct3d

请看一下这张图片。

Expected Image and Requirements

  1. 我想显示纹理的裁剪细节,同时裁剪矩形可以进行动画处理,因此我无法预先裁剪图像。图像的位置也是动画的。
  2. 我想将其显示在背景前。背景本身就是一种颜色或纹理。
  3. 我想将图像和背景与不透明度混合 < 1.0 到达目的地。
  4. 这里真正的要求是一步渲染它,避免临时缓冲区。显然,为此需要一个(简单的)着色器。

我已经尝试实现这一目标:

  • 首先渲染背景,然后渲染图像,每个图像的不透明度都 < 1。这里的问题:它让背景透过图像发光。当图像本身不透明时,背景不允许可见。

  • 当使用不透明度 = 1 将两者渲染到临时缓冲区中,然后将该缓冲区渲染到不透明度 < 1 的目标时,它会起作用,但这需要更多(太多)资源。

  • 我可以在着色器中组合两个纹理(背景、图像),使用不同的变换矩阵来变换每个纹理坐标。这里的问题是,我无法剪辑图像。渲染的几何体是一个由两个三角形组成的简单矩形。

有人能提示我正确的方向吗?

最佳答案

您基本上是在尝试渲染它。 (图像与背景混合)与目的地混合

括号中的部分,您可以使用着色器来完成,与目标的混合,您必须使用 glBlendFunc 来完成,因为目标在像素着色器中不可用。

听起来您知道如何在着色器中剪辑图像并通过动画纹理坐标来旋转它。

让我们将带有 childreb 的图像称为 ImageA,将灰色方 block 称为 ImageB

您希望着色器在每个像素处生成此内容:

outputColor.rgb = ImageA.rgb * ImageA.a + ImageB.rgb * (1.0 - ImageA.a);

这将完全按照您想要的方式混合您的两个图像。现在将像素着色器的 Alpha 输出设置为所需的 Alpha (<1.0)

outputColor.a = <some alpha value>

然后,当您使用着色器渲染四边形时,按如下方式设置混合函数。

glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
<draw quad>

关于opengl - 一步将剪切的图像与背景混合到目标中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12857001/

相关文章:

c++ - 编译多个 C++ OpenGL

algorithm - 反向抽取

javascript - Three.js 上的平滑相机控制开关

opengl - 人们为什么在OpenGL的距离函数上使用sqrt(dot(distanceVector,distanceVector))?

javascript - 顶点着色器中未声明名称相同但类型不同的变量,或片段着色器中静态使用的变量 : fogDepth

c++ - 如何使用openGL绘制要点?(C++)

opengl - 如何使用 WebGL 渲染 2D Sprite?

javascript - ThreeJs 中的门户

ios - 有没有办法在片段着色器中使用64个以上的向量?或替代?

c++ - 无纹理的四边形显得较暗