Working Ghost Images

After playing around with how to copy the skeleton completely I finally figured out a way with Three.js. Instead of writing a deep copy method I am reassigning all the values to a new object. While this could probably be more concise, it is a start at making this program full functional. I have two images with the ghost images. The first is with no opacity change, the second is with an opacity change. 

This is a skeleton at every 100 frames, Opacity 100%

Here is the same movement with an opacity change on the skeleton. Opacity 50%

While I think the opacity change is a good thing - I do believe it needs some work. As seen in the final skeleton position the overlap of the lower and full opacity skeletons just doesn't look good. This can definitely be improved on. 


Another problem I have with the ghost images is every 100 frames when the ghost image is drawn, it lags. This will be extremely annoying the user (at least it is to me) So I believe I have to find a way to make this faster so it doesn't lag, especially since there will be multiple windows on one page.