7 ms·
Terrain Rendering and GUIs with WebGL
- jawngee 12y agoThis 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 12y agoAt the bottom of the page : >During the last decade, I've helped build Anadelta Tessera, a desktop road design CAD written in Delphi.
- danmaz74 12y agoWow, it boggles my mind to think what we can do in a browser these days...
- chii 12y agoIt can do more than you can imagine!
- davidw 12y agoYes, 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 :-/
- danmaz74 12y agoI remember that too, but I too don't remember the name - David, we're getting old :)
- davidw 12y agofractint? http://en.wikipedia.org/wiki/Fractint http://en.wikipedia.org/wiki/Fractint
- onion2k 12y agoVistaPro?
- SteveMoody73 12y agoI remember that on the Amiga, it was fun to watch it rendering the landscape
- danmaz74 12y agoThat's the one I remembered! I was a great Amiga guy :D
- jsheard 12y agoAnything is possible, as long as it's doable with a subset of a subset of OpenGL designed for 8 year old mobile hardware :P
- exDM69 12y agoUnfortunately, 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 12y agoStrange, 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
- pjmlp 12y agoWell, 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.
- lovelearning 12y agoThat 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 12y agoHe is a developer experienced with OpenGL on the desktop. From experience it's not a terribly difficult leap to WebGL.
- bluedino 12y agoRight - at the end he says "Oh I've been a developer on this CAD software for the past ten years"
- soup10 12y agoGreat 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 12y agoIt is butter smooth @ 60Hz on my laptop with poor Intel graphics
- exDM69 12y agoThis 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.
- bottled_poe 12y agoIs 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.
- moron4hire 12y agoYou don't eat butter fast enough to keep it out on the counter?
- blt 12y agoMany 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
- je42 12y agoI 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 12y agoThe author mentioned in the post that he didn't know anything about the dom at the time of writing it.
- je42 12y agointeresting decision: learning dom+css vs rewriting a complete UI layer in webgl.
- k__ 12y agolol, tells you much about the DOM and CSS, hu? ;)
- moron4hire 12y agoDOM 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.
- k__ 12y agoSame here :)
- moron4hire 12y agoI 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/
- leichtgewicht 12y agoI 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 :)
- mattdesl 12y agoThe GUI alone is worthy of its own article. Holy crap.
- joewrong 12y agoreminds me of dbz. nice.
- billconan 12y agoI 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.