Guillaume Fradin, Visual Effects (VFX) Developer in London, United Kingdom
Guillaume Fradin

Visual Effects (VFX) Developer in London, United Kingdom

Member since May 25, 2015
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.
Guillaume is now available for hire

Portfolio

Experience

Location

London, United Kingdom

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.

Employment

  • 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
  • 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
  • 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.js, Ruby on Rails (RoR), Mapbox
  • 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.js, Three.js, GLSL, Mapbox, WebGL
  • lead webgl developer

    2018 - 2018
    Streaming music provider (NDA)
    • Created a 3D interactive globe with dots representing music events, using Houdini, threejs and vuejs.
    • Created a system to artistically place music events using Houdini, and export them to threejs. 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.js, WebGL, Three.js
  • threejs/webgl/vuejs 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 Threejs 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.js, JavaScript, GLSL, WebGL, Three.js
  • 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
  • threejs/webg 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
  • 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
  • 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
  • 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
  • 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.js, Ruby on Rails (RoR), Ruby
  • 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
  • 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
  • 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
  • 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++

Experience

  • 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.

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.js, Sidekiq, Resque, OpenGL, Chart.js, Google Maps, Google Maps API, ImageMagick, HTML5 Canvas, Stripe, Vimeo API, YouTube API
  • 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), Image Processing, Vue-router, Architecture, Data Visualization, DSLR Photography, Filmmaking, Video Editing, Film & Television, OOP Designs
  • Platforms

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

    Object-oriented Programming (OOP), Majestic Monolith
  • Storage

    Google Cloud, AWS S3

Education

  • Master's degree in Computer Sciences
    1996 - 2002
    ESIEE - Paris, France

To view more profiles

Join Toptal
Share it with others