Heineken Global Media

Heineken Global Media Dashboard is the internal website for Heineken, which shows Heineken relataed brand market share in each country. You can explore the globe with heineken color and click market share card in country where you want to explore

I made webgl globe and its background, and ui component between webgl globe and frontend UI component

Overview in Visual

I can seprate 3 objects in this webgl stuff.

• Globe
• Background
• UI component between webgl globe and dom

Globe

Globe is made up of four component, inner globe, outside globe, particle from globe, marker.

I made shader material material for inside globe. it change its alpha based on the distance between camera. if some vertice is far from camera, its opacity is zero.

I also made shader material for outside globe. outside globe is only visible when they are top left or bottom right

tons of particles from globe emitted from globe like bubble of beer. I used gpgpu to calculate the velocity and position of it.

marker of city is visible, when they are in front of camera.

Background

Background is composed of star, nebula, godray, flare from globe

star is located outside of globe. it stretched when dragging fast.

I made nebular with transparent perlin noise texture and plane mesh.

I made flare from globe, and gorday with single shader material.

UI component between webgl globe and dom

I made transparent gradient arrow which connect between city marker in globe and frontend ui component. transparent gradient arrow

Overview in Interaction

- one of Arrows fadeout when they cross each other.

- dragging vertical is limited.

- blur is added to whole scene when you go to dash board page.

- You can mouseover/click visible marker using raycaster.