SGSAM GHAFARIREAL TIME 3D / ART & CODE
← Back to project library

Development

NextDC WebGL website

MY CONTRIBUTION

Web developer

Built a NEXTDC website prototype that brings interactive 3D into the browser.

WebGL · Interactive 3D

THE PROJECT STORY

Revolutionizing NEXTDC’s Online Presence with a WebGL Prototype

In an exciting endeavor, I developed a cutting edge WebGL prototype for NEXTDC, leveraging modern technologies to create a dynamic and immersive experience for their website. NEXTDC, Australia’s leading data center provider, needed a solution to showcase their innovative edge, and this project aimed to bring their online presence in line with their technological leadership.

About NEXTDC

NEXTDC specializes in data center solutions, enabling businesses across Australia to scale securely and efficiently. Their commitment to innovation made it essential to align their digital presence with their brand’s forward thinking ethos. You can learn more about NEXTDC and their offerings below.

The Project

The primary goal of the project was to create a WebGL prototype that would serve as the foundation for replacing their existing website. By using React and Babylon.js, I developed an interactive and visually compelling experience that reflected NEXTDC’s high tech capabilities.

Key Features of the WebGL Prototype

  1. Immersive Visuals:

    • Utilized Babylon.js to create sleek 3D animations and visual elements.

    • Designed interactive 3D models that dynamically represented NEXTDC’s data centers and services.

    • Created unique 3D scenes for each data center, offering users an in depth exploration of specific locations.

  2. Rich Interactive Media:

    • Integrated 360 degree images to allow users to explore floor plans and spaces in an immersive way.

    • Included video content per level, providing detailed visual narratives of the data centers.

    • Added an image gallery for users to examine specific areas and key features in greater detail.

  3. Responsive Interactivity:

    • Ensured seamless navigation across desktop and mobile platforms.

    • Integrated smooth transitions and intuitive controls for an engaging user experience.

  4. Customizable Interface:

    • Added features to toggle between data center locations and visualize key metrics in real time.

    • Created modular components in React for easy updates and scalability.

  5. High Performance:

    • Optimized WebGL rendering for fast load times without compromising quality.

    • Implemented advanced caching techniques and performance tuning to handle high resolution graphics efficiently.

Interactive Online Demo

You can interact with the WebGL prototype online here. Experience the future of NEXTDC’s digital presence and explore the dynamic features firsthand.

Challenges and Solutions

  1. Performance Optimization:

    • Balancing high quality visuals with performance was critical. I optimized the rendering pipeline and reduced asset sizes without compromising the prototype’s aesthetic appeal.

  2. Cross Platform Consistency:

    • Ensured uniform functionality and design across devices using responsive design techniques and extensive testing.

  3. Complexity of 3D Interactions:

    • Designed intuitive user interactions to simplify the complexity of navigating 3D spaces.

Reflections and Future Directions

This project was a rewarding challenge that demonstrated the transformative power of WebGL in modern web design. The combination of React and Babylon.js provided the tools necessary to create a visually stunning and highly interactive prototype. NEXTDC’s forward thinking approach and enthusiasm for innovation were instrumental in the project’s success.

Looking ahead, I envision further enhancements, such as:

Conclusion

Developing the WebGL prototype for NEXTDC was a testament to the potential of interactive 3D technologies in redefining digital experiences. By merging technical expertise with creative design, this project set a new benchmark for what’s possible in web based visualization. I’m excited about the possibilities this work opens up for the future of NEXTDC and beyond.

CONTINUE EXPLORING

More from the portfolio.

UniSC’s CAVE2
Senior developer

UniSC’s CAVE2

Adapted the Caloundra digital twin for the University of the Sunshine Coast’s CAVE2 display.

Unreal Engine · Immersive display

AR for Architecture
AR developer

AR for Architecture

Developed an AR application that turns printed design drawings into interactive 3D building models.

Unity · Image tracking

VR Cardboard App
VR developer

VR Cardboard App

Built a Cardboard VR application for navigating property tours through gaze based interaction.

Unity · 360° media · Gaze input

Discuss a project ↗