How to send 4x4 matrices in a texture to the vertex shader?

How do I send a many 4x4 matrices to the vertex shader using textures in WebGL? I would like to do this fo开发者_Python百科r skeletal transformations. Doing this all in the cpu kills my frame rate.

You should not attempt to put matrices in textures. Instead, you should use uniform arrays:

uniform mat4 skelMats[X];

You can fill those uniforms as you wish. Obviously, there is a limit on the number of uniform matrices you can get out of this, but most implementations should support at least 64 matrices.

<script id ="VERTEX" type="GL_VERTEX_SHADER">

...

  uniform mat4 theMatrix;


    void main(void) {  

     gl_Position=.... }

</script>

...

<script>
...
  var A_Matrix = [
                    x, 0, a, 0,
                    0, y, b, 0,
                    0, 0, c, d,
                    0, 0, -1, 0
                ];

     var _Matrix=gl.getUniformLocation(program,"theMatrix");
                gl.uniformMatrix4fv(_Matrix,false,new Float32Array(A_Matrix));
...
</script>

If you define the

uniform mat4 theMatrix;

in both the vertex and fragment shader then the matrix you set up from the initiation can be used in both shaders.