Take your 3D graphics work to the next level

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

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

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

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.

Liked this? Try these...

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.