PROJECTS
ABOUT
BLOG
BITS & PIECES




PRINZIPIELL
Huestr. 15
44787 Bochum
Germany
mail icon

1/11

←  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.

→  WebGL Demo



←  Close Demo



←  Close Demo



Pseudo Kleinian.


WebGL/Shader.    09.08.2016



Once in a lifetime you need to render a classic kleinian/appollonian fractal, right?
So do you, so I have to do now!
It´s just a little apprentice piece to exercise and keep my hands in writing small glsl raymarchers
whilst having some spare time. This… plus being fascinated by distance estimated 3D fractals.
Nuff said! Use at your own risk (you may reduce the size of your browser window beforehand !!!),
due to you need a bit of performance to execute this shader…

→  WebGL Demo

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