pmndrs / racing-game

🏎 Open source racing game developed by everyone willing

🏎️ @pmndrs/racing-game

Live demo (current state): https://racing.pmnd.rs/

This project is a showcase for the feasibility of React in gaming. Every thing is a self contained component using react-three-fiber to express threejs with React semantics. If that seems strange to you read this explanation.

This project is 100% open source and community built, CC0 assets only, everyone is invited to participate. If you have a PR merged you are added to the triage team. Refer to CONTRIBUTING.md for more information.

/assets   - the blend files
/utils    - game state store, helpers
/models   - gltfjsx models, players, characters
/effects  - dust, trails, skids, shaders
/ui       - intros, heads up displays, leaderboards

There is a dedicated discord channel for this project here: https://discord.gg/dQW7fDmaAG

racing-game's Issues

exhaust or dust trails

License?

I can see that react-three-fiber is MIT license, could we use that here as well?

RACING GAME

there is a malfunction in the camera at the time of the accident. This needs to be fixed.

effects: speed lines

A shader or instancedMesh that uses the speed to increase / decrease the effect

Regression

Since commit: b604d2b

I've been experince(firefox-only) a regression whereby the camera is heavily shaking.

Please ignore the happering/stuttering, this is due to Nvidia, fuck you propriety drivers on Linux with Firefox.
https://user-images.githubusercontent.com/25481501/121050841-72d61d00-c7a8-11eb-8fef-8dd672a362a0.mp4

Error since last commit

Since commit: 0281251
I've been experiencing this error

better driving dynamics

the car feels stiff and slow

Train collision

there are collisions in the game, but you cannot collide with the train :(

Better to have a controller of its own for the camera

Hi, firstly I loved this proof of consepting idea.

I have worked on a lot of web games and in almost every case, we ended up creating a controller for the camera since down the line you want specific camera movements for certain cases. Putting the logic in vehicle and or track easily becomes messy and harder to follow.

So my proposition is to create a separate controller for camera and handle its movements there in accordance with vehicle and track.

I can make a start and create a PR soon, if you like the idea.

Mobile controls

Maybe adding some controls on the screen that the user can toggle on or off would allow a user to drive the car on mobile?

bug: reset on camera change

Describe the bug
When you toggle the camera the reset is also triggered.

To Reproduce
Steps to reproduce the behavior:

1. Drive around
2. Press C
3. Camera will change & Scene will reset as if you pressed R

Expected behavior
You should be able to toggle through the cameras without the scene resetting

baking the track in blender

runtime shadows looks bad. baking lights and shadows could look really good:

cant handle low fps well

I have reported it on twitter few days ago but I think you missed it, so here goes:

my guess is you try and fail to handle long frame times? dt = min(dt, 50ms) might fix it

skid marks

Camera Flip

Camera flips after opening and closing the editor so it shows the view behind the car upside down. Resetting the scene does not fix the camera either. The only way to fix it that I've found so far is to hit reset then open the editor which I assume flips the flipped camera back to the proper orientation.

User editable keys

Instead of adding different keys it would be better if they were user editable and we just save the state in localStorage or supabase. This will solve all other keyboard layouts as well.

Originally posted by @njm222 in #165 (comment)

dynamic road geometry?

I'm curious if anyone is tackling dynamic road geometry. I have been doing some related work on this repo https://github.com/kfarr/3dstreet/ but only straight roadways at the moment.

I found this custom geometry repo that can make sweet looking curved roads, and I was able to modify a demo custom road scene to be an A-Frame component. However its output has way too many draw calls (thousands) and I wasn't sure how to optimize at the time. I wrote up an issue relating to that here.

If anyone is interested in helping tackle advanced road geometry I'd be happy to help out. I'm also offering a paid contract for help from those more experienced than me. Here is some more details about the contract. I'd be happy if the output of this work could be used for both 3DStreet as well as this racing-game repo and ok to license MIT or whatever. (I'm also open to a port from A-Frame to r3f but that's for another day.)

prettier / linter

Can we add eslint & prettier to the scripts?

Gamepad API

https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API

The spec is in proposal stage however has some great browser coverage. My implementation is rough too.

xbox.controller.mov

ui: loader / loading screen

Players have scores less than 0

Describe the bug
This bug happens when you DO not go over the checkered line at the start. Causes the time to be or be less than 0.

To Reproduce
Steps to reproduce the behavior:

1. Go to the game
2. Click on start
3. Press i
4. See error

Also

1. start the race
2. drive off the road
3. go past the start line
4. see error

Expected behavior
The timer to start after you pass that area, a fair leaderboard

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version IDK

First Play

First jump and result.. Lost in Space

Replay

Now that there's a leaderboard, would be awesome to also upload a replay file so we can see how they got that record. Replay should have both the inputs and the car position. Then we can replay the engine on-top of the inputs and see that it actually matches to verify.

BUG: Engine Sound goes garbaled when returning from editor

*** Sound garbles when switching from the editor back to the car the engine sound goes staticy/garbled

To Reproduce

1. Get to the car (so car engine sound is loaded)
2. Press . to open the editor
3. Press . to close the editor

Sound will be garbled.

Expected behavior
Engine sound to restore

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Mac 11.6 (Big Sur)
• BrowserChrome
• Version 97.046X

[CI] Build fails because of warnings

From the build phase:

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

Changing the rules in .eslintrc.json to warn causes the builds to fail. If we want to fix the warnings we can, but it would be nice to revert that change in the meantime.

bug: boost activating when empty

Describe the bug

Boost is activating when the boost bar is empty

To Reproduce

1. Empty the boost bar
2. Keep tapping boost
3. Camera shake & exhaust animation activated

Expected behavior

When boost is empty camera shake & exhaust animation should not be activated

exo

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Camera reset missing

Describe the bug
When switching to the editor and using OrbitControls to rotate the camera and then switching out of the editor will cause the camera to be misaligned.

To Reproduce
Steps to reproduce the behavior:

1. Enable editor view 'E'
2. Move the camera around
3. Disable editor view 'E'
4. The camera will be misaligned

Expected behavior
The camera should be aligned as if you never moved the camera around in the editor

Unexpected behavior

Describe the bug
The car just crashes into the hills and go inside?

To Reproduce
Steps to reproduce the behavior:

1. Open the page
2. Start the race?
3. crash into the hill, sometimes it does happen, but sometimes not.

Expected behavior

It should not go inside?

Videos

FormatFactory.Screen.Record20210920_190609.mp4

FormatFactory.Screen.Record20210920_200612.mp4

Desktop (please complete the following information):

• OS: Windows 10 H21@latest
• Browser Brave
• Version 1.29.81 Chromium: 93.0.4577.82 (Official Build) (64-bit)

before this gets too complex, let's discuss some directions

some changes i'd like to see before this project goes too far (new levels, etc). the infrastructure should be really, really tight and safe - and although we're making good progress i can see how some parts still feel fragile.

typescript

i am normally all for plain javascript, but light annotation can go a long way in making it easier to change things. right now i change a single variable in the store model and then i have to run every functionality to be sure it works. with ts my editor would already show all broken files in red. for this game the annotations could be very simple and that would also unlock auto complete.

valtio

zustand is nice but property access, especially if nested, can get messy. zustand has a brother called valtio, its the same thing but proxy based. all the setter/getters go away, nesting is no problem, you don't need actions to update. with TS it would be typesafe as well. i have used this with threejs before and the experience was wonderful (the shoe configurator).

testing

???

hii

ui: intro, speedometer, leaderboards, ...

Minimap using double render

As having some more iteration about the performance and rendering of this game to be optimal I came along the Mini map which got quite heavy when enabled and showed this strange double webGL render looking into the code

racing-game/src/ui/Minimap.js

Lines 69 to 77 in 7aa38d4

	gl.render(scene, camera)
	m.copy(camera.matrix).invert()
	miniMap.current.quaternion.setFromRotationMatrix(m)
	player.current.quaternion.setFromRotationMatrix(m)
	gl.autoClear = false
	gl.clearDepth()
	v.subVectors(chassisBody.current.position, levelCenter)
	player.current.position.set(screenPosition.x + (v.x / levelDimensions.x) * size, screenPosition.y - (v.z / levelDimensions.z) * size, 0)
	gl.render(virtualScene, miniMapCamera.current)

I see that gl.render is being executed twice on different scene. Whereby 1 on the main scene which explains why it's being heavy and the other one which seems more reasonable for me the rendering of the mini map.

Removing line 69 solves the performance issue but created this strange border

This is where my lack of understanding with Three.js comes in as I don't see anything that is affecting to create this border. Otherwise it could just be called "A feature" :)

EDIT: It's most likely this border is "unrendered" portion of the virtualScene.

*closed comment*

closed comment

Vehicle configs panel

It would be nice to have a vehicle configs panel where the gamer can set e.q. suspension, car height / distance to ground, wheel dimension etc. All the global settings in the raycastVehicle library.

Here is an old Cannon example from Schteppe: http://schteppe.github.io/vehicle-editor/

To infinity and beyond 🚀

Describe the bug
Got hit by the train, it drag me into the tunnel and I went to the moon with unlimited increasing speed.

To Reproduce
Steps to reproduce the behavior:

1. Go to the rail
2. Got hit by the train
3. Scroll down to '....'

Expected behavior
Get me back to the earth 😂

Screenshots
If applicable, add screenshots to help explain your problem.

Video I'm flying to the moon https://streamable.com/50odbw

Desktop (please complete the following information):

• OS: macOS
• Browser Chrome
• Version 95

not allow person to leave the level

Heightmap collision effect is not accurate

Describe the bug
When you drive of the supposed road, you will be either have a slight bump and seems realistic or you car will be going instead of down on the lower height of the road it will go upwards and roll your vehicle over.

To Reproduce
Steps to reproduce the behavior:

1. try speedrun strategy
2. Ride the vechile
3. Go with some speed off the road.

Expected behavior
The car shouldn't roll over but instead go onto the lower side of the road.

Screenshots
See the last 2 attempts to reproduce this problem:

last_two.mp4

Desktop (please complete the following information):

• OS: Linux
• Browser Chrome
• Version 90

Disable skid marks in the air and braking sound

File structure

Now everyone has their own taste about how to structure files, however at this moment I see 2 problems.

• First letter capitalized or not? I see certain files not being capitalized at this moment should they be capitalized or should the others files not being capitalized as first letter?
• File suffix, we are working here with JSX syntax however are naming the files as .js files, I think they should be renamed to the correct file extension -> .jsx

collisions

bug: reset vehicle

The reset and start position of the vehicle are different

Improve HUD

Is your feature request related to a problem? Please describe.

I think the HUD could use some improvements. Currently it deviates from most other games with the minimap and speedometer placement. IMO the UX would be better if they were placed in the more common places.

Describe the solution you'd like

Move speedometer to bottom right and minimap to bottom left. E.g. something similar to;

Forza

GTA

NFS

I could start looking at this if you agree it's a good idea.

Describe alternatives you've considered

N/A

Additional context

N/A

ui: instructions / controls

Pause menu?

maybe there should be a pause menu when you press Escape, that displays the keyboard shortcuts as seen on the loading screen?

El