WebGl BufferGeometry Sprite

Éste pretende ser un motor de animación 3d usando cuadros, basado en THREE.js.

... el ejemplo lo tendré pronto ...

*** Download ***

https://drive.google.com/file/d/1hHsDfnmpmjUOaF87CF3IRwi6A84UaSjt/view?usp=sharing

*** Documentación ***

Cargar textura
```
var textureLoader = new THREE.TextureLoader();
textureLoader.load('photo.png', function (texture){
... código ...
});
```

Iniciar motor
Se le pasa la escena three js
```
var enSp = new WebGl_BufferGeometry_Sprite(scene);
```

Crear grupo o familia de textura
Para aumentar la velocidad del plotéo, se me ocurre que todos los objetos tridimencionales que compartan una textura, serán el mismo objeto THREE.BufferGeometry y manipularé sus vertices para que funjan como objetos independientes.
```
var groupMesh = enSp.addTexture(texture);
```

Agregar un objeto 3d
Se le debe pasar el arreglo con las vertices del objeto, el arreglo del mapa de textura, el arreglo de los indices de los polígonos,  arreglo de vertices agrupadas,  arreglo de cuadros de animación.
```
vtx = [[0,2,0,2,-1,0,-2,-1,0], [0,2.2,0,2,-1,0,-2.2,-1,0]];
uvmap = [0.5,0,1,1,0,1];
index = [0,1,2];
groups = [[{x:0,y:0,z:0},2,1],[..  ..],..  ..];
animation = [0,1,0];
var sprite = enSp.addSprite(groupMesh, vtx, uvmap, index, groups, animation);
```

• Array con las vertices del objeto. Es un array unidimencional que contiene los componentes xyz de las vertices uno tras otro. Además, para agregar cuadros de animación, es posible pasarle un array de arrays donde cada sub array es un nuevo array unidimencional que contiene los componentes xyz de cada cuadro. Importante. Se respeta el orden de las vertices, esperando que la diferencia de entre ellas sea la animación.
• Array del mapa de textura. Es un array unidimencional que contiene los componentes uv de cada vértice. Importante. nótese que es por vértice y no por polígono. de modo que si queremos tener dos polígonos vecinos con distinto mapa de textura, se requerirá que cada uno tenga sus vertices particulares. Tratando de evitar el caso anterior porque al aumentar las vertices, se reduce el desempeño.
• Array de indices de polígonos. Es un array unidimencional que contiene los componentes abc de cada polígono, uno tras de otro.
• Array de vertices agrupadas. Es un array bidimencional que en sus subarreglos contiene un objeto {x,y,z} en su primera posición que especifica el origen del grupo, y seguido, el indice de las vertices que conforman el grupo. Esto es útil para animar o mover por separado un grupo de un objeto.
• Array de cuadros de animación. Es un array bidimencional que contiene el orden en que el indice de los cuadros de animación se sucederán (los cuadros son los subarrays del Array de vertices). Por ejemplo, si tengo una animación de maniar en tres cuadros, y deseo que se repitan en loop, usaría 0,1,2,1  ... de modo que al animar se sucederían 012101210 ...

Un sprite Objeto o sprite, tiene funciones que permiten modificar su posición, rotación, etc.

• remove. Remueve el sprite u objeto del motor.
  ```
  sprite.remove();
  ```
• pos. Especifica la posición de un sprite pasándole un elemento del tipo {x,y,z} y un valor booleano positivo si queremos que sea aditivo en vez de imperativo.
  ```
  sprite.pos({x:10, y:1, z:0,1}, false);
  ```
• ang. Especifica el ángulo de un sprite pasándole un elemento del tipo {x,y,z} y un valor booleano positivo si queremos que sea aditivo en vez de imperativo. Usa radianes.
  ```
  sprite.ang({x:10, y:1, z:0,1}, false);
  ```
• scale. Especifica la escala de un sprite pasándole un elemento del tipo {x,y,z} y un valor booleano positivo si queremos que sea aditivo en vez de imperativo. Por default cada uno valen 1. Además es posible especificar todos de un solo golpe pasándole un número en vez del objeto xyz.
  ```
  sprite.scale({x:2, y:2, z:2}, false);
  sprite.scale(2, false);
  ```
• scroll. Permite recorrer la textura de un objeto o sprite pasándole la cantidad que se moverá en uv el mapa de las vertices.
  ```
  sprite.scroll(u,v);
  ```
• anim. Anima un sprite según los siguientes parámetros (solo el cuadro inicial es obligatorio -start-):
  ```
  sprite.anim(start, stopin, back, step, onsuccess,  targetx, targety, targetz, targeteasefn, onstep);
  ```
• cuadro inicial. cuadro con el que arranca la animación.
• cuadro final. cuadro donde se detendrá la animación.
• retroceso. si se especifica, volverá el puntero de animación la cantidad `retroceso` permitiendo con ello hacer un loop.
• velocidad. es la velocidad del puntero en cambiar de cuadro. Por default es 1, pero puedes hacer que dure el doble pasándolo a 0.5
• animación success. Es una función que se ejecuta cada que la animación supera el cuadro final, o bien, si se reinicia el loop.
• target x. Especifica si se debe trasladar a algún punto mientras dura la animación.
• target y. Especifica si se debe trasladar a algún punto mientras dura la animación.
• target z. Especifica si se debe trasladar a algún punto mientras dura la animación.
• target ease. si se especifica un punto de traslado, es la función ease que usara para realizar el traslado. Por default es lineal. 
• función onstep. Es ta función se ejecuta cada que el puntero de la animación avanza, siendo sus argumentos:
• tEase. un numero entre 0 y 1 que refleja el avance de la animación de forma ease.
• t. un numero entre 0 y 1 que refleja el avance de la animación de forma real.
• setGroup. permite cambiar la posición, ángulo o escala de un grupo de vertices según los siguientes parámetros:
  ```
  sprite.setGroup(group, obj, isAdd, _fn, _success, _step);
  ```
• group. es un numero que indica el indice del grupo de vertices
• obj. es un elemento de tipo {x,y,z,ax,ay,az,ex,ey,ez} que especifica las nuevas propiedades del grupo.
• isAdd. si se especifica, es un booleano que indica si las nuevas propiedades son aditivas.
• _fn. Si se especifica es la función ease con laque sucederá el cambio de especificaciones.
• _success. si se especifica, es la función que se ejecuta cuando las nuevas especificaciones sucedan.
• _step. es la velocidad con la que sucederán las nuevas especificaciones. Por default es uno (de inmediato). Por ejemplo, si se quisiera hacer en dos pasos, usaríamos 0.5
• clone. permite clonar un sprite existente. A veces resulta útil clonar enemigos o efectos.
  ```
  sprite.clone();
  ```
• join. permite fusionar un sprite en otro para construir sprites más complicados. Conserva los grupos de vertices sólo recorriendo el indice de grupo. Al fusionarlo podemos indicar la posición, ángulo y escala.
  ```
  sprite.join(obj,pos,ang,scale);
  ```

Eejecutar un efecto especial

Clona un sprite para animarlo y auto destruirlo al concluir la animación. (solo sprite es obligatorio)

```

enSp.fx(sprite,x,y,z,e,flip,endX,endY,endZ,step,startFrame,endFrame,callBackFnOnEnd,easeFn,onStep)
```

• sprite. sprite recurso donde se hará el clon.
• x. posición donde aparecerá.
• y. posición donde aparecerá.
• z. posición donde aparecerá.
• e. escala que tendrá.
• flip. no es nada.
• endX. posición que alcanzará durante la animación
• endY. posición que alcanzará durante la animación
• endZ. posición que alcanzará durante la animación
• step. velovidad con la que el puntero del cuadro avanza. Por default es 1.
• startFrame. cuadro inicial de la animación
• endFrame. cuadro final de la animación.
• callBackFnOnEnd. funcion que se ejecuta justo al terminar la animación.
• easeFn. funcion ease que se usa para suceder la traslación
• onStep. funcion que se ejecuta a cada paso de la traslación (tEase, t)

Refrescar cuadro
Es importante refrescar el cuadro constantemente para que todos las acciones tomen efecto.
```
enSp.update()
```