Hey, I’m Robin, a Inventive Developer since 2015, primarily based in Paris and a former HETIC scholar.
I’ve labored at companies like 84.Paris and Upperquad, and I’ve additionally freelanced with many others, selecting up a couple of internet awards alongside the best way. I created Wind Waker.js and began a YouTube channel the place I educate WebGL tutorials.
What actually excites me about improvement is having an thought in thoughts and having the ability to see it come to life visually, tweaking it time and again till I discover the fitting answer to attain the consequence I need.
Initiatives I’m Proud Of
Wind Waker JS
After I was a child, I used to be an enormous fan of a GameCube online game known as Zelda: The Wind Waker. It was a vibrant, colourful recreation the place you sailed a ship to discover the world, with a extremely cool pirate vibe! I needed to problem myself, so I made a decision to attempt recreating it in Three.js to see how far I might go.
Fortunately for me, an excellent inventive coder named Nathan Gordon had already written an article again in 2016 about recreating the sport’s water. That gave me a strong basis to begin from.
After a variety of effort, I managed to create one thing I used to be actually happy with, together with six islands with LOD (Stage of Element) logic, dynamic day/evening and climate cycles, pretend physics with objects floating on water, a mini-game just like Temple Run, and a treasure hunt the place you seek for the Triforce.
I confronted many challenges alongside the best way, and when you’re interested in how I tackled them, I made two movies explaining the whole lot:
The undertaking acquired a variety of constructive suggestions, and I’m actually grateful I obtained the prospect to pay tribute to this unbelievable Nintendo recreation.
McDonald’s Switzerland – The Golden Slide Sport
Final December, I had the chance to create a cell online game for McDonald’s Switzerland with the Swipe Again workforce.
The 3D designer supplied us with some actually enjoyable, toon-style belongings, which made the sport look each playful {and professional}—particularly thrilling for me, because it was my first time engaged on an actual recreation undertaking.
I labored alongside David Ronai, simply the 2 of us as builders, and it was fairly a problem! The sport featured weekly quests, unlockable cosmetics, real-world rewards for prime gamers, and a full server-side backend (which David dealt with).
David additionally had this wild thought: to construct the sport utilizing TSL, a brand new language within the Three.js ecosystem that mechanically converts your JS shaders to WebGPU. I realized it through the undertaking and used it to create the 3D recreation. On the time, documentation was sparse and the tech was very recent, nevertheless it promised significantly better efficiency than WebGL. Regardless of the problem, we made it work, and the consequence was superb—WebGPU ran extremely easily on Android.
With all of the 3D belongings we had, we wanted to optimize rigorously. One of many key methods we used was Batched Mesh, combining all obstacles right into a single mesh, which didn’t require TSL however helped loads with efficiency.
The web site is not accessible because it was a part of a Christmas occasion, however I captured a video of the undertaking you could try right here.
Issey Miyake – Le sel d’Issey
Final yr, I labored on a 3D undertaking the place customers might create their very own salt crystal utilizing completely different components, all as a part of a marketing campaign for a brand new Issey Miyake fragrance. It was a extremely enjoyable expertise, and the principle technical problem was attaining an attractive refraction shader impact.
I dealt with the front-end improvement alone and used React Three Fiber for the primary time, a WebGL framework primarily based on Three.js that permits you to construct 3D scenes utilizing React-style parts.
The library was tremendous useful for setting issues up shortly. As I obtained deeper into the undertaking, nonetheless, I bumped into a couple of minor points, however I managed to resolve them with some customized code. I’d undoubtedly advocate React Three Fiber when you already know loads about WebGL/Three.js and luxuriate in working within the React ecosystem.
This undertaking was awarded Web site of the Day (SOTD) on FWA.
Portfolio 2021
I’ve included my portfolio as the ultimate case research. Though it’s an older undertaking and never all the time updated, it nonetheless means loads to me.
I began engaged on it throughout a break proper after the pandemic. I had a really imprecise thought at first, so I started designing and programming on the identical time. It was a curious method of working as a result of I used to be by no means fairly certain how it might end up. With plenty of forwards and backwards, trial and error, and restarts, I actually loved that inventive, spontaneous course of—and I’d undoubtedly advocate it when you’re engaged on a private undertaking!
This undertaking acquired a Web site of the Day (SOTD) award on each Awwwards and FWA.
About me
I’m a Inventive Internet Developer with 10 years of expertise, primarily based in Paris.
I studied at a French faculty known as HETIC, the place I realized a variety of web-related expertise together with design, undertaking administration, advertising and marketing, and programming. In 2015, I had the prospect to do a six-month internship at UNIT9. That is the place I found WebGL for the primary time, and I instantly fell in love with it.
My very first undertaking concerned constructing a VR model of a horror film on the internet utilizing Three.js, and I discovered it completely fascinating.
After that, I labored at a number of companies: first at 84.Paris in France, then for a yr and a half at Upperquad in San Francisco. At these companies, I realized loads from different builders about inventive improvement, clear code structure, and fine-tuning animations. I contributed to a number of award-winning web sites (Awwwards, FWA), and in 2021, I lastly determined to begin freelancing.
I gained my first award solo with my portfolio, and since then I’ve labored with shoppers all over the world, often successful extra awards alongside the best way.
Ultimately, I made a decision it was my flip to share information, so I created a YouTube channel the place I educate easy methods to construct WebGL results. I’ve additionally been a part of the FWA jury since 2018, and I had the chance to publish Making a Risograph Grain Gentle Impact in Three.js and Making a Bulge Distortion Impact with WebGL on Codrops.
Philosophy & Workflow
As a front-end developer, I’ve all the time loved pushing the boundaries of internet animation. I like experimenting with completely different results and sharing them with the workforce to encourage new concepts. I don’t have a particular workflow, as a result of I work with many companies everywhere in the world and all the time should adapt to new frameworks, workflows, and constructions. So I wouldn’t advocate any particular workflow—simply attempt completely different ones and decide the one that matches finest to your undertaking!
Present studying & challenges
At the moment, I’m studying TSL, a Three.js-based method that compiles your Three.js code to WebGPU (with a WebGL fallback) for even higher efficiency! For my present and future challenges, I’d like to create a 3D internet improvement course!
Last Ideas
Thanks Codrops for inviting me, I’ve all the time been a fan of the superb internet animation tutorials.
When you have a undertaking in thoughts, don’t surrender on it! Attempt to discover some free time to at the least give it a shot. Keep inventive!
