2017-08-10 48 views
0

我想渲染我的四邊形內使用着色器和一個對象文件(.pod)的紋理的一部分,這只是容器格式的持有頂點,法線和UV。如何渲染使用着色器的opengl中的四邊形內的紋理的一部分

所以,試想一下,我使用3ds max製作了一個簡單的四邊形,並將其導出爲.pod,並將其導入到我的場景中,從世界到MVP。它具有UV作爲(0,0)(1,0)(0,1)(1,1) ..現在我有一個1024x128像素的紋理(.pvr)。我已經使用適當的緩衝區將所有數據從cpp發送到頂點着色器,並且一切正常。

現在的問題是,我想渲染一些紋理,可以說,從200,30(left,bottom)像素到500,100(width,height)

如何使用頂點着色器實現上述效果。我已經在頂點着色器中編寫了一些邏輯,對我來說,它適用於(0,0)座標,但是如何定義高度和寬度,因爲只有一個vec2變量。下面是頂點着色器的邏輯...

varying mediump vec2 TexCoord; 
attribute mediump vec2 inTexCoord; 

TexCoord.x = inTexCoord.x * (1024.0/(1024.0-200.0))-(200.0/1024.0); 
TexCoord.y = inTexCoord.y * (128.0/(128.0-30.0))-(30.0/128.0); 

相同的邏輯和價值觀正在爲所有的UV,不知道該怎麼提高度,寬度在裏面。上面的代碼正在做一些技巧,但不是我所期待的。它正在重複四邊形內的紋理。 相反,我只想渲染紋理的一部分(200,30,500,100)(l,b,w,h),在四邊形內部也顯示四邊形的黑色邊界,從0-127像素和0-30像素分別從左邊和底部,黑色邊框從629th像素到1024從右邊。

我正在試圖製作一個視頻牆項目,電視將以不同的角度旋轉。

+0

聽起來像你想的着色信箱什麼的。你可以做到這一點,但我個人會改變你映射到的幾何圖形來適應,即改變代表屏幕的矩形區域的方面,而不是在着色器中擺弄。 – Robinson

+0

你的計算看起來不對。我不確定你從哪裏得到這個公式。 – BDL

回答

2

從映射中的正確的計算frmo [0,1]對啓動(S)和長度(L)是

x_mapped = x * l + s 

當您的特殊的問題看,你應該使用:

TexCoord.x = inTexCoord.x * (width/1024.0) + (left/1024.0); 
TexCoord.y = inTexCoord.y * (height/1024.0) + (bottom/1024.0); 
+0

我相信唯一的問題是,如果我們從頂端做它不是'TexCoord.y = inTexCoord.y *(height/1024.0) - (top/1024.0);'?因爲OpenGL座標的BL角是0,0?或者'TexCoord.y = inTexCoord.y *(height/1024.0)+((top + height)/ 1024。0);' – Eddge

+0

@Eddge:它應該是「底部」而不是「頂部」(正如問題中所要求的那樣)。你的兩個公式中沒有一個對我來說是正確的,這裏有兩個計數器例子:第一個爲'y = 0'產生一個值爲' - (top/1024)'的負值。第二個是'y = 1,top = 512,height = 512'(下半部分),'result = 1.5'。對於紋理內的有效參數組合,結果總是必須在[0,1]之間。 – BDL

+0

感謝您的快速回復和解決方案@BDL。它正在工作,但部分對我來說。我正在嘗試的是僅在四邊形中的位置渲染該部分紋理。 附加一個圖像,您可以看到完整的紋理,並進行更改後,它將成爲平鋪紋理。 [http://imgur.com/a/JkJ4P] 'TexCoord.x = inTexCoord.x *(1024.0/1024.0)+(500.0/1024.0); TexCoord.y = inTexCoord.y *(128.0/128.0)+(64.0/128.0); ' – SIM

0

所以,我正在嘗試更多的工作,無論是高效或低效的方式,下面是我已經在片段着色器中實現,似乎爲我工作。請檢查一次n讓我知道任何優化可以在此做出。下面的代碼將只繪製我想在屏幕上看到的四邊形中相同位置的紋理部分。

const float MAX_WIDTH = 1280.0; 
const float MAX_HEIGHT = 720.0; 

const float LEFT = 00.0; 
const float TOP = 00.0; 
const float WIDTH = 500.0; 
const float HEIGHT = 500.0; 

void main() 
{ 
    vec2 p = TexCoord; 
    float xx,xw,yy,yh,b; 

    xx = (LEFT/MAX_WIDTH); 
    xw = ((LEFT + WIDTH)/MAX_WIDTH); 
    yy = (TOP/MAX_HEIGHT); 
    yh = ((TOP + HEIGHT)/MAX_HEIGHT); 

    if((p.x > xx) && (p.x < xw) && (p.y > yy) && (p.y < yh)) 
      b = 1.0; 
    else 
      b = 0.0; 
    gl_FragColor = vec4((texture2D(sTexture, TexCoord).rgb),texture2D(sTexture,TexCoord).a * b); 

} 

在頂點着色器中的下面部分將只加載我想要看到但覆蓋整個四邊形的紋理部分。

TexCoord.x = inTexCoord.x * (WIDTH/MAX_WIDTH)+(LEFT/MAX_WIDTH); 
    TexCoord.y = inTexCoord.y * (HEIGHT/MAX_HEIGHT)+(TOP/MAX_HEIGHT); 

感謝解決這個.. @BDL

+0

如果@BDL解決了問題,您應該**接受**他的回答。 – Rabbid76

+1

@ Rabbid76:完成Sir .. – SIM