How to: gen­er­ate 3D FROM CODE

Find out how to use three.js to add an ex­tra dimesn­sion

Web Designer - - Vr & Augmented Reality -

The main part of the project is its gen­er­a­tive sys­tem. There are no ex­ter­nal 3D as­sets – ev­ery­thing that you see is gen­er­ated from code, which, while a bit com­pli­cated, has sig­nif­i­cant ben­e­fits. The en­vi­ron­ment can be eas­ily scaled to any size or qual­ity (which greatly helps with per­for­mance), you can gen­er­ate any ran­dom vari­a­tions of it (gen­er­a­tive de­sign) and the size of the whole project re­mains un­changed. With cur­rent graph­ics pro­cess­ing ca­pa­bil­i­ties, more and more ex­pe­ri­ences and games (such as No Man’s Sky) are mov­ing into pro­ce­dural gen­er­a­tion like that.

1. Is we­bvr avail­able?

Let’s as­sume we have our WEBGL en­vi­ron­ment run­ning, looks good, ev­ery­thing’s work­ing prop­erly, so we want to run it in VR. First, it’s im­por­tant to test whether the user has WE­BVR avail­able on their de­vice. To do this, put the de­tec­tor line be­fore the be­gin­ning of your project: We­bvr.check­avail­abil­ity().catch( func­tion( mes­sage ) {

doc­u­ment.body.ap­pend­child( We­bvr.getmes­sage­con­tainer( mes­sage ) );

} );

2. en­able we­bvr

Next, in three.js there’s a sim­ple switch for en­abling WE­BVR: ren­derer.vr.en­abled = true;

3. de­tect dis­plays

Af­ter this, it’s time to de­tect what VR dis­plays are avail­able. This is a sec­ond check, be­cause 1. We check if the browser has WE­BVR en­abled, and then 2. We check which de­vices (if any) are cur­rently con­nected and avail­able:

We­bvr.getvrdis­play( func­tion ( dis­play ) { ren­derer.vr.set­de­vice( dis­play ); doc­u­ment.body.ap­pend­child( WE­BVR. get­but­ton( dis­play, ren­derer. domele­ment ) );

} );

4. Into vr mode

At that point, three.js will han­dle sim­ple UI for switch­ing into VR mode. Sim­i­lar to sound and any pop-ups, this has to be trig­gered by user click. Also, while run­ning it, the frame rate of the ren­derer changes from the typ­i­cal 60fps to 90fps for com­pat­i­ble VR de­vices. For that rea­son, any in­cre­men­tal an­i­ma­tions hap­pen­ing in the ren­der loop might play faster in the head­set. To get around this, and as a gen­eral good prac­tice, for an­i­ma­tions it’s good to use: clock.get­delta()

5. Take con­trollers

And now for the in­ter­ac­tion: while see­ing a de­tailed VR en­vi­ron­ment feels re­ally im­mer­sive, what makes a huge dif­fer­ence is to be able to touch, mod­ify, cre­ate or de­stroy things inside it. This is where the con­trollers step in. Three.js has all the com­mon ones im­ple­mented al­ready, check – Day­dream­con­troller.js, Gearvr­con­troller.js and Vive­con­troller.js here: con­troller1 = new THREE. Vive­con­troller( 0 ); con­troller1.stand­ing­ma­trix = ren­derer.vr.get­stand­ing­ma­trix(); scene.add( con­troller1 ); con­troller2 = new THREE. Vive­con­troller( 1 ); con­troller2.stand­ing­ma­trix = ren­derer.vr.get­stand­ing­ma­trix();

scene.add( con­troller2 );

6. boost per­for­mance

What else should you keep in mind? Es­pe­cially for VR, per­for­mance is re­ally im­por­tant. As your con­tent has to go through mul­ti­ple lay­ers – Javascript, WEBGL, Browser, API and then your de­vice soft­ware and hard­ware – your ap­pli­ca­tion has to be su­per-lean not to hit any bot­tle­necks. And the big­gest bot­tle­neck is the number of draw calls. In sim­ple terms, what im­pacts the speed of ren­der­ing of the graph­ics card is the number of separate ob­jects and ma­te­ri­als vis­i­ble at the same time. For­tu­nately, there’s an easy way to get a sig­nif­i­cant per­for­mance boost by merg­ing all the el­e­ments that are not mov­ing into one large ob­ject. Even if they’re fully separate, they can be glued into one big mesh. Of course, this trick works only on non-mov­ing el­e­ments – once you merge things to­gether, it’s re­ally hard to make them move sep­a­rately again.

7. Fine-tun­ing

More com­plex lights and shad­ows, es­pe­cially when there are mul­ti­ple ones in the scene, tend to slow down ex­po­nen­tially to the number of them en­abled. The best way to get around it is to merge them to­gether and ‘bake’ them in. The way it ac­tu­ally works is, us­ing any 3D edit­ing soft­ware, you can paint the lights and shad­ows onto the el­e­ments – as long as the light source and the ob­jects are not mov­ing, ev­ery­thing is re­ally highly de­tailed and lit, but there’s no ac­tual cal­cu­la­tion hap­pen­ing for it.

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.