Search Unity

Export HTML5 content from Unity editor

Discussion in 'General Discussion' started by JamesArndt, Apr 25, 2013.

  1. JamesArndt

    JamesArndt

    Joined:
    Dec 1, 2009
    Posts:
    2,679
    Last edited: Apr 25, 2013
  2. TylerPerry

    TylerPerry

    Joined:
    May 29, 2011
    Posts:
    5,577
    Wow, does this support scripting?
     
  3. rab236

    rab236

    Joined:
    Jan 17, 2009
    Posts:
    2,311
    Wow. This is something I was not expecting to see. I can't say I'm upset that it's here, though.
     
  4. landon912

    landon912

    Joined:
    Nov 8, 2011
    Posts:
    1,572
    This is cool, but could someone explain to me why I should use this instead of the Unity web player? Just curious if there are any benefits I'm missing....

    ~lanDog
     
  5. rab236

    rab236

    Joined:
    Jan 17, 2009
    Posts:
    2,311
    Well, not everybody has the Unity webplayer. Many modern browsers support HTML5 and WebGL (although in some, like Safari, you may have to first enable it)
     
    Aleks95 likes this.
  6. landon912

    landon912

    Joined:
    Nov 8, 2011
    Posts:
    1,572
    Well isn't getting the web player just as easy as downloading your browser? Why shouldn't the end user just install the plugin?

    ~lanDog
     
  7. rab236

    rab236

    Joined:
    Jan 17, 2009
    Posts:
    2,311
    People like minimal effort. Updating a browser is often automatic. To install a plugin you need to go through all these steps, and when you're done you may not even want to play the game anymore. How many times have you seen somebody ignore the Flash updater? Flash comes with most systems, so people use it. The Unity webplayer does not.
     
    SanSolo likes this.
  8. landon912

    landon912

    Joined:
    Nov 8, 2011
    Posts:
    1,572
    Thank you sir ;) Sorry for leading the thread off topic.

    ~lanDog
     
  9. JamesArndt

    JamesArndt

    Joined:
    Dec 1, 2009
    Posts:
    2,679
    @tylerperry - it should be able to support scripting. the last link is an fps controller or something...character has a flashlight that can be turned on and off. Another possible advantage is some html5 works on mobile devices....Unity webplayer will not.
     
  10. runningbird

    runningbird

    Joined:
    Sep 3, 2009
    Posts:
    377
    Excellent job!
     
  11. spacefrog

    spacefrog

    Joined:
    Jun 14, 2009
    Posts:
    562
    Seems the whole site and Tutorial already has been online for 2 yrs and nobody noticed ?
    The whol codebase is pretty old and not regurarily maintained as it seems
    Seems to be a nice demo and proof of concept, but not further evolving ....
     
  12. angrypenguin

    angrypenguin

    Joined:
    Dec 29, 2011
    Posts:
    12,223
    That's impressive. I never thought of the idea of using Unity as an editor to output content for a 3rd party runtime, but that's cool.
     
  13. zombiegorilla

    zombiegorilla

    Moderator

    Joined:
    May 8, 2012
    Posts:
    7,906
    Looking through the code, it appears to a tool to export meshes, positions and textures to a .json file that J3D can load and display. Any coding would have to be done by hand using J3D. (or something like three.js). Neat idea though, using unity as an interface for converting/positioning objects.
     
  14. UniteMage

    UniteMage

    Joined:
    Aug 22, 2012
    Posts:
    58
    HTML5 and WebGL is the future. It uses nothing but Javascript so the engine has to be written in Javascript.

    Unity has to build a javascript engine surrounding the WebGL technology so therefore it has to be built from scratch.

    The present Unity technology will export this javascript engine along with the assets and user code written from any of the script languages converted to javascript. Everything has to be in javascript even the assets.

    I did an experiment at school using Mr doob's three.js, Mr Parisi's sim.js plus a few others in less than 3 weeks for a final grade.

    Check out the website and the little game I created using WebGL. Remember to use Google Chrome because it is best for this.

    http://w3.cnm.edu/~jcarpenter3/cis1210/final/index.html

    CSDG

    Meant to post this here but went to another thread.........
     
    Last edited: Apr 25, 2013
  15. jonmalave_

    jonmalave_

    Joined:
    Aug 19, 2012
    Posts:
    1,669
    this actually has been posted to the forums about a year ago +months, see here: http://forum.unity3d.com/threads/96025-J3D-webgl-engine-Unity3D-exporter

    i remember stumbling across it here when i was searching for HTML5/WebGL engines on Google. Seems pretty cool, but I doubt anyone can really use this just yet to create a fully playable STABLE game. I've seen someone else build an FPS with HTML5/WebGL but i didn't have any sound, fire, or enemies... when I see that, then I might get excited... until then...
     
  16. UniteMage

    UniteMage

    Joined:
    Aug 22, 2012
    Posts:
    58
    HTML5 does sounds - read up - WebGL can be mixed in with HTML tags - do you have any idea what that means????

    EXPERIMENT - LOOK IT UP
     
    Last edited: Apr 25, 2013
  17. Devilbox-Games

    Devilbox-Games

    Joined:
    Jul 3, 2012
    Posts:
    205
    From what I understand the unity exporter basically just exports the scene (meshes, material assignments, hierarchy, etc.) to JSON format for his WebGL engine to load. It looks like any scripting would have to be redone manually in javascript to tie into the J3D engine.

    It looks rather good and handy, but it doesn't seem to be the magic bullet people want.
     
  18. jonmalave_

    jonmalave_

    Joined:
    Aug 19, 2012
    Posts:
    1,669
    if anyone wants to follow the development of a promising HTML5/WebGL Engine Bookmark PlayCanvas.com!

    they are building a HTML5/WebGL Engine with Visual Editor in the Browser!! you don't have to even download the engine, you signup to the closed beta, then get access to the Engine in your Browser along with a Dashboard / Repository or something to manage / upload your content / code and just build and publish your game from there.

    they have alot of really nice Demos available to check out here: http://playcanvas.com/demos/

    one major plus i like is that it seems to support FBX, they provide an offline tool that converts FBX to json. (i left a question for them today to see if this also include character model + animations)

    I haven't seen any other HTML5/WebGL Engine with a Visual Editor except for CopperLicht http://www.ambiera.com/copperlicht/ (there is a free version you can download) I tried it, seems to be pretty user friendly BUT!!! the major turn off for me was the lack of Character Animation Support, they only support the following: Milkshape (.ms3d), Microsoft DirectX (.x), B3D files (.b3d) for Character Animation! You will probably never find any good Ready made Assets to play with for this Engine, unless you make them yourself.
     
  19. jonmalave_

    jonmalave_

    Joined:
    Aug 19, 2012
    Posts:
    1,669
    ??? dude chill out... i'm not attacking HTML5/WebGL i simply said when i see an FPS (html5/webgl) demo that includes "Sound, Fire(attack), +enemies to kill" then i'll be excited... I have not yet seen a demo like this...

    I never said nor stated HTML5/WebGL CAN'T DO SOUND.... so whats with your comment ??? why don't you go back and re-read what i wrote and think before you reply and assume anything... we all know what assuming makes you
     
    Last edited: Apr 25, 2013
  20. deram_scholzara

    deram_scholzara

    Joined:
    Aug 26, 2005
    Posts:
    1,026
    This makes me extremely happy =-)
     
  21. Tiles

    Tiles

    Joined:
    Feb 5, 2010
    Posts:
    2,473
    The Unity webplayer phones home with every call. Without control what data gets sent to Unity ( i am still curious what data gets sent, but have given up hope to find it out. But it`s annoying enough that it locks the browser for this phone call at all before it continues to load the content).

    HTML5 does not phone home ...
     
  22. kenshin

    kenshin

    Joined:
    Apr 21, 2010
    Posts:
    920
    Nice and interesting example!
     
  23. skoandi

    skoandi

    Joined:
    Jul 9, 2012
    Posts:
    67
    Wow this stuff is amazing! Works perfectly on win7 google chrome!

    I also tried to load it on my iphone but it didn't work.. All iphones has HTML5
     
  24. ColossalDuck

    ColossalDuck

    Joined:
    Jun 6, 2009
    Posts:
    3,246
    Wow thats neat
     
  25. ColossalDuck

    ColossalDuck

    Joined:
    Jun 6, 2009
    Posts:
    3,246
    oh no, the big bad unity developer teams gon getcha.
     
  26. MarigoldFleur

    MarigoldFleur

    Joined:
    May 12, 2012
    Posts:
    1,353
    Especially considering how, like most everything that phones home, it's likely just sending a basic hardware and software profile.
     
  27. SevenBits

    SevenBits

    Joined:
    Dec 26, 2011
    Posts:
    1,953
    It's the Illuminati - your hardware information is going to be used in the new world order. It's all a conspiracy. Get your tinfoil hats ready.

    Just kidding. But seriously, like Marigold said, everything phones home, and it takes like .1 of a second. The information that UT gathers from this is useful and surely it is worth the enormous sacrifice it requires.
     
  28. TylerPerry

    TylerPerry

    Joined:
    May 29, 2011
    Posts:
    5,577
    Yeah, isn't that how Unity gets the web player stats?
     
  29. radiantboy

    radiantboy

    Joined:
    Nov 21, 2012
    Posts:
    871
    This is great, the main reason Id want it is to support Samsung Smart TVs, its the only way with Unity but Im wondering if this tool is really great at exporting html5 or not, guess I need to try :) Great work!!
     
  30. jedy

    jedy

    Joined:
    Aug 1, 2010
    Posts:
    578
    Woah! This is big.

    I see the scripting is simply browser js scripting, but that will do. Even though it's readable by pretty much everyone without obfuscation ( which comes handy for lowering the build size ).

    This could make for a killer website or simple game.
     
  31. LuxUnity

    LuxUnity

    Joined:
    Sep 29, 2010
    Posts:
    632
    Very interesting! Sadly it don't work in ubuntu. I try on firefox and chrome the live example in boot I have a black screen.
     
  32. lmbarns

    lmbarns

    Joined:
    Jul 14, 2011
    Posts:
    1,473
    Old thread but man, played around with this yesterday and it's pretty neat.

    Here's one of the free skyboxes on the asset store and some meshes exported out of unity:


    You can access the objects within the json file so you can add custom movements to them. Like move the camera with keypress or mouse movement.

    Here's a demo of a skybox and couple meshes: http://leefromseattle.com/jsonB/page.html

    Could be neat for embedding 3d products in web pages or something...visualizations...

    I got my leap motion moving div elements so wonder if I can move the camera, will test.

    edit:: also with that ucla mesh creator shared a couple days ago you can make coins/items for 2.5d and export them to json and access in the browser.
     
    Last edited: Aug 18, 2013
  33. Yokil

    Yokil

    Joined:
    Sep 9, 2012
    Posts:
    26
    I'm trying with version 4 of the Unity, but it does not get any results; Someone is having the same problem?
     
  34. lmbarns

    lmbarns

    Joined:
    Jul 14, 2011
    Posts:
    1,473
    No I've tested with 4.1.5 and 4.1.2 and it works great.

    You imported both packages? The shader seems to have to be "Diffuse" on the exported objects. You put all your objects under the "root" object, make sure everything has a unique name, highlight everything by selecting it and select the J3D-> export tab. Then upload both json files it creates to your web server and add the filenames to the html example.

    Then in javascript you can access the items in the json file and apply movement to them. You can look at the source html here: http://leefromseattle.com/jsonB/page.html

    edit:: Also got it working with the leap motion + jquery in the browser so you can move around with your hand movement.
     
    Last edited: Aug 20, 2013
  35. lmbarns

    lmbarns

    Joined:
    Jul 14, 2011
    Posts:
    1,473
    Do you have access to a webserver? I used it on bluehost and it worked great.

    By running locally they mean copy the code from J3d.js into a text document and save it as j3d.js in the same folder as the html page you're trying to open.... j3d.js is here https://github.com/drojdjou/J3D/blob/master/build/j3d.js

    If you don't have a webhost and have to run locally, you should run something like XAMPP http://www.apachefriends.org/en/xampp.html as a local server. You put your html and js scripts in a folder(follow their instructions) and can access it from localhost in the browser.
     
  36. lmbarns

    lmbarns

    Joined:
    Jul 14, 2011
    Posts:
    1,473
    No you have to use web javascript for everything, it just exports the mesh/materials so you can reconstruct them in 3d in the browser.
     
  37. Iszard

    Iszard

    Joined:
    Oct 15, 2013
    Posts:
    1
    Has anyone actually seen this working on a mobile device?

    Now the first demo doesn't work anywhere but at least the lightmap demo works on my PC.
    My iphone 5 and my iPad 3rd Gen do not display anything...
     
  38. lmbarns

    lmbarns

    Joined:
    Jul 14, 2011
    Posts:
    1,473
    The demos I made have too big of textures for mobile...not sure where webgl is on support for mobiles, but the skybox alone was something like 6x 2048x2048 images.

    I did 1 demo with the leap motion in the browser just to move/rotate an item(in example a helmet)

     
    Last edited: Oct 15, 2013
  39. Shukerullah

    Shukerullah

    Joined:
    Mar 15, 2013
    Posts:
    95
    plugin and demo both are not working :(
     
  40. kenneydotfrost

    kenneydotfrost

    Joined:
    Apr 22, 2013
    Posts:
    7
    I'm working on Frost's Unity-2-HTML5 Toolkit which is focused on Unity 4.3's 2D sprite-based feature set. We've made some solid progress with an fully automated build workflow to HTML5. Script in C# as you normally do, test/run in the Unity editor, click HTML5 Build and you have a native-HTML5 game. Check out news and videos here.

    Cheers,
    Ken - FROST.IO
     
  41. DarkSlash

    DarkSlash

    Joined:
    Sep 30, 2011
    Posts:
    111
    Do you need to change your code or every game that build in Unity can be exported to html5? What are the restrictions?
     
  42. saltyJeff

    saltyJeff

    Joined:
    Mar 29, 2014
    Posts:
    7
    This is great. EXCEPT THE LINKS ARE BROKEN!!!! and the root domain takes you to a polish domain registering site. www.peo.pl anybody?
     
  43. rmele09

    rmele09

    Joined:
    Nov 8, 2010
    Posts:
    607
    Will you replace the links? I would like to try this out and I am super interested as I am very interested in using this.
     
  44. DarkSlash

    DarkSlash

    Joined:
    Sep 30, 2011
    Posts:
    111
    Waiting the same ;)
     
  45. JamesArndt

    JamesArndt

    Joined:
    Dec 1, 2009
    Posts:
    2,679
    We'd have to look into the original author of the content, it's not me. This was just something I came across that looked awesome. Will be kind of moot now that Unity is releasing html5 build ability shortly anyway. No need for plugins or any of this.
     
  46. Ramss

    Ramss

    Joined:
    May 18, 2013
    Posts:
    2
    Hi Imbarns., I am also facing the problem as same as aoxiangyuntian faced. I have the server own. could you please explain me the process to be done. I have a game simulation with a character and some images and Unity 2D textures.I wanted to build that file into HTML5 using this plug in. Is it possible by changing the object count in j3d exporter before build....?
     
  47. mahipro

    mahipro

    Joined:
    Nov 6, 2014
    Posts:
    3
    Is there any option in Unity to HTML5 conversion for device view and without unity player?
     
  48. Shukerullah

    Shukerullah

    Joined:
    Mar 15, 2013
    Posts:
    95
    I think upcoming unity version, Unity5 will have HTML5 platform
     
    mahipro likes this.
  49. mahipro

    mahipro

    Joined:
    Nov 6, 2014
    Posts:
    3
    We have recently purchased ‘Collada Exporter’ plug-in for Unity file exporting. Here the ANIMATION code is not contained in exporting 'dae' format when using this plug-in in unity scene file with 'animation' (selected animation TRS link option as well in Unity3D 4.5.5f1 - COLLADA exporter v1.5.0). Could you please suggest to export valid collada format?
     
  50. Neoku

    Neoku

    Joined:
    Oct 27, 2014
    Posts:
    261
    The demos not working for me (blank screen in firefox and chrome) but is great see that is possible export with a script, if this can export to WebGL today would be absolutely awesome.
     
    Last edited: Nov 25, 2014
    mahipro likes this.