dribble.tf
Demo replay in browser... but less epic
Github | Discord
Overview
Project was created because constantly having to reload demos in TF2 to re-watch mids/pushes was super annoying.
This is intended to be more of a tool to analyse/review high-level team play; thus won't be trying to "reproduce" in-game quality visuals/behaviour entirely.
This only works for STV demos! You can try loading POV ones but they will be buggy.
Check it out! https://dribble.tf
Features
- Load STV .dem files into demo viewer via browser
- 3D models of players & maps (glTF)
- 3 map geometries: wireframe, plain, textured
- 3 camera modes: POV, spectator camera, RTS camera
- Timeline/tick scrubbing
- Change playback rate (0.1x to 3x speed)
- Drawing tools
Notes
- If you're getting super low frames, try turning hardware acceleration on in your browser.
- There are a bunch of keyboard shortcuts, there's usually key indicators if you hover over certain buttons
- There may be occasions where FPS tank (e.g. start of first round) - likely due to 3D models being loaded for the first time
- Performance quite bad in non-Chromium browsers (e.g. Firefox) - probably due to underlying 3D rendering magics
Credits
- Icewind for his demostf libraries. (huge props!)
- zebulon for solving map models, textures, skyboxes and grinding map exports
- lasa01 for io_import_vmf for converting 3D models.
[b][size=16][url=https://dribble.tf]dribble.tf[/url][/size][/b]
[size=10]Demo replay in browser... but less epic[/size]
[url=https://github.com/bryjch/dribble.tf]Github[/url] | [url=https://discord.com/users/135020835109863424]Discord[/url]
[u][b]Overview[/b][/u]
Project was created because constantly having to reload demos in TF2 to re-watch mids/pushes was super annoying.
This is intended to be more of a tool to analyse/review high-level team play; thus won't be trying to "reproduce" in-game quality visuals/behaviour entirely.
[b]This only works for STV demos![/b] You can try loading POV ones but they will be buggy.
Check it out! [url=https://dribble.tf]https://dribble.tf[/url]
[u][b]Features[/b][/u]
[list]
[*] Load STV .dem files into demo viewer via browser
[*] 3D models of players & maps (glTF)
[*] 3 map geometries: wireframe, plain, textured
[*] 3 camera modes: POV, spectator camera, RTS camera
[*] Timeline/tick scrubbing
[*] Change playback rate (0.1x to 3x speed)
[*] Drawing tools
[/list]
[u][b]Notes[/b][/u]
[list]
[*] If you're getting super low frames, try [b]turning hardware acceleration on[/b] in your browser.
[*] There are a bunch of keyboard shortcuts, there's usually key indicators if you hover over certain buttons
[*] There may be occasions where FPS tank (e.g. start of first round) - likely due to 3D models being loaded for the first time
[*] Performance quite bad in non-Chromium browsers (e.g. Firefox) - probably due to underlying 3D rendering magics
[/list]
[u][b]Credits[/b][/u]
[list]
[*] Icewind for his [url=https://github.com/demostf]demostf[/url] libraries. (huge props!)
[*] zebulon for solving map models, textures, skyboxes and grinding map exports
[*] lasa01 for [url=https://github.com/lasa01/io_import_vmf]io_import_vmf[/url] for converting 3D models.
[/list]
While still in development (I don't see myself using this until the map textures aren't black/white), the fact that this is a functional prototype with the option to use both free camera and first person POV switching + the ability to skip to past ticks without having to reload all the previous ones is actually insane holy cow. Mad props!
While still in development (I don't see myself using this until the map textures aren't black/white), the fact that this is a functional prototype with the option to use both free camera and first person POV switching + the ability to skip to past ticks without having to reload all the previous ones is actually insane holy cow. Mad props!
insane work, this looks really cool even in early beta
insane work, this looks really cool even in early beta
This is extremely cool holy shit.
This is extremely cool holy shit.
Quite an impressive piece of work, have to commend the code quality (the Three.js rendering with React components is pretty cool)
As I'd have expected, the valve assets seem to be a big pain point, it's neat that you managed to get something working altogether, is your current pipeline able to extract animations as well?
Quite an impressive piece of work, have to commend the code quality (the Three.js rendering with React components is pretty cool)
As I'd have expected, the valve assets seem to be a big pain point, it's neat that you managed to get something working altogether, is your current pipeline able to extract animations as well?
holy fuck, legendary.
going to make coaching way easier if I'm able to rewind a few hundred ticks without it taking 30 seconds and there being a 20% chance of tf2 crashing lol
holy fuck, legendary.
going to make coaching way easier if I'm able to rewind a few hundred ticks without it taking 30 seconds and there being a 20% chance of tf2 crashing lol
wtf this is poggers to say the least
wtf this is poggers to say the least
yo this is wild, good job dude!
yo this is wild, good job dude!
Thanks for the compliments everyone!
Seems like textured maps are a big want; main setback are a bunch of broken textures & massive file size (~100mb per textured map vs ~6mb per untextured map). Current implementation has all full-res textures baked into each model file, so it's not the most efficient solution.
Not familiar with Blender so the texture stuff is trial and error right now; and three.js also changes rapidly so things tend to break!
Will probably prioritize this; and any existing bugs/issues people encounter.
https://i.imgur.com/hucWsQc.png
twiikuuQuite an impressive piece of work, have to commend the code quality (the Three.js rendering with React components is pretty cool)
As I'd have expected, the valve assets seem to be a big pain point, it's neat that you managed to get something working altogether, is your current pipeline able to extract animations as well?
Yeah the valve assets are pretty painful. I did manage to have player animations load into Blender, but I never tried exporting them to glTF / running them in the viewer - am not planning on implementing animations (think that may be a nightmare
Thanks for the compliments everyone!
Seems like textured maps are a big want; main setback are a bunch of broken textures & massive file size (~100mb per textured map vs ~6mb per untextured map). Current implementation has all full-res textures baked into each model file, so it's not the most efficient solution.
Not familiar with Blender so the texture stuff is trial and error right now; and three.js also changes rapidly so things tend to break!
Will probably prioritize this; and any existing bugs/issues people encounter.
[img]https://i.imgur.com/hucWsQc.png[/img]
[quote=twiikuu]Quite an impressive piece of work, have to commend the code quality (the Three.js rendering with React components is pretty cool)
As I'd have expected, the valve assets seem to be a big pain point, it's neat that you managed to get something working altogether, is your current pipeline able to extract animations as well?[/quote]
Yeah the valve assets are pretty painful. I did manage to have player animations load into Blender, but I never tried exporting them to glTF / running them in the viewer - am not planning on implementing animations (think that may be a nightmare
Very cool and well executed project, but could it be possible to have some sort of a paint tool added to draw over the screen? IMO that would help a lot when reviewing demos with multiple people over discord
Also the white textures are fine id why people don't like them
Very cool and well executed project, but could it be possible to have some sort of a paint tool added to draw over the screen? IMO that would help a lot when reviewing demos with multiple people over discord
Also the white textures are fine id why people don't like them
Do you think you could add an option to toggle textures on or off? I personally like the aesthetic but I can see why others would want textures. Also do you have a dono link or something to help support the development of this project?
Do you think you could add an option to toggle textures on or off? I personally like the aesthetic but I can see why others would want textures. Also do you have a dono link or something to help support the development of this project?
ok this is incredibly sick
ok this is incredibly sick
this is pretty cool, congrats!
this is pretty cool, congrats!
It honestly blows me away how much cool stuff this community creates. Thank you for this!
It honestly blows me away how much cool stuff this community creates. Thank you for this!
this is so damn cool dude
this is so damn cool dude
Incredible project. Love it.
Also for some reason i can't get the thought of a fragvideo recorded exclusively using this out of my mind. It'd tilt into so bad it's good real quick.
Incredible project. Love it.
Also for some reason i can't get the thought of a fragvideo recorded exclusively using this out of my mind. It'd tilt into so bad it's good real quick.
What the actual how in the fuck did you manage this
Literally the only problem I see is that rockets flip backwards when rewinding, but that's so incredibly minor and I'm sure it would be easy to fix
The most astonishing part is that you've got the whole thing rendering in realtime with actual real player models. Even without animations, that's damn impressive. I never thought we'd get anything more advanced than demos.tf. The stats overlay is really nice too.
What the actual how in the fuck did you manage this
Literally the only problem I see is that rockets flip backwards when rewinding, but that's so incredibly minor and I'm sure it would be easy to fix
The most astonishing part is that you've got the whole thing rendering in realtime with actual real player models. Even without animations, that's damn impressive. I never thought we'd get anything more advanced than demos.tf. The stats overlay is really nice too.
insanely impressive, good work
insanely impressive, good work
when valve doesn't give you a functional demo system so you make one in a web browser
when valve doesn't give you a functional demo system so you make one in a web browser
Update 25/11/2020
POV switching
Improved how this works; more reliable and better indicators.
- 1 .................. Go to next POV
- Shift + 1 ...... Go to previous POV
- Switching between POV is based on the order in the UI
- Click on the player name in the UI to jump to their POV
Added drawing tools
It's a bit tricky to figure out the best UX/hotkeys for it, so I've added some settings to slightly tailor how you may use it.
- F ...... activate the drawing tools
- Z ...... undo last line
- C ...... clear everything
- You can change activation mode to either Hold / Toggle (not sure which I prefer :P)
- You can enable auto clearing when dismissed (feels better with this on I think)
https://i.imgur.com/2qpduR5.png
[b][u]Update 25/11/2020[/u][/b]
[u][b]POV switching[/b][/u]
Improved how this works; more reliable and better indicators.
- [b]1[/b] .................. Go to next POV
- [b]Shift + 1[/b] ...... Go to previous POV
- Switching between POV is based on the order in the UI
- Click on the player name in the UI to jump to their POV
[u][b]Added drawing tools[/b][/u]
It's a bit tricky to figure out the best UX/hotkeys for it, so I've added some settings to slightly tailor how you may use it.
- [b]F[/b] ...... activate the drawing tools
- [b]Z[/b] ...... undo last line
- [b]C[/b] ...... clear everything
- You can change activation mode to either [b]Hold / Toggle[/b] (not sure which I prefer :P)
- You can enable auto clearing when dismissed (feels better with this on I think)
[img]https://i.imgur.com/2qpduR5.png[/img]
smeso- Click on the player name in the UI to jump to their POV
- Added drawing tools
epic
[quote=smeso]
- Click on the player name in the UI to jump to their POV
- Added drawing tools[/quote]
epic
can we use these on broadcasts? absolutely amazing work!
can we use these on broadcasts? absolutely amazing work!
smesoAdded drawing tools
epic
[quote=smeso]
[u][b]Added drawing tools[/b][/u]
[/quote]
epic