• home
  • services
  • portfolio
  • experiments
0 5

Avans Open Dagen

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.

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.

  • A magical potionQuality settings
  • A magical potionAnti aliasing
  • A magical potionshadow maps
  • A magical potioninstancing
  • A magical potionobject minification
  • A magical potionpolygon 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.

next project:Roomfy

Reach out,
we're kind.

This is where the magic happens.

Message us about anything.
Amsterdam Area, the NetherlandsKVK: 72524383© 2018-2021