Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

HTML Renderer

Discussion in 'Works In Progress - Archive' started by UnityDigger, Apr 25, 2012.

  1. UnityDigger

    UnityDigger

    Joined:
    Nov 20, 2011
    Posts:
    79
    Hi there.
    Showing first steps.

    source html:
    HTML:
    <html>
     <head>
      <style type="text/css">
       body {background-color:black; font-size:18px; color:white;}
       p {color:lime;}
      </style>
     </head> 
    <body>
      <center><h2>Unity3D HTML Renderer</h2></center>
      <p>This stuff may <font color="#558855">(i think)</font> render some html styles, lists, images, tables, fonts, <a href="somelink">hyperlinks</a> except js,flash and other non-html stuff.</p>
      <p>No dependencies. Managed code. Will work on <i><b>mobile platforms</b></i> without dynamic fonts.</p>
    
    <ol>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
    
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul> 
    
    <p align="center"><font color="yellow">Work in progress</font></p>
    
    </body>
    </html>
    result attached

    Is there someone who interested in that?
     

    Attached Files:

  2. AnomalusUndrdog

    AnomalusUndrdog

    Joined:
    Jul 3, 2009
    Posts:
    1,551
    Really nice. Is that using OnGUI code?
     
  3. SPIKY

    SPIKY

    Joined:
    Dec 19, 2008
    Posts:
    57
    Definitely interested :eek:

    I'm gonna need a basic html renderer for an upcoming project. Need to show text (incl hyperlinks) in a decent layout, loaded from a webservice into Unity.

    What are your plans with this?
     
  4. UnityDigger

    UnityDigger

    Joined:
    Nov 20, 2011
    Posts:
    79
    Yes. But it works in two steps:
    1) parsing and generate gfx-command-queue (drawText(...) fillRect(...) etc) - this step may be placed anywhere (e.g. in Start())
    2) OnGUI (repaint event) stuff plays gfx-command-queue as need (so performance ok)

    Why not? Look at screenshot and example html above.
     
  5. UnityDigger

    UnityDigger

    Joined:
    Nov 20, 2011
    Posts:
    79
    another example

    img src="res:XXXXX" now works and uses Resources.Load(XXXXX) as Texture2D

    source:
    HTML:
    <html>
     <head>
      <style type="text/css">
       body {background-color:black; font-size:18px; color:white;}
       h2 {color:white;}
       h3 {color:lime;}
       h5 {color:yellow;}
      </style>
     </head> 
    <body>
      <center><h2>Unity3D HTML Renderer</h2></center>
      <center><h3>Picture example:</h3></center>
    
      <center><img src="res:pics/platformbanner"/></center>
      <center><img src="res:pics/platformbanner" width="256" height="128"/><img src="res:pics/platformbanner" width="128" height="64"/><img src="res:pics/platformbanner" width="64" height="32"/></center>
    
      <center><h5>Work in progress</h5></center>
    
    </body>
    </html>
    result in attach

    what you think?
     

    Attached Files:

    Last edited: Apr 25, 2012
  6. lilymontoute

    lilymontoute

    Joined:
    Feb 8, 2011
    Posts:
    1,181
    Would this work in the editor?
     
  7. UnityDigger

    UnityDigger

    Joined:
    Nov 20, 2011
    Posts:
    79
    Means [ExecuteInEditMode]? If so, it works.
     
  8. UnityDigger

    UnityDigger

    Joined:
    Nov 20, 2011
    Posts:
    79
    Tables and css-links...
    HTML:
    <html>
     <head>
       <link href="sample.css" type="text/css" rel="stylesheet" />
     </head> 
    <body>
      <center>
        <h2>Unity3D HTML Renderer</h2>
    
    	    <div>Table example:</div>
    	    <table>
    	        <tr>
    	            <td width="200">Cell 0</td> <td width="150">Cell 1</td> <td width="150">Cell 2</td>
    	        </tr>
    	        <tr>
    	            <td>Cell 3</td> <td><font size="24">Cell 4</font></td> <td rowspan="2">Cell 5 and 8 (rowspan)</td>
    	        </tr>
    	        <tr>
    	            <td colspan="2">Cell 6 and 7 (colspan)</td> 
    	        </tr>
    	    </table>
    
    
      <h5>Work in progress</h5>
    </center>
    </body>
    </html>
    $unityhtml3.jpg
     
  9. UnityDigger

    UnityDigger

    Joined:
    Nov 20, 2011
    Posts:
    79
    Developing suspended so far:
    - no interest
    - no free time (my time is too expensive)
    - performance issues: simple pages parser eats 2-3ms, but complex 30-100ms
    - memory usage, it need to be optimized as much as possible, because hypertext engine internally splits content into many-many blocks and words (average page may took 5-20mb of memory)

    Anyway, one day it will be:
    - Unity/XNA/WPF/Silverlight-compatible (any .net/mono platform)
    - Optimized parser (with separate thread support)
    - Optimized memory use
    - CSS21 and HTML4 scissored down for performance

    p.s.: everything is possible, but we do not have time for everything
     
  10. Rigato

    Rigato

    Joined:
    Jun 17, 2011
    Posts:
    5
    I have the interest in your project, or doing it on my own.

    Can you post some code examples or pointing me to the right directions?

    As a downside you stated that doing this on unity is really slow. Would it invalidate the developing of an app? You tested on mobile devices?

    Thanks in advance.
     
  11. monark

    monark

    Joined:
    May 2, 2008
    Posts:
    1,598
    Yes also very interested...
     
  12. votekick

    votekick

    Joined:
    Mar 27, 2010
    Posts:
    104
    Also interested!
     
  13. UnityDigger

    UnityDigger

    Joined:
    Nov 20, 2011
    Posts:
    79
    right directions... well...
    i have in bookmarks:
    there is a box model - http://www.w3.org/TR/CSS21/box.html
    also if you wanna implement tables - http://www.w3.org/TR/CSS21/tables.html
    to implement css parser / engine - http://www.w3.org/TR/CSS21/propidx.html
    etc...

    code examples...
    take a look: one two

    But i trying to make something simpler and effective. Searching different way, so have no any public code examples for now.

    Sure slow, coz i'm looking for best way to do thing.
    My problem in my parsers right now, they creates DOM, that eats memory and ticks...
    Only when DOM is ready, i can generate graphics command queue, and then destroy DOM.
    So after parsing i have just few Kb mem usage.
    It works on mobiles, why not... Usual GUI.DrawXXX calls...
     
  14. UnityDigger

    UnityDigger

    Joined:
    Nov 20, 2011
    Posts:
    79
  15. apologue

    apologue

    Joined:
    Nov 1, 2009
    Posts:
    10
    I am working on a project where I need the flexibility to stylize text and this HTML engine would be perfect for an in-game help system that is offline. Are you making this available for use or charging anything?

    Are there any limits to font sizes or fonts used?
     
  16. UnityDigger

    UnityDigger

    Joined:
    Nov 20, 2011
    Posts:
    79
    1. Look here http://forum.unity3d.com/threads/138885
    2. Unity 4 now features dynamic fonts for mobile games. Render asian characters at any resolution, and use HTML-like markup to control font sizes, weights and typeface selection.
     
  17. stoyannk

    stoyannk

    Joined:
    Oct 30, 2012
    Posts:
    35
    You could try a full fledged HTML-based middleware solution. Check this thread.