Upvote Upvoted 148 Downvote Downvoted
1 2
dribble.tf - stv demo replay in browser
posted in Projects
1
#1
dribble.tf
0 Frags +

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
Having issues with the domain right now, access here instead https://dribbletf.netlify.app

Features

  • Load STV .dem files into demo viewer via browser
  • 3D models of players & maps (glTF)
  • Player POV & free camera controls
  • Timeline/tick scrubbing
  • Change playback rate

Planned

  • Support for more maps
  • Add textured versions of maps
  • Add freehand 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!)
  • lasa01 for io_import_vmf for converting 3D models.
[b][size=16][url=https://dribbletf.netlify.app]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.

[s]Check it out! [url=#]https://dribble.tf[/url][/s]
[i]Having issues with the domain right now, access here instead[/i] [url=https://dribbletf.netlify.app/]https://dribbletf.netlify.app[/url]

[u][b]Features[/b][/u]
[list]
[*] Load STV .dem files into demo viewer via browser
[*] 3D models of players & maps (glTF)
[*] Player POV & free camera controls
[*] Timeline/tick scrubbing
[*] Change playback rate
[/list]

[u][b]Planned[/b][/u]
[list]
[*] Support for more maps
[*] Add textured versions of maps
[*] Add freehand 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!)
[*] lasa01 for [url=https://github.com/lasa01/io_import_vmf]io_import_vmf[/url] for converting 3D models.
[/list]
2
#2
59 Frags +

this is sick

this is sick
3
#3
24 Frags +

actually cool

actually cool
4
#4
31 Frags +

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!
5
#5
tf2pickup.org
6 Frags +

insane work, this looks really cool even in early beta

insane work, this looks really cool even in early beta
6
#6
3 Frags +

This is extremely cool holy shit.

This is extremely cool holy shit.
7
#7
20 Frags +

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?
8
#8
newbie.tf
32 Frags +

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
9
#9
3 Frags +

wtf this is poggers to say the least

wtf this is poggers to say the least
10
#10
0 Frags +

incredible

incredible
11
#11
0 Frags +

yo this is wild, good job dude!

yo this is wild, good job dude!
12
#12
dribble.tf
27 Frags +

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
13
#13
8 Frags +

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
14
#14
Stream Highlights
5 Frags +

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?
15
#15
4 Frags +

ok this is incredibly sick

ok this is incredibly sick
16
#16
0 Frags +

this is pretty cool, congrats!

this is pretty cool, congrats!
17
#17
4 Frags +

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!
18
#18
0 Frags +

this is nuts

this is nuts
19
#19
1 Frags +

wow

wow
20
#20
1 Frags +

this is so damn cool dude

this is so damn cool dude
21
#21
-4 Frags +

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.
22
#22
1 Frags +

this is so damn COOL

this is so damn COOL
23
#23
2 Frags +

my boy smeso

my boy smeso
24
#24
19 Frags +

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.
25
#25
2 Frags +

insanely impressive, good work

insanely impressive, good work
26
#26
26 Frags +

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
27
#27
dribble.tf
27 Frags +

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]
28
#28
newbie.tf
3 Frags +
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
29
#29
12 Frags +

can we use these on broadcasts? absolutely amazing work!

can we use these on broadcasts? absolutely amazing work!
30
#30
6 Frags +
smesoAdded drawing tools

epic

[quote=smeso]
[u][b]Added drawing tools[/b][/u]
[/quote]

epic
1 2
Please sign in through STEAM to post a comment.