使用openGL着色器歪斜圖像

Question

為了減輕我的藝術家的工作負擔，我正致力於為圖像制作一個簡單的骨骼動畫系統。 我已經概念化了所有部件的工作原理。 但是為了讓它成為我想要的動畫，我需要能夠實時扭曲圖像。 （如果我不能這樣做，我仍然知道如何使它工作，但如果我可以扭曲圖像來增加視角，它會更漂亮）

我正在使用SFML，它不支持圖像偏移。 我被告知我需要在圖像上使用OpenGL着色器，但我得到的所有建議都是“學習GLSL”。 所以我想也許這邊的人可以幫我一點。

有誰知道我應該從哪里開始？ 或者怎么做？

基本上，我希望能夠為圖像賦予視角（如下面的模型所示）

左側的圖像在頂部和底部傾斜。 右側的圖像左右傾斜。

Answer 1

如何在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));
}

FRAG

precision highp float;

uniform sampler2D sceneTexture;

varying vec2 texCoord;

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

Answer 2

這最終比我想象的要簡單得多。 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);

如果要傾斜圖像，只需更改角點的位置即可。 效果很好。 有了這些信息，您應該能夠創建自定義可繪制類。 你必須編寫一些代碼（set_position，rotate，skew等），但你只需要改變角落的位置並繪制。