Terrain Rendering and GUIs with WebGL | Hacker News Reader

Terrain Rendering and GUIs with WebGL

zephyrosanemos.com

128 pointsdshankar47 comments

I know not everything needs to be opensource but I can't shake the feeling that this project could be taken very far with a github link :)

I don't understand why you wouldn't just use plain dom+css to render the gui ?! What's the benefit to recode the gui in WebGL ?

The author mentioned in the post that he didn't know anything about the dom at the time of writing it.

interesting decision: learning dom+css vs rewriting a complete UI layer in webgl.

lol, tells you much about the DOM and CSS, hu? ;)

DOM isn't so much an issue, and actually makes a lot of sense when you think about the requirements it has to fulfill. It's just that no two browsers do it the same.

I personally consider DOM and CSS as the least-evil-of-all-options for doing cross-platform UI. Not that a better solution couldn't be made, but all other current solutions for the type of software I want to make are worse than DOM in some way.

Same here :)

I don't know if this was at all on the author's mind, but by implementing the GUI in WebGL vs. DOM, they can now composite the GUI with the scene, rather than the GUI being strictly limited to the front of everything 3D. It's why I wrote Primrose[1], as source control editor that renders to Canvas instead of DOM. I intend to toss these things into 3D space.

[1] shameless plug: http://capnmidnight.github.io/Primrose/

In your case it makes perfectly sense; except in the case of this topic the controls all seem to be overlays i.e. are never part of the scene.

The GUI alone is worthy of its own article. Holy crap.

I really like the ui, but one difficulty I found with implementing ui in webgl is supporting the input box, especially input box that can accept Asian languages.

I couldn't see an example of input box on this page. I'm wondering if it is doable.

That GUI is seriously impressive, especially the tile loading progress animation. He must be a truly talented developer that he came up with this soon after deciding to give web development a try.

He is a developer experienced with OpenGL on the desktop. From experience it's not a terribly difficult leap to WebGL.

Right - at the end he says "Oh I've been a developer on this CAD software for the past ten years"

Great stuff and write up. What's the performance bottleneck? I feel like with all the LOD stuff you implemented this should be butter smooth

It is butter smooth @ 60Hz on my laptop with poor Intel graphics

This isn't GPU intensive at all, but there's a lot of software and CPU overhead in WebGL compared to native OpenGL. This depends on your browser, the WebGL backend it uses (that would be Angle+Direct3D if you're on Chrome on Windows) and your CPU.

I got 24 fps with my high end GPU (and bad stuttering) with an old, poor CPU on Linux + Firefox. GPU is practically idle, but CPU is at 100% and fans are yelling.

Is butter actually smooth? In my experience butter is full of fat and hard to spread when it comes out of the fridge. Kinda the opposite of my reaction to this web app.

You don't eat butter fast enough to keep it out on the counter?

Many idioms are older than refrigerator technology. Butter is meant to be served at room temperature. A vessel called a butter crock preserves butter at room temperature by using a thin layer of water to create an airtight seal around an overturned cup of butter: http://i.imgur.com/oiNjjaW.png

This is really cool, locks up the tab in Safari 8.0.2 once in awhile though.

Also, the brushed metal is a nice nod to the late 90's.

Why Delphi for generation the terrain?

At the bottom of the page :

>During the last decade, I've helped build Anadelta Tessera, a desktop road design CAD written in Delphi.

Wow, it boggles my mind to think what we can do in a browser these days...

It can do more than you can imagine!

Yes, I'm heating the room I'm in with this thing :-)

Joking aside, I love it - I remember spending hours rendering generated terrain with... uhm, I can't remember right now, this was about 20 years ago :-/

I remember that too, but I too don't remember the name - David, we're getting old :)

fractint? http://en.wikipedia.org/wiki/Fractint

I remember this one too, but there was something specific for terrain, that at the time looked really impressive. Well, I'll think about that another time ;)

KPT Bryce?

VistaPro?

I remember that on the Amiga, it was fun to watch it rendering the landscape

That's the one I remembered! I was a great Amiga guy :D

Anything is possible, as long as it's doable with a subset of a subset of OpenGL designed for 8 year old mobile hardware :P

Unfortunately, WebGL hasn't been updated in a while and it is badly outdated. There's a bit of a mismatch between providing low level access to the GPU and allowing to run untrusted content from the Web. This has performance implications, particularly with this example that generates geometry dynamically.

There's a decade's worth of new graphics features that aren't available via WebGL, even though the hardware supports it (even mobile phones these days).

I am getting less than 25 frames per second and I have a high end GPU. This should easily run at 60 fps and have plenty of idle time (for CPU and GPU). Now it's consuming a lot of CPU and fans are spinning up.

I really hope that WebGL gets a long awaited update, and that there will be better sandboxing techniques employed. The issues with security can't be solved at the browser level alone and there's quite a big performance hit when done at that level.

There is hardware/driver level support for some of the security issues (via OpenGL robustness extensions), but even when they are available, there's still a redundant layer of userspace security applied.

This leads to some ridiculous implications when developing WebGL content, e.g. indexed rendering (glDrawElements) can't really be used (esp. with dynamic content) because the index buffer has to be inspected (with the CPU) for out-of-bounds indices. There is hardware support for bounds checking in many new GPUs (desktop and mobile) and it's easy to detect, but none of the popular implementations rely on that even when available.

WebGL might be impressive in the browser but unfortunately it's roughly equivalent to what was available on the desktop in 2004 and on the mobile in 2010.

Strange, the demo runs perfectly at 60fps on my 2012 MacBookPro with Intel HD4000 in Chrome, is your browser and graphics driver uptodate?

The new performance implications introduced by WebGL (like that dynamices indices are bad) are quite similar to restrictions of other platforms (for instance on tiled platform like PowerVR, any sort of transparency is much more expensive then on other platforms because it kills the per-tile hidden-surface-removal, etc). Basically, each GL platform has other performance characteristics that applications need to be aware of, write-once-run-(perfectly)-everywhere was never true for any 3D API, and WebGL is not different.

I think that WebGL+extensions provide a pretty good basic feature set for 3D apps and games, of course it could be better, but given the fact that WebGL needs to serve the widest range of target platforms of ANY 3D API, and it's miles better then no GPU access in the browser at all.

BTW, WebGL2 can already be tested in Firefox, this brings WebGL to the OpenGLES3 feature set: https://wiki.mozilla.org/Platform/GFX/WebGL2

Yes, I'm up-to-date but in my experience Firefox has a worse WebGL implementation than Chrome. Didn't try with Chrome. I also have a not-so-great CPU (but a high end GPU) so that affects too. In any case, my computer is able to run quite high end games, it should easily be able to run a simple terrain demo if it weren't for the overhead.

There's certainly different performance characteristics in different OpenGL implementations (ie. GPUs) but WebGL overhead comes on top of that. So in addition to the performance characteristics of the GPU itself, you have to think about the browser's software implementation too.

WebGL is definitely a welcome addition to the facilities available in the browser, but getting more up-to-date features would be nice. And using the security features (especially bounds checking) of the hardware if available to avoid unnecessary overhead would make it a lot more appealing.

Have you checked to make sure that hardware acceleration is enabled?

http://blog.mozilla.org/joe/2010/11/10/how-to-tell-if-youre-...

WebGL 2.0 which is OpenGL ES 3.0 is soon. :) https://www.khronos.org/registry/webgl/specs/latest/2.0/

Now someone needs to implement it, whereas I can use OpenGL ES 3.1 today.

https://wiki.mozilla.org/Platform/GFX/WebGL2

Although I haven't even seen a demo that uses it yet.

Looks very experimental to me.

> Unfortunately, WebGL hasn't been updated in a while and it is badly outdated

WebGL implementations have a lot of trouble coping with WebGL 1.0 still. It's slowly approaching "ok to use" status. A large portion of web users have no WebGL, or a sw-only version of it (SwiftShader in Chrome). This with a 4 year old spec.

With more frequent spec updates WebGL would have lost all credibility due to mismatch between spec and reality, and variation in implementation quality.

Does it still have any? As an old timer graphics geek, I am seeing it following the VRML footsteps.

Cool for demos and small scale prototypes, but that is about it.

Well, big time credibility is something that only a mature tech has, but I'd say surprisingly good. Serious users from many niches as early adopters, and results are of technically high quality (Clara.io, Tinkercad, various medical imaging and architecture stuff), and of course there's the games scene that has the potential to go big. And browser support is on good track with Microsoft and Apple on board now, and a lot of attention on support in mobile browsers.

Regarding mobile browsers, the demo just dies on my OpenGL ES 3.0 capable mobiles.

Well, it is just catching up with what the first mobile GPU ES 2.0 were capable of, while using a full blown OpenGL/DirectX stack for it.

WebGL is great for prototyping, but the browsers still make my NVidia card go full throttle for stuff that when coded in native language the fan is barely noticeable.

reminds me of dbz. nice.

Reply on news.ycombinator.com