
BMW i8 in WebGL - antouank
http://car.playcanvas.com
======
phoboslab
Really nice work. This doesn't seem to an official site of BMW, though!?

Porsche[1] and Renault[2] did something similar lately. It's great to see
WebGL used for this in production. Honestly, I'm surprised it took so long.
Visualizing cars with WebGL seems like a no brainer, especially when most
current websites load dozens of images for their "360° views".

[1]
[http://www.porsche.com/microsite/911/germany.aspx#showroom/9...](http://www.porsche.com/microsite/911/germany.aspx#showroom/911-carrera-s/3/3/0/0/0)

[2]
[http://www.littleworkshop.fr/renaultespace/](http://www.littleworkshop.fr/renaultespace/)

~~~
mizzao
This has to be lifted from some internal BMW models, though - or maybe the
creator wants to get a job there?

~~~
bd
Plenty of BMW i8 models out there:

[http://www.turbosquid.com/Search/Index.cfm?featureID=5360209...](http://www.turbosquid.com/Search/Index.cfm?featureID=5360209c-aed8-4173-add6-4de214570042)

This was done by PlayCanvas, so the goal is marketing of their platform /
engine.

~~~
TazeTSchnitzel
PlayCanvas also have a site that lets you view an iPhone in 360°, presumably
for marketing that their engine can be used for product demos.

------
iMark
I remember waiting 30 minutes for a crappy vrml model of the Enterprise to
download over a 28k modem years ago.

This is both impressive, and makes me feel very old.

~~~
otabdeveloper1
It locks up my browser and takes 20 seconds to render one frame. (I guess that
would be 0.05 FPS.)

So: no, not really impressive. Feels like a regression, actually.

(At least the mobile devices of 2015 managed to do 3D acceleration properly.
Too bad that desktop never caught up and that the mobile landscape formed by
accident due to commoditization, not due to an understanding of open
standards.)

~~~
sirival
What device are you testing this on?

~~~
otabdeveloper1
A Linux machine with an "Intel Integrated Graphics Controller".

I doubt an equivalent Windows machine would fare better.

~~~
vidarh
Rendered just fine for me.

Linux machine with i5-2450M CPU @ 2.50GHz and i915 integrated graphics,
running Chrome.

If it's as slow as you say, it sounds like you're getting software rendering.

~~~
fulafel
Software rendering is ~20x faster, or 1 fps.

(If you are on Mesa drivers you can try it with env LIBGL_ALWAYS_SOFTWARE=1
firefox [http://car.playcanvas.com/](http://car.playcanvas.com/))

------
jasonkester
To whoever it was a few weeks back who said it looks like the i8 was "giving
birth to a Porsche", you were right: Once you've seen it, you can't unsee it.

As this visualization demonstrates in nice 3d form.

~~~
Jack000
I think the design has a few too many un-necessary flourishes, and it probably
won't age very well.

It definitely grabs your attention, but in a few years when electric cars are
less rare I bet it will look kind of gimmicky.

~~~
kllrnohj
Generally cars in this segment don't age well to begin with. For example a new
BMW 750i will cost you $100k+. A used 2009 750i with only 60k miles though?
$30k. Not just BMW, either, a certified-used 2009 911 Turbo can be yours for
$70k, less the half the starting MSRP of $150k.

But the people who buy them don't care. They'll just buy whatever the new
thing is.

~~~
hugh4
Meanwhile the people who buy 2009 7-series for $30K get a ridiculously nice
car for the price of a Camry... but they pay maintenance costs which are a lot
higher than the Camry driver's. There's a reason not everyone is buying cheap
used luxury cars.

~~~
kllrnohj
Absolutely, I certainly wouldn't recommend it. But the maintaince aspect is
yet another argument in favor of my point, which is that people dropping over
$100k on a car typically don't care if it holds value.

It's irrelevant if the i8 is still cool in 5 years to the people that can
afford an i8.

------
fsloth
I am perplexed. Modern games are fantastically more visually appealing and
contentwise impressive than this. Modern films utilize computer graphics that
are far more impressive still. What is it about single model viewer that makes
it headline material? It looks nice, though.

~~~
nicklaf
WebGL is like the dancing bear; even if it doesn't dance very well, there is
nevertheless endless fascination when it dances at all.

~~~
fsloth
I wouldn't be that dismissive of WebGL precisely. It's a real time graphics
driver frontend- a few generations old DX 9 equivalent. Once the shaders and
vertices are uploaded to the GPU it's not that consequential what the front
end is (within a _very_ charitable margin but still).

I think there is probably a slight shearing layer in the way WebGL integrates
with the rest of the browser programming interfaces since it's the lowest
level API by far that is exposed. Thus, platform developers who are served ala
carte technologies that provide a facade for traditionally very non-trivial
things (layout, font rendering and font server, vector graphics rendering,
etc. etc.) are suddenly given raw substrate which requires one or two
abstraction levels before it's near even SVG which itself can be considered
really low level when compared with HTML and CSS.

Traditionally, web developers expect a higher level experience and I think the
organizations that usually serve web development services have not taken into
account that you need a team of computer graphics experts if one wants to
develop anything on top of WebGL.

I'm not dismissing web developers - I'm a graphics programmer myself - but
basically, for a non-genious level person like me even grokking the transform
stack requires re-orientation every time I'm not touching linear algebra code
for a couple of weeks.

It's not a fault of webgl, per se - the other graphics aspects a browser
serves do have pretty well figured out conventions and grammar that can be
standardized to provide the ala-carte publishing experience a browser
provides. But we don't really have any "standard" conventions in computer
graphics yet that could be formalized to the level a page layout can. And is
it surprising? Publishing has a history as an industrial craft of 500 years.
All the conventions have been figured out, and are implementable in
algorithmic form.

While realistic art has been practiced thousands of years only 2D graphics
really has the industrial basis where we can say that everyone understands and
can formalize what they want from their image.

3D graphics is a whole new ballpark. When pixar introduced their shader
language 30 years ago they laid out the foundations for formalizing the
colorization in visual grammar. The concept of a scene graph is pretty
formalized, as well as the perspective projection of a camera. There are some
"usual" convention in 3D interaction like the arcball rotation in an editor
like scene.

But other than that? The visual world is infinitely rich. We are not ready for
a "standard" representation of an infinitely rich universe of expression.

Of course, that does not mean there are no representations that could not be
formalized - there are the standard materials of 3D engines and so on, and
physical rendering approaches are slowly converging on the best model - but, I
don't know if we can ever reach the standardization of desk top publishing in
3D graphics.

~~~
nicklaf
Thinking about your comment made me realize that the lackluster performance
often seen in WebGL pages has very little to do with overhead in WebGL itself,
and a lot to do with the application developer's failure to optimize for
performance.

Native Quake III on a Pentium 4-era system was much smoother than most of the
WebGL stuff I see on a modern system, but the fact that a WebGL demo [1] of a
subset of Quake III is very smooth seems to support this idea.

You make a lot of good points about the difficulties that the low-level nature
of graphics programming present to standardization. I agree that there
probably isn't necessarily an easy solution to this which doesn't
unnecessarily restrict the space of possibilities in the name of performance
or interoperability.

[1] [http://media.tojicode.com/q3bsp/](http://media.tojicode.com/q3bsp/)

------
elcct
You wouldn't download a car?

~~~
randyrand
Im just curious, do people know that the original is actually "You wouldn't
_steal_ a car?"

I only every see it as 'download' in comments.

~~~
kodr
that's the joke. Some explanation here: [http://knowyourmeme.com/memes/piracy-
its-a-crime](http://knowyourmeme.com/memes/piracy-its-a-crime)

------
dvh
When you enter and steer the driving wheel and then get out, the wheels are
also turned :)

~~~
benbou09
But you can't honk :)

~~~
Skunkleton
I think this might not be a real bmw...

~~~
cbd1984
> I think this might not be a real bmw...

Yeah. It's been a half-hour and it hasn't needed maintenance.

------
atrust
Well done. This one reminds me
[http://helloracer.com/webgl/](http://helloracer.com/webgl/).

------
Cakez0r
One of my friends noticed you can see the city skyline cubemap they used, but
haven't used as the actual sky in the demo:
[http://i.imgur.com/NbREnqS.png](http://i.imgur.com/NbREnqS.png)

~~~
sirival
The sky used in the demo is actually the same as the reflection just a very
blurred version of it :)

------
Shivetya
Very nice render there. That is one of the few cars which I have to say looks
so much better up close than in pictures.

------
baldajan
MIND BLOWN - this is using WebGL? Unbelievable!

The only thing I wish it had was more interactions, but as is it demonstrates
that WebGL is not just a toy, but something to be taken more seriously in the
GL community.

~~~
TazeTSchnitzel
> this is using WebGL? Unbelievable!

What, have you never seen a WebGL demo before?

> it demonstrates that WebGL is not just a toy, but something to be taken more
> seriously in the GL community.

It already is taken seriously. WebGL is merely a variant of OpenGL ES for
JavaScript. Heck, the whole of Unity and the Unreal Engine can run on it.

~~~
MayorOfMonkeys
Unity and Unreal Engine don't support the mobile browser.

~~~
TazeTSchnitzel
Interesting. That's presumably just due to performance issues, there shouldn't
be a technical reason.

~~~
MayorOfMonkeys
It's because Unity and Epic cross-compile large codebases to many MBs of
JavaScript. This simply overwhelms the JavaScript engines on mobile. The
PlayCanvas engine on the other hand is hand-written and is 125KB of
JavaScript.

------
vegabook
Awesome, especially in black I think. But WebGL still has an aliasing problem,
made worse when we introduce movement. It was the same in the watch movement
sim on HN a few days ago. Not to take away from the amazing work of the
authors, but are there higher quality anti-aliasing options which won't cause
my eye to distract to the high-velocity pixel movements on the car's shutlines
as it moves along? (Full HD machine - dunno if this issue disappears at
HiDPI).

Oh and another thing. PlayCanvas looks great but also looks _properly_
expensive. I'm having to cough some pretty serious dough as a single
experimental developer, without even getting above bronze support. Not hugely
garage-outfit friendly though I will say it looks very professional.

~~~
MayorOfMonkeys
The engine itself is open source (MIT license):
[https://github.com/playcanvas/engine](https://github.com/playcanvas/engine)
If you want a fancy editor to build more quickly, it's free to work in public.
And for 'garage-outfits' that want to work in private, it's $15/month. I
wouldn't call that serious dough. My gym membership is $70/month!

------
forgotmypassw
The scene looks very nice albeit I'm not sure what's so spectacular about
displaying a single model? I've noticed someone saying in the thread that it's
impressive because you can view it on mobile, but why wouldn't you? Modern
phones are equipped with hardware better than the one we had over a decade
ago, and we had 3D games back then, so displaying a single higher poly model
on way better hardware doesn't really amuse me. Besides, I don't really dig
the whole idea of WebGL, but the damage's done already.

~~~
moron4hire
I'm sorry I'm not keen on making games for only one platform at a time.

~~~
ksk
Unless you're talking about casual games that reality is never going to be
realized. AAA games are written as close to the hardware as possible/feasible,
as you probably already know. For every developer willing to develop against
an abstraction like the Web, there will be others unwilling to give up that
performance.

~~~
moron4hire
For every indie who has made it trying to make AAA games... wait, there aren't
any. AAA games are for companies with the resources to port code to every
platform they can imagine.

I'm not a diehard gamer, myopically focused on only AAA to the detriment of my
livelihood. I'm a developer. There is more business for me in "casual" games--
whatever that actually means, because it seems to only ever be used as a
pejorative that means "not Call of Duty"\--than is realistically possible in
AAA.

~~~
ksk
My point is just like you aren't keen on porting, other people aren't keen on
throwing performance away.

What you're really really after is a single OS, single hardware platform
world. That would require the least amount of porting effort which is your
goal.

People (and you might not be one of those) think that the Web is going to
bring about this great cross-platform revolution, but its a lie except for the
basic UI, low-perf applications for two easy-to-identify reasons. First, the
standards themselves are poorly specified and contain ambiguities (by design
to give leeway to implementors on different hardware). No standard body even
puts out a reference implementation. Second, each platform implementation will
be implemented differently causing people shipping cross-platform to care
about weird implementation quirks that cause the performance of their game to
tank in weird ways.

------
JanSolo
I LOVED the Orangey-Brown colour scheme so much that I went straight to the
BMW website to see if it was really an option that you can buy. Sadly, it's
not. /sadface

~~~
Cshelton
BMW Individual. For a good amount of money, any color scheme, exterior,
interior, leather stitching, etc. can be yours. They can do a lot as their
"custom" shop is kinda separate. You're almost getting a "hand-built" car. On
their website they list a few common Individual options, but if you actually
work with a rep, they can do whatever you want.

------
lectrick
Ah, the car that fakes internal combustion engine noise when it's running on
electric... No thanks. Nice demo though!

~~~
TazeTSchnitzel
> Ah, the car that fakes internal combustion engine noise when it's running on
> electric

Cars are legally required to do so, aren't they? Otherwise, electric vehicles
would be quiet enough to kill people.

~~~
lectrick
> Cars are legally required to do so, aren't they?

As an owner of a Tesla, no, there is no such thing (at least in the US), and
please stop spreading misinformation (if you are talking about the US).

And the car is not COMPLETELY silent... the wheels make noise on the road.
I've driven a completely electric car for at least a year, never got even
closely into a pedestrian "situation", and I live in a highly populated area
(NYC and its suburbs).

------
santaclaus
Super cool! Do the camera controls 'invert' when you hop into the car,
however? When outside the car, grab a point on the car and drag, and that
point roughly tracks where you drag your mouse pointer to. Inside the car, the
opposite happens. Grab a point, drag the mouse, and the point moves away from
the cursor.

------
stefap2
In Firefox I get "Loading...". In IE it shows only a blurry picture of what
appears to be the front lights?

------
pearjuice
I am a little bit disappointed that it has automatic transmission. But this is
probably catered to an American audience, of which the common denominator
doesn't even know that manual cars exist. Other than that, really impressive.
This only needs some controls and motion, and then you have basic gameplay!

------
Mikeb85
Very nice. Runs full speed (60 fps or so as best as I can tell) on
Chrome/Galaxy Note 3.

------
voltagex_
Semi-related, are there any "accurate" WebGL models of a working V6/V8 engine?

------
ponyous
I love camera behaviour! Good job

~~~
jamesfmilne
Just wanted to chime in and agree, the camera control is slick. So many 3D
apps have atrocious camera controls.

------
apocalyptic0n3
In case anyone is having similar issues, this loaded a LOT better in Firefox
than Chrome

------
samuell
First time in a long time that my laptop fan peaks a little :P

------
kagia
If the author is around, How long did this take? It's slick, but what
impresses me most is when I customize the interior from the inside view.

Well done!

~~~
h1443091
Really? IMO the interior looks absolutely dreadful. The knobs aren't even
round!

------
psiops
Very cool. The look of the turning steering wheel seemed a little off to me
though. As if it's slightly off-center.

------
Elizer0x0309
Why I love graphics programming! Math & Art come together into a holistic
whole! Great work!

------
m52go
This is stunning. Excellent work!

------
mixedbit
Beautifully done. I particularly like the lights glow effect.

------
dahart
On an iPad, I can only see the top left quarter of the view.

------
jaegerpicker
It's a cool demo but I wish it wouldn't autorotate. Makes clicking the door
interaction point much more difficult than it should be. A pretty picture over
usability decision.

~~~
mynameisvlad
Autorotation turned off for me once I dragged the first time.

------
middleman90
Impressive... Congratulations guys at PlayCanvas!

------
phusion
Just sat at loading screen in Chrome Win 7 x64.

------
rcurry
That is just gorgeous - nice work!

------
hyperpallium
Runs about .1 - .2 fps on my iPhone 4s equivalent potato. They've certainly
lost _MY_ expensive-new-car business!

~~~
MayorOfMonkeys
I'm not sure what's up with your iPhone 4S (although you do say 'equivalent')
but on my 4S, I get around 10FPS. Not fast, but usable.

~~~
hyperpallium
Interesting. It's an android, and the cpu/gpu specs seem close to the 4s, with
most 3D openGL apps being fast and smooth. I wonder why you're getting 100x
better performance? Could be JS performance, but I'm using the latest FF,
which is usually good.

------
killer4u77
That looks really cool

------
robodale
Loading...

