Avans asked Dept to create a digital substitute for their Open Days. Since Dept recently created a 3D digital festival, they shifted some focus to include more 3D on the web. That’s where we came in. Level30Wizards has been experimenting and working with this rather new technology since it’s been possible. In cooperation with Dept Agency and Avans Hogescholen, we created a performant, accessible digital substitute for open days. Read on to see how we did it.
Avans Open Dagen
Every user that visits the digital Avans open day received a personalised link, with study sessions that they may be interested in. The user can then update or change their interests and will receive a personal schedule of cards with MS Teams meeting links, where they can attend sessions about a study.
We added keyboard controls to use zoom, move and navigate on the map. We added button elements on top of the model’s 3D elements, this enables anyone to use the Tab key to navigate the canvas. This implementation is key to allow keyboard users to navigate on a canvas. We created a quality toggle that changes shadow map size, antialiasing and pixel ratio to ensure users have a smooth experience, since 3D can be hard on your device. Next to that we made sure we added aria labels where necessary, to increase clarity for users using assistive technology.
We made a lot of big impacting changes for performance. We set quality depending on GPU strength. We allow the user to change model quality which toggles between lower quality maps to ensure good performance. We swap a lot of duplicate elements within the model with Instances, to reduce model size. We do object minification and we reduce polygon amount by a lot with certain techniques.
- Quality settings
- Anti aliasing
- shadow maps
- object minification
- polygon reduction
With React Three Fiber we can target specific parts of a 3D model. That’s how we created hover animations. The hover animation also toggles a regular HTML button that shows some more information about the thing you’re hovering over.
This is where the magic happens.
Message us about anything.