Developer Highlight: Robin Payot | Codrops

Hey, I’m Robin, a Artistic Developer since 2015, primarily based in Paris and a former HETIC pupil.

I’ve labored at businesses like 84.Paris and Upperquad, and I’ve additionally freelanced with many others, selecting up a couple of net awards alongside the way in which. I created Wind Waker.js and began a YouTube channel the place I educate WebGL tutorials.

What actually excites me about growth is having an thought in thoughts and with the ability to see it come to life visually, tweaking it repeatedly till I discover the proper answer to realize the end result I need.

Tasks I’m Proud Of

Wind Waker JS

Once 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 very cool pirate vibe! I needed to problem myself, so I made a decision to strive recreating it in Three.js to see how far I may go.

Fortunately for me, a superb artistic 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 pleased with, together with six islands with LOD (Degree of Element) logic, dynamic day/evening and climate cycles, pretend physics with objects floating on water, a mini-game much like Temple Run, and a treasure hunt the place you seek for the Triforce.

I confronted many challenges alongside the way in which, and if you happen to’re inquisitive about how I tackled them, I made two movies explaining all the things:

The undertaking acquired a variety of constructive suggestions, and I’m really grateful I received the possibility to pay tribute to this unbelievable Nintendo recreation.

McDonald’s Switzerland – The Golden Slide Recreation

Final December, I had the chance to create a cellular online game for McDonald’s Switzerland with the Swipe Again crew.

The 3D designer offered 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 robotically converts your JS shaders to WebGPU. I discovered it in the course of the undertaking and used it to create the 3D recreation. On the time, documentation was sparse and the tech was very recent, but it surely promised a lot better efficiency than WebGL. Regardless of the problem, we made it work, and the end result was wonderful—WebGPU ran extremely easily on Android.

With all of the 3D belongings we had, we would have liked to optimize fastidiously. 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 rather a lot with efficiency.

The web site is now not obtainable because it was a part of a Christmas occasion, however I captured a video of the undertaking which you could take a look at right here.

Issey Miyake – Le sel d’Issey

Final 12 months, I labored on a 3D undertaking the place customers may create their very own salt crystal utilizing completely different substances, all as a part of a marketing campaign for a brand new Issey Miyake fragrance. It was a very enjoyable expertise, and the principle technical problem was attaining a ravishing refraction shader impact.

I dealt with the front-end growth alone and used React Three Fiber for the primary time, a WebGL framework primarily based on Three.js that allows you to construct 3D scenes utilizing React-style parts.

The library was tremendous useful for setting issues up shortly. As I received deeper into the undertaking, nevertheless, I bumped into a couple of minor points, however I managed to unravel them with some customized code. I’d undoubtedly suggest React Three Fiber if you happen to already know rather a lot 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. Regardless that it’s an older undertaking and never at all times updated, it nonetheless means rather a lot 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 similar time. It was a curious manner of working as a result of I used to be by no means fairly certain how it might prove. With a number of forwards and backwards, trial and error, and restarts, I actually loved that artistic, spontaneous course of—and I’d undoubtedly suggest it if you happen to’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 Artistic Internet Developer with 10 years of expertise, primarily based in Paris.

I studied at a French college known as HETIC, the place I discovered a variety of web-related expertise together with design, undertaking administration, advertising and marketing, and programming. In 2015, I had the possibility 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 net utilizing Three.js, and I discovered it completely fascinating.

After that, I labored at a number of businesses: first at 84.Paris in France, then for a 12 months and a half at Upperquad in San Francisco. At these businesses, I discovered rather a lot from different builders about artistic growth, 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 received my first award solo with my portfolio, and since then I’ve labored with purchasers all over the world, sometimes successful extra awards alongside the way in which.

Finally, I made a decision it was my flip to share information, so I created a YouTube channel the place I educate the right way 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 Mild Impact in Three.js and Making a Bulge Distortion Impact with WebGL on Codrops.

Philosophy & Workflow

As a front-end developer, I’ve at all times loved pushing the bounds of net animation. I like experimenting with completely different results and sharing them with the crew to encourage new concepts. I don’t have a selected workflow, as a result of I work with many businesses all around the world and at all times need to adapt to new frameworks, workflows, and buildings. So I wouldn’t suggest any particular workflow—simply strive completely different ones and decide the one that matches greatest in your undertaking!

Present studying & challenges

Presently, I’m studying TSL, a Three.js-based strategy 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 net growth course!