The purpose was to create 3D WebGL interactive scene containing background, animated flying helicopter model and foreground.

The basic implemented features are:

Browser testing for compatible WebGL versions and applying the maximum version of the supported.
Working with gyroscope data if it is present
Preloading scene resources (models, textures)
Composer-based graphics pipeline (rendering passes, postprocessing passes including reflection, blur, texture crop shaders)
3D viewer encapsulation as ES6 UMD module

Performed interactive abilities are :

Helicopter sways on its X and Y-axis relative to the mouse position on desktop or the gyroscope on mobile
Background parallax effect when mouse moving on desktop
The horizontal blur effect is applied for background when changing slide
The helicopter flies smoothly to the new position and rotation when changing slide
Helicopter casts the realistic reflection imitating waves on the water surface
When resizing browser window, background and foreground images are cropped with saving width/height aspect in order to avoid images distortion

Canvas with the scene is used as the website background.

The main challenges were the following:

1. Gyroscope data differs from operation system and browser, also chromium update was released just during development, it was removed insecure usage of gyroscope events. Considering this, it took more time to implement providing the correct gyroscope data.

2. Even after preloading textures to the client machine, they were loaded to the videoRAM only when the first 3D scene rendering cycle appeared. So after preloading must be used also “prerendering” for each texture to avoid screen freezing during first rendering cycle.

http://rhc.mind-blown.ca/

The Evenstar

Write a review for The Evenstar

Please fill the form below

Budget

Quality

Schedule

Communication