[webGLviewer] - Yet another WebGL viewer

[Jakub Trznadel]

Hello,

I was looking for some topic to play with WebGL recently, and found out LDraw file format to be simple and interesting to implement as a exercise.

You can check my result at:
http://trybikowo.pl/ldraw/

I am a little bit involved in mindstorms/WeDo-based education projects. My goal is to add some animations (at least) or (even) control to the models. A kind of exercise for children that participates in workshops which can be done at home.

All feedback is more than welcome

Best regards,
Jakub Trznadel

[Steffen]

Cool! Just for completeness, so this is the 3rd available WebGL renderer now, right? The other 2 are AFAIK

WebLDraw
http://forums.ldraw.org/showthread.php?t...1#pid12741

brigl
http://forums.ldraw.org/showthread.php?t...35#pid6835

Did I miss one?

[Philippe Hurbain]

Cool! One major issue (for me): model rotation si MUCH too fast and sensitive! loading time could be improved too

[Jakub Trznadel]

I have corrected mouse-rotation model to be less-sensitive.
I also added control via keyboard arrows with some dynamics. This is actually quite fun to play with now.

Loading time was improved. I have used sylvester.js to do geometric transformations during loading, and it could take about 15s on big model only due to its slowness. I typed geometric ops by hand and it improved the loading speed by about 20x.

Hovewer, I also added 2 post-loading steps: normals smoothning and alpha sorting. First makes phong-shading instead of flat in models. Second moves rendering of elements with alpha (windows, etc.) to the end, so there shall be no shadowing of elements with alpha-windows. After adding them loading speed shall be still improved by about 10 times since original one.

---

Most of the effort however I put on mindstorms-like programming capabilities. Currently one model supports it:
http://trybikowo.pl/ldraw/index.html?leg...omabot.dat
In this mode bottom part of the screen is used by mindstorms-style programming blocks.
Model used is Damien Kee domabot design, which I like very much due to its simplicity.

I look forward for any feedback :-)

Regards,
Jakub Trznadel

[Magnus Forsberg]

Is it just me, or why do I find it counterintuitive?
When I try to move it clockwise it goes counterclockwise.

[Philippe Hurbain]

Conterintuitive is a bit strong. Non standard would be better, I didn't noticed this before your message. But then I am quite ambidextrous with all the benefits and problem it suggests

About the viewer now... phong shading look great ! But it seems there are still problems with transparency, the NXT screen lets see the guts of NXT despite there is a light green surface behind that should prevent see through.

And the behaviour simulator is awesome - Though it seems that the action performed when pressing the pause button is repeated on and on...

[Jakub Trznadel]

Magnus: this is a good comment from my perspective - it points me something that I would never think of that could be fixed easilly. Thanks!

Phillipe:
Some of the rendering features (like alpha sorting, solid lines) are disabled for models with mindstorms simulation (temporarily, for technical reasons). That's why alpha in domabot was rendered incorrectly. I changed the order in NXT brick to overcome that in this one-specific situation.

Pause-button behaviour should be better now

---

New things in renderer:
- Solid lines are rendered now upon "toggle wire" button press,
New things in NXT sim:
- basic colour sensor simulation (black&white, in wait block),
- default program for domabot design is now line follower,
- color sensor and distance sensor views,
- render mode: depth (for distance sensor principles of working demonstration).

Comments welcome

Regards,
Jakub

[Tim Gould]

Firstly, bI love how WebGL is now giving us LDraw in the browser So thanks to you and the other developers for your work on these renderers.

I've not managed to actually look at any models yet. But (in part because of this) I do have a little suggestion.

Some form of activity on the loading screen would let me know if the model is actually loading, or if NoScript has cancelled all scripts on the page. A crude XX% counter would be ideal.

I look forward to testing out the actual program

All the best,

Tim

[Jakub Trznadel]

Tim,

I've added name of currently loaded file to loading screen.

Hovewer one big problem is that meshes generation & normals smoothing & alpha sorting can take up to 10s for big model (like 10185 - green grocer.mpd). I have no good ideas how to speed some steps up: one-dimension sorting of vertices is taking 4s (sorting about 10^7 elements) using js built-in sort. And, unfortunately, during these steps no screen refresh can be made.
For smaller models generation is instant from human perspective

---
New things that I added recently:
- dropfile-box support allows drag&drop of model into viewer,
- support for optional lines,
- handle screen resizes,
- switch between perspective/orthogonal view,
- a lot of bugfixes, especially related to rendering

Comments are welcome

Regards,
Jakub

PS. Sample renders from http://trybikowo.pl/ldraw/

[Jakub Trznadel]

All,

I've updated my webgl viewer. Bugfixes & enhancements include:
- proper color handling for lines and optlines,
- faster loading,
- support for steps,
- nicer interface:
-- buttons for ortho/perspective switch,
-- render options:
--- transparent wireframe,
--- wireframe,
--- full phong-shaded model,
--- full (phong+wireframe).
-- steps button: go to first/prev/next/last step.

At the moment all ldraw.org and ldcad models are rendered properly. Datsville models are available also, but probably rendering whole city will not be possible in current generation hardware.
_webglviewer-specific models (animated/nxt-style programming) does not support currently all render options, there are still todos.

All comments are welcome

Regards,
Jakub Trznadel

Screenshot:

[Steffen]

☆☆☆ beautiful. ☆☆☆

thanks a lot for your work

[Steffen]

I just had it run on my Android tablet. I discovered these problems:
The fixed layout doesn't fit to my screen, I have to scroll the browser to see all buttons at the right.
The "mouse", i.e., finger touch sensitivity when rotating the model is too high,
I can not really control it, it jumps around weirdly.
I am missing zoom out and zoom in buttons OR support for using my fingers for that.

[Roland Melkert]

Very nice indeed,

One downside I had to use firefox as it doesn't seem to work with my main browser: seamonkey.

[Jason Smith]

I can't get it to show my model in either FF or Chrome. The info screen states that it's loaded and but nothing to look at.

I'm on Ubuntu 12.04LTS

[Philippe Hurbain]

it doesn't seem to work with my main browser: seamonkey.

Confirmed. It worked with previous version...

[Jakub Trznadel]

All,

My main browser if firefox, and I rarely check compatibility. One thing that I were aware of is problem with iPad safari, but I don't have one to fix it.
Thanks a lot for checking :-)

---[ status ]---

I fixed compatibility problems with:
- windows: seamonkey,
- linux: firefox/mint (probably will fix ubuntu issues),
- android: chrome.

I also added: support for touch events on android tablets.

Currently I don't have good idea how to handle smaller screen sizes with fixed layout on android. It will be probably not a problem when I will introduce floating toolboxes. One hint that could help: use vertical orientation of tablet, it fits nicely then.

Regards,
Jakub

[Michael Horvath]

Could you add the option to use latitude and longitude rotation like in LDView?

Also, is it possible to disable the command bar on the right?

Thanks.

[Jakub Trznadel]

Michael, All,

I've added double-click to toggle 'full-screen' mode, effectively disabling right bar.
Lat-lont rotation, and shift move was added.

Plus one model based on WeDo set, with complicated kinematic solution.

Regards,
Jakub

[Jason Smith]

I fixed compatibility problems with:
- windows: seamonkey,
- linux: firefox/mint (probably will fix ubuntu issues),
- android: chrome.

Seams to work trouble free in FF on my Ubuntu Rig.

In Chrome however when I go into wireframe mode it looks like below and then I can't ever get back to solid mode:

[Jakub Trznadel]

I reproduced the issue. It is caused by optional lines shader. Once the optional shader program is in use, no other shaders appear to produce any output. This is what is visible on your screenshot: only optional lines.

I do not see any particular reason for it to behave weird. Possibly this is due to opengl driver in linux chrome. Optional lines vertex shader uses more parameters than usual (4 <xyz> vector points instead of 1), and I know that at least one other configuration (safari@iPad) does not support it at all.

My reproduction setup: chrome@ubuntu 12.04.05 under virtualbox, fresh install.

I will try to figure out what is wrong and if it is possible make it working.

Any hints appreciated...

Regards,
Jakub

[Steffen]

I just verified that the renderer works well in
- Firefox 30.0
- SRWare Iron 38.0.2050.0 (295000)
on Windows 7 64bit

This is totally impressive.
I clicked the green arrow pointing right and just watch the animation go.

However, the lat/lon rotation mode is not at all working like LDView,
and this feels very weird to me when viewing a model:
Sometimes when I move the mouse left and right, the model rotates even up and down.
This is probably due to the fact that not a real lat/lon rotation was implemented.
Can you make it work _exactly_ like in LDView?
Maybe you can sneak a view into LDView's source code or contact Travis
http://ldview.sourceforge.net/Downloads.html#SourceCode
I always imagine the latitude / longitude mouse rotation mode like this:
I imagine the model to sit in a sphere.
When I move the mouse left and right I expect the sphere to rotate left/right.
When I move the mouse up and down I expect the sphere to rotate up/down.
EDIT: my bad. I hadn't chosen the rotation mode in the right panel

Could you maybe also add an option to invert the mouse wheel?
When I roll it "up" I want to zoom in,
when I roll it "down" I want to zoom out.
Currently, it works the exact opposite.

The renderer already works very well for me. The next things I would *love* to see are
- primitive substitution, i.e., replace a 4-4cyli by a "real" OpenGL cylinder and so on
- LEGO logo on the studs (maybe you can add an option which toggles putting a texture there)

[Roland Melkert]

The edges aren't fully working for me too (on seamonkey), they look somewhat corrupt or out of order or something.

I do like the animation, is the behavior of 'oilrig' scripted or is it a generic solver?


edit, a pic of what I mean concerning the lines:

  lines.png (Size: 126.23 KB / Downloads: 27)

[Jakub Trznadel]

There are two different renderer algorithms at the moment:
- normal,
- for animated models.

Normal algorithm is the best renderer, while animated renderer allows animation. They will be merged in the future.

At the moment animated renderer:
- does not handle lines at all. Line mode is rendered based on triangle list (totally wrong),
- does not sort alphas.
- have other bad behaviours
- ... but allows faster prototyping,
- ... and handles animation.

I am working to get this unificated, but currently I prefer to do rather some research on animation/cinematic solver. I do have no experience on it, but would love to have some "common" standard. So I have to learn, first.

---

Small off-topic, but maybe somebody will have anser for me: is there a documentation for ldraw.xml transformations?
I have one model in test section that seems to work, but another one is totally broken. The page I found does not anser all my questions... ;-(

And it seems reasonable to support both ldd-world and ldraw-world projects as for renderer it will make no difference.

Thanks,
Jakub

[Jakub Trznadel]

For the animation question (.mpd fragment)

0 MOTOR_AXLE 33 1 -3.14159265/2+calc_atan2(200+80*calc_ecos(0,0.041666666),168+80*calc_esin(0,0.041666666))+calc_angle(140,calc_dist(200+80*calc_ecos(0,0.041666666),168+80*calc_esin(0,0.041666666)),240)
1 16 120 -320 -10 1 0 0 0 1 0 0 0 1 hammer.ldr
0 MOTOR_AXLE 32 1 3.14159265+calc_angle(140,240,calc_dist(200+80*calc_ecos(0,0.041666666),168+80*calc_esin(0,0.041666666)))
1 16 -20 -318 -35 1 0 0 0 1 0 0 0 1 arm_complicated.ldr
0 MOTOR_AXLE -1
0 MOTOR_AXLE -1

where:
function calc_angle( A,B,C) { return Math.acos( (A*A+B*B-C*C)/(2*A*B) ); }
function calc_dist( X,Y) { return Math.sqrt( X*X+Y*Y); }
function calc_atan2( X, Y) { return Math.atan2( X,Y); }
function calc_esin( ref, scale ) { return Math.sin( Mec.eRot[ref]*scale ); }
function calc_ecos( ref, scale ) { return Math.cos( Mec.eRot[ref]*scale ); }

I'm not happy with current solution, it seems to be extremly complicated. I am definetly going to change it to more sane way... but not sure if I will go as far as to get "generic" constraint-based algorithm.

Engine rotation control is left to NXT-style programming language at the bottom of the page. My idea is to expose simple NXT-style language to user (I want it to be used by childrens) while hiding internal complications.

Regards,
Jakub

[Magnus Forsberg]

Hi Jakub,

I don't know if this is anything close to what your asking, but many years ago I sent the attached document to Mike Gallagher.
He is the manager of, and are still developing the current conversion file ldraw.xml.

It created some fuzz and triggered some activity in his team. I'm still wondering what I had stumbled on, but they seamed to be very interested. I'm no programmer, nor any good at math, but it has been fun to see how the ldraw.xml-file has been continually developed over the years.

I can only hope it helps you too.

[Jakub Trznadel]

Thanks! It gave me some hints.

Hovewer, still it was hard task to get this working... that is, as far as I understand, Y and Z axis have different orientation in ldd than in ldraw. Plus I had to figure out correct operations sequence...

In case anybody will be interested, please find the conversion algorithm below.

Webgldraw viewer can now render simple .lxf/ .lxfml files (complicated ones with problems). Drag&drop is supported.

Regards,
Jakub

---------------------------------------------------

/* Create: rotation matrix from ldraw.xml definition */
var rotMat = Matrix.Rotation( objdef[6], Vector.create( [objdef[3], objdef[4], objdef[5]] ) ).ensure4x4();

/* Create: shift matrix from ldraw.xml definition */
var shiftMat = Matrix.I(4);
shiftMat.elements[0][3] =-objdef[0]*scale;
shiftMat.elements[1][3] = objdef[1]*scale;
shiftMat.elements[2][3] = objdef[2]*scale;

/* Get parameters from lxmf. */
E.elements[0][0] = parseFloat( t[0] );
E.elements[0][1] =-parseFloat( t[3] );
E.elements[0][2] =-parseFloat( t[6] );
E.elements[1][0] =-parseFloat( t[1] );
E.elements[1][1] = parseFloat( t[4] );
E.elements[1][2] = parseFloat( t[7] );
E.elements[2][0] =-parseFloat( t[2] );
E.elements[2][1] = parseFloat( t[5] );
E.elements[2][2] = parseFloat( t[8] );
E.elements[0][3] = parseFloat( t[9] )*scale;
E.elements[1][3] = parseFloat(-t[10])*scale;
E.elements[2][3] = parseFloat(-t[11])*scale;

/* Calculate final matrix. */
var fin = E.multiply( rotMat.multiply( shiftMat ) );

/* Now: write ldraw format */
l=fin.elements[0][3] + " " + fin.elements[1][3] + " " + fin.elements[2][3] + " " +
fin.elements[0][0] + " " + fin.elements[0][1] + " " + fin.elements[0][2] + " " +
fin.elements[1][0] + " " + fin.elements[1][1] + " " + fin.elements[1][2] + " " +
fin.elements[2][0] + " " + fin.elements[2][1] + " " + fin.elements[2][2];

[Jakub Trznadel]

Do you experience incorrect wheel feeling using chrome or other browser?
(chrome does handle wheel differently than other browsers)

---
What do you mean by OpenGL cylinder? OpenGL does not have mesh primitives (GLU does). At least: as far as I know.
However, if there is a ldraw library with higher mesh density I can install it and made an option to use it.

---
The same goes to Lego-logo. It can be achieved using lines with different studs primitive, even without textures. But I cannot figure out by myself if it violates LEGO copyright or not... (any hints on that?)

Regards,
Jakub

[Steffen]

cool, this way yours has become the first WebGL viewer for LDD models.

[Steffen]

yes, indeed, the mouse wheel behaves like I asked for in firefox,
but in SRWare Iron, it works opposite...

[Michael Horvath]

Maybe you could put a small icon in the corner of the screen to toggle the command bar on and off?

Also, can the command bar be configured to be minimized/hidden initially?

BTW, the frame rate is very good.

[Jakub Trznadel]

I've reversed wheel for chrome. Not sure if it will work for SrWare Iron. (hopefully it will)

Regards,
Jakub

[Jakub Trznadel]

There is 'fullscreen mode', which you can enter by double-clicking on model.

I cannot add 'fullscreen mode' button without adding 'exit fullscreen' button and for that, I have to add another layer above 3d canvas. This is planned, but not available at the moment.

Full-screen mode can be entered upon startup by adding &fullscreen=1 tag to the url. For example:
http://trybikowo.pl/ldraw/index.html?leg...utostart=1

Hope this helps.

Regards,
Jakub

[Jakub Trznadel]

All,

Couple of updates.
- webgldraw viewer can now render simple ldd models (lxf, lxfml) ( example ). Complicated ones with problems (example ),
- webgldraw viewer have now simplified mode for huge models ( 10179.ldr ). Try at your own risk, it can crash your PC It seems to work under firefox with about 5fps@Radeon HD 5670. Chrome renders it very slowly (one fps per 10s about). In simplified only flats are rendered, without lines.
- optlines and lines shall now render properly in animated models, ( roboarms.mpd )
- chrome wheel direction problem shall be fixed,
- slightly better handling of rotations,
- other small bugfixes (handling of touch events in android, etc.)

Regards,
Jakub

[Jakub Trznadel]

All,

I have added possibility to generate instruction from within webgldraw viewer - I have added 'lpub' button on the right to generate preview under the animated model. After generation, it can be changed in wysiwyg manner.

Most of options are available under right-mouse button click, specifically: 'get instruction' creates web page that can be printed as a instruction (using pdf printer to generate pdf).

Generator support some syntax from another apps:
- ROTSTEP - (uses different coordination than lpub currently),
- !LPUB MULTI_STEP BEGIN
- !LPUB MULTI_STEP END
- !LPUB MULTI_STEP ALLOC HORIZONTAL
- !LPUB INSERT PICTURE ...

New syntax command was added to define final canvas size for rendering:
- !GLV canvas_size 1200 848

BUFEXCH and ghosts are not currently available, also - I am still working on it.


Example:

For model defintion:
http://trybikowo.pl/ldraw/obj/models/_we...hooter.mpd

animated/live version is available at:
http://trybikowo.pl/ldraw/index.html?leg...hooter.mpd

...and generated instruction:
http://trybikowo.pl/ldraw/shooter.pdf

---

And - of course, a lot of bugs were fixed;

I look forward for any feedback

Regards,
Jakub

[Philippe Hurbain]

Wow! impressive work again The arrow/text generator is a killer by itself... Of course it is not utterly fast (LPub is not either but it gets the job done. I tested with Seamonkey and Chrome.
- Edge lines seem much better with Seamonkey (antialiasing?)
- But on some parts (NXT itself, NXT motor) I get stray lines (from several spots inside NXT to origin I guess) that I don't see in Chrome.
- In Chrome, the context menu of instructions appears on top of (long) scrollable screen, not in current position
- Size and orientation of building instruction depends on viewer angle/scale. I think that for repeatabiity it should depend only on fixed numerical values (menu?)
- What is the suggested method to grab the images and make a pdf? when I "get the instructions" and save page, image are embedded in file as uuencode.

[Jakub Trznadel]

Phil, All,

I confirm, and will take care of:
- difference in rendering between seamonkey/firefox and chrome.
- chrome menu position problem.

Was already on my TODO list:
- currently STEP command does render current live model position, while ROTSTEP defines it precisely.
This behaviour will change: STEP command will use some predefined fixed position (which can be changed in real time or by ROTSTEP).
Also 'zoom' floats at the moment. I do not have good idea what good zoom shall be at the moment;
Not sure if there is any standard (or good lpub practice) for it?

I cannot reproduce:
- stray lines... could you provide a screenshot(s)?


For printing:
I print the generated instruction webpage rather than save it. I use either Foxit reader PDF printer or PDFCreator as a printer to get PDF;
I will probably also add .cbr/.cbz file generation - this is standard format for comix; from technical point of view: a zip file with images inside.

Thank you for positive feedback

Regards,
Jakub

[Philippe Hurbain]

Hi Jakub,
- As for orientation, LPub defaults to standard two-thirds view:

  twothirds.png (Size: 21.57 KB / Downloads: 28)
- I don't know about default scaling, but you can change zoom factor (0 !LPUB ASSEM MODEL_SCALE LOCAL 2.0000 , 0 !LPUB ASSEM MODEL_SCALE 0.5000)
- Here is composite image for the stray lines I see in Seamonkey:
   
- Indeed PDF creator works fine here. I was afraid to get page breaks in the middle of images, as it occurs so often... Nonetheless, saving directly images gives more freedom.
- Speaking of pages, do you noticed that page numbering is slightly weird? eg. we jump directly from page 0 (...note that traditional page numbering starts at 1 to page 3...

[Michael Horvath]

This happens when you flip a model upside down. I.e. when you spin an upside-down model it spins in the wrong direction (at least in latitude/longitude mode).

Maybe the program needs a gimbal lock like in LDView?

[Michael Horvath]

Could you add hotspots as well that allow the viewer to travel through a model, such as in this Flash scene?

http://isometricland.net/lego/legopanotour.php

Also, could you write a tutorial showing how to install the program on my website?

Thanks.

[Jakub Trznadel]

Regarding installation question. (and sorry for late reply, I had to prototype a little bit before replying)

Simple answer is that I still feel that it is not mature enough to prepare 'installation package'. I think that it is early alpha version, even that it is functional.

However, if you want only to use it on you page without installation and with minimal effort, I prepared simple example how to do this using XMLHttpRequest to get the mpd file... It is available here.

Or even simpler - try the code I pasted below:

Code:

<iframe id="renderedScene" src="http://trybikowo.pl/ldraw/index.html"
  onload='document.getElementById("renderedScene").contentWindow.postMessage(
   "1 15 0 24 40 1 0 0 0 1 0 0 0 1 53788.dat",
   "http://trybikowo.pl/ldraw/" )'
  width=640
  height=640>
</iframe>

If you anyway prefer to install, I'll try to prepare such package for you and I would like to asist with installation.

Regards,
Jakub

[Steffen]

update:

LDRAW Visualizer
http://forums.ldraw.org/showthread.php?t...0#pid16700

[Michael Horvath]

I just tried this viewer again and it seems much improved.

Just a note that "datsville.ldr" is not loading any submodels. It is the main wrapper object for the whole town. Loading and viewing the sub-models individually works OK.

Also, this page does not explain things well:

http://trybikowo.pl/ldraw/help/external_use.html

Where do we put the MPD files? I am assuming you have other scripts and icons and such. Where do we download these?