IMLEX and Universite Jean Monnet

2024

We develop a colour desnity visualisation using three js. In the program, we use webgl shaders to manipualte geometries and points to allow visualisation of colour in RGB, CIExyY and CIELab space. With a sample video, we are able to process the colour density and visualise it using graphs.

We also add support to WebXR, allowing us to place visualisations in a XR environment as seen in the video.

three.js, html, webxr, webGL-shaders

IMLEX and Universite Jean Monnet

2024

A model simulation of a cornell box within a three.js environment. Used as a experimenting ground for different materials, textures and lighting provided natively by three.js.

Also compatible with XR devices using webxr, allowing us to view the box in 3D immersive environments.

three.js, html, webxr

IMLEX and Universite Jean Monnet

2024

A model simulation of Boston Dynamic’s spot the robot in three.js. We create a replica of spot the robot using three js primitives, and add movement functionality congruent with specifications and capabilities of spot’s different joints. We also add VR and AR functionality to allow it to be run in immersive environments.

three.js, html, webxr

PAKDD

2021

I had designed and developed this website from scratch, only basing off of a a legacy pakdd website developed in the early 2000s. Design process included creating a new brand identity, and manifesting it into a colour scheme and a website mockup (using Figma).

Following on from that, development started by utilising bootstrap and jekyll, developing both the overall content structure and it’s associated look. Utilising p5.js, I was able to add some interactivity. By utilising jekyll, it ensured that future stakeholders can easily update content without having to understand the technical details of it, since content is solely based on markdown files populated throughout.

A login system was also required to allow committee members of the conference to distribute sensitive conference information, documents and guidelines. I implemented a bespoke login system using Google Firebase, that allowed user creation and login activites. This bespoke implementation also allowed stakeholders to configure users without having an understanding of technical details.

HTML, CSS, JavaScript, p5.JS, Bootstrap, Jekyll, Firebase, Figma

ANU Software Innovation Institute

2021

The SII website was initially developed by a third-party company utilising wordpress. This was then migrated into a basic HTML website outside of the wordpress ecosystem after several years. However, this transfer created significant difficulties in maintenance and updating. Many bespoke wordpress plugins converted to JavaScript files where tightly coupled with other files, and presented challenges to the team in updating the website.

In an effort to alleviate this issue, I proposed cleaning up the website while updating it to utilise Jekyll as a content management system, as it allowed for basic markdown files to populate website content, making maintenance more user-friendly. Thus, I had removed any unnecessary wordpress plugins and other remnant JavaScript files, while ensuring the look and feel of the website was maintained. Adding on Jekyll support, the website is now in a stable condition with content updates more accessible for anyone within the team.

HTML, CSS, JavaScript, Jekyll

ANU Software Innovation Institute

2021

As one of my first projects when joining ANU SII, I had designed and developed the front end of the CRISPER website, which was previously a barebones CSS-less website.

Design process involved creating an initial brand identity and logo for the CRISPER project, such that the website could reflect it. Choosing black, greys and yellows for the main colour scheme, I had designed a simple mockup using Figma.

Following approval of the new design, I had begun work on the website. This was my first instance of using bootstrap for website development, and I was able to quickly pick it up and deliver outcomes instantly.

Website front-end was complete and was integrated with dashboards and other software artifacts created by the team surrounding the CRISPER project.

HTML, CSS, JavaScript, Bootstrap

3A Institute

2019

I had worked on the legacy codebase of the old 3ai website and developed it’s new look. I implemented this design overhaul as per the given brand guidelines, maximising code reuse while developing a more maintainable and clean codebase. Still actively maintaining website.

HTML, CSS, JavaScript

IMLEX and Universite Jean Monnet

2024

We develop a colour desnity visualisation using three js. In the program, we use webgl shaders to manipualte geometries and points to allow visualisation of colour in RGB, CIExyY and CIELab space. With a sample video, we are able to process the colour density and visualise it using graphs.

We also add support to WebXR, allowing us to place visualisations in a XR environment as seen in the video.

three.js, html, webxr, webGL-shaders

IMLEX and Universite Jean Monnet

2024

A model simulation of a cornell box within a three.js environment. Used as a experimenting ground for different materials, textures and lighting provided natively by three.js.

Also compatible with XR devices using webxr, allowing us to view the box in 3D immersive environments.

three.js, html, webxr

IMLEX and Universite Jean Monnet

2024

A model simulation of Boston Dynamic’s spot the robot in three.js. We create a replica of spot the robot using three js primitives, and add movement functionality congruent with specifications and capabilities of spot’s different joints. We also add VR and AR functionality to allow it to be run in immersive environments.

three.js, html, webxr

IMLEX and University of Eastern Finland

2023

We developed a system that utilises the novel and unique interaction methods provided by the HoloLens 2 and translate it in an intuitive way to control a robot via ROS2, inspired by the interaction techniques from previous works. Such interactions include hand gestures and voice commands.

The system consists of a HoloLens 2 Application and an accompanying ROS2 node, which communicate to each other via an Flask API webserver. With this system, we also allow different ROS2 robots or XR devices to communicate with each other.

ROS2, Flask, Mixed Reality Toolkit, HoloLens 2

CSIRO's Data61

2022

One of the software engineers within the development team of SafeCoVR. Part of work with CSIRO Data61

Responsible mainly for design and development of UI and UX elements, and implementation of several key functionality and scenes, in particular the tutorial scene.

Worked within a team with regular consultation with expert users.

C#, Unity, Mixed Reality Toolkit, Git, Confluence,

Australian Plant Phenomics Facility at ANU

2021

Developed a system to visualise pointcloud data on the HoloLens 2.

Initial problem was to allow HoloLens to be able to accurately represent pointcloud data, including those with large file sizes. Allowing XR application to be able to read .ply files appropriately was the first issue. Following this, I also implemented novel interaction techniques to the visualised pointcloud, allowing grabbing, scaling and rotating.

Building on top of this XR application, I also developed a system to allow transfer of pointcloud .ply file data from a Desktop to a HoloLens 2 in a distributed manner. To accomplish this, I had a Firebase Cloud API to store URLs of pointcloud files available on the APPF servers. The HoloLens 2 app simply polls the API periodically and is able to fetch all the source URLs. Once a source URL is found, the user is able to click on it within the app and allow it to download and visualise the pointcloud file.

C#, Unity, Mixed Reality Toolkit, Python, Jupyter Notebook, Firebase, Git, HoloLens 2

ANU & CSIRO's Data61

2021

Developed a system to allow graph visualisations to be transfered from a Python or Mathematica notebook on a Desktop to a XR application in a live and distributed manner.

To accomplish this, I developed an XR application using Unity that polls a Firebase Cloud API. This cloud API stores the data format of a 3D graph.

On the desktop side, we created a bespoke python notebook that allowed POSTing of 3D graph data from the desktop. This allows for the full functionality of mature data analytics tools within Python and Mathematica to be instantaneously transported into an Immersive setting.

We had performed several expert user tests in a completely virtual manner through video conferencing. Our XR application is designed to supplement graph exploration tasks in this distributed setting.

We compiled our findings into a paper for IEEE VR 2022, which was accepted as a poster.

C#, Unity, Mixed Reality Toolkit, Python, Mathematica, Jupyter Notebook, Firebase, Mendeley, LaTex, Git

ANU & CSIRO's Data61

2020

Explored the use of Mixed Reality in Visualisation of Hierarchical Pedigree Graph Data. Developed several visualisation techniques alongside novel interaction techniques and conducted user study to measure effectivity of these methods. Compiled findings into 70 page thesis and a poster for IEEE VR 2021.

Thesis can be found at ANU Open Theses

IEEE VR 2021 paper:

S. Razi, H. Gardner and M. Adcock, “Immersive Pedigree Graph Visualisations,” 2021 IEEE Conference on Virtual Reality and 3D User Interfaces Abstracts and Workshops (VRW), Lisbon, Portugal, 2021, pp. 659-660, doi: 10.1109/VRW52623.2021.00212.

C#, Unity, Mixed Reality Toolkit, Mendeley, LaTex, Git, Confluence