LDraw.org Discussion Forums
[webGLviewer] - Yet another WebGL viewer - Printable Version

+- LDraw.org Discussion Forums (https://forums.ldraw.org)
+-- Forum: LDraw Programs (https://forums.ldraw.org/forum-7.html)
+--- Forum: LDraw Editors and Viewers (https://forums.ldraw.org/forum-11.html)
+--- Thread: [webGLviewer] - Yet another WebGL viewer (/thread-14195.html)

Pages: 1 2 3 4 5

[webGLviewer] - Yet another WebGL viewer - Jakub Trznadel - 2014-10-14


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:

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 Smile

Best regards,
Jakub Trznadel

just for completeness - Steffen - 2014-10-16

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



Did I miss one?

Re: [webGLviewer] - Yet another WebGL viewer - Philippe Hurbain - 2014-10-17

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

Re: [webGLviewer] - Yet another WebGL viewer - Jakub Trznadel - 2014-10-26

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. Smile

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:
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 :-)

Jakub Trznadel

Re: [webGLviewer] - Yet another WebGL viewer - Magnus Forsberg - 2014-10-26

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

Re: [webGLviewer] - Yet another WebGL viewer - Philippe Hurbain - 2014-10-27

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 Wink

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 Wink - Though it seems that the action performed when pressing the pause button is repeated on and on...

Re: [webGLviewer] - Yet another WebGL viewer - Jakub Trznadel - 2014-10-29

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!

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 Smile


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 Smile


Re: [webGLviewer] - Yet another WebGL viewer - Tim Gould - 2014-10-29

Firstly, bI love how WebGL is now giving us LDraw in the browser Big Grin 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 Smile

All the best,


Re: [webGLviewer] - Yet another WebGL viewer - Jakub Trznadel - 2014-11-01


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 Wink

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 Smile


PS. Sample renders from http://trybikowo.pl/ldraw/
[Image: ldraw_example.png]
[Image: ldraw_mindstorms.png]

Re: [webGLviewer] - Yet another WebGL viewer - Jakub Trznadel - 2014-11-16


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 Smile

Jakub Trznadel

[Image: screenshot1.png]