Over Servin

Servin werkt bij lvl30wizards en hij is mede-eigenaar. Hij gaat het hebben over 3D & Three.js. Hij komt van MBO MediaCollege en kwam op CMD. Hij is ook een eigen bedrijfje begonnen. Hij heeft gewerkt als freelancer en een soort "full-stack developer".

Level30Wizards

Hij doen meer front-end opdrachten, ze doen geen design, wel gevoel voor design. Ze houden van 3D en mooie animaties.

Wat is het?

Canvas

Je kan op een canvas dingen tekeningen en je kan er ook WebGL dingen mee doen. Je kan je grafische kaart ermee aanspreken (CPU, GPU - renders voor 3D - graphics card).

WebGL is gemaakt met OpenGL en is een andere API.

Shaders

Stel je wilt iets met WebGL maken, dan moet je shaders schrijven en dit is een eigen taal (wiskundig). Je hebt tools om dit te doen, omdat het ingewikkeld is.

• Vertex shaders
• Fragment shaders (?)

PixiJS

Dit is een interessante API en kan je leuke 2D animaties mee maken.

WEBGL 3D - THREE.JS

Je kan er verschillende dingen mee doen, denk maar aan de 3D portfolio of aan 2021 eurovision website, waarbij Rotterdam "naar de mensen werd gehehaald". Hierbij accesibility wel een ding, want als je geen goed internet hebt, moet je er nog steeds mee kunnen interacteren en je moet er met je keyboard doorheen kunnen tabben of besturen. Dit is vooral een probleem met een canvas element, omdat een canvas element een afbeelding is en ze hebben er HTML achter geplaatst en op die manier accessible gemaakt. Denk ook aan https://cryptotower.com/

Basic 3D

Axis/Vector3

Omdat je met 3D werkt, werk je ineens met een 3e axis (Z axis). Je maakt uiteindelijk een render van je scene.

Camera

Alles wat je laat zien, laat je zien vanuit het oogpunt van de camera.

Lighting

Binnen THREE.js, kan je dingen in je scene plaatsen, maar als je geen licht hebt, dan krijg je een zwarte scene terug. Je hebt verschillende lichtbronnen: sun, light direction, light bulb, spotlight etc.

Mesh

Je hebt een mesh die bestaat uit een material en een geometry en als je deze 2 combineerd in een mesh en deze toevoegd in een scene dan heb je een box in een scene.

Renderer

Je kan je animatie renderen. Hierbij is het belangrijk om te denken aan performance (30-60-120 FPS en hoeveel hz je scherm aan kan).

Future*

Future met asteriks omdat een hoop kan vandaag al.

WEBGPU

De opvolger van WebGL (gemaakt op openGL). WEBGPU is een nieuwe API en deze kan veel makkelijker kiezen op wat jouw systeem supports. Voor THREE.js kan je als renderer, zowel WEBGPU en WEBGL gebruiken. WEBGPL gebruikt veel CPU, WEBGPU verbruikt minder GPU en probeert meer met je grafische kaart te praten.

WebXR

Je kan websites in AR of VR maken hiermee. AR kan je met je telefoon doen of gebruiken.

Resources

• THREEJS-JOURNEY (betaald, voor beginners)
• SIMONDEV (nietv oor beginners, youtube vids)
• The book of shaders (puur alleen shaders schrijven over fragments shaders)
• Three.js examples (open source, je kan de code bekijken)

blender api voor google maps, waarop je kan inzoomen en dingetjes simplifyen.

Reflectie

Het onderwerp vond ik interessant en die dingen die werden besproken ook. De resources vond ik wel een heel interessant stukje, maar wel jammer dat ik dan meer op Three.js examples uit kom als ik niet wil betalen. Verder was het wel goed te volgen. Snelle presentatie, maar dat vond ik niet zo erg. Hierdoor kon ik goed mijn concentratie erbij houden.