Virtual lane graphics for swimming with CSS3 | Hacker News Reader

Virtual lane graphics for swimming with CSS3

xy-kao.com

355 pointsCWIZO34 comments

This is great! We (Vidpresso) think this sort of thing is the future of TV, and that's why we're building it. Currently, our first product is a way for TV stations to take Facebook and Twitter, and show it using their own graphical look on-air. We have some big broadcasters, like Anderson Cooper's show Anderson Live, as well as some interantional stations in Germany (QVC!), Panama, and Lebanon. In the US we have more than a dozen US TV stations, and Univision uses us for their network programming.

Here's some samples: http://www.youtube.com/user/randallvpp

All we use is Google Chrome on the output side to make it simple to display the graphics.

All three of us have video & TV backgrounds, but we all turned into coders somehow. We're always looking to meet more interesting folks who are interested in the intersection of video and the web. I have info in my profile, plus you can check out our website: http://www.vidpresso.com/

Are you guys perhaps in SF? I'm an engineer that has some (amateur) experience doing video editing and some graphics with Premiere and AE.

Not in SF... but we're a virtual team. Shoot me a note... we should chat!

Email sent!

Heh, as soon as I saw this, I expected to pop in here and see this EXACT comment from you!

PS: Vidpresso is the real deal, good stuff.

You going to NAB? We'll be there, so stop by!

Yup - the 9th to 11th - look forward to saying hello!

Just a suggestion, but perhaps you should put one of the videos from that YouTube channel on the homepage? It would perhaps made a better statement about what your technology can do because you'll be able to "see it in action" without having to find the link to your YouTube channel.

EDIT: Your YouTube link on your homepage under "On the Web" points to your Twitter account!

Yeah... we're updating our site literally as we speak. Hopefully will have it launched in about 30 min.

I see, it looks nice! I still think some "screenshots" or a video somewhere on the homepage might look good, but it's your site, not mine!

Try again... not sure what you saw, but yeah there's video as you scroll down... our old site was kind of a "need it up!" kind of thing... and most of our sales are direct sales, so we haven't yet optimized marketing funnels as well as we could.

Which is a way of saying if you want to help us fix our marketing woes, contact me. :)

Ah, I see it now :)

I think having something like a talk/Q&A show where people can ask questions over Facebook or Twitter and you show just that message on the screen as they talk about it is really cool. But almost always when I see Facebook and Twitter on TV it's just a feed of random people's comments about what's going on.

I can't honestly say I've ever seen one of the latter that hasn't annoyed the crap out of me and just distracted from the show I wanted to watch... It'd be nice if the main video and the overlay could be delivered separately so you could have the option to turn it off (like you can turn off annotations on YouTube video). Hopefully when all our video content comes over the internet and not broadcast.

I suspect with this ability the star wars opening credits in pure css3 is coming soon (or maybe already done).

added: ah of course: http://blogs.sitepointstatic.com/examples/tech/css3-starwars...

Nice. "Also by mentioning 'Star Wars' everyone will understand what I mean. And I'll receive several thousand more visits."

For anyone who is interested on how this works in the real world, the system is called First and Ten, and is built by Sportvision. (I'm pretty sure they have also patented the hell out of it)

http://en.wikipedia.org/wiki/1st_%26_Ten_(graphics_system) http://www.sportvision.com/

EDIT: The demo reel is pretty good nerdporn too http://www.sportvision.com/media/sportvision-reel-2012

Yeah there are countless programs to do this outside web browsers some of my favorites of the last 20 years http://en.wikipedia.org/wiki/Scala,_Inc (Amiga tool , see we did stuff too before the web !) http://en.wikipedia.org/wiki/Video_Toaster (another awesome amiga based h/w )

The point is it doesn't take any messing about with web technologies , the people doign this sort of titling professionaly for Sky/Fox BBC are using a combination of broadcast hardware & occasionally Apple Shake in the case of sky sports though i may be out of touch now since shake is not avail much longer.

Right, Apple Shake is no more, but a lot of its features found their way to Apple Motion (which, at $50, is a steal) [1]. Apart from Sportvision for live sports broadcasting, the tools of the trade are still Adobe After Effects, Avid Motion Graphics, and Autodesk Flame.

[1] http://www.apple.com/finalcutpro/motion/

I'm not sure I understand why CSS was chosen for this project. It looks to me like he's creating a static image, transforming it, and feeding it as a green screen overlay into a video mixer. Since everything is static, wouldn't it have been simpler to just make a PNG in PhotoShop and use that?

The names of the swimmers have to be updated dynamically. Easier to update via HTML and CSS, and since he's piping through his laptop's VGA output as the keyed overlay, it can be modified in realtime.

Thats pretty neat, i was always wondering how they really do this in big football(soccer) machtes or olympics where its done realtime and with no control over camera images. This explains in nicely! Also well done on the project, i bet it really added value for spectators!

First, let me say that this is a very neat project for a high schooler before what I say next because I'm not trying to downplay what he did. He figured out how to overlay an image in realtime over video, which is neat.

However, this is only a small part of what is actually done to present the final image. The more complicated part is the computer vision which allows for things like composing the image so that the swimmers are always above the labels (i.e. the superimposed labels appear to be at the bottom of the pool). They also are using computer vision to recognize where the labels should go, rather than some kind of positional mount on the camera as he suggests. The image is processed through a computer which is capable of recognizing the lane lines, the boundaries of the pool, and the bottom of the pool. This way, when the camera moves the image is updated automatically.

Again, I'm not trying to downplay what was done here, it is a very nice hack.

In American football, there is also some basic "green screen" technology put in so that first down lines appear under the players and other objects.

That's why sometimes, parts of the players go missing because the colors are too close to the color of the field.

The NFL strictly uses positional cameras. The first down markers, ads, and other on-field graphics are only available from specific views. It's actually a very low-tech approach.

College and NFL football typically has 3 to 4 stationed cameras up at ~30 degree angle. These cameras are bolted down and do not move from their positions. They are able to transmit their zoom, angle, and pitch very precisely which allows the production team to know exactly where they are pointing at all time. During the transmission they can choose the exact location for the first down markers, etc., and all the high-angle cameras will add it in. To do the overlay they choose a swatch on the field to use as a green-screen. They only trouble that arises is when a teams uniforms is very close to the field color.

They don't use green screen. Before the game with the field empty they do a pan and scan of the entire field from every camera. That gives the system a baseline for change detection that works regardless of team colors.

By 'green-screen' I meant that they take a small snapshot of the field and use those colors as a replacement. A scan before the game would do them very little good, especially in open-air stadiums where game conditions can change immediately.

Well apparently it does them a lot of good, because that is what they do. Check out the Wikipedia article on First and Ten I posted further up in the thread.

You could also watch a Youtube[1] video explaining (near the end) what happens when field conditions change - fog, mud, etc.

[1] https://www.youtube.com/watch?v=Vh9af_gXxlM

Nice work. The pro company that does this for broadcast is Sportvision, www.sportvision.com/

There was a Wired article[1] I saw here a while back about some of the tech being developed to do this (and much much more) dynamically for sailboat racing, filmed live from helicopter(s).

The technical challenges, as well as potential for live info-graphics in sport make this a pretty interesting area, and it's nice to see relatively modest setups capable of producing what were, until recently, digustingly complex and expensive video effects/compositing tasks.

[1] http://www.wired.com/playbook/2012/08/ff_americascup_ellison...

This reminds me of a humorous blog post by the New York Times interactive graphics desk, in which they debated several options for overlaying flags for swimmers...not for live TV but for their 3D renders:

http://chartsnthings.tumblr.com/post/29133053109/the-olympic...

This is very cool! Things like this are what's going to allow CSS to become the design language of future UI.

I can see this being used in a car where an interface is displayed over the top corner of a screen.

there are quite a few videos i see out there that place augmented objects in a video which moves accordingly to the shift of the camera. However that is not live. Combined with AR algorithms, I am pretty sure that this could be a kickass overlay for web live videos in the future.

My (nonexistent) OCD was kicking in and I had to fix the skew in demo.html: http://rapedinheaven.com/with_skew.html (5deg, 0deg)

Reply on news.ycombinator.com