Founder/Developer
2018 - PRESENTPolygonjs- 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, AlgorithmsSenior WebGL Creative Developer
2020 - 2021Virtual 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, AlgorithmsLead Map Visualization Developer
2020 - 2020Health 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, AlgorithmsWebGL Developer
2018 - 2019Fortune 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, AlgorithmsLead WebGL Developer
2018 - 2018Streaming 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, AlgorithmsThree.js/WebGL/Vue Developer
2018 - 2018Layerframe- 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, AlgorithmsImages Rendering Consultant
2018 - 2018Outshinery- 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, HoudiniThree.js/WebGL Developer
2018 - 2018Leapforward- 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.jsMain Developer
2018 - 2018In 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), RubySenior FX Technical Director
2016 - 2017Industrial 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 ModelingFounder
2012 - 2017PrintMosaic- 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), RubyWriter/Director
2015 - 2016Broken 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, HoudiniFounder
2015 - 2016VfxToolbox- 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), RubyLead FX Technical Director
2015 - 2015MPC- 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, HoudiniFounder
2008 - 2014MediaTag.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), RubyLead FX Technical DIrector
2012 - 2012Framestore- 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 ModelingLead Technical Director
2011 - 2011Weta 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, HoudiniLead FX Technical Director
2008 - 2008Framestore- 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, HoudiniResearch and Development Engineer
2005 - 2006Framestore- 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
Guillaume Fradin
Visual Effects (VFX) Developer in London, United Kingdom
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.
Guillaume is now available for hire
Portfolio
- PolygonjsRuby on Rails (RoR), Ruby, TypeScript, GLSL, WebGL, Three.js, 3D Modeling...
- Virtual Tour CompanyWebGL, 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
- Vue 2 years
- WebGL 2 years
- GLSL 2 years
Availability
Full-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
Experience
- Realtime 3D Visualization on Maphttps://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.jshttps://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. - Gravityhttps://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, SassFrameworks
Ruby on Rails 5, Ruby on Rails (RoR), Foundation CSSLibraries/APIs
Three.js, Vuex, WebGL, GSAP, Vue, Sidekiq, Resque, OpenGL, Chart.js, Google Maps, Google Maps API, ImageMagick, HTML5 Canvas, Stripe, Vimeo API, YouTube APITools
Canvas, Houdini, Webpack, Sublime Text, Vex, Shake, Maya, Foundry Nuke, Git, Adobe Premiere Pro, Final Cut Pro X, Sublime Text 3Other
Web Animation, 3D Art, 3D Animation, 3D Maps, 3D Math, 3D, Visual Effects (VFX), 3D Modeling, Algorithms, Image Processing, Vue-router, Architecture, Data Visualization, DSLR Photography, Filmmaking, Video Editing, Film & Television, OOP DesignsPlatforms
GreenSock Animation Platform (GSAP), Mapbox, Heroku, Linux, UbuntuParadigms
Object-oriented Programming (OOP), Majestic MonolithStorage
Google Cloud, Amazon S3 (AWS S3)
Education
- Master's Degree in Computer Sciences1996 - 2002ESIEE - Paris, France
