WebGLを使用したSpriteアニメーションはどのように機能しますか？

Question

既に知っているスプライトのレンダリング方法に関するチュートリアルはたくさんありますが、私はオブジェクト指向の方法でスプライトをどのようにアニメーション化できるのか疑問に思っていました。のは、私がplayer.jpgは（1つの文字のような）のみONEのテクスチャが含まれている場合、私はそれは私が紫外線[0,0,1,0,1,1,0,1]を座標を使用することを、非常に明確だと思うので、Player- class

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

を持っているとしましょう。しかし、player.jpgに4つのテクスチャが含まれているとします（文字が上を向いている、左が文字、右が文字、下が向いています）。どのような私は、UVを分割してなかったこと（頂点シェーダ内）4点のUV座標に調整し、フレームに応じて、FE：

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

だから、私の質問は： は、頂点/フラグメントシェーダ内UV座標をI細分くださいまたは私はCPU上でそれらを計算するのですか？もしそうなら、私はそれらを4つの異なるバッファまたは1つのバッファに格納しますか？可能であれば、コード例を提供できますか？ 追加の注記：私のすべての私のアニメーションスプライトが4つの動きの状態を持つことを望みます。画像全体が64x64で、4つの16x16テクスチャが含まれています。

Answer 1

おそらく最も一般的な方法は、ユニットクワッドテクスチャ座標を持つユニットクワッドを使用し、テクスチャ座標を乗じて必要なテクスチャの部分を選択することです。

// 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。

どちらを使用するかは、柔軟性のある方法と必要なスピードの程度によって異なります。私はほとんどの場合、最初の方法を選択するのが最も柔軟です。それが私のニーズには遅すぎる場合、私は最適化を開始します。