How 3D Technologies Can Create Interactive In-Browser Experiences
NET|May 2018

Tom Smith explores how 3D technologies can be used in-browser to create beautiful and highly engaging interactive experiences

Tom Smith
How 3D Technologies Can Create Interactive In-Browser Experiences

WebGL is a JavaScript API for real-time rendering of 3D and 2D graphics within a browser and is based on OpenGL ES – the software API used on embedded systems such as smartphones and tablets.

Traditionally, web browsers used the CPU to rendercontent, but in recent years browsers have adoptedsupport for hardware acceleration, which means webdevelopers can now tap into a device’s GPU to allow for rendering of complex graphics. It’s a tough language to grasp, but luckily there are a number of JavaScript libraries that make WebGL more accessible, such as Babylon.js and three.js.

Such technology is merging skill sets between traditional web developers, game developers and VFX artists, where all these disciplines work together to develop interactive experiences on the web. Having an understanding on basic VFX principles is crucial – lighting, cameras, animation and 3D geometry all come into play – and it’s vital to have a grasp of JavaScript frameworks and HTML.

EXPORT 3D FOR THE WEB 

A particular problem associated with exporting 3D assets into a WebGL environment is the weight of the files. When dealing with heavy assets like 3D models, extra care has to be taken during asset creation to ensure the models are loaded efficiently. There are many factors that can increase a 3D model’s size, but there are three good rules to follow to help reduce weight in a browser.

1. Good topology 

Topology refers to the mesh flow of a 3D model – the cleaner the mesh the more efficient the model, meaning fewer polygons used and a reduction in the overall weight of the asset.

2. Normal mapping 

This story is from the May 2018 edition of NET.

Start your 7-day Magzter GOLD free trial to access thousands of curated premium stories, and 8,500+ magazines and newspapers.

This story is from the May 2018 edition of NET.

Start your 7-day Magzter GOLD free trial to access thousands of curated premium stories, and 8,500+ magazines and newspapers.

MORE STORIES FROM NETView All
Camille Gribbons
NET

Camille Gribbons

UX designer at Booking.com, Camille Gribbons reveals how she first got into the industry

time-read
7 mins  |
June 2020
THE 5G UI REVOLUTION
NET

THE 5G UI REVOLUTION

Tris Tolliday describes his vision of a web UI catapulted forwards by 5G

time-read
3 mins  |
June 2020
HOW TO SHOWCASE YOUR DEV SKILLS
NET

HOW TO SHOWCASE YOUR DEV SKILLS

Aude Barral shares 5 top tips for landing your dream developer job

time-read
3 mins  |
June 2020
KNIVES OUT
NET

KNIVES OUT

Murder mystery film, Knives Out, grabbed everyone’s attention, and so did the fun website that promoted it. Oblio tells Tom May how it created its innovative 3D navigation

time-read
6 mins  |
June 2020
HOW EMOTIONAL LABOUR HINDERS WOMEN IN TECH
NET

HOW EMOTIONAL LABOUR HINDERS WOMEN IN TECH

Christine Brewis, head of digital marketing at Studio Graphene, discusses how gender parity in tech has changed over the last ten years, and what more can be done

time-read
5 mins  |
June 2020
EDAN KWAN
NET

EDAN KWAN

He swapped life as a singer for a career making eye-popping digital visuals. The Lusion founder chats to Tom May about battling demons, winning awards and where digital advertising is heading

time-read
8 mins  |
June 2020
ANDREW COULDWELL
NET

ANDREW COULDWELL

The Brit in LA discusses his new book on design systems, Laying the Foundations

time-read
3 mins  |
June 2020
Top 5 Tips For Ensuring Web Content Is Accessible For All
NET

Top 5 Tips For Ensuring Web Content Is Accessible For All

Merlyn Meredith outlines five top tips for ensuring web content is accessible for all

time-read
2 mins  |
May 2020
WHAT DOES THE FUTURE HOLD FOR BROWSERS?
NET

WHAT DOES THE FUTURE HOLD FOR BROWSERS?

Nico Turco examines the state of play with browsers, whether developers should encourage diversity or monopoly and how Google fits into it all

time-read
6 mins  |
May 2020
YEARS IN THE MAKING
NET

YEARS IN THE MAKING

Exclusively for net: The latest in a series of anonymous accounts of nightmare clients

time-read
3 mins  |
May 2020