[WEB] HTML5 Skin Viewer

Discussion in 'Bukkit Tools' started by earthiverse, Feb 14, 2011.

Thread Status:
Not open for further replies.
  1. Offline


    I'm going to update this in a few days (hopefully).

    1.8 Beta Skin Viewer: http://earthiverse.ath.cx/skin4/

    It's 100% javascript and html5, if you want the source code, just view the source for now. I'll upload it to github in a few days when I get a few more bugs fixed (e.g. Notch's skin)

    It will convert your old skin for you to the new format.

    ----- OLD Stuff Below ----

    What started with a head, has become the whole skin!
    View your minecraft skin in the comfort of your own (html5 enabled) browser! (Excluding IE9, I don't know what's up with that browser)

    v1 - automatic rotation
    Example: http://earthiverse.ath.cx/skin/?user=earthiverse
    Download: http://dl.dropbox.com/u/431832/skin.zip

    v2 - click to drag
    Example: http://earthiverse.ath.cx/skin2/?user=earthiverse
    Download: http://dl.dropbox.com/u/431832/skin2.zip

    How To Use (v1 and v2):
    Change ?user=earthiverse to your username!
    Add &refresh to reload a skin (in the case that you update it on minecraft.net)!
    Add &webgl to render it in webgl, if your browser supports it! (Smoother)

    Isometric (Works in IE9, too!)
    Example: http://earthiverse.ath.cx/#minecraft_skin
    Download: http://dl.dropbox.com/u/431832/isometric_skin.zip

    How To Use (Isometric):
    Look at the example file provided. It should be fairly straight forward what's going on from the examples given.

    How To Install on Your Server:
    1. Unzip to php-enabled website (You'll need gd too, but this is pretty much standard)
    2. Open the index.php file, see if it works.
    3. Add ?user=Your_Username to the end of the url, see if it works.
    If it doesn't work, try giving extra permissions to Backend/backend.php, Backend/rmdir.php and the images/skins folder (Google 'CHMOD' for help

    Nothing working?
    Did you... chmod +x backend.php and rmdir.php; chmod 666 images/skins.​
    you don't need to chmod everything.​
    Black hat?
    Try resaving/reuploading your skin using Photoshop or some other image editing program and saving your skin as an 8 bit png.​
    Want to use this on your site?
    Go ahead, the source code is in the above zip files, no need to ask permission (I'm granting you permission right here). I'd like if you didn't redistribute this under your name, unless you change at least a couple lines of code, but I still won't care.​

    They go to charity, not me.

    In Conclusion...
    If there are blatant errors, please point them out so I, or someone more knowledgeable can fix it. Especially security-related ones.


    Current tests for other projects:
    Isometric block:

    BlueMustache, Axe2760, jycs and 8 others like this.
  2. Offline


    ooo hey it works! :D Nice!
  3. Offline


    it loads for me, but the face and back of the head are switched.
  4. Offline


    should be fixed.
  5. Offline


    Sweet! For a second I thought it refused to load my skin, but it looks like my skin just got lost somewhere on the way to Amazon S3. Reuploaded and looking good.
  6. Offline


    webgl works now (for supported browsers, like chrome9+, firefox4+ and safari developer build)
    it's a lot faster, smoother and just overall more nice.
    Pretty soon I'll have the whole body.
    I'm doing this in between classes and homework.

    if it doesn't render, but you really want it to, refresh the local cache on your browser.
  7. Offline


    lol the leg is acting weird and the arms are missing, but anyways, great job! :D
  8. Offline


    Any chance we could steal the source? =P Would be awesome as I'm teaching myself php.
  9. Offline


    haha, i moved on to 'test3.php'.
    add ?user=your_username to the end of it, like the other ones.
    Sure, but it's not that great. Someone needs to come along and teach me how to use javascript to break up the image, instead of php (offload image processing from server to user)
    Edit: Alright, code is slightly cleaner now:
    From backend scripts:
    From test3.php:
    --- merged: Feb 17, 2011 2:59 PM ---
    Pretty much the whole thing works now.
    Hats included.
  10. Offline


    Cool thanks alot earthiverse. I'm working on implementing links on my forums to people's characters.
  11. Offline


    Yea cool, but fps is so low. 2-10 fps. Opera 11
  12. Offline


    Standard version is very slow. But if i add &webgl at the end, it speeds up significantly.

    Good job! Now

    EDIT: changed to my name (I'm using default texture) and it renders body, but not head. Same happens if i turn off webgl.
  13. Offline


    Works fine for me in chrome.
    Even on a netbook running ubuntu 10.10 netbook remix.

    It will render fine in normal mode if the hat area is filled with transparency (there are some problems with this, depending on what program was used to save the png, photoshop works fine).

    webgl doesn't work with transparency very well (or at least I haven't configured it right, or something), so it doesn't work with hats very well.

    Also, I'm an environmental engineering student, not computer science or anything, so someone who knows how to do this stuff should do it better for me :p.

    edit: see http://earthiverse.ath.cx:8000/test3.php?user=gnarlywhale for a model that works with hats.
  14. Offline


  15. Offline


    looks like it's missing the bottom face of the main body, but even without that it looks great :D
  16. I just tried it and I found that the "hat" part for the top and sides were facing the wrong direction.

    I know because my character has hair wisps that stick out and they were facing the wrong way.
  17. Offline


    the whole head except the front and back, and the left arm and left leg are like that :)
  18. Just as a note, when it rendered for me, the last tage is missing a bit.
    it rendered only </htm
  19. Offline


    You might want to try the latest version of Chrome, Firefox, Safari or even IE9.

    Loool, I'll look in to this.
  20. Offline


  21. I already am using the latest version of Firefox.
    Im a web developer, do you think i'd be using IE?!?!?! :)
  22. Offline


    Should be at least using IE Tester if you're a web dev to make sure your pages work in IE7 and IE8 as well as IE9 ;)
    Good web dev has Chrome, Opera, FF, Safari and IE installed for testing purposes :D
    Ultimate_n00b likes this.
  23. Indeed, however, I don't actually browse websites with IE. Heaven forbid! :)
  24. Offline


  25. Offline


    ah excellent, both the ones I linked are looking good now :D
    guess it helps having specifically asymmetrical ones to work with eh? ;)

    the only problem I see left is the webgl version doesn't render the head at all, and renders the head extra layer with weird bugs... but I blame webgl for that

    Update: oops, just noticed, still not rendering the bottom face on the torso
    easiest to see on my own avatar http://earthiverse.ath.cx:8000/test3.php?user=ShadowDrakken
    --- merged: Mar 7, 2011 8:39 PM ---
    oops, Seyeklopz pointed out that the bottom of the head is still backward, his beard is showing up in the back instead of the front XD
  26. Offline


    Bottom of head fixed (And with that, the hands, feet and bottom are fixed too, before anyone pointed out they were broken :p)

    Also, webgl is slightly better now, but still weird, especially with transparencies.

    And it's now more inefficient than ever, haha.

  27. Offline


    haha, runs fine here and my computer is about 2yrs outdated :)
  28. Offline


    WebGL offer antialiasing, which looks great but the bottom of the head is cutting into the body and it's slower (chromium & 32bit gentoo, nvidia).
  29. Offline


    webgl is funny with transparency. Although I did just fix the cut in to shoulder issue.

    http://earthiverse.ath.cx:8000/new/test3.php?user=Rubyfair&webgl's hat looks fine, where as
    http://earthiverse.ath.cx:8000/new/test3.php?user=UltimaCX&webgl's hat is very strange.

    I think it has to do with the png encoding. (Remove &webgl and both will render normally)
  30. Offline


    Would you mind if I used this on my website? PS: Add a little copyright on bottom right :) Also maybe a challenge, would you able to make about 200px x 200px?
Thread Status:
Not open for further replies.

Share This Page