Hey everybody, what an honour to be on this beautiful neighborhood! I’m Adrián, Artistic Developer at OFF+BRAND. studio, specialising in constructing extremely performant interactive WebGL experiences.
As a curious particular person, I used to be all the time fascinated by the technical facet of design, so throughout my years at college, learning digital design, I began studying Three.js and internet improvement typically to increase my capabilities past prototyping. After 6 years of working in the direction of my MA diploma and slowly getting increasingly into graphics programming, I used to be fortunate to develop into a full-time inventive developer engaged on superb initiatives with much more superb folks.
At the moment, I’m additionally an occasional college lecturer educating visible communications and generative strategies to design college students within the Czech Republic.
Tasks I’m Happy with
The Interactive Dictionary of Free Speech
As talked about firstly, throughout my research I spent quite a lot of time exploring Three.js and laptop graphics. I additionally had an curiosity in socially/politically oriented subjects (extra under), so to wrap up this era of my life, I made a decision to make an immersive web site as my grasp thesis, which was aimed in the direction of the liberty of speech.
The end result was preceded by greater than half a yr of learning the subject, studying, experimenting and designing. I wrote an in depth breakdown of the challenge on Awwwards Weblog.
For this challenge I obtained my first ever SOTD on Awwwards and likewise obtained a SOTM on CSS Design Awards, which I’m nonetheless very pleased with.
Lando Norris
As my first collaboration with OFF+BRAND studio and its unbelievable staff, I used to be lucky to be trusted with the WebGL a part of this challenge, which, on the time of writing this text, has been very properly obtained by each the online neighborhood and the target market.
Probably the most difficult a part of the work was clearly the optimisation, which required a number of iterations for many of the 3D components to realize the quickest attainable outcomes with out compromising the standard an excessive amount of. This concerned managing a number of layers and render targets when masking the helmet on the hero — which presently has 4 totally different variations plus an easter-egg model — and likewise organising transitions between 24 totally different observe visualisations with 490 particular person factors.
One other difficult facet was discovering the very best resolution to sync every WebGL scene with its corresponding DOM aspect on cell. It was vital to minimise the delay between them, which turned tough as we had a number of scenes rendering concurrently, inflicting longer body instances. With affected person debugging and the type assist of Federico Valla, we sorted out the priorities within the render loop to make every part work as easily as attainable.
Webflow – The 2026 State of the Web site
Engaged on the interactive WebGL elements of the report, I used to be exploring methods to craft a refractive impact over varied transferring 3D objects made by my colleague Celia Lopez in OFF+BRAND.
Firstly, I used to be attempting to copy the identical scene setup Celia used to make reference pictures for the consumer in Cinema 4D. Sadly, I rapidly realised I gained’t have the ability to recreate the identical constancy of the glass layer and depth of area that the raytracer in C4D allowed to achieve.
In conditions like these, I all the time attempt to work out methods I can faux sure materials properties through the use of textures or some mathematical method. On this explicit case, I used to be in a position to utterly change the 3D glass layer with a fract perform and a bit of noise to make it extra random, and added a customized texture simulating the glass reflections and shadows. I additionally changed the blurry objects within the background for texture ones, eliminating my preliminary depth-of-field pipeline.
Not solely did this resolution come very near the reference picture, filling the expectations of the ensuing look, it additionally gave me full management over the format of the glass, all whereas saving quite a lot of efficiency.
Aether1
One other collaboration with OFF+BRAND., the place I intently labored with my colleague Celia Lopez to get her incredible 3D idea into an interactive WebGL atmosphere.
Detailed breakdown of the challenge may be discovered on the Codrops article from earlier this yr.
CleverFarm
This time within the function of a UI/UX designer and 3D artist, I’ve designed this generative 3D atmosphere of a farm with the corresponding UI. I used to be specializing in methods to showcase all of the sensible options the CleverFarm is providing to agricultural employees worldwide.
The location was developed by Michal Ščuglík and gained 1st place as one of the best advertising and marketing web site of 2024 within the Czech republic.
Statusovic
One of many issues about web sites I like essentially the most is how merely you’ll be able to share an interactive message to the world. Through the pandemic, we had an ongoing political disaster in Slovakia brought on by the then-prime minister, who has been (fairly vulgarly) attacking everybody not sharing his views on social media.
In my pupil challenge, I made a decision to point out my disagreement with this new tradition of communication by making a parody of the Google T-Rex recreation. On this model the target is to leap over as lots of his posts as attainable.
For a few days, the sport went viral in Slovakia and was even talked about in a number of media.
Mariupol Digital Memorial
A challenge I did throughout my college research, reacting to the Russian invasion into Ukraine and the dreadful occasions that occurred in Mariupol. At the moment, I felt like there was no approach of honouring the civilians, fallen whereas trapped within the besieged metropolis. This led me to create at a least a digital memorial for them.
I used to be fortunate that the challenge was efficiently awarded on two pupil design competitions, which prize I may donate to Ukrainian help at the moment.
My Little Philosophy
Throughout my research, I’ve been lucky to check out varied roles within the inventive business. As a graphic designer, I helped my father run his small printing firm, did publishing work on the native newspaper for two years, had internships at Slovakia’s two greatest promoting companies on the time and later began freelancing as a UI/UX designer on a various set of initiatives.
This path has influenced me immensely and as a inventive developer at present, I nonetheless attempt to preserve as a lot of a designer mindset as attainable. Growing extremely performant WebGL experiences requires quite a lot of technical information, which I actually love, however on the identical time it’s very tempting to get trapped by all its limitations (and, ultimately, develop into the grumpy dev). I make an effort day-after-day to remind myself to look past these limitations and use my previous expertise to be extra empathetic in the direction of the design staff’s craft, wants and issues, serving to them deliver their bold concepts come alive in the very best approach.
Additionally it is the rationale I attempt to spend most of my studying on varied abilities apart from internet improvement, resembling VFX, animation, recreation design or tremendous arts. I discover some information from these fields extremely useful when overcoming numerous challenges, particularly in WebGL, the place you may have restricted computational sources in addition to little or no consumer consideration to work with. Because of VFX, for instance, I learnt shift consumer’s consideration in the direction of the vital issues or create very plausible illusions, whereas animation, however, taught me vital elemental ideas and observational abilities, which has confirmed very worthwhile when crafting all types of cool interactions.
I consider you’ll be able to be taught one thing from each inventive business there may be.
My Toolbox
These days, I’ve been exploring ogl.js on nearly all industrial initiatives I’ve been engaged on. Whereas this will likely sound a bit counterintuitive, it affords a lot smaller bundle sizes in comparison with Three.js, nice efficiency when working with a number of render targets and likewise one other studying alternative to get deeper into specifics of WebGL. With a bit of customized code and further work, I solved nearly all of the lacking items from Three.js and was in a position to apply it to extra complicated initiatives, whereas sustaining superior efficiency.
For asset work, I depend on Blender together with Photoshop to handle my textures and gltf-transform CLI to have really exact management over optimization of the GLB exports.
The Future
Sooner or later, I want to discover higher methods to rapidly prototype and take a look at interactive ideas, which I really feel can typically be time-consuming. For that very motive, I’m now getting extra into Geometry Nodes and Houdini. I had additionally recently found cables.gl, a conveniently node-based WebGL editor, I’d like to delve into extra and doubtless use as a pleasant technique to train shaders to my college students. Oh and to not overlook about AI! Underneath its rising stress, I’d take pleasure in exploring extra significant and useful methods to combine it into my each day work, and I’m curious, and but afraid, to see the way it’s going to form all of the inventive fields.
And the very last thing, as every part retains on accelerating, I’ve a rising urge to seek out time once more to seize the pencil and draw one thing once more. I used to take pleasure in drawing and portray an amazing deal throughout highschool and I actually miss it! These days, I’ve moved a few of my notes and duties again from Notion right into a paper pocket book and rattling, it feels good!
Ultimate Ideas
Within the age of AI chatbots and brokers, it’s very tempting to simply get the issues carried out and never take into consideration them or attempt to perceive them. I’m not saying that is by no means my case, I simply discover it much more motivating for me to look into books, lengthy articles or movies and attempt to actually perceive the core of what I take advantage of in my each day work. As Stephen Hawking mentioned: “If you understand how one thing works, you’ll be able to management it.”Till at present, each step I did in the direction of understanding helped me to be much less depending on out there instruments and be extra in charge of my creativity.
Talking of studying, I want to sincerely thank Codrops for all of the years it has offered me with superb articles and tutorials from one of the best inventive builders on the market. It’s been (and nonetheless is) my most important on-line supply of knowledge and inspiration relating to the subject of inventive improvement and I wouldn’t be the place I’m at present with out that.
PS: I actually miss the e-newsletter 🙁
