BMW i8 Configurator

Check out the awesome BMW i8 Configurator that we published today;

We’re really excited to say that it spent most of the day at #1 on Hacker News. You can read all of the comments here (some are quite funny!).

So how can you help? If you like it, a tweet or a FB share would be hugely appreciated. Anyway, what does everyone think? Send us your thoughts. :smile:


I like it. It would be cool if you could make it to where you can have different cars like the Ford Mustang, Chevy Camaro, and a Lamborghini. My friend says that you should add children in the back seat and crashing.

1 Like

Looks great so far!
Having realistic bloom instead of light flares would be even better though. And I think fresnel reflections on glass could be sharper on steep angles.

full-screen post effect with bloom, is way way heavier than simple billboard that rotated and scaled in vertex shader.
Not sure it would even somehow mimic current flares effect.
But as a whole it would be good to have bloom indeed, just the performance cost with it, unfortunately is too high.

How do you change the material on the objects like that? Its really nice. I have posted a topic related to this. I need to change materials as such and would like to know how to do so.



I’m curious about the rectangle/rhombic hotspots you use. How are they rendered? 2D somehow? I’m working on a project myself and I’ve tried planes with billboard scripts, that alpha mask a simple phong material, but they seem to intersect with the geometry a lot. The BMW ones don’t?

Hey. In BMW i8 we’ve used HTML+CSS to make it. So it is actually an HTML element that is using css transform: translate to position in screen, and uses transform: rotate(45deg); to be rotated 45 degrees.
That might be not most efficient way to do it, but it worked.

If you make them as 3D object, you can change how they interact with depth buffer. If you select material, and then untick depth test and depth write, then they will be always rendered on top of everything :slight_smile:

I’ve used inspector in dev tools, and highlighted actual element for you :slight_smile:

Thanks Max.

This is somehwat above my head I think, but how is the object created? Within a script in playcanvas I guess. And it get’s those coordinates from? a 3D object in Playcanvas translated to 2D onscreen coordinates?

Thanks, I tried the depth buffer but it has its own drawbacks I guess. It doesn’t feel intuitive that the hotspot is visible when it’s on the back side of the object. I guess a 2D drawn object would be to prefer.


In this case yes, DIV element is created in script, then there is method worldToScreen to get screen coords of world object. And that DIV is positioned on screen using CSS.
Entity which DIV is created for, has rotation, so I get dot product of front facing vector of that entity with camera front vector, so to find out if I’m looking at it, or looking from side/behind. And based on that I change opacity of an element and hide it if needed.

In your case, you can do pc entity, just need to position it in right place and set material depth write and test to false - so they rendered above everything.

The BMW project seems to be having some problems displaying on Firefox 62.
Looks fine in Chrome. Any ideas what is happening?

Never mind… found the issue…
Updating Firefox to 62.0.2 fixes it.

I feel this is a great project. However, I think it could be greatly improved by adding AR as well as letting the user customize the smaller parts of the car, like the rims. Letting the user drive it in AR would be great though.