帶有WebGL的Sprite動畫如何工作？

雖然有很多關於如何渲染精靈的教程，但我已經知道如何以面向對象的方式爲我的精靈製作動畫。比方說，我有一個播放器 - class帶有WebGL的Sprite動畫如何工作？

class Player{ 
    constructor(){ 
     this.textureAtlasPath = 'textures/player.jpg' 
     this.uvCoords = [0,0,1,0,1,1,0,1] 
    } 
}

因此，如果player.jpg只包含一個紋理（如一個字符），我認爲這是非常明確的，那我使用UV座標[0,0,1,0,1,1,0,1]。但讓我們說player.jpg包含4個紋理（角色朝上，角色朝左，角色朝下，角色朝下）。我所做的就是將在4個UV座標UV座標（頂點着色器內），並視框FE：

if(currentFrame < 15) 
    //use uv coord subdivision 1 
if(currentFrame < 30) 
    //use uv coord subdivision 2 
to be continued.....

所以我的問題是：難道我細分頂點/片段着色器內的紫外線COORDS或者我在CPU上計算它們？如果是這樣，我將它們存儲在4個不同的緩衝區或只有1個緩衝區？如果可能的話，你能提供一個代碼示例嗎？附加說明：我希望我的所有動畫小精靈都有4種運動狀態，所以f.e.整個圖像是64x64，它包含4個16x16紋理。

來源

2017-03-09 Felix

也許最常見的方法是使用具有單位四邊形紋理座標的單位四邊形並通過紋理矩陣來乘以紋理座標以選擇所需紋理的一部分。

// vertex shader 
attribute vec2 texcoord; 
... 
uniform mat4 texMatrix; 
... 
varying vec2 v_texcoord; 
... 

void main() { 
    ... 
    v_texcoord = (texMatrix * vec4(texcoord, 0, 1)).xy; 
}

見3210

如果您不旋轉，你可以縮短通過只是路過的UV膠印和UV規模

// vertex shader 
attribute vec2 texcoord; 
... 
uniform vec2 uvOffset; 
uniform vec2 uvScale; 
... 
varying vec2 v_texcoord; 
... 

void main() { 
    ... 
    v_texcoord = texcoord * uvScale + uvOffset; 
}

如果所有的精靈大小相同計劃對於一個給定的紋理（比如說所有紋理都是40x20），那麼你也可以通過傳入單個精靈的大小或者精靈的數量，紋理的大小和精靈數量來計算着色器中的UV。

你使用哪一個取決於你想要的靈活性和你需要多少速度。我幾乎總是選擇第一種方法，它是最靈活的。如果它對我的需求來說太慢，那我就開始優化。

來源

2017-03-10 21:36:24 gman

帶有WebGL的Sprite動畫如何工作？

回答

相關問題