WebGL facial animation is not displayed very well by my browser

Hello. I have mirrored the WebGL facial animation that you see on the picture on my local computer because I want to study it deeply. I have downloaded the files from the server and I have put them on the right folder places on my computer. But,as you can see from the screenshot,something is wrong. Since I'm running the apache server with PHP,I suspect that I need to activate some kind of option,because this template file :

http://cdn.cache.stickmanventures.com/labs/webgl-threejs-morph-target/model/ginger_color.jpg

it's not displayed well by my google chrome browser. Can you tell me the reasons ? Thanks.

Check here what's wrong :

http://www.montedivenere.it/images/Varie/ginger.png
LVL 2
marietto2008Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
What you posted is not a template.  It is just a .png image.

The images tell us exactly nothing.

Post a link to the page with the problem; a description of the problem; and the outcome you are trying get, and you will be more likely to draw Experts who can help you with this.

Cd&
0
marietto2008Author Commented:
I don't know what else to say. I have mirrored the animation located here :

http://stickmanventures.com/labs/demo/webgl-threejs-morph-target/

on my local computer because I want to study it. It is not displayed correctly and there is something that I don't understand. Until that I'm not able to run it exactly as it runs on the remote server,I can't start looking inside the code. I've explained what's wrong. On my local computer the facial animation is displayed exactly as on the remote server except for the eyes and the skin that are missing. They are expressed by the ginger_color.jpg file. I've thought that this file is not displayed by my side or it is broken. I don't know. You can try to mirror the animation by yourself. Let me know if you have the same problem. I've used WebHTTrack Web site copier...
0
COBOLdinosaurCommented:
Okay I got it.  You are trying to run the page you copied on your own computer, and I suspect the problem is that there  are server side elements to prevent a fully function duplication.  They have a demo page, but I don't see a download which is what you need to get all the components.

Cd&
0
10 Tips to Protect Your Business from Ransomware

Did you know that ransomware is the most widespread, destructive malware in the world today? It accounts for 39% of all security breaches, with ransomware gangsters projected to make $11.5B in profits from online extortion by 2019.

marietto2008Author Commented:
The developer says : "It's the Web: even non-open source code is available at the flick of a "view source". The model has copyright notices on it. That's it. No special secret trickery. We didn't even obfuscate the JavaScript. If you think you've got it all and if you want to "study it deeply",then debug your setup with DevTools. See the what fails to run (hint: the init doesn't fire).
0
COBOLdinosaurCommented:
View source does not display dynamically generated code.  You don't even see the canvas tag that is used to contain the animation.

The minified jqeury generates the canvas, the images in the canvas and the events that respond to produce the animations.  All the client side dynamics modify the Document object, but not the metadata which is all that gets display in view source.

If you want to see what it is doing you need to use something like firebug to see what is actually in the document object.

If you want to understand the code you need to un-minify the jquery libraries so they are readable.

Cd&
0
marietto2008Author Commented:
I'm not so experienced. Can you give me more informations about how to "un-minify the jquery libraries" ? Do you have a link / tutorial that explains carefully what to do ? I'm a newbie. Thanks.
0
COBOLdinosaurCommented:
Here are a couple of online tools you can use to convert to a more readable format:

http://jsbeautifier.org/
http://www.jspretty.com/

However it sounds like you are not going to understand the code anyway.  If you are just starting out in javascript, then you are in way over your head trying to understand how canvas works; and how to interpret jquery functions.

You need to have a good understanding of basic javascript and HTML5 before you try to take on something as advanced as canvas.

Cd&
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.