WEBGL 3D and Threejs

Learn how to cre­ate re­al­is­tic 3D scenes on the Web

Web Designer - - Contents -

Learn how to cre­ate im­pres­sive re­al­is­tic 3D scenes that will work in the browser

Ex­plore alien land­scapes, un­der­wa­ter worlds or an­cient gauntlets. In­ter­act with life-like mod­els that speak and re­act as you en­gage with them. Build beau­ti­ful cin­e­matic se­quences to launch into a new game or web­site. Learn the lat­est fea­tures of a new com­puter by view­ing it from ev­ery pos­si­ble an­gle, or dive into an ex­ploded view. Imag­ine a site for a new car, where you could ex­am­ine each part in as much de­tail as you wish, then watch it re­assem­ble be­fore your eyes. Turn on your VR head­set, get be­hind the wheel and take your cus­tomised car for a spin. All of this is pos­si­ble and so much more us­ing WEBGL, all right in the browser with­out plug­ins. 3D mod­els are at the heart of th­ese amaz­ing ex­pe­ri­ences. This ar­ti­cle is go­ing to ex­plore us­ing 3D mod­els in WEBGL, and cre­ate beau­ti­ful re­sults. We’ll show you data for­mats, per­for­mance con­sid­er­a­tions, re­sources and how to get started. Us­ing the pop­u­lar Three.js li­brary, you’ll learn about im­port­ing and us­ing mod­els, light­ing and tex­tures to en­hance sur­face de­tail, the im­por­tance of en­vi­ron­men­tal maps and op­ti­mi­sa­tion tips to help your project run smoothly. You’ll be a able to fol­low along, mak­ing your own 3D scene. You’ll load prim­i­tives to start, then ex­plor­ing model load­ing and tech­niques to make your scenes more photo-re­al­is­tic. More than enough to get started and plenty to fuel your next projects, with a few tips as well. Many of the 3D prin­ci­ples that you will learn here are rel­e­vant in any other 3D li­brary or en­vi­ron­ment.

How well is WEBGL 3D sup­ported?

Up un­til the past few years, the big­gest ob­sta­cle to de­vel­op­ing in WEBGL was the lack of de­vice-wide sup­port. Ev­ery killer in­ter­ac­tive pitch was met with the daunt­ing ques­tion: “Great, but will it run on mo­bile, or do we have to serve up some sec­ond-rate fall-back ex­pe­ri­ence?” Desk­top sup­port was get­ting there for some browsers, but not all, and mo­bile was a deal-breaker for most pro­fes­sional projects.

Fast-for­ward to 2018, and with ad­vances in de­vice hard­ware and pro­cess­ing, we now have gor­geous dis­plays with in­cred­i­bly pow­er­ful pro­ces­sors. Browsers sup­port WEBGL na­tively with over­all sup­port clos­ing in on 95%, vir­tu­ally 100% on all ma­jor de­vices and browsers (https://ca­niuse.com/#search=webgl).

WEBGL is now in­te­grated into web stan­dards, al­low­ing physics, image pro­cess­ing and ef­fects as part of the web­page can­vas, all Gpuaccel­er­ated! That means amaz­ing real-time 3D graph­ics, pow­er­ful ef­fects via Graphic Shaders and im­mer­sive video are all pos­si­ble. Com­plex mod­els with high lev­els of de­tail, re­flec­tions, en­vi­ron­men­tal maps, shad­ows – all pos­si­ble.

This re­quires no spe­cial plugin or down­loads. All users now have in­stant ac­cess to beau­ti­ful ex­pe­ri­ences right in their browser and right in the palm of their hand.

“Ev­ery image, ev­ery scene, can tell a story. Ad­vanced WEBGL now en­ables pho­to­re­al­is­tic, in­ter­ac­tive ren­der­ing that can reach mass au­di­ence through the web with­out plug­ins. It’s an ex­cit­ing time to be in web de­vel­op­ment and VFX” Richard Mat­tka

Award-win­ning in­ter­ac­tive di­rec­tor, au­thor, VFX artist

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.