Yet another WebGL-based renderer?
2014-03-16, 20:07 (This post was last modified: 2014-03-16, 20:07 by Sebastian Wahl.)
2014-03-16, 20:07 (This post was last modified: 2014-03-16, 20:07 by Sebastian Wahl.)
So why you might ask, to be honest I'm not quite sure. Nevertheless, it happened and you can find a very early version here: http://webldraw.spillerrec.dk/ (Source on Github: https://github.com/spillerrec/WebLDraw )
I have only spend a week on this so far and this is the first time I done something more advanced than a triangle with OpenGL, so this is very rough implementation. This is also written in Dart, which again I have never messed around with before.
Quick overview:
Issues:
I intend to look into network performance as having to do a 100 requests to get all the parts used in a model is just bad. Not surprisingly, I want them to appear as quick as possible on my website. Actually, I think the best solution is just to embed all the parts into one MPD file and configure the server to send it GZIPed.
Another thing that could be fun would be to make a browser extension to show .ldr and .mpd files in 3D, instead of just text. Don't really know how much you can do with extensions, but I would be surprised if that is not possible.
I have only spend a week on this so far and this is the first time I done something more advanced than a triangle with OpenGL, so this is very rough implementation. This is also written in Dart, which again I have never messed around with before.
Quick overview:
- Understands all the basic LDraw stuff, i.e. anything else than META commands
- Basic controls, left-click rotates, middle click moves and right-click zooms.
- Fullscreen support, hover over the canvas and press 'F'. Want to have a button, but not sure where I should get the icon from... Seems only to work in Chrome now that I tried it again, I have to check up on that.
- MPD support
- Simple to embed on a page, add: <div class='webldraw' data-file="X.ldr"><canvas width=X height=X>fallback message</canvas></div> and the script will do the rest.
Issues:
- No rendering of optional lines, I have to learn more about OpenGL to figure out how this should be done
- Transparency is buggy
- Zooming with scroll-wheel doesn't work because a bug in dart2js
- It looks absolutely horrible in Opera 12, and I'm not really sure why. Looks much better in Firefox and Chrome. Anti-aliasing is turned of in Opera, but I wonder if that is the only cause.
- Some lines are not clearly visible
- Potential race-condition during loading when having multiple models on one page.
- No progress bar when loading, that is next up on my list. Also I suspect the conversion can be a bit slow, but I need to profile it.
I intend to look into network performance as having to do a 100 requests to get all the parts used in a model is just bad. Not surprisingly, I want them to appear as quick as possible on my website. Actually, I think the best solution is just to embed all the parts into one MPD file and configure the server to send it GZIPed.
Another thing that could be fun would be to make a browser extension to show .ldr and .mpd files in 3D, instead of just text. Don't really know how much you can do with extensions, but I would be surprised if that is not possible.