[Away3D] [HTML5] 3D website portfolio: renderhjs.net

It has been almost 5 months when I started looking into Haxe and OpenFL and I have been meaning to transition my website from Flash into HTML5 friendly.

Link
you can view the website at:

It is both desktop and mobile friendly. I am still adding project pages this week and fixing issues but it is pretty much ready.

Concepts
In the beginning I had the idea of creating a 3D website that feels more like an app rather than just a website, where each page has some interaction content and my portfolio page resembles an app store.

Below is the image component with 3 images spinning around as you browse through them.

3D Engines
And so early on I tried various 3D engines for Haxe, starting with BabylonHX but I did not manage to compile anything as the library was outdated and hardly documented. Next was Away3D and initially this was also tricky as it was not compatible with the latest version of OpenFL (which is fixed these days :smiley: ). But with enough persistence I was able to eventually create something in Away3D and OpenFL.

Early issues I was facing were how to render text in Away3D, there was a bitmap font library but it was so slow it took at times 6 minutes on a mobile device to parse a page of text. Eventually I came up with the idea of using OpenFL’s textfields and render the text portions into power of 2 textures.

Geometry
For the 3D models I ported a library I wrote in the past to manipulate 2D paths and extrude, fill, inset etc. them. Most of the buttons, panels and backgrounds are created this way, from 2D paths.

3D Icons
One of the features I like a lot are the 3D icons which use transparency but because their mesh is generated I can determine the draw order of the layers (which usually is an issue for transparent textures in 3D). This is similar to Apple’s TVos and iOS 3D icons.

The textures are png images with with a specific height which indicates how many layers it contains

Documents
For the pages themselves I use a custom document format which supports certain tags to indicate UI elements and their parameters. Many of the existing formats such as BBS or html are simply to powerful and xml is to bloated.

I have a debug mode where i can check the layout parsing but for most of the time my pages do not require any complex layout trees and alike.

Things that surprised me with Haxe

  • The compiler is really fast.
  • I love the hxmath library, without it I would not have continued with this project as it makes Vector3 and Vector2 math so much easier and reduces the code bloat.
  • OpenFL is familiar to me and there are plenty of example snippets.

Things that I wish were easier with Haxe

  • Compiling libraries such as BabylonHX and Away3D or finding easier instructions for specific library dependencies.
  • A better or uniform approach for handling high res screens such as mobile phones or modern laptop screens.
  • A more modern API for Away3D, many of it’s core methods and storage are in x,y,z triplets stored but having used API’s like Unity where there are Vector3 objects makes development so much easier and require far less boilerplate code.
  • At times a build gets stuck in either debug or release mode and I have to delete folders to free the localhost cache.

Libraries that I used

  • OpenFL for the events, fonts and framework
  • Away3D for the 3D viewport, materials
  • hxmath for the 2D and 3D math, mostly involving Vector3, Vector2 and rect operations.
  • mloader to bulk loading dynamically assets, not all in advance.
  • thx.color for color interpolations
  • actuate tween animations for buttons and panels
8 Likes

I think you will need to use canvas tag while compilation, as I see the website blank on firefox on mac. On windows it’s fine. :slight_smile:

@VishwasGagrani That’s odd, it looks fine here on 3 platforms with the latest Firefox:

  1. Windows
  2. Android
  3. OSX

I’ll have a look later today if I can reproduce the bug, thanks for letting me know

My mac is El Capitan, 10.11.6 and Firefox is 53.
This problem ( blank page ) occurs every time with my builds on all browsers using Mac, if I don’t use canvas tag. The page shows blank, however the buttons will click, if I try to click randomly on that page and sound too will play fine. It’s just, that the content doesn’t show at all.

As soon as I use canvas tag, it displays fine. In your case too, I think, that you have not used canvas tag in the project.xml .

The content also doesn’t show for me on Windows with Chrome 58.0.3029.110

So WebGL is not working on your browser with OpenFL? Is there an error in the browser console? Does WebGL work on other sites on your system?

Do you get an error in the browser, or does WebGL work on other websites for you?

It works fine on Firefox but on Chrome the content is clickable but not visible. I got no errors. Other sites with WebGL are working ok.

EDIT: Anyway, since I got it running on Firefox I must say that the portfolio is awesome. Love the 3d buttons. Will have to take a deeper look at the tools.

I checked the status on this website:
https://get.webgl.org/
It says that my browser supports webgl. Also it shows the rotating cube.

I checked console for the website http://renderhjs.net , here is the log:

Error: WebGL warning: texImage2D: Conversion requires change inalpha-premultiplication.  portfolio.js:1:2394037
Error: WebGL: No further warnings will be reported for this WebGL context. (already reported 32 warnings)  portfolio.js:1:2394037
XML Parsing Error: not well-formed
Location: http://www.renderhjs.net/load/menu.xml?309
Line Number 17, Column 21:

Hi VishwasGagrani,

I switched the project settings to not force DOM and instead enable webGL with the build parameters. It changed some of the scale behaviors but I managed to fix issues so far.

When I now trace out the render target using

trace(Lib.current.stage.window.renderer.type)

I get OPENGL instead of previously DOM. Does that fix it on your computer? And thanks again for your feedback.

On another note, I have been working on a 3D model loader for some of the pages, it’s not yet live but the idea is to showcase some specific work or ideas as 3D models

I have been using Blender to convert the models and export them as binary *.3ds files which compress the models down really well.

No, it’s still showing white page. As I said, it’s webgl that causes issue. So you may need to use this:
<haxedef name="canvas" />
inside project.xml

I understand though that it may stop showing features on your website dependent on webgl, or probably affect the performance. But that’s what I switch to in my projects, otherwise it does not show on my mac browser.

This website uses Away3D, which (in turn) uses Stage3D, which requires hardware acceleration. We’re not going to see a 2D canvas version of Away3D, probably, ever.

Why don’t we create a new topic where we can discuss why “DisplayingABitmap” or “PiratePig” don’t work with -Dwebgl on your machine (or just certain browsers?) if it effects all projects?

@renderhjs Just in case someone visits your project without WebGL support, perhaps you should have some kind of “this website requires WebGL” message. As for the “WebGL is supported, but displays nothing” scenario, we’ll try and sort that out on another thread :slight_smile: