In deel 2 van deze workshop hebben we gezien hoe we babylon engine en scene maken, hoe 3D vormen, materialen en texturen gebruikt worden en hoe we kunnen interacteren met de objecten in de 3D omgeving. In dit derde deel zullen we de grafiek verfraaien door het gebruik van kleuren, dynamische texturen en het toevoegen van schaduwen.

Dynamic textures

De cilinders laten netjes waardes van de data zien (d.m.v. de hoogte), maar er is geen verwijzing naar de bijbehorende namen. Nu zijn er veel opties, maar in dit voorbeeld gaan we de namen plaatsen op het oppervlak van de cilinder. Dit doen we door middel van een Dynamic texture. Zo’n dynamische textuur is feitelijk een soort (2D) Canvas. Dit canvas kunnen we gebruiken voor het tekenen van vormen, tonen van afbeeldingen, maken van animaties of, in dit geval, het schrijven van tekst. Als je wel eens gewerkt hebt met de Canvas API zou dit erg bekend moeten voorkomen. We vragen de context op, zetten het lettertype, de fillstyle, rotatie en positie (translate) net zoals bij een "normaal” canvas element. Onderstaande code voegen we toe aan de "createItem” functie.
De cilinders in de grafiek tonen nu de namen die bij de waardes horen. Met wat kleur zou het wellicht wat frisser worden en daarom voeg ik een array toe met 10 kleuren die ik wil gebruiken. De "createItem” functie krijgt een extra parameter zodat ik de kleur door kan geven. In deze functie kunnen we dan een kleine aanpassing doen zodat de kleur gebruikt wordt als "fillstyle” van de dynamische textuur. Tijdens het itereren door de array met objecten kunnen we één van de kleuren uit het array ophalen en meegeven aan de zo juist aangepaste "createItem” functie.

Schaduwen

De cilinders zweven nu nog in het niets, dus laten we een vloer toevoegen. In the "createChart” functie voegen we de onderstaande code toe. In deze code maken we een vlak (plane) met een grijze kleur en plaatsen dit op dezelfde hoogte als de onderkant van de cilinders.
Door het ontbreken van schaduwen ziet het er nog vreemd uit. Er zijn wel lichten en objecten, maar er zijn een drietal acties nodig om te zorgen dat er dan ook schaduw gegenereerd wordt.
Ten eerste moeten we gebruik maken van een "directional light”. Je kunt een van de lampen in onze scene vervangen door zo’n directional light, maar na wat gespeeld te hebben met de verschillende licht mogelijkheden, heb ik er voor gekozen om een extra directional light toe te voegen en de "hemispheric light” naar beneden te verplaatsen.
Het tweede dat we moeten doen is de cilinders niet meer transparant maken om te zorgen dat het licht er niet doorheen gaat. In de "createItem” functie zullen we daarom de "Alpha” van het materialCylinder op 1 zetten. 
Als laatste gaan we een "shadow generator” object maken. Dat klinkt een beetje vreemd, maar omdat het berekenen van schaduwen een intensieve taak is, worden er standaard geen schaduwen berekend, tenzij expliciet aangegeven. De onderstaande code laat zien hoe de ShadowGenerator gecreëerd wordt en dat de cilinders worden toegevoegd aan de lijst met te renderen objecten.
Het vlak dat de vloer moet voorstellen, heeft een eigenschap "receiveShadows” die op true gezet moet worden zodat Babylon de berekende schaduwen op dit vlak zal tonen. 
Het uiteindelijke resultaat ziet er dan als volgt uit.
Een interactieve demo van het uiteindelijke resultaat is te vinden op:
Uiteraard zijn er nog veel meer manieren om zaken mooier, meer generiek of met compleet andere weergaves te maken, maar ik hoop dat je een aardig idee gekregen hebt van de mogelijkheden om WebGL te gebruiken in combinatie met Apps for Office.