
Terrain Rendering and GUIs with WebGL - dshankar
http://zephyrosanemos.com
======
leichtgewicht
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 :)

------
je42
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 ?

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

~~~
moron4hire
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/](http://capnmidnight.github.io/Primrose/)

~~~
je42
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.

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

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

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

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

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

------
soup10
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

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

~~~
bottled_poe
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.

~~~
blt
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](http://i.imgur.com/oiNjjaW.png)

------
jawngee
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?

~~~
seren
At the bottom of the page :

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

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

~~~
exDM69
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.

~~~
flohofwoe
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](https://wiki.mozilla.org/Platform/GFX/WebGL2)

~~~
exDM69
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.

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

[http://blog.mozilla.org/joe/2010/11/10/how-to-tell-if-
youre-...](http://blog.mozilla.org/joe/2010/11/10/how-to-tell-if-youre-using-
hardware-acceleration/)

------
joewrong
reminds me of dbz. nice.

