Guillaume is available for hire
Hire GuillaumeGuillaume Fradin
Verified Expert in Engineering
Visual Effects (VFX) Developer
Location
London, United Kingdom
Toptal Member Since
May 31, 2018
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
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
Experience
Realtime 3D Visualization on Map
https://brokencircle.s3-eu-west-1.amazonaws.com/toptal/clients/mapbox_with_realtime_3d_data.mp4Designed 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.
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/tt1454468Working 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/)
- 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.
- 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.
Skills
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
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
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
Platforms
GreenSock Animation Platform (GSAP), Mapbox, Heroku, Linux, Ubuntu
Paradigms
Object-oriented Programming (OOP), Majestic Monolith
Storage
Google Cloud, Amazon S3 (AWS S3)
Education
1996 - 2002
Master's Degree in Computer Sciences
ESIEE - Paris, France
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