title: How does Sprite Animation with WebGL work?
body: <p>Although there are many tutorials about how to render sprites, which I already know, I was wondering about how I can animate my sprites in an object oriented way. Let's say I have a Player-<code>class</code></p>
  
  <pre><code>class Player{
      constructor(){
          this.textureAtlasPath = 'textures/player.jpg'
          this.uvCoords = [0,0,1,0,1,1,0,1]
      }
  }
  </code></pre>
  
  <p>So if <code>player.jpg</code> contains only ONE texture (like one character) i think it is very clear, that i use uv coordinates <code>[0,0,1,0,1,1,0,1]</code>. But lets say the <code>player.jpg</code> contains of 4 textures (character facing up, character to the left, character to the right and character facing down). What i did was dividing the uv coordinates in 4 uv coordinates (within a vertex shader) and depending on the frame f.e.:</p>
  
  <pre><code>if(currentFrame &lt; 15)
      //use uv coord subdivision 1
  if(currentFrame &lt; 30)
      //use uv coord subdivision 2
  to be continued.....
  </code></pre>
  
  <p>So my question is:
  Do I subdivide the uv coords within the vertex/fragment shader or do I calculate them on the CPU? If so do I store them in 4 different buffers or only 1 buffer? And if possible can you provide a code example?
  Additional note: I want my ALL my animated sprites to have 4 states of movement, so f.e. the whole image is 64x64 and it contains 4 16x16 textures.</p>