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 individual, I used to be at all times fascinated by the technical side 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 direction of my MA diploma and slowly getting increasingly into graphics programming, I used to be fortunate to change into a full-time inventive developer engaged on wonderful tasks with much more wonderful individuals.
At present, I’m additionally an occasional college lecturer instructing 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 at the start, throughout my research I spent quite a lot of time exploring Three.js and pc 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 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 mission on Awwwards Weblog.
For this mission I obtained my first ever SOTD on Awwwards and in addition received 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 crew, I used to be lucky to be trusted with the WebGL a part of this mission, which, on the time of writing this text, has been very nicely obtained by each the online neighborhood and the target market.
Essentially the most difficult a part of the work was clearly the optimisation, which required a number of iterations for a lot of the 3D parts to attain 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 completely different variations plus an easter-egg model — and in addition organising transitions between 24 completely different monitor visualisations with 490 particular person factors.
One other difficult side was discovering the very best answer to sync every WebGL scene with its corresponding DOM component on cell. It was essential to minimise the delay between them, which grew to become tough as we had a number of scenes rendering concurrently, inflicting longer body instances. With affected person debugging and the sort assist of Federico Valla, we sorted out the priorities within the render loop to make every little thing 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 numerous transferring 3D objects made by my colleague Celia Lopez in OFF+BRAND.
Originally, I used to be making an attempt to copy the identical scene setup Celia used to make reference photographs for the consumer in Cinema 4D. Sadly, I rapidly realised I received’t be capable to recreate the identical constancy of the glass layer and depth of discipline that the raytracer in C4D allowed to achieve.
In conditions like these, I at all times attempt to work out methods I can pretend sure materials properties through the use of textures or some mathematical system. On this explicit case, I used to be capable of utterly exchange the 3D glass layer with a fract operate and somewhat 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 answer come very near the reference picture, filling the expectations of the ensuing look, it additionally gave me full management over the structure 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 improbable 3D idea into an interactive WebGL surroundings.
Detailed breakdown of the mission might be discovered on the Codrops article from earlier this yr.
CleverFarm
This time within the position of a UI/UX designer and 3D artist, I’ve designed this generative 3D surroundings of a farm with the corresponding UI. I used to be specializing in methods to showcase all of the good options the CleverFarm is providing to agricultural employees worldwide.
The positioning was developed by Michal Ščuglík and received 1st place as the perfect advertising web site of 2024 within the Czech republic.
Statusovic
One of many issues about web sites I like probably the most is how merely you’ll be able to share an interactive message to the world. Throughout 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 scholar mission, I made a decision to indicate 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 mission 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 means 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 mission was efficiently awarded on two scholar design competitions, which prize I might donate to Ukrainian assist at the moment.
My Little Philosophy
Throughout my research, I’ve been lucky to check out numerous 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 tasks.
This path has influenced me immensely and as a inventive developer in the present day, I nonetheless attempt to preserve as a lot of a designer mindset as attainable. Creating extremely performant WebGL experiences requires quite a lot of technical data, which I actually love, however on the identical time it’s very tempting to get trapped by all its limitations (and, ultimately, change 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 direction of the design crew’s craft, wants and issues, serving to them carry their formidable concepts come alive in the very best means.
It is usually the rationale I attempt to spend most of my studying on numerous abilities moreover internet improvement, corresponding to VFX, animation, recreation design or superb arts. I discover some data from these fields extremely helpful when overcoming various challenges, particularly in WebGL, the place you could have restricted computational assets in addition to little or no person consideration to work with. Due to VFX, for instance, I learnt shift person’s consideration in direction of the essential issues or create very plausible illusions, whereas animation, then again, taught me essential elemental rules and observational abilities, which has confirmed very useful when crafting all types of cool interactions.
I consider you’ll be able to be taught one thing from each inventive business there’s.
My Toolbox
These days, I’ve been exploring ogl.js on virtually all business tasks I’ve been engaged on. Whereas this will likely sound a bit counterintuitive, it presents a lot smaller bundle sizes in comparison with Three.js, nice efficiency when working with a number of render targets and in addition one other studying alternative to get deeper into specifics of WebGL. With somewhat customized code and additional work, I solved virtually all of the lacking items from Three.js and was capable of apply it to extra advanced tasks, whereas sustaining superior efficiency.
For asset work, I depend on Blender together with Photoshop to handle my textures and gltf-transform CLI to have actually 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 usually be time-consuming. For that very motive, I’m now getting extra into Geometry Nodes and Houdini. I had additionally these days found cables.gl, a conveniently node-based WebGL editor, I’d like to delve into extra and doubtless use as a pleasant strategy to educate shaders to my college students. Oh and to not overlook about AI! Below its rising strain, I’d take pleasure in exploring extra significant and useful methods to combine it into my every 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 little thing retains on accelerating, I’ve a rising urge to search out time once more to seize the pencil and draw one thing once more. I used to take pleasure in drawing and portray an ideal 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!
Closing Ideas
Within the age of AI chatbots and brokers, it’s very tempting to only get the issues accomplished 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 every day work. As Stephen Hawking stated: “If you understand how one thing works, you’ll be able to management it.”Till in the present day, each step I did in direction of understanding helped me to be much less depending on obtainable instruments and be extra answerable for my creativity.
Talking of studying, I want to sincerely thank Codrops for all of the years it has offered me with wonderful articles and tutorials from the perfect inventive builders on the market. It’s been (and nonetheless is) my principal on-line supply of knowledge and inspiration concerning the subject of inventive improvement and I wouldn’t be the place I’m in the present day with out that.
PS: I actually miss the publication 🙁
