3D Features in Webdesign

| 0 comments

Informeren was het belangrijkste doel van de eerste websites. De inhoud stond voorop, maar gebruikers wilden gaandeweg steeds meer nieuwe soorten webcontent zien. Internetgebruikers verwachtten namelijk kleurrijke vormgeving en beeldmateriaal in plaats van saaie zwarte tekst op een witte achtergrond.

www.acko.net

Gelijk met de groei van het World Wide Web veranderde ook het gebruik van het internet radicaal. Het  ‘ervaren’ van een website, werd belangrijker dan het simpelweg opzoeken van informatie. Elk element van een website moest op een gegeven moment met aandacht voor detail ontworpen worden.

De toenemende snelheid van het internet en de wereldwijde bereikbaarheid opende een nieuw hoofdstuk in webdesign en daarmee lukte het om de verveelde en onvoldane webgebruikers te verassen. Driedimensionale elementen in het webontwerp, maken een website veel indrukwekkender en daardoor effectiever. Het hoofddoel van driedimensionale

CSS carouseleffecten is om een gevoel van diepte te creëren. Hiermee zorg je voor de illusie van ruimtelijkheid op een tweedimensionaal scherm. Hiermee wordt – als je het goed doet – je website een stuk spannender dan elke andere tweedimensionaal vormgeven website. Het driedimensionale effect kun je op verschillende manieren creëren. Het begint bij het toevoegen van simpele schaduwen of kaders van CSS objecten tot volledig van textuur voorziene driedimensionale elementen, weergegeven in een driedimensionale omgeving.

 Beschikbare tools waarmee we tegenwoordig driedimensionale effecten kunnen maken zijn beter dan ooit. Nog belangrijker; de meeste van deze tools zijn gratis en makkelijk online te vinden.

 

De CSS 3D Transforms module – basis functies

Met de functionaliteiten van de “CSS 3D Transforms module” kun je elementen vormgeven door middel van veel verschillende instellingen of variabelen (transform functions). De populairste functie is de ‘origin’ variabele, waarmee je de positie van een object kunt aanpassen door de x-, y-, en z-as te veranderen. De extra z-as imiteert velddiepte. De stijl van een object kan ook worden aangepast.

Het principe is redelijk simpel. Je gaat namelijk altijd uit van het originele object dat je wilt transformeren. Dit originele object (Original Descendant) is het startpunt waar vanuit alle transformaties kunnen worden toegepast. Objecten kun je groter en kleiner maken, de kleur veranderen en zelfs kun je vorm veranderen op basis van het originele object.

Perspective-origin propertyMet de perspectief eigenschappen kun je de x en y waardes aanpassen waardoor de kijker het getransformeerde object ziet (een afgeleide van het hoofdobject). Door het aanpassen van de z-as eigenschappen imiteer je een andere velddiepte. Door de z-waarde te vergroten, lijkt het object groter en vanzelfsprekend lijkt het object kleiner als je de z-waarde verkleind.

Met de eigenschap “backface-visibility” kun je instellen of de achterzijde (de “back face”) van een object zichtbaar is voor de bezoeker. De bezoeker ziet standaard de voorzijde van een object. Als dit object 180 graden wordt gedraaid, ziet de bezoeker de achterzijde, wat eigenlijk een gespiegelde versie van de voorzijde is, wanneer er geen specifieke achterzijde is gedefinieerd.

 

Web Graphics Library (WebGL)

WebGL maakt het mogelijk om grafische elementen met hardware acceleratie te creëren en te manipuleren in een webomgeving, zonder dat je hiervoor Java- of Flash plug-ins nodig hebt. Grafische driedimensionale elementen worden met WebGL direct in de web browser opgebouwd en getoond.  WebGL is gebaseerd op OpenGL 3.0 (uitgekomen in Augustus 2012) en maakt gebruik van ‘Shaders’. ‘Shading’ is software dat draait op de GPU (grafische processor) van je computer en is in staat om schaduwen te simuleren. In de praktijk zorgt de ‘shading’ software voor de juiste hoeveelheden van licht en donker die worden toegevoegd aan de driedimensionale afbeelding.

WebGL Fire shader

Omdat  WebGL direct in de web browser draait, kan je dit aansturen met JavaScript. Javascript is gratis en open-source.  WebGL maakt gebruikt van ‘third-party’ Javascript bibliotheken die de belangrijkste functies kunnen aansturen, zoals bijvoorbeeld het oproepen van een OpenGL omgeving, het renderen van de animatie in de browser (webgl-utils.js) of het uitvoeren van matrix bewerkingen (glMatrix.js).

 

Driedimensionale omgeving visualiseren

Voor het renderen/creëren van een driedimensionaal object , zijn er veel eigenschappen die je moet instellen. Het gaat hierbij niet alleen om de grootte, de textuur van de oppervlakten, kleur en positie. Ook moet je aan de volgende eigenschappen denken:

  •  het instellen van de canvasgrootte
  • het definiëren van datatypes
  •  de viewport instellen
  • de schaduwen opzetten
  •  het starten van de rendering loop
  • de projectiematrix instellen
  • en het kijkpunt van de camera instellen (projection view)

Biodigital HumanHet creëren van animaties en effecten in WebGL is zeker indrukwekkender en realistischer dan CSS 3D objecten, maar het is tegelijkertijd ook veel geavanceerder en complexer. Er bestaat nog geen duidelijk doel voor volledig driedimensionaal vormgegeven websites. Bovendien staat voor een webontwikkelaar de bereikbaarheid en de bruikbaarheid van een ‘traditionele’ webpagina nog altijd hoger op het prioriteitenlijstje. Daarom is WebGL nu nog meer een tool om de mogelijkheden te ontdekken en onderzoeken. Je kan immers spelen met de mogelijkheden door met simpelweg code een prachtige driedimensionale wereld te creëren.

 

Huidige ondersteuning van 3d content op het web

De ondersteuning voor webgebaseerde driedimensionale omgevingen wordt elke dag beter. Toch is er nog een lange weg te gaan voordat de snelheid en kwaliteit naar ieders tevredenheid is. Op het moment is de ondersteuning voor CSS 3D content nog veel groter dan de ondersteuning voor content die met WebGL is opgebouwd.  De meeste browser ontwikkelaars doen hun best om met de ontwikkelingen mee te gaan.

De CSS 3D transforms module is al enkele jaren beschikbaar. De door Apple uitgebrachte browsers (Safari en Mobile Safari) waren de eerste die dit ondersteunden. Inmiddels kunnen ook Google Chrome, Mozilla Firefox en Opera dergelijke content weergeven.

Firefox 4.0 en hoger, Google Chrome, Safari 5.1 en hoger en Opera 11 en hoger hebben allen de ondersteuning voor WebGL ingebouwd. Internet Explorer ondersteunt wel een aantal functionaliteiten, maar pas nadat extra plug-ins zoals Chrome Frame en/of IEWebGL zijn geïnstalleerd. In Opera en Safari staat de WebGL ondersteuning standaard uit.

Interessante bronnen:

 

 

Related posts:

Geef een reactie

Required fields are marked *.