使用OpenGL着色器倾斜图像

为了减轻我的艺术家的工作负担，我正在为图像制作一个基本的骨骼动画系统。我概念化了所有部件的工作原理。但为了让它变成动画，我需要能够实时倾斜图像。（如果我不能这样做，我仍然知道如何使它工作，但如果我可以倾斜图像以添加透视图，它会更漂亮）使用OpenGL着色器倾斜图像

我正在使用SFML，它不支持图像歪斜。我被告知我需要在图像上使用OpenGL着色器，但是我得到的所有建议都是“学习GLSL”。所以我想，也许有人在这里可以帮我一下。

有谁知道我应该从哪里开始？或者如何去做？

基本上，我希望能够deforem图像给它透视（如图下面实体模型）

enter image description here 左边的图像在顶部和底部被倾斜。右侧的图像在左侧和右侧倾斜。

来源

2014-02-07 Legacyblade

我对SFML不熟悉。但是，取决于你是在歪斜，这可能非常容易。如果你需要渲染整个场景然后倾斜，你必须学习如何渲染纹理。如果你只需要一些存储材质的纹理，那么它就像调整你的着色器中的纹理矩阵一样简单，根据其他人在这里提出一个问题的偏移转换矩阵：http://stackoverflow.com/questions/673216/ skew-matrix-algorithm为了学习着色器，你应该研究如何在这里写出它们：http：//www.lighthouse3d。com/tutorials/glsl-core-tutorial/ – zero298

你不需要着色器来歪斜图像。渲染到纹理，然后定位它应该足够了 –

@BЈовићSFML不能在三维中定位。所以我不确定我会怎么做。 – Legacyblade

如何在GLSL中歪斜纹理的例子是以下（经过很少优化的）着色器。理想情况下，你会想要在常规程序中预先计算你的变换矩阵，并将它作为一个统一的函数传递，这样你就不会在着色器的每次移动中重新计算变换。如果您仍想计算着色器中的变换，请改为将校正因子作为制服传递。否则，每次你想改变偏斜系数时，你都必须打开着色器并进行编辑。

这是为了屏幕对齐四。

韦尔

attribute vec3 aVertexPosition; 

varying vec2 texCoord; 

void main(void){ 
    // Set regular texture coords 
    texCoord = ((vec2(aVertexPosition.xy) + 1.0)/2.0); 

    // How much we want to skew each axis by 
    float xSkew = 0.0; 
    float ySkew = 0.0; 

    // Create a transform that will skew our texture coords 
    mat3 trans = mat3(
     1.0  , tan(xSkew), 0.0, 
     tan(ySkew), 1.0,  0.0, 
     0.0  , 0.0,  1.0 
    ); 

    // Apply the transform to our tex coords 
    texCoord = (trans * (vec3(texCoord.xy, 0.0))).xy; 

    // Set vertex position 
    gl_Position = (vec4(aVertexPosition, 1.0)); 
}

破片

precision highp float; 

uniform sampler2D sceneTexture; 

varying vec2 texCoord; 

void main(void){ 
    gl_FragColor = texture2D(sceneTexture, texCoord); 
}

来源

2014-02-07 16:11:03 zero298

该结束了，比我还以为是显著简单。 SFML有一个vertexArray类，允许绘制自定义四边形而不需要使用openGL。

我结束了持续的代码如下（为别人谁运行到这个问题）：

sf::Texture texture; 
texture.loadFromFile("texture.png"); 
sf::Vector2u size = texture.getSize(); 

sf::VertexArray box(sf::Quads, 4); 


box[0].position = sf::Vector2f(0, 0);  // top left corner position 
box[1].position = sf::Vector2f(0, 100); // bottom left corner position 
box[2].position = sf::Vector2f(100, 100); // bottom right corner position 
box[3].position = sf::Vector2f(100, 100); // top right corner position 

box[0].texCoords = sf::Vector2f(0,0); 
box[1].texCoords = sf::Vector2f(0,size.y-1); 
box[2].texCoords = sf::Vector2f(size.x-1,size.y-1); 
box[3].texCoords = sf::Vector2f(size.x-1,0);

要画它，你叫下面的代码，无论你通常会告诉你的窗口绘制的东西。

window.draw(lines,&texture);

如果您想扭曲图像，您只需更改角落的位置。很棒。有了这些信息，你应该可以创建一个自定义的drawable类。你必须编写一些代码（set_position，rotate，skew等），但你只需要改变角落的位置并绘制。

来源

2014-02-07 18:28:46 Legacyblade

使用OpenGL着色器倾斜图像

回答

相关问题