使用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着色器傾斜圖像

回答

相關問題