Code an­i­mated text with WEBGL

In this tu­to­rial, you will learn how to an­i­mate text on our web­page us­ing Three.js and advanced WEBGL tech­niques

Web Designer - - Meta Contents -

Em­ploy the power of WEBGL and Threejs to cre­ate an ef­fect that blows text away in the wind

The beauty with front-end de­vel­op­ment is that, as a de­vel­oper, you have ac­cess to nu­mer­ous tech­nolo­gies that you can use to display in­ter­ac­tive con­tent on the web. From the pop­u­lar CSS and Can­vas to SVG and plugin-based al­ter­na­tives such as Sil­verlight and Flash, the op­tions are end­less. How­ever, the eval­u­a­tion of some of the top ranked in­ter­ac­tive web­sites (https://www. awwwards.com/web­sites/web-in­ter­ac­tive) re­veals a sig­nif­i­cant trend: the wide scale adop­tion of WEBGL tech­niques in dis­play­ing con­tent in land­ing pages. The eval­u­a­tion re­vealed that top ranked web­sites not only adopted 3D graph­ics on the web plat­form, they also in­tro­duced a rich in­ter­ac­tive ex­pe­ri­ence, a feat that was pre­vi­ously pos­si­ble through us­ing plug­ins. As such, the in­spi­ra­tion in de­vel­op­ing the tu­to­rial arose from the de­sire to cre­ate sim­ple yet im­pact­ful in­ter­ac­tive con­tent us­ing WEBGL tech­niques. In de­vel­op­ing the tu­to­rial, we use Three.js, an open source, light­weight Javascript li­brary for cre­at­ing 3D graph­ics on the web. Es­sen­tially, the li­brary acts as an ab­stracted layer on top of WEBGL, mak­ing it much eas­ier to use. Three.js en­ables you to cre­ate advanced graph­ics by writ­ing only a few lines of code. In this tu­to­rial, we will learn how to use the li­brary to cre­ate an in­ter­ac­tive text an­i­ma­tion on your web­site.

1. Get­ting started

Be­gin by cre­at­ing a folder, ‘tex­t_re­veal’, on your desk­top to store the tu­to­rial files. Cre­ate two ad­di­tional fold­ers within it: CSS to store the styling files, and JS to store Javascript files. HTML files will be stored in the root folder.

2. Cre­at­ing the HTML page struc­ture

Open your code ed­i­tor and cre­ate an in­dex.html doc­u­ment to con­tain mark up for the main web­page. Be­gin by cre­at­ing the ba­sic struc­ture and give a suit­able ti­tle to the page.

<! DOCTYPE html>

<html lang=”en”> <head>

<meta charset=”utf-8”> <ti­tle>three JS Text An­i­ma­tion </ti­tle> </head>

<body> </body>

</html>

3. Adding con­tent to the HTML struc­ture

Es­sen­tially, we would like to display the an­i­ma­tion on the main area of the screen and have a lower sec­tion that gives in­struc­tions to users re­gard­ing their ac­tions on the page. Cre­ate two divs in the body sec­tion: three-con­tainer where the an­i­ma­tion will be dis­played and in­struc­tions where the user in­struc­tions are dis­played. Ren­der the page in your browser.

<body>

<div id=”three-con­tainer”></div>

<div id=”in­struc­tions”>

click and drag to con­trol the an­i­ma­tion

</div>

</body>

4. Link­ing the CSS file

Cur­rently, the page has no styling to it and it ap­pears very ba­sic. We are in­ter­ested in styling the two divs in order to have them placed at the cen­tre of the page. Open your code ed­i­tor and cre­ate a ‘styles.css’ file in­side the CSS folder. Cre­ate a link to this file in your HTML doc­u­ment by adding the fol­low­ing code in the head sec­tion. Ren­der the page in your browser.

<link rel=”stylesheet” href=”css/styles.css”

>

5. Styling the web­page – styling the body

Be­gin by set­ting the mar­gin to 0 for all el­e­ments in CSS.

This en­sures the de­sign re­mains con­sis­tent through­out the page. Next, add an over­flow with the hid­den pa­ram­e­ter. This cuts off any con­tent that breaks out of its bounds. At this point, you should not no­tice any change. *{ mar­gin:0; over­flow: hid­den; }

6. Styling the divs

We only style the in­struc­tions div as Javascript con­trols much of the ac­tions that oc­cur in the main div dis­play­ing the an­i­ma­tion. Add the fol­low­ing styling code in the CSS file.

#in­struc­tions { po­si­tion: ab­so­lute; color: #666; bot­tom: 0; pad­ding-bot­tom: 6px; font-fam­ily: sans-serif; width: 100%; text-align: cen­ter; pointer-events: none;

}

The code sim­ply di­rects the div to move rel­a­tive to the main div as the page is scrolled.

7. Set­ting up Javascript en­vi­ron­ment

Javascript’s se­cu­rity fea­ture, same-ori­gin pol­icy, re­stricts the ex­e­cu­tion of any ex­ter­nally hosted files in your Javascript code. This of­fers a chal­lenge since Three.js re­quires to load ge­om­e­try, tex­tures and other files. Two al­ter­na­tives ex­ist to solve the chal­lenge. We can opt to set up a lo­cal server us­ing WAMP or XAMPP ap­pli­ca­tions, or host the files on free servers.

The sec­ond al­ter­na­tive of­fers a much eas­ier solution as you can re­use the files al­ready hosted thereby sav­ing you time. Sim­ply copy the fol­low­ing script tags below the in­struc­tions div.

<script src=’http://cd­njs.cloud­flare.com/ ajax/libs/three.js/r75/three.min.js’></ script><script src=’https://s3-us-west-2. ama­zon­aws.com/s.cdpn.io/175711/bas.js’></ script><script src=’https://s3-us-west-2. ama­zon­aws.com/s.cdpn.io/175711/textge­om­e­try. js’></script>

<script src=’https://s3-us-west-2.ama­zon­aws. com/s.cdpn.io/175711/fontu­tils.js’></script> <script src=’https://s3-us-west-2.ama­zon­aws. com/s.cdpn.io/175711/pnl­tri.min.js’></ script>

<script src=’https://s3-us-west-2.ama­zon­aws. com/s.cdpn.io/175711/droid_san­s_bold. type­face.js’></script>

<script src=’http://cd­njs.cloud­flare.com/ ajax/libs/gsap/1.18.0/tween­max.min.js’></ script>

Each Javascript file plays a dif­fer­ent role as is ex­plained later in the tu­to­rial. You should not ob­serve any change in the web­page.

8. Cre­at­ing the text an­i­ma­tion

To cre­ate the text an­i­ma­tion, be­gin by cre­at­ing a new file, ‘tex­tan­i­mate.js’, in your JS folder. Since we would like the an­i­ma­tion to run when the win­dow loads, cap­ture this us­ing the init func­tion as below. win­dow.on­load = init; func­tion init() { var root = new THREEROOT({ cre­ate­cam­er­a­con­trols:false, an­tialias: true, fov:60});

The code cre­ates a new vari­able root which is as­signed three pa­ram­e­ters us­ing the THREEROOT func­tion. The first in­forms that the cam­era con­trols are not turned on while the sec­ond en­ables an­tialias­ing in order to smooth out any jagged lines. The last sets the field of view to 60 in order to view the an­i­ma­tion com­fort­ably.

9. Set­ting up the scene

Next, set up the scene where the text an­i­ma­tion will take place. Change the back­ground colour and set up the cam­era po­si­tion. Copy the code below. root.ren­derer.set­clear­color(0x3aafa9); root.ren­derer.set­pix­el­ra­tio(win­dow. de­vi­cepix­el­ra­tio || 1); root.cam­era.po­si­tion.set(0, 0, 400);

10. Cre­ate the text an­i­ma­tion vari­able

Cre­ate a text an­i­ma­tion vari­able and as­sign the func­tion cre­ate­tex­tan­i­ma­tion (). The func­tion con­trols the na­ture of the an­i­ma­tion and will be de­fined later. Next, iden­tify the ex­act po­si­tion (based on the y axis) where the an­i­ma­tion will play at. For in­stance, in this case, the po­si­tion is set at y = – 10. Af­ter­wards, add the vari­able to the scene. var tex­tan­i­ma­tion = cre­ate­tex­tan­i­ma­tion(); tex­tan­i­ma­tion.po­si­tion.y = -10; root.scene.add(tex­tan­i­ma­tion);

11. Set up the time­line an­i­ma­tion as­pects

The Tween­max.min.js file ref­er­enced ear­lier of­fers use­ful an­i­ma­tion fea­tures. Among these is the Time­line­max func­tion which helps set the re­peat, de­lay and yoyo as­pects. By yoyo, this im­plies the an­i­ma­tion mov­ing back and forth in a yoyo-like man­ner. Set­ting yoyo to false turns off this fea­ture. A re­peat of -1 makes it loop. Sim­ply copy the code below. var tl = new Time­line­max ({ re­peat: -1, re­peat­de­lay:0.25, yoyo: true

}); tl.fromto (tex­tan­i­ma­tion, 4, //4 {an­i­ma­tion­progress:0.0},

{an­i­ma­tion­progress:1.0, ease:power1. ea­seinout},

0 ); cre­atetween­scrub­ber(tl); }

12. Cre­ate the text to be an­i­mated

Next, cre­ate the text to be an­i­mated us­ing the gen­er­ate­textge­om­e­try func­tion. Type in the text you would like to be re­vealed, its size, height and font fea­tures. Note that ear­lier, ‘droid_san­s_bold.type­face.js’ and ‘Textge­om­e­try.js’ files were loaded. These con­trol the font and ge­om­e­try as­pects. func­tion cre­ate­tex­tan­i­ma­tion() {

var ge­om­e­try = gen­er­ate­textge­om­e­try(‘gone WITH THE WIND’, { size:14, height:0, font:’droid sans’, weight:’bold’, style:’nor­mal’, an­chor:{x:0.5, y:0.5, z:0.0}

}); Three.bas.utils.sep­a­rate­faces(ge­om­e­try); re­turn new Tex­tan­i­ma­tion(ge­om­e­try); }

13. Code the an­i­ma­tion char­ac­ter­is­tics

Next, we de­fine how the an­i­ma­tion should be­have. The aim would be to sim­u­late blow­ing by the wind from the left-hand side and once par­ti­cles have dis­in­te­grated, recre­ate the text from the right-hand side. func­tion gen­er­ate­textge­om­e­try(text, params)

{

var ge­om­e­try = new THREE. Textge­om­e­try(text, params); ge­om­e­try.com­pute­bound­ing­box(); ge­om­e­try.user­data = {}; ge­om­e­try.user­data.size = {

width: ge­om­e­try.bound­ing­box.max.x ge­om­e­try.bound­ing­box.min.x,

height: ge­om­e­try.bound­ing­box.max.y ge­om­e­try.bound­ing­box.min.y,

depth: ge­om­e­try.bound­ing­box.max.z ge­om­e­try.bound­ing­box.min.z

}; var an­chorx = ge­om­e­try.user­data.size.width * -params.an­chor.x;

var an­chory = ge­om­e­try.user­data.size. height * -params.an­chor.y; var an­chorz = ge­om­e­try.user­data.size.depth * -params.an­chor.z; var ma­trix = new THREE.MATRIX4(). make­trans­la­tion(an­chorx, an­chory, an­chorz); ge­om­e­try.ap­ply­ma­trix(ma­trix);

re­turn ge­om­e­try; }

To in­ves­ti­gate the code pro­vid­ing the func­tion­al­ity, click view source at the bot­tom-right cor­ner. This should take you to its re­spec­tive github page from where you can view the code. Copy the code to your code ed­i­tor and cus­tomise it to your pref­er­ence.

14. Adding im­por­tant classes

Now that we have added the re­quired func­tions for the an­i­ma­tion, we need to ap­pend dif­fer­ent classes re­quired to ini­ti­ate the WEBGL con­structs.

15. Adding im­por­tant ‘utils’

Ad­di­tion­ally, add the code (from Filesilo) to help con­trol the in­ter­ac­tive as­pects of the an­i­ma­tion. The code pro­vides in­ter­ac­tiv­ity in re­sponse to mouse events such as mouse up, mouse down and move­ment of the mouse.

16. Ini­ti­at­ing the an­i­ma­tion

At this point, all the code nec­es­sary to ini­ti­ate the ap­pli­ca­tion is set. To ini­ti­ate the text an­i­ma­tion, add the fol­low­ing line of code be­neath the last script tag en­tered.

<script src = “js/tex­tan­i­mate.js”></script> The fi­nal out­come should ap­pear as below.

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.