1/11
Dreams in AI.
3D modelling/AI Prompt shaping. 23.01.2023
Dreams in AI - manifested in 3D. An article I wrote on how to add AI driven tools and tasks to your daily routines. As an concrete example: From Midjourney to 3D.
→ Read the article
→ Some more images
→ Launch interactive demo
Flamingo.
3D/Shader/Procedural animations. 06.07.2020
Flamingo: Combines custom water- and clouds-shading, a tailor-made skybox, tone-mapping and lens-flares, to create this sureal picturesque scenery.
→ Some more images
→ SNEAK PEEK VIDEO
→ Launch interactive demo
Hall Of Mirrors.
Raymarching/Shader/Reflection. 15.06.2020
Another release in my series of 3D / realtime / shader pieces: ‘Hall Of Mirrors’ plays with reflection and refractions in an raymarched space. I definitively do not recommend showing this on devices with weak or not so strong GPU´s, as you need a certain computing power to run this prototype in its full beauty.
→ Some more images
→ SNEAK PEEK VIDEO
→ Launch interactive demo
Snow Line.
3D/Shader/Procedural animations. 02.05.2020
I started a series of (WebGL) 3D / realtime / interactive pieces,
where I just want to tinker, learn and explore new (to mei>) techniques. My ambition and aspiration thereby is, not only to just technically master the ideas I have in mind, but to deliver visual pleasing outputs. ‘Snow Line’ - combines snow and ice-cube shading, and my 50 Cents of playing with refractions and reflections.
→ Some more images
→ SNEAK PEEK VIDEO
→ Launch interactive demo
Grasslands.
3D/Shader/Procedural animations. 11.12.2019
As part of a larger client-project I´m currently working on, some prototypes accumulate
that have no use for the actual project. For example my ‘grasslands’ prototype,
a tiny realtime-3D scene, I only made to test and optimize diverse 3D, Shader and Postpro-Pipeline
setups. Beside the point not making it in the current project, this turned out way too nice
to not generate a small standalone-showcase out of it!
→ Some more images
→ SNEAK PEEK VIDEO
→ Launch interactive demo
The Abandoned Jellyfish.
WebGL/Bones Animation/Shader. 16.05.2019
I don´t know how often it happens to you, but in our case it happens a lot: projects and ideas got dropped or even killed on their way during the project´s phase!
Not really a big deal as we often get contracted for prototyping and feasibility analysis. So by nature, those prototypes, studies and analysis are not always seeing the light of day. Often enough it is most unfortunate, as we always put lots of love and detail in every creation and work we do. Same same this time!
Meet the abandoned jellyfish that didn´t make into the digital ocean of the internet. Still we think its a pure lowpoly, bones animated, beauty that deserves the right to receive at least some attention.
→ Some more images
→ SNEAK PEEK VIDEO
→ Launch interactive demo
← Close Demo
Sarlacc.
WebGL/Shader. 09.03.2017
Finally I managed to spare some time to isolate one effect from my current WebGL-Demo ‘Conflatorium Redux’ and to edit it for running on Shadertoy.
‘Sarlacc’, name is taken from the fictional creature in George Lucas´s Star Wars, is a tunnel effect done via spheretracing, spiked with a few nice visual gadgets.
I really hope by extracting it from the entire demo makes it accessible for more people having an average fast running GPU, because otherwise, seeing this effect running realtime embedded in the whole demo (Conflatorium Redux) you need an kick-ass fast GPU.
→ Launch Shadertoy
← Close Demo
← Back
← Close Demo
Raymarching on Shadertoy.
WebGL/Shader. 16.08.2016
From time to time I use Shadertoy to tinker, play around and test some of my ideas for shaders.
Be it project related or just private curiosity, Shadertoy is an excellent playground and source for
trying out your own shaders and learn a lot more from the community to refine your skills.
→ Launch Shadertoy
← Close Demo
← Back
Porsche 911 WebGL.
From prototype to production. 04.11.2015
Until this year, it´s nearly 4 years now that I constantly predict (in my talks at conferences and to my clients) that WebGL will become one of the leading and most important technologies to produce and stage very unique and outstanding user-experiences. And by today, it has already happen!
International brands like Sennheiser, Warner Bros.´s Hobbit, Lego and Porsche adobt WebGL to create top notch experiences for their products. But due to this ‘new’ technology, the group of people/developers, that can deliver proper WebGL/3D content spot-on is very assessable. Luckily I know a few of them by person and even call them friends - so when I was contracted to team-lead the latest 2 projects as Technical Director for Porsche this year - I could immediately setup my dev-team and count on some smart and highly considered old fellows like David Lenaerts and Simo Santavirta
→ Continue reading
← Close Demo
Porsche 911 WebGL.
From prototype to production. 04.11.2015
In this post I´d like to explain a few steps taken that I consider as highly significant to realise projects like the Porsche 911 WebGL case or the Porsche Black Edition webspecial. 1st of all, pro-tip: begin with mood boards and lots of prototyping, and prototyping, and prototyping…
Prototyping phase:
Right at the beginning we set up an 1st mood board and interactive prototype just playing with color schemes and (very) basic 3D effects to get a feeling for the direction to head for.
← Back
→ Launch Moods Demo
→ Continue reading
← Close Demo
Porsche 911 WebGL.
From prototype to production. 04.11.2015
By doing so, we easily decided on geometric forms and possible effects to use and work with. We then came up with forms and designs worth elaborating in a 2nd, more specific prototype. At this project phase it maybe relevant for you to know - we didn´t give a sh_t on optimizing stuff at this point, but just kept prototyping to shape the direction, the project should move when in production. So far, so good - the project was more and more assuming a form. But all this means nothing if you do not know the final architecture of your key player, in our case, the 3D-model of the new Porsche 911. One most supercrucial advice at this point: Be aware of that the people/suppliers/company you hire for building/modelling those models know their shit… aka know how to model and optimize for realtime 3D.
← Back
→ Launch Moods Demo
→ Continue reading
← Close Demo
Porsche 911 WebGL.
From prototype to production. 04.11.2015
The 1st delivery of the car´s model that was hand over to us had more than >300.000 vertices (and took ages to load not even talking about mobile devices…) + the supplying company claiming they couldn´t reduce a single poly more. Well… that model was of course nothing we intended to work with! We were more like, if those models we have to work with have more or less ~60.000 vertices, it would still be much, but kinda ok´ish to work with.Nevertheless - optimizing a 3D model and getting approved product- in our case car-correctness takes some time. So that we didn´t loose too much days waiting for those models, we started shaping the actual engine with all the needs and must haves of the abstract 3D world, the car should take place in (get further insights from David on drilling out and enhancing three.js to our needs), like custom reflections, custom materials, well... at the end, nearly custom everything cause three.js didn´t by default provide what we needed to have for this project.
← Back
→ Launch Moods Demo
→ Continue reading
← Close Demo
Porsche 911 WebGL.
From prototype to production. 04.11.2015
And we started to shape the main look of the car´s paint as well - an Achilles´ heel and mandatory point on the must-have list, if you draw attention to a key player like a car. Below, an early realtime version focussing on the car´s paint (far from being final!) At the end of the day we successfully bridged the ‘waiting for the models period’ with all those recently explained preparations. And finally we got even the optimized 3D models. To be fair, we gave the modelling suppliers a very hard time, but for good reasons. It turned out they didn´t have that much realtime 3D modelling experience as well, so we really had to educate them on the fly to use all those solid tricks and techniques to optimize for realtime: like normal maps, gloss maps, poly reduction, merge objects and reduce to as less drawcalls as you can, use bones-animations aso… just to name a few. Still I´d say there is room for optimizing a lot on the actual models, but stuff it, I shouldn´t be that picky. After all we now got models we could really work with…
← Back
→ Launch Moods Demo
→ Continue reading
← Close Demo
Porsche 911 WebGL.
From prototype to production. 04.11.2015
In conclusion I can tell you, both projects (911 and Black Edition) were lots of fun and some good cases using WebGL for product experiences. Still accomplishing such projects with teams/agencies/suppliers envolved, that don´t have that much 3D/realtime/WebGL experience (not to say starting from scratch) is always tuff and spiked with tons of impasses, worries and pathlessness. If you know what you do - don´t lose your head, stay calm, focus and keep in mind:
Patience you must have! Things fall into place at the end…
← Back
→ Launch Project
← Close Demo
Glasfabrik.
Fuse/UNO. 06.08.2014
A few weeks ago I came into contact with the nice and very talented Fusetools team. Fusetools? What´s that? Despite the fact that a few stray instances of their team members appreciate an excellent steak and are able to hold one´s drink (Beware: Norwegians!), which makes ´em very congenial, they are working on some extremly interesting IDE for real-time graphics in 2D and 3D. Beyond that they deliver with ‘UNO’ a new programming language that unlike traditional languages and APIs, has no barriers between CPU code, GPU shaders, graphics APIs and the various. So WebGL please.
Felt a bit like cheating writing your code, pressing a button and getting as a result a fully optimized WebGL-version of the shader I´ve written in RS/UNO, but for the moment, lets release ‘Glasfabrik.’ (Glas manufactory), once written in UNO now in the ‘interwebz’…
→ WebGL Demo
