greeb / trakr.app

Track car telemetry in 3D space

Data

Really not sure how to do data atm we parse on server and on client to get nice data to animate car. Saving raw bytes would be 200MB/h at ~160 packets/second. So for now to test we only save XYZ to build worldmaps saved every 1000/2 ms. Frontend still gets full telemetry at 12 packets/second. We save the full telemetry bytes, frontend does parsing. Maybe implement Draco

Features

• Three: Dynamic point rendering
• Nuxt: Discord oauth
• Nuxt: Usable Frontend
• Three: Little "stress" page
• Nuxt: Start of modular system for input data
• Nuxt/Three: Custom Shader frontend
• Nuxt: Simple Camera System
• Nuxt: Simple Global maps

Contributing

Contributions are always welcome!

Development

To run the production version which takes URL into consideration for callbacks and CORS and also redirects to /about if not logged in

If you only wanna see the code for the WebGl/Three stuff there look at the assets folder.

First make sure you copy the example.env to .env

cp example.env .env

Read "Environment Variables" below

  yarn Install
  yarn dev

Games

This basically implements games assets/js/games

Url

Not really sure about this but for now, x is a uuid

Map

• /map/x
  • /map/x/x

User

• /user/x
  • /user/x/session/x
  • /user/x/map/x

Challange

• /c/12345

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

IOPORT Socket.io port

URL Url for CORS and ssl later not really implemented yet if empty defaults to localhost

PORT App port also for CORS and stuff

JWTSECRET Secret used for JWT, can be generated with:

node -e "console.log(require('crypto').randomBytes(256).toString('base64'));"
#or
openssl rand 256 | base64

POSTGRES Postgres URL

DISCORDID Discord oAuth id

DISCORDSECRET Discord oAuth secret

Dump

Acknowledgements

• @jonathanlurie/pointCloud

trakr.app's Issues

Cache each map and maybe only sync db and cache to stop async calls in main function

Line: 13

trakr.app//server/controllers/dataController.js

Lines 10 to 20 in ec31d10

	// we check what mode user is in
	// set throttle based on mode and only save data we need, maybe send full telemetry to frontend
	/**
	* TODO: Cache each map and maybe only sync db and cache to stop async calls in main function
	* category=data
	*/
	export const throttledWrite = async (msg, rinfo, gameId) => {
	// Checks
	const userId = idFromIp(rinfo.address)
	if (users[userId].udp === undefined) { return }

check for forwarded ip to not block full companies/institutes and stuff

Line: 122

trakr.app//server/controllers/userController.js

Lines 119 to 129 in 441dbe3

	}
	watchedObject[ip] = ip
	}
	// TODO: check for forwarded ip to not block full companies/institutes and stuff
	// category=nuxt
	export const idFromSocket = (socket) => {
	if (socket.handshake.headers.origin === 'http://localhost:3000') {
	return '127.0.0.1'
	}
	let clientIp = '0.0.0.0'
	if ('x-real-ip' in socket.handshake.headers) {

Cache each map and maybe, only sync db and cache to stop async calls in main function

Line: 13

trakr.app//server/controllers/dataController.js

Lines 10 to 20 in 3df6a99

	// we check what mode user is in
	// set throttle based on mode and only save data we need, maybe send full telemetry to frontend
	/**
	* TODO: Cache each map and maybe, only sync db and cache to stop async calls in main function
	* category=nuxt
	*/
	export const throttledWrite = async (msg, rinfo, gameId) => {
	// Checks
	const userId = idFromIp(rinfo.address)
	if (users[userId] === undefined || users[userId].udp === undefined) { return }

Add fake demo data, maybe a fake loop

fh5 steering is from -127+127

Line: 43

trakr.app//assets/js/Car.js

Lines 40 to 50 in ec31d10

	// this.car.position = new THREE.Vector3(val.alluserPos[i].x / 20, val.alluserPos[i].z / 20, val.alluserPos[i].y / 20)
	}
	/**
	* TODO: Add fake demo data, maybe a fake loop
	* category=three
	*/
	// fh5 steering is from -127+127
	export function animateCar (val) {
	if (val[0] + val[1] + val[2] === 0) { return }
	if (this.car !== undefined) {
	this.packOffset = this.packClock.getDelta()

Adding points doesn't work on mobile, three js works fine

Not sure why this happens yet but chrome->device simulation-> pixel 5 doesn't add points

Line: 26

trakr.app//assets/js/Points.js

Lines 23 to 33 in e045d0a

	this.geometry.setDrawRange(0, 0)
	}
	// FIXME: Adding points doesn't work on mobile, three js works fine
	// category=threejs
	// Not sure why this happens yet but chrome->device simulation-> pixel 5 doesn't add points
	export function addPoint (xyz) {
	const positions = this.points.geometry.attributes.position.array
	positions[this.pointsCount] = xyz[0]
	positions[this.pointsCount + 1] = xyz[1]

Check for multiple tabs and only run one for each ip for now

Line: 24

trakr.app//server/listeners/socketServer.js

Lines 21 to 31 in 3df6a99

	credentials: true
	}
	})
	// TODO: Check for multiple tabs and only run one for each ip for now
	// category=nuxt
	io.use(function (socket, next) {
	const authtoken = socket.handshake.headers.cookie
	const token = cookie.parse(authtoken)
	if ('auth._token.local' in token && cookie.parse(authtoken)['auth._token.local'] !== 'false') {
	jwt.verify(token['auth._token.local'].split(' ')[1], config.secret, function (err, decoded) {
	if (err) { return next(new Error('Authentication error')) }

Keep track of different pointbuffers so we can hide and show when switching pages

Line: 18

trakr.app//mixin/sockets.js

Lines 15 to 25 in ec31d10

	},
	// Watch for change Store and do stuff
	/**
	* TODO: Keep track of different pointbuffers so we can hide and show when switching pages
	* category=threejs
	*/
	watch: {
	chordPack (val) {
	if (val.length === 0) { return }
	this.$stage.parseChordPack(val)
	}

Do actual smoothing between packets

For now this works but real lerping should lerp between packets so its actually always smooth

Line: 75

trakr.app//assets/js/Car.js

Lines 72 to 82 in 0737a51

	}
	}
	/**
	* TODO: Do actual smoothing between packets
	* category=threejs
	* For now this works but real lerping should lerp between packets so its actually always smooth
	*/
	/**
	* TODO: Implement car pitch&roll
	* category=threejs

lil gui can be shown if not on a three page

The system to show or hide gui+stage stuff is not optimal
For now we give a mixin to pages we want the gui that show and hide on mount/destroy

Line: 216

trakr.app//components/AppBar/Settings.vue

Lines 213 to 223 in e045d0a

	}
	},
	toggleGui (w) {
	// FIXME: lil gui can be shown if not on a three page
	// category=lilgui
	// The system to show or hide gui+stage stuff is not optimal
	// For now we give a mixin to pages we want the gui that show and hide on mount/destroy
	if (w) {
	this.$cookies.set('gui', true, { path: '/', maxAge: 60 * 60 * 24 * 7 })
	document.getElementsByClassName('guicontainer')[0].classList.remove('hide')

Add fake demo data, maybe a fake loop, or at least a video

fh5 steering is from -127+127

Line: 43

trakr.app//assets/js/Car.js

Lines 40 to 50 in 3df6a99

	// this.car.position = new THREE.Vector3(val.alluserPos[i].x / 20, val.alluserPos[i].z / 20, val.alluserPos[i].y / 20)
	}
	/**
	* TODO: Add fake demo data, maybe a fake loop, or at least a video
	* category=threejs
	*/
	// fh5 steering is from -127+127
	export function animateCar (val) {
	if (val[0] + val[1] + val[2] === 0) { return }
	if (this.car !== undefined) {
	this.packOffset = this.packClock.getDelta()

Actually implement real code editor for shaders don't use this v-menu actual dialog should be used

Also this needs saving to db and sharing and much more a pre made library...

Line: 67

trakr.app//components/ToolBar/Shader.vue

Lines 64 to 74 in 3df6a99

	</template>
	<script>
	export default {
	// TODO: Actually implement real code editor for shaders don't use this v-menu actual dialog should be used
	// category=nuxt
	// Also this needs saving to db and sharing and much more a pre made library...
	data: () => ({
	ops: {
	bar: {
	onlyShowBarOnScroll: true,
	keepShow: false,

implement raycasting to point

GREEB/fPointcloud@434985f#diff-7b12be43febc6e18259dd77c004315b4143d570234e0f15acf5f9d7b79c371b5

Line: 67
https://github.com/GREEB/trakr.app/blob/3df6a99701e496fb1f98acb60b447657bd5fa628//assets/js/Camera.js#L64-L74

Refactor register page and fix direct load bug

because of data implementation site can't be loaded directly without first getting the new udp pack, fix that

Line: 223

trakr.app//pages/register.vue

Lines 220 to 230 in a42ddb8

	</div>
	</template>
	<script>
	// TODO: Refactor register page and fix direct load bug
	// category=nuxt
	// because of data implementation site can't be loaded directly without first getting the new udp pack, fix that
	import { games } from '~/assets/js/games'
	export default {
	data: () => ({
	games,
	game: null,

Fix server middleware loading before frontend and breaking on hot reload in dev

Line: 54

trakr.app//nuxt.config.js

Lines 51 to 61 in ec31d10

	}
	},
	/**
	* TODO: Fix server middleware loading before frontend and breaking on hot reload in dev
	* category=nuxt
	*/
	serverMiddleware: [
	{ path: '/', handler: '~/server/server.js' }
	],
	server: {
	host: process.env.URL ? '0' : 'localhost',

Mobile styles are broken

Add breakpoints to all elements to fix

Line: 5

trakr.app//assets/main.sass

Lines 2 to 12 in e045d0a

	// category=styles
	// This is broken because of hardcoded colors in darkmode fix by using vuetify variables
	// TODO: Mobile styles are broken
	// category=styles
	// Add breakpoints to all elements to fix
	$appbar-height: 48px
	header
	.menuContainer
	margin-left: 2em

Logout does not trigger anything in the backend so user is kinda bugged out cuz sockets still authed

Line: 30

trakr.app//components/AppBar/UserSettings.vue

Lines 27 to 37 in fc4d984

	}
	},
	methods: {
	// FIXME: Logout does not trigger anything in the backend so user is kinda bugged out cuz sockets still authed
	// category=nuxt
	async logout () {
	await this.$auth.logout()
	}
	}
	}

Bounding boxes are calculated every 100 points for now

This can't be optimal this should only be done when necessary idk how to check for that tho

Line: 83

trakr.app//assets/js/Points.js

Lines 80 to 90 in 0737a51

	}
	/**
	* FIXME: Bounding boxes are calculated every 100 points for now
	* category=threejs
	* This can't be optimal this should only be done when necessary idk how to check for that tho
	*/
	export function computeBoundings () {
	if (this.pointsCount - this.lastCompute > 1000) {
	this.app.$toast.info('computeBoundingSphere, may lag')
	// this.geometry.computeBoundingBox()

Implement car pitch&roll

For now we only animate yaw of car or z axis we should implement the rest

Line: 81

trakr.app//assets/js/Car.js

Lines 78 to 88 in 0737a51

	*/
	/**
	* TODO: Implement car pitch&roll
	* category=threejs
	* For now we only animate yaw of car or z axis we should implement the rest
	*/
	export function smoothCar () {
	// this.packOffset // we have ms of last packet
	// this.stats //may have fps
	// now we know our last pack was lets say 250 ms ago

Get this data over its client so we can first only take clients with visibility 0 and then we can do checks on all of these

Line: 139

trakr.app//server/controllers/dataController.js

Lines 136 to 146 in 7b87886

	return
	}
	// TODO: Get this data over its client so we can first only take clients with visibility 0 and then we can do checks on all of these
	await models.position.findAll({
	where: {
	gameId,
	normSuspensionTravelSum: { // dont display flying data on frontend helps with point from ppl teleporting even tho they shouldn't? can be undone when soft banning is on
	[Op.gt]: process.env.MAXSUSPENSION || 0.4 // basically how much we remove points with low suspenstiontravelsum
	}
	},

Gui on mobile is broken/too big

Fix gui on mobile and style for mobile

Line: 5

trakr.app//assets/js/Gui.js

Lines 2 to 12 in e045d0a

	import { Color } from 'three'
	import Stats from 'three/examples/jsm/libs/stats.module.js'
	// TODO: Gui on mobile is broken/too big
	// category=lilgui
	// Fix gui on mobile and style for mobile
	// TODO: Gui fps sometimes show fps,ms,mem, and somethimes only fps,ms
	// category=lilgui
	// FPS section in gui can have 2 or 3 elements depending on browser account for that

Gui fps sometimes show fps,ms,mem, and somethimes only fps,ms

FPS section in gui can have 2 or 3 elements depending on browser account for that

Line: 9

trakr.app//assets/js/Gui.js

Lines 6 to 16 in e045d0a

	// category=lilgui
	// Fix gui on mobile and style for mobile
	// TODO: Gui fps sometimes show fps,ms,mem, and somethimes only fps,ms
	// category=lilgui
	// FPS section in gui can have 2 or 3 elements depending on browser account for that
	export function initGui () {
	this.guiLet = {
	boxVisible: false,
	colorSchema: 'Height',

Check for multitple tabs and only run one for each ip for now

Line: 24

trakr.app//server/listeners/socketServer.js

Lines 21 to 31 in 19448e2

	credentials: true
	}
	})
	// TODO: Check for multitple tabs and only run one for each ip for now
	io.use(function (socket, next) {
	const authtoken = socket.handshake.headers.cookie
	const token = cookie.parse(authtoken)
	if ('auth._token.local' in token && cookie.parse(authtoken)['auth._token.local'] !== 'false') {
	jwt.verify(token['auth._token.local'].split(' ')[1], config.secret, function (err, decoded) {
	if (err) { return next(new Error('Authentication error')) }
	socket.decoded = decoded

check for forwarded ip to not block full companies and stuff

Line: 122

trakr.app//server/controllers/userController.js

Lines 119 to 129 in 3cfae42

	}
	watchedObject[ip] = ip
	}
	// TODO: check for forwarded ip to not block full companies and stuff
	// category=nuxt
	export const idFromSocket = (socket) => {
	if (socket.handshake.headers.origin === 'http://localhost:3000') {
	return '127.0.0.1'
	}
	let clientIp = '0.0.0.0'
	if ('x-real-ip' in socket.handshake.headers) {