Guillaume Fradin, Developer in London, United Kingdom
Guillaume is available for hire
Hire Guillaume

Guillaume Fradin

Verified Expert  in Engineering

Bio

As an entrepreneur and seasoned front-end developer, Guillaume has years of experience using and creating tools around videos and images. Always thinking about the user first, he tries to find the best way to design and develop features so that they can be easily understood and used. He is conscientious, believes in communicating goals clearly, iterating over initial ideas to constantly improve them, and testing his code thoroughly.

Portfolio

Polygonjs
Ruby on Rails (RoR), Ruby, TypeScript, GLSL, WebGL, Three.js, 3D Modeling...
Virtual Tour Company
WebGL, Three.js, TypeScript, HTML, CSS, GLSL, Webpack, Houdini, Python, Vex...
Health Facility Company (NDA)
TypeScript, Vue, Ruby on Rails (RoR), Mapbox, 3D Modeling, Algorithms...

Experience

  • Visual Effects (VFX) - 15 years
  • Houdini - 15 years
  • Ruby on Rails 5 - 10 years
  • Three.js - 8 years
  • Mapbox - 2 years
  • GLSL - 2 years
  • WebGL - 2 years
  • Vue - 2 years

Availability

Part-time

Preferred Environment

Git, Sublime Text, Linux

The most amazing...

...thing I've designed and implemented was an interactive tool for a Fortune 500 company that allowed to visualize real-time 3D air quality data on a map.

Work Experience

Founder/Developer

2018 - PRESENT
Polygonjs
  • Developed a Node-based software to create interactive 3D web applications. Current demo (beta): https://polygonjs.com/demo.
  • Anticipated end-goal will be to create 3D configurators for online shops as well as online real-time visualizations.
Technologies: Ruby on Rails (RoR), Ruby, TypeScript, GLSL, WebGL, Three.js, 3D Modeling, Algorithms, Architecture, Full-stack, Software Design, Startups, Node.js, React, Game Development, Gaming, Animation

Senior WebGL Creative Developer

2020 - 2021
Virtual Tour Company
  • Acted as the sole WebGL developer and was in charge of creating a virtual tour, where the users can navigate inside a space where many high res 3D models are displayed.
  • Optimized 30+ different 3D models, each being a 1G+ file. Reduced them each to 1Mb without loss of visual quality.
  • Created different level of details (LODs) for each model and switch which version is displayed depending on the camera position.
  • Developed the camera navigation system where the user can click on the point of interest (POI) and this animates the camera to the target position (At each camera position change, hide or show the relevant objects, such as new POI or specific tractors).
  • Developed the look dev, which included the creation of lightmaps, the addition of a sky to create stunning visuals.
  • Created custom GLSL shaders for pulsating POI.
Technologies: WebGL, Three.js, TypeScript, HTML, CSS, GLSL, Webpack, Houdini, Python, Vex, 3D Modeling, Algorithms, Architecture, Leadership, Full-stack, Software Design, Node.js, Animation

Lead Map Visualization Developer

2020 - 2020
Health Facility Company (NDA)
  • Created a visualization tool to view medical facilities over the US.
  • Implemented designs provided by the client to allow users to create PPE requests, saving to the database, and displaying summarized previews to visitors.
  • Implemented a custom visualization tool, with a combination of data points displayed on the map and others on an online spreadsheet.
  • Tested several map look and feel, involving map skins (dark, light, colorful) and color scheme for the thousands of markers present at any given time.
  • Optimized loading system to pre-cache map data, update it as users entered new data, and display it in a reasonable time frame.
Technologies: TypeScript, Vue, Ruby on Rails (RoR), Mapbox, 3D Modeling, Algorithms, Architecture, Full-stack, Software Design

WebGL Developer

2018 - 2019
Fortune 500 Telco (NDA)
  • Created several design propositions to display air quality data in 3D over a map.
  • Implemented tools and technology to create 3D histograms from the real-time feed with three.js and custom GLSL Shaders on top of Mapbox.
  • Fetched street data from Mapbox, converted it to geometries, and applied custom GLSL Shaders to show street animations, mimicking traffic flow.
  • Implemented interactions allowing users to select any streets and display data for that location.
  • Implemented a tool to navigate back and forth in time, allowing to see past air quality data.
Technologies: Houdini, Vue, Three.js, GLSL, Mapbox, WebGL, Algorithms, Full-stack, Software Design, Animation

Lead WebGL Developer

2018 - 2018
Streaming music provider (NDA)
  • Created a 3D interactive globe with dots representing music events using Houdini, Three.js, and Vue.
  • Created a system to artistically place music events using Houdini, and export them to Three.js. The goal was to find the right balance between accurate locations and visually pleasing dots distributions.
  • Created custom glsl shaders to have 3D wave effects on the globe when a user would hover over a dot.
  • Given the artistic quality of the project, strong emphasis was put on the look and feel. and the final design is an adaptation from the pdf designs given by the client, as the perception changed once animations were in place.
  • Created the various animations: for the camera, rotation of the earth, wave effects, stars fading in.
Technologies: Houdini, Vue, WebGL, Three.js, Algorithms, Animation

Three.js/WebGL/Vue Developer

2018 - 2018
Layerframe
  • Implemented a site for an event at a music company.
  • The site was an experience centered around a 3D globe, on which 50+ dots were placed at precise locations to announce music events.
  • The user could navigate in time to display specific festivals, as well as interact with the globe, and click on the various dots to display history and statistics of each one.
  • The globe design was created using Three.js instancing system, combined with a custom glsl shader reacting on user click, to create a smooth propagation of color on the globe.
  • I've also used Houdini to pre-generate some geometries, such as the points location and the countries texture.
  • Custom event propagation was used to display and position event label created in html, based on the 3D position of the dots in threejs. Distance from camera also had to be taken into account to make the dots fade away when crossing the horizon.
Technologies: Chart.js, Vue, JavaScript, GLSL, WebGL, Three.js, Algorithms

Images Rendering Consultant

2018 - 2018
Outshinery
  • Created a prototype to help the client automate the rendering of thousands of images while allowing manual tweaks when required.
  • Used the visual effects software Houdini to pipeline the various inputs and only render when required.
Technologies: Python, Ruby on Rails (RoR), Ruby, Houdini

Three.js/WebGL Developer

2018 - 2018
Leapforward
  • Developed a real-time organic/cell-looking view of different chat channels, using Three.js.
  • Collaborated with the mobile developer to allow the view to work with React-mobile.
Technologies: JavaScript, Three.js

Main Developer

2018 - 2018
In One Motion
  • Designed and developed the whole application from scratch, with regular communication with the client.
  • Integrated Google Cloud to allow users to start a virtual machine with a single click.
Technologies: Heroku, Google Cloud, JavaScript, Ruby on Rails (RoR), Ruby

Senior FX Technical Director

2016 - 2017
Industrial Light and Magic
  • Created, maintained, and produced a wide variety of visual effects (flying papers, building destruction, magical character transformation, space explosion, stampede dust trails) for the films Doctor Strange and Star Wars: The Last Jedi.
  • Contributed as part of a 5-10 person FX team, and coordinated with other departments (production. lighting, modeling, compositing).
Technologies: Three.js, Python, Houdini, 3D Modeling, Leadership, Animation, Videos

Founder

2012 - 2017
PrintMosaic
  • Created the full web application, which allowed users to create large poster mosaics made of hundreds of smaller images. (demo available on request).
  • Developed the server side with Ruby on Rails and the client side with CoffeeScript which allowed clients to easily see a preview of their poster mosaics using a custom magnifier, showing how their uploaded photos would be post-processed.
  • Designed the application to be fully automated with posters generated in background tasks as soon as a purchase was made.
  • Sold posters to thousands of clients using the application.
  • Oversaw frequent deployments of the app on Heroku.
Technologies: Stripe, Resque, Heroku, CoffeeScript, Ruby on Rails (RoR), Ruby, Startups

Writer/Director

2015 - 2016
Broken Circle Productions
  • Wrote, produced, and directed the short film SEEDS, which was selected in nine festivals including the London Short Film Festival and the Aesthetica Film Festival, making it BAFTA eligible. The film is available on https://vimeo.com/brokencircleprod/seeds (password: seeds).
Technologies: Foundry Nuke, Houdini

Founder

2015 - 2016
VfxToolbox
  • Created the complete web application which allowed visual effects artists using Houdini to easily share their work on the platform. Animated 3D models and tools were uploaded from Houdini and displayed in the browser using code based on three.js. (demo available on request).
  • Customized Three.js to properly display in browser geometry files created by the Houdini software.
Technologies: Houdini, Three.js, Ruby on Rails (RoR), Ruby, Startups

Lead FX Technical Director

2015 - 2015
MPC
  • Created, maintained, and used tools to produce a wide variety of visual effects for the film The Martian including dust tornados and dust puffs.
  • Led a three-person team and ensured communication with other departments (production, animation, concept, lighting, compositing).
  • Received nomination for an Oscar for Best Achievement in Visual Effects.
Technologies: Foundry Nuke, Python, Houdini, Leadership, Animation, Videos

Founder

2008 - 2014
MediaTag.io
  • Designed and created a complete web application using Ruby on Rails for the server.
  • Created the client side using Vue.js, CoffeeScript, Pug, Sass, and Foundation.
  • Designed a minimalist UI, ensuring that the right amount of information is given to the user at the right time.
  • Managed the inbound (blog, SEO) and outbound (reach out to industry influencers and bloggers) marketing as well as automation such as referral system.
  • Integrated the app with third-party tools like YouTube and Vimeo (using both server and JavaScript API).
  • Oversaw frequent deployments of the app on Heroku.
Technologies: Sass, Pug, Sidekiq, Heroku, CoffeeScript, Three.js, Vue, Ruby on Rails (RoR), Ruby, Startups

Lead FX Technical DIrector

2012 - 2012
Framestore
  • Created, maintained, and used tools to produce a wide variety of visual effects for the underwater end sequence of the film Gravity. The effects included plant procedural modeling and animation, bubbles, floating plankton, and large smoke/mud simulation.
  • Led a two-person team and ensured communication with other departments (production, animation, concept, lighting, compositing).
  • Contributed to the film that won an Oscar for Best Achievement in Visual Effects.
Technologies: Vex, Python, Houdini, 3D Modeling, Leadership, Animation, Videos

Lead Technical Director

2011 - 2011
Weta Digital
  • Created, maintained, and used tools to produce smoke simulations for the horse chase sequence in the film Abraham Lincoln Vampire Hunter. The effects were done using Houdini, which was new in the company.
  • Designed several pipeline tools using a combination of Ruby and Python to be able to import crowd animations and send render jobs to the farm.
  • Led a ten-person team and ensured communication with other departments (production, compositing, crowd, animation).
Technologies: Vex, Python, Ruby, Houdini, Animation, Videos

Lead FX Technical Director

2008 - 2008
Framestore
  • Created, maintained, and used tools to produce a wide variety of visual effects for James Cameron's film Avatar. The effects included refinery fire and smoke, tree dynamics, mist and bullet impacts, using Houdini.
  • Designed several pipeline tools, using Python, to be able to import assets from the layout team.
  • Led a four-person team and ensured communication with other departments (production, layout, modeling, lighting, compositing).
  • Contributed to the film that won an Oscar for Best Achievement in Visual Effects.
Technologies: Vex, Python, Houdini, Animation, Videos

Research and Development Engineer

2005 - 2006
Framestore
  • Developed a variety of tools used by 100+ artists.
  • Built an import node in the compositing software Shake, using C++, to allow artists to import assets from the company database.
  • Developed the UI of a render management desktop application, using C++ and OpenGL, to allow artists to organize a tree of task dependencies that would then be sent to the render farm.
Technologies: Maya, Shake, Houdini, OpenGL, Perl, Python, C++, 3D Modeling, Videos

Realtime 3D Visualization on Map

https://brokencircle.s3-eu-west-1.amazonaws.com/toptal/clients/mapbox_with_realtime_3d_data.mp4
Designed and implemented various 3D visualization of real-time data over a map.

Polygon.js

https://polygonjs.com/
Polygon.js is a WebGL engine, powered by Three.js, written in TypeScript and Vue.js.

It is a node-based application, allowing users to easily prototype ideas, enabling them to focus on the design rather than being slowed down by technical details.

Gravity

https://www.imdb.com/title/tt1454468
Working on the film Gravity, I built several tools with Houdini, Python, and VEX to make the visual effects of the photo-realistic underwater end sequence.

Visual Effects Showreel

A compilation of the visual effects I had the pleasure to be involved in. My work on the following films can be seen:
- Avatar
- Gravity
- Edge of Tomorrow
- Iron Man 3

This does not include my most recent work on Doctor Strange, Star Wars: The Last Jedi, and The Martian.

(full list: https://www.imdb.com/name/nm3070328/)

Short Film: Seeds

Wrote, produced, and directed the short film SEEDS, which was selected in nine festivals, including the London Short Film Festival and the Aesthetica Film Festival, making it BAFTA eligible.

MediaTag.io

MediaTag is a media organization tool for filmmakers. It allows users to easily organize and share videos and photos.

- server-side: Ruby on Rails
- client-side: Vue.js (with Pug, CoffeeScript, Sass, and Foundation)

It is designed to be very simple to use, as everything is organized only using tags, with forms or drag and drop.

It also comes with a browser extension (Firefox and Chrome), allowing users to save photos and videos without interrupting the navigation.
1996 - 2002

Master's Degree in Computer Sciences

ESIEE - Paris, France

Libraries/APIs

Three.js, Vuex, WebGL, GSAP, Vue, Node.js, Sidekiq, Resque, OpenGL, Chart.js, Google Maps, Google Maps API, ImageMagick, HTML5 Canvas, Stripe, Vimeo API, YouTube API, React

Tools

Canvas, Houdini, Webpack, Sublime Text, Vex, Shake, Maya, Foundry Nuke, Git, Adobe Premiere Pro, Final Cut Pro X, Sublime Text 3

Languages

CSS, HTML, CoffeeScript, Ruby, GLSL, JavaScript, HTML5, Python, TypeScript, C++, Perl, Pug, Sass

Frameworks

Ruby on Rails 5, Ruby on Rails (RoR), Foundation CSS

Platforms

GreenSock Animation Platform (GSAP), Mapbox, Heroku, Linux, Ubuntu

Paradigms

Object-oriented Programming (OOP), Majestic Monolith

Storage

Google Cloud, Amazon S3 (AWS S3)

Other

Web Animation, 3D Art, 3D Animation, 3D Maps, 3D Math, 3D, Visual Effects (VFX), Architecture, 3D Modeling, Algorithms, Animation, Videos, Image Processing, Vue Router, Leadership, Full-stack, Software Design, Startups, Data Visualization, DSLR Photography, Filmmaking, Video Editing, Film & Television, OOP Designs, Game Development, Gaming

Collaboration That Works

How to Work with Toptal

Toptal matches you directly with global industry experts from our network in hours—not weeks or months.

1

Share your needs

Discuss your requirements and refine your scope in a call with a Toptal domain expert.
2

Choose your talent

Get a short list of expertly matched talent within 24 hours to review, interview, and choose from.
3

Start your risk-free talent trial

Work with your chosen talent on a trial basis for up to two weeks. Pay only if you decide to hire them.

Top talent is in high demand.

Start hiring