# Need For Speed Style Racing System

**URL:** <https://forum.babylonjs.com/t/need-for-speed-style-racing-system/7087>\
**Category:** Demos and projects\
**Created:** [November 20, 2019, 12:10am UTC](https://forum.babylonjs.com/t/need-for-speed-style-racing-system/7087 "2019-11-20T00:10:49Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![aFalcon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/afalcon/32/7015_2.png) [@aFalcon](https://forum.babylonjs.com/u/aFalcon)\
**Post date:** [December 2, 2019, 2:01am UTC](https://forum.babylonjs.com/t/need-for-speed-style-racing-system/7087/21 "2019-12-02T02:01:31Z")

</div>

> [@MackeyK24](#):
>
> AAA quality **tooling,**

Nice to see this milestone. Like very much.

You probably know about this LINK, but for anyone else, here is an EXAMPLE of BABYLON on Code Canyon. [Six Helix HTML5 by stelennnn | CodeCanyon](https://codecanyon.net/item/six-helix-html5/22704981)  
Six Helix by Stelennnn  
Doing well, looks like.

Maybe a good place for your Toolkit.

🦅

---

<div class="post-metadata">

**Author:** ![Mr\_SquarePeg](https://avatars.discourse-cdn.com/v4/letter/m/73ab20/32.png) [@Mr\_SquarePeg](https://forum.babylonjs.com/u/Mr_SquarePeg)\
**Post date:** [December 5, 2019, 9:29am UTC](https://forum.babylonjs.com/t/need-for-speed-style-racing-system/7087/22 "2019-12-05T09:29:55Z")

</div>

Let me know when this is available as well 🙂

---

<div class="post-metadata">

**Author:** ![MackeyK24](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mackeyk24/32/3741_2.png) [@MackeyK24](https://forum.babylonjs.com/u/MackeyK24)\
**Post date:** [January 15, 2020, 6:05am UTC](https://forum.babylonjs.com/t/need-for-speed-style-racing-system/7087/23 "2020-01-15T06:05:13Z")

</div>

Check out latest driving mechanics on a Unity Old Vehicle Starter Tutorial Map (Still Some shader issues because the old unity tutorial is still using old and custom legacy shaders… Not PBR… So i have to convert them to the best fit PBR i could for that specific Unity Shader)…

Also the Follow Camera is till a bit choppy… am going to need some community help in creating a Need For Speed Style Smooth Follow Camera… I will put up a skeleton playground with a track and car to follow a bit later.

But for now… here is this demo so far:

[http://mackey.cloud/games/racing/demo4](http://mackey.cloud/games/racing/demo4)

It uses advanced convex sweep testing for each wheel to provide a more solid driving contact surface … Especially on un even, winding twisting road surfaces like this old unity track

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [January 15, 2020, 1:44pm UTC](https://forum.babylonjs.com/t/need-for-speed-style-racing-system/7087/24 "2020-01-15T13:44:07Z")

</div>

This is insane @MackeyK24 !!! you should try to plug in the new cascaded shadow maps !!!

@PirateJC we definitely need this on the website and the 4.1 announcement 🙂

---

<div class="post-metadata">

**Author:** ![Doug\_Murphy](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/doug_murphy/32/5213_2.png) [@Doug\_Murphy](https://forum.babylonjs.com/u/Doug_Murphy)\
**Post date:** [January 15, 2020, 2:10pm UTC](https://forum.babylonjs.com/t/need-for-speed-style-racing-system/7087/25 "2020-01-15T14:10:57Z")

</div>

![byebye](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/d/d5e8eff79ea0d7d4e2b4c0955578212449948e99.jpeg)  
The violence of the physics is awesome. Here I have had a full speed head-on collision with the red racer. I appear to have gotten the better end of it.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [January 15, 2020, 3:30pm UTC](https://forum.babylonjs.com/t/need-for-speed-style-racing-system/7087/26 "2020-01-15T15:30:45Z")

</div>

Very impressive!

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [January 15, 2020, 6:18pm UTC](https://forum.babylonjs.com/t/need-for-speed-style-racing-system/7087/27 "2020-01-15T18:18:13Z")

</div>

This must make its way to our community demo for 4.1 (@PirateJC)

---

<div class="post-metadata">

**Author:** ![MackeyK24](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mackeyk24/32/3741_2.png) [@MackeyK24](https://forum.babylonjs.com/u/MackeyK24)\
**Post date:** [January 15, 2020, 7:02pm UTC](https://forum.babylonjs.com/t/need-for-speed-style-racing-system/7087/28 "2020-01-15T19:02:27Z")

</div>

The newer demos have better vehicle stability especially high speed contact with other cars

You can now nudge and contact othe cars without flying off in the air

Like Robert Duval said in ‘Rubbin is Racin’

---

<div class="post-metadata">

**Author:** ![PirateJC](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/piratejc/32/1003_2.png) [@PirateJC](https://forum.babylonjs.com/u/PirateJC)\
**Post date:** [January 15, 2020, 8:11pm UTC](https://forum.babylonjs.com/t/need-for-speed-style-racing-system/7087/29 "2020-01-15T20:11:26Z")

</div>

This is nuts! @MackeyK24! Super awesome!

I’ve added it to the 4.1 Community Showcase list, as well as the community page:

> **[Babylon.js: Powerful, Beautiful, Simple, Open - Web-Based 3D At Its Best](https://www.babylonjs.com/community/)**
>
> Babylon.js is one of the world's leading WebGL-based graphics engines. From a new visual scene inspector, best-in-class physically-based rendering, countless performance optimizations, and much more, Babylon.js brings powerful, beautiful, simple, and...

---

<div class="post-metadata">

**Author:** ![MackeyK24](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mackeyk24/32/3741_2.png) [@MackeyK24](https://forum.babylonjs.com/u/MackeyK24)\
**Post date:** [January 16, 2020, 11:35am UTC](https://forum.babylonjs.com/t/need-for-speed-style-racing-system/7087/30 "2020-01-16T11:35:51Z")

</div>

Yo @sebavan … I am now adding support for Cascade Shadow Generator.

A Couple question about SOFT shadow filters…

its says in docs that the CascadeShadowGenerator support PCF and PCSS filtering… I dont see how to setup PCSS (Which i assume is the Self Shadowing filter).

There is a ‘usePercentageCloserFiltering’ which enables soft shadows but if self shadow it render horrible artifacts… if i use PCF i have to disable receive shadow on self shadow meshes.

So how do i setup to get good SOFT self shadows ???

Thanks for the advice… Cascade Shadows is what Unity uses anyway… So the setup about num cascades can come from Unity Quality Settings… Is there a way to setup my on two and four cascase split info instead of of using the auto splitFrustrum… Unity has a float value for the two cascade split value and a Vector3 of values for the four cascade split… Would be kool to use the exact same cascade split ratios that can be changed in the unity editor… If not… the auto splitFrustrum is working beautifully 🙂

---

<div class="post-metadata">

**Author:** ![MackeyK24](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mackeyk24/32/3741_2.png) [@MackeyK24](https://forum.babylonjs.com/u/MackeyK24)\
**Post date:** [January 16, 2020, 11:38am UTC](https://forum.babylonjs.com/t/need-for-speed-style-racing-system/7087/31 "2020-01-16T11:38:29Z")

</div>

Yo @PirateJC … I am going to make a much better demo than that… Once i do can you change the url you using to: [BURNOUT](https://www.babylontoolkit.com/racer)

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [January 16, 2020, 11:54am UTC](https://forum.babylonjs.com/t/need-for-speed-style-racing-system/7087/32 "2020-01-16T11:54:07Z")

</div>

Adding @Evgeni_Popov to let him the honor on CSM 🙂

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [January 16, 2020, 12:05pm UTC](https://forum.babylonjs.com/t/need-for-speed-style-racing-system/7087/33 "2020-01-16T12:05:50Z")

</div>

> [@MackeyK24](#):
>
> I dont see how to setup PCSS (Which i assume is the Self Shadowing filter).

It’s what is called “Contact hardening shadow” in this page: [https://doc.babylonjs.com/babylon101/shadows#contact-hardening-shadow-webgl2-only](https://doc.babylonjs.com/babylon101/shadows#contact-hardening-shadow-webgl2-only)

PCSS is another filtering method, based on PCF, that can display soft shadows, meaning shadows with different darkness depending on the distance from the shadow blocker.

> [@MackeyK24](#):
>
> There is a ‘usePercentageCloserFiltering’ which enables soft shadows but if self shadow it render horrible artifacts… if i use PCF i have to disable receive shadow on self shadow meshes.

Those artifacts are called “shadow acne” and can be a pain to deal with, whatever the filtering method used.

To limit/remove them:

- put into the shadow caster list only meshes that can/should actually cast shadows. So, in your case, I think meshes making for the road should not be put in there (maybe there are others). Note that limiting the number of shadow casters also helps for performance.
- raise the bias / normal bias values until acne disappears.

More generally, see here for ways to deal with shadow rendering artifacts: [https://doc.babylonjs.com/babylon101/shadows#troubleshooting](https://doc.babylonjs.com/babylon101/shadows#troubleshooting)

Use the inspector to easily change the values in real time and see what works for you.

If you want, I can also try to help you finding good settings for your shadows (only need a link with the shadow generator setup).

> [@MackeyK24](#):
>
> Is there a way to setup my on two and four cascase split info instead of of using the auto splitFrustrum

For the time being, there’s not the possibility to manually set breaks, but I think I can add this: waiting for @sebavan or @Deltakosh confirmation.

Regarding Unity: don’t you have also some bias / normal bias / other type of bias settings to tinker with? There’s no shadow mapping technique I know of where you don’t have some kind of bias to adjust, except maybe for [SDSM](https://software.intel.com/en-us/articles/sample-distribution-shadow-maps) and [Dual Depth Layers](https://pdfs.semanticscholar.org/9208/c0f79a26a25132368d40c2932b50767c37c8.pdf) but both are quite expensive techniques on GPU side (and possibly not doable in current WebGL version).

---

<div class="post-metadata">

**Author:** ![MackeyK24](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mackeyk24/32/3741_2.png) [@MackeyK24](https://forum.babylonjs.com/u/MackeyK24)\
**Post date:** [January 16, 2020, 1:44pm UTC](https://forum.babylonjs.com/t/need-for-speed-style-racing-system/7087/34 "2020-01-16T13:44:02Z")

</div>

I do use bias and normal bias of the light setting when exporting shadows… So yes i can tinker with those settings to see if limit/remove artifacts.

---

<div class="post-metadata">

**Author:** ![MackeyK24](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mackeyk24/32/3741_2.png) [@MackeyK24](https://forum.babylonjs.com/u/MackeyK24)\
**Post date:** [January 16, 2020, 1:45pm UTC](https://forum.babylonjs.com/t/need-for-speed-style-racing-system/7087/35 "2020-01-16T13:45:12Z")

</div>

So PCSS = Contact Hardening Filter Options

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [January 16, 2020, 1:59pm UTC](https://forum.babylonjs.com/t/need-for-speed-style-racing-system/7087/36 "2020-01-16T13:59:23Z")

</div>

yup PCSS = Percentage-Closer Soft Shadows where PCF = Percentage Closer Filtering.

PCF and PCSS use almost the same soft shadow technique except PCSS accounts accounts for the blocker distance to deduct how soft the shadow should be (it looks better and more natural but is obviously more expensive)

So contact hardening meaning the closer you are for the blocker the less blury the shadow is corresponds to PCSS.

Agree it is a lot of name for the same thing, we should have called them:

- PCF: Blurry shadows
- PCSS: Real shadows

---

<div class="post-metadata">

**Author:** ![PirateJC](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/piratejc/32/1003_2.png) [@PirateJC](https://forum.babylonjs.com/u/PirateJC)\
**Post date:** [January 16, 2020, 5:37pm UTC](https://forum.babylonjs.com/t/need-for-speed-style-racing-system/7087/37 "2020-01-16T17:37:21Z")

</div>

@MackeyK24 - yup no problem! Just let me know when you’d like it switched over and I can absolutely do that!

Thanks!

---

<div class="post-metadata">

**Author:** ![MackeyK24](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mackeyk24/32/3741_2.png) [@MackeyK24](https://forum.babylonjs.com/u/MackeyK24)\
**Post date:** [January 16, 2020, 7:02pm UTC](https://forum.babylonjs.com/t/need-for-speed-style-racing-system/7087/38 "2020-01-16T19:02:12Z")

</div>

So just to clarify… i am setting up toolkit default options.

its has Hard And Soft Shadow Options.

So for Hard shadows… I . set both use percentage close filtering and contact hardening to false…

So for soft shadows with self shadowing options… So i set BOTH USE percentage close and contact hardening to TRUE… or is it either or… LIKE:

Hard Shadows

```auto
generator.usePercentageCloseFiltering = false;
generator.useContactHardeningShadow = false;

```

Soft Shadow (No Self Shadowing)

```auto
generator.usePercentageCloseFiltering = true;
generator.useContactHardeningShadow = false;

```

Soft Shadow (With Self Shadowing)

```auto
generator.usePercentageCloseFiltering = true;
generator.useContactHardeningShadow = true;

or

generator.usePercentageCloseFiltering = false;
generator.useContactHardeningShadow = true;

```

Which is the right way to do self shadowing option ???

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [January 16, 2020, 7:04pm UTC](https://forum.babylonjs.com/t/need-for-speed-style-racing-system/7087/39 "2020-01-16T19:04:21Z")

</div>

both PCF and PCSS can do self shadows.

and both can not be used together last boolean set wins: so either generator.usePercentageCloseFiltering = true;  
or  
generator.useContactHardeningShadow = true;

for hard shadows, you are right both false.

---

<div class="post-metadata">

**Author:** ![MackeyK24](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mackeyk24/32/3741_2.png) [@MackeyK24](https://forum.babylonjs.com/u/MackeyK24)\
**Post date:** [January 16, 2020, 7:07pm UTC](https://forum.babylonjs.com/t/need-for-speed-style-racing-system/7087/40 "2020-01-16T19:07:36Z")

</div>

it seems useContactHardeningShadow really kills the frame rate in demo [https://www.babylonjs-playground.com/#IIZ9UU#40](https://www.babylonjs-playground.com/#IIZ9UU#40)

[Previous page](https://forum.babylonjs.com/t/need-for-speed-style-racing-system/7087.md?page=1)

[Next page](https://forum.babylonjs.com/t/need-for-speed-style-racing-system/7087.md?page=3)
