3D on the web is making a come-back. Discover why WebGL is catching up with OpenGL and how you can get the edge.
Web GL, the JavaScript-based cousin of OpenGL ES, might have given rise to a new generation of 3D engines like AwayJS and three.js., but compared to the output of consoles and native desktop games, it's still in its infancy
That's according to Belgium-based freelance programmer and graphics developer David Lenaerts, who took a peek at the future of 3D on the web during Reasons to be Creative 2015, Brighton's fast-paced three-day design, coding and creativity festival.
Lenaerts talked about the technical evolution of WebGL. He looked at extensions – "which allow you to get support for features not necessarily supported on all platforms, and to create that extra bit for those that do – and glanced ahead to WebGL 2.0, as he explained how to lift your 3D graphics work to the next level.
"It's important to anticipate what's coming to have an edge, and to push it that bit further on hardware that can already handle it," he explains.
We caught up with Lenaerts after his talk to find out more about the future of 3D on the web. Whether you're looking to move from 2D to 3D, or want to know the most common pitfalls to avoid with real-time 3D, here are nine things you should know about 3D on the web... (And for a masterclass in 3D programming techniques, head to Lenaerts' blog.)
01. 3D on the web is making a come-back
Lenaerts explores an alternative implementation for image-space horizon-based ambient occlusion, HBAO
It's been mostly absent with Flash sites dwindling and WebGL not, originally, being reliably renderable on all platforms. But with WebGL support becoming more and more universal, agencies are now realising it's ready for actual use.
02. WebGL is always evolving
The extensions are proof of that. Some day they will be part of the standard and supported on all devices.
03. Agencies often hire the wrong modellers for real-time 3D
Unlike video games companies, agencies often get swept away by the quality of the Hollywood stuff companies make. Sadly, these people often don't understand the technical difficulties of low-poly modelling for real-time applications. Especially when having to support various less powerful mobile devices.
04. Don't try and treat 2D like 3D
Designers expect to be able to treat 3D as if it's 2D: you can't "Photoshop" interactive 3D content. It has to be treated more like you would treat a real environment.
Of course, there's some post-processing that can be done, but it needs to be automatable. Photoshopping a bunch of frames and expecting to see the exact same thing doesn't work.
05. Learn how light works
Lenaerts has recently decided to look into supporting subsurface scattering in his playground rendering engine Helix
An understanding of the workings of light becomes important, as well as knowing the limitations. (Playing a lot of video games in the mid-2000s would help to get a feel!)
06. Don't separate design from development
Keeping design separate from development is a bad idea (I'll never understand why it's still so often the case). The challenge of translating a design to an interactive scene means it's so important for both to work on the same thing.
That way, a developer can build tools for the designer to use interactively, instead of just making code adaptations hoping it's going to look the right way.
07. Play with any 3D engine
For programmers, I would advise to just get started with any 3D engine, whether it's Unity, ThreeJS, AwayJS, and play around.
08. Programmers must understand the maths
Once you're feeling comfortable and feel like digging deeper, try your hand at figuring out what's going on under the hood of the engine, read a book on 3D programming to understand the maths! I can't stress enough how important it is to know the math. This will allow you to do things much faster and more efficiently.
09. Get experience with a graphical editor
Smoke cube. Head to Lenaerts website for a masterclass in 3d techniques
For designers or artists, you could get started with any sort of 3D suite – Blender, Maya – to get the idea. But careful, that's all offline rendering, so they generate pictures that take ages to render.
Learning real-time is a whole other discipline, so it would be good to also play around with an engine that has a graphical editor like Unity or UDK. This will give a better idea of what to expect in real-time.
Reasons to be Creative is an annual three-day conference for designers, coders and artists in Brighton, UK. This year's speakers include Evan Roth, Yuko Shimizu, Noma Bar and Dominic Wilcox.
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
