Hello, I'm Joel
Web Design/Dev

portfolio

VFX

portfolio

Hi, I'm Joel

VFX Artist and Web Developer

I love to code and design stuff. I've been trained as a VFX artist, and am self taught in web design and development since a young age. I enjoy designing and developing web apps people find useful, making them look good, as well as giving them the freedom to customise the apps to suit them.

I have a passion for VFX, photography and virtual reality, and have received my master's degree involving real time rendering and VR.

I'm a nerd with computers and find it fascinating exploring ways in which I can be creative with them.

Degrees

Creative Technology MSc

Visual Effects For Film And Television BSc (Hons)

VFX Skills

  • Autodesk Maya
  • 3D Equalizer
  • Substance Painter
  • The Foundry Nuke
  • 3D Coat
  • Unreal Engine
  • Adobe Photoshop
  • Adobe Premiere Pro
  • Blockbench

Web and Code Skills

  • HTML
  • CSS
  • Javascript
  • jQuery
  • Typescript (learning)
  • React (learning)
  • Bootstrap
  • Tailwind
  • Webpack
  • Vite
  • Node.js
  • Web Extensions
  • Bash Scripting
  • Python
  • git

Email

LinkedIn

GitHub

Vimeo

2020
Gurkha LAPV

This is a Gurkha LAPV, an APC (Armoured Personnel Carrier). The wheels, steering and body are rigged to help with animation.

2014
Tucker Sno-Cat 743

A 1955 Tucker Sno-Cat 743. Used for the 1957-1958 Commonwealth Trans-Antarctic Expedition. I saw this in the British Science Museum and thought it has a really interesting design, so I decided to model it for one of my first uni assignments.

2014
PL-01 Stealth Tank

A state-of-the-art stealth tank.

2019
Public Phone

A public phone I made as part of one of my environment scenes.

2019
Alternate 1940s Street

This is a 1940s inspired New York Street, but set in an alternate reality; thus being a few slight differences from our own 1940s reality.

2015
Robot Lizard

This little guy was the first thing I've fully rigged, so I can animate him walking and moving around.

2021
Macintosh Classic

A Macintosh Classic in a 90's style office cubicle I made as a side project.

2016
Aperion

In my third year at uni, we had compositing project where we could pick one of three shots from a short film. Some of the things I did were, cleaning up the shot by rotopainting out some objects, replaced the box graphic and the clock face, as well as changing what's on the two monitors. I also added the 'time bubble' and the reflections in the lamp.

2018
US Fire Hydrant

Realistic US fire hydrant I made as part of one of my environment scenes.

2018
Steve

This is my first fully rigged and animated character. This small project combines 3D, 2D and matchmove skills.

2015-2022
This Website

This is my site. I have taught myself HTML, CSS and JavaScript since seconday school, and enjoy it quite a lot, therefore I wanted to create my very own website from scratch.

2023
DHT Website

Currently designing a website for a medical cyber security company.

2020-2021
Deluge Web UI Retheme

I noticed the web UI theme for Deluge (a popular download manager) was quite outdated, and also lacked a dark mode, so I decided to create a new modern and dark theme myself. The original interface also lacked a responsive design for small screen devices, so while I was creating the new theme, I made sure it was responsive and worked well on a phone. I also redesigned the icons, and at higher resolution, making them look modern and fit the dark theme. The user can also easily change the accent colour. I open sourced my theme on GitHub, and wrote clear instructions on how to install it for multiple different platforms/versions.

2023
World Cities Geolocation Dataset

This is a python script I wrote to collect geolocation data for all the cities in the world and create a simple to use JSON/CSV file. The script has a Command Line Interface so users can customise what data it includes.
View on GitHub

2022-2023
Reddit Enhancer

This is a browser extension that has various tweaks to enhance the appearance and productivity of reddit.com. I started with adding a feature that allows the user to make the content feed wider which in turn can make the content bigger and easier to see. It also gives the user control on how they want to view tall images which would normally be cropped; it can scale the images down to make them fit the height of the post, or adds a scroll bar. There are many other features, and I have received very positive feedback. I currently have more than 1200 users across three platforms. GitHub/Store Links

2018
Smart LED Light Terminal Control

I have an interest in smart home automation, and have set up a HomeBridge hub with my Raspberry Pi. This allows me to control my non Apple supported LED smart lights with my iPhone. However I also wanted to control it with my computer from the terminal for greater flexibility. I reversed engineered the smart bulb communication and found out the necessary commands to not only turn the light on and off, but also control the colour and brightness. I wrote some easy to use scripts and uploaded them to my GitHub.

2016
Robot Arm Guy

A character with a robot arm for a dsytopian future scene for a uni project.

2018
Car Number Plate Replace

Just a simple car number plate replace test, also removed some rust and finger prints on the boot.

2018
Intime Arm Countdown Clock

I was inspired by the arm countdown clock from the film 'Intime'. Here's my test to try and reproduce it.

2015
Concept Attack Ship

This is a concept future military plane model.

2016
uRadio

This was my second mobile app I created several years ago for Ubuntu Touch. This was an internet radio app, where the user can listen to dozens of internet radio stations from around the world, all from one place. This is a very early design, but has the ability for it to adapt the interface depending on the screen size, so it takes advantage of larger screens on tablets and desktops, but still fully functional on a phone. I may revisit this app, but instead design it with the more modern framework KDE Kirigami.

2016
SoundBoard

This was my first attempt at creating a mobile app several years ago. I started learning qt and QML for Ubuntu Touch based apps. My first app was rather simple, nothing too fancy or new. It's just an app that can play various ambient sounds like thunderstorms, rivers, rain etc. I may revisit this app, but instead design it with the more modern framework KDE Kirigami.

2018
Head Tracking Test

A quick head track and added a pair of 3D glasses.

2018
Arm Removal Test

A quick and rough arm removal test. I may replace the end with some kind of robot arm.

2022-2023
Cobalt Tab

This is a customisable new tab/start page web browser extension/website where the user can create and move widgets, such as bookmarks, notes, timers, and todo lists. I initially created this because when I play games with Steam, the in-game overlay web browser doesn't support saving bookmarks. This is something I would find useful as I like to use guides, maps or other resources to help with the game, and would like to save them for next time. I created this site which allows the user to not only add bookmark links, but also change the layout, background, and style of the widgets. It also has multiple workspaces, so you can have one for "home" and one for "work", etc. This has now become a proper web browser extension for Firefox, Chrome and Edge. Here's a link to the product page.

2020
NTU Master's Project - Archviz VR
Project Overview

For my master's university project, I am exploring the possibilities of virtual reality and how it can be used to aid architectural visualisation by creating a proof of concept app. The use of VR will allow clients to more naturally see and understand the designs, and therefore provide detailed feedback to the architects and designers. It can also be used to help create different interior designs to test colour schemes, design styles and furniture.

I am using my skills in VFX to create a highly detailed and photorealistic modern studio flat, and rendering it completely in Unreal Engine for user interaction in VR. The flat will be interactable, allowing the user to move and place objects, turn lights on and off, change the colours and/or textures of objects and furniture, and open and close doors.

Another key element of this project is to experiment with real time ray tracing to make the scene feel as real as possible. Ray tracing is a method of computer generated lighting that casts light rays from the camera, hitting objects and bounces off to hit another object, collecting material data as it goes for more accurate lighting. This is closer to how light works in real life, however is more computational expensive and has only been achievable in the last few years in real time.

Renders
These are just a few renders of items in the environment so far. Still a work in progress. These are rendered in Maya with Arnold GPU renderer. Fully ray-traced and PBR materials.
Planning

Before I started modelling the 3D assets and developing the user interface in Unreal Engine, I used AutoCAD to create blueprints to help plan out what I am going to do. However during development, I have slightly improved the styles and layout.

Maya

Once I came up with the type of building I wanted to model, I had to come up with the floor plans for it, and then model it in 3D with Maya. I knew that later down the pipeline in Unreal Engine, I wanted to be able to select each element in game to change the colours, etc, and the easiest way to achieve that was to separate everything into its own object. This is already done for most objects, but for the main building model, every wall, floor and ceiling has been extracted into its own mesh and is not actually connected to each other.

Unreal

I have never used Unreal Engine for a project before, and had to teach myself and learn how it works and how to use it to make my ideas work.

One example I had to figure out, is simple collision of objects. In a game engine, you need to be able to collide with objects so your character and other objects don't just pass through them, therefore requiring you to create a collision mesh for every object. I could use the original mesh (object model) as the collision mesh, however these can be too complex for this purpose and wastes computational power, so instead I created a low poly proxy mesh (low quality) of each object in Maya, then exported the mid poly mesh along with the low poly out together as an FBX (a 3D model file), however I needed to add the prefix "UCX_" to the low poly mesh name to indicate it's the collision mesh for Unreal.

A few features I have added are, working light switches, you can pick up and move objects, open and close doors, select objects and change it's colour and material properties, there's a music player, you can change the time of day and the lighting updates with realistic sun location, and there's a camera mode to take screenshots.

Audio Test

This is a quick audio test from a portable speaker I made. I wanted to learn how to add basic sound elements in Unreal Engine, so I made this speaker play some music when the user interacts with it. It has full 3D sound so the user can hear which direction the music is playing from, and also has sound attenuation so that the volume decreases the further away you are from it.

Project Management

To help with managing my project and keeping track of what I need to do, I created a critical path to roughly plot the main key areas of this project on a timeline. This allows to see if I am on target or not, and to make sure I'm not spending too long working on one aspect before continuing on to the next.

To break it down further and to know exactly what I have to create and what's been done, I created a kanban. This is so that I add ideas and elements I want to make in an "Ideas" column as a to-do-list, then have an "In-progress" column and a completed column. I like this methodical way of working where I can see exactly what I need to do, and then check it off the list when it's done. It's a good way to see visual progress and to stay motivated.

Due to COVID-19 however, I no longer have access to my university and the Oculus Rift S VR headset I was hiring for testing. Forunately I can carry on working on my project at home, however without the VR interface, despite that being a main focus of my project. I can use traditional keyboard and mouse input for the moment, and implement VR capabilities further down the line when I regain access to the headset. Product testing is another aspect I cannot easily do as I require people in person to test on, and because of the current quarantine, I cannot do. I can however use my family and myself to get basic testing done.

Even though we can't attend lectures physically, we do have online lectures where we can still recieve information and advice about the course and our projects.

My critical path here will need to be updated to reflect the changes I have had to make to my project because of the affects of COVID-19.