this is AWESOME!
Seriously.js
121–130 of 196 posts
Re: Seriously.js
#122Doesn't work at all for me in Firefox 21.0 on amd64 Linux. Works in Chromium 25 on the same box. This is particularly disappointing because there's a Mozilla logo on the page.
It works fine in FF 24 on a mac.
Re: Seriously.js
#123First thing in the morning, I wake up to see this. Made my day :). Awesome job.
Re: Seriously.js
#124Earlier quoted context omitted.
You... you're the one! :-) Nice work. I'm curious about where you got the video, was that something you recorded, or got from somewhere? I don't really work with video, but I'm sure I can find something useful for it in the future.
Nevermind, I found the video on youtube.
This is where I got the original, raw green screen video:
http://okgo.net/2010/01/20/wtf-video-remix-project/
I kinda wish it was at a higher bit-rate. There are some jaggies at the edges of the hair and stuff that I had to cover up by tinting the color of the video.
Re: Seriously.js
#125Hi, I'm the person responsible for/guilty of this. Thanks for the comments, everyone. My sympathies for the BSOD. Please keep the bug reports and questions coming. I'll try to fix/answer what I can.
Does it now or might it soon work with live video from the local camera?
Yup. You can see a live video demo with a sample of some of the effects:
http://brianchirls.github.io/Seriously.js/
Although, both Firefox and Chrome have been a bit buggy for me with getUserMedia.
Try the Ascii Text effect.
Re: Seriously.js
#126Impressive! It's really amazing to see how OpenGL can enrich the web if it's used right. A few years ago I'd never have guessed shaders could be used in a browser. I have little experience with Javascript projects, so can I ask why the name Seriously? Wouldn't a more descriptive name cover the contents? Also, why is the main source file 4K lines long? That's a little off-putting.
Good questions.
It's called Seriously for two reasons: 1) At some point, I had this idea that I would make all my Javascript libraries references to Homestar Runner. http://www.hrwiki.org/wiki/Seriously
2) "You can do that in a browser? Seriously?!"
As for the file size, yeah you're right it's too big. I'm working on a grunt.js build script, and when that's done, I'll break the main file into smaller pieces so you can pick and choose which utilities and things you need to load. Right now, it has the color lookup table and noise shaders, among other things, which are not necessary for everybody.
Re: Seriously.js
#127Earlier quoted context omitted.
"Sadly, we are unable to get Seriously.js to work on your computer. Sometimes WebGL gets a bit weird with certain graphics hardware and drivers. Please have a look here for more information." Yeah, same here, running Ubuntu on a Dell Precision laptop. Guess WebGL doesn't like my setup.
I coded WebGL a little over a year ago on a Precision "laptop" under Suse Linux. What I needed: (A) up-to-date Nvidia proprietary drivers (B) "de-blacklist myself" somewhere deep in the browser's hidden WebGL config page (I think it was about:gpu or some such back then in Chromium, but I'm not really up to date).
Yeah, I run Chrome on Ubuntu on a pretty powerful Lenovo T-something with an NVIDIA whatever optimus pain in the neck. The only way I can get it to work is to add --ignore-gpu-blacklist to the Chrome command line.
Check: /usr/share/applications/google-chrome.desktop (or something like that) You should see some lines that start with "Exec" where you can add that parameter to the end.
Re: Seriously.js
#128Earlier quoted context omitted.
Would also be interesting to see if they could recreate the effect of the original video in JS also.
Isn't the algorithm just, filter out the greenscreen, for each remaining pixel draw it to the buffer, draw the buffer to the screen? That doesn't seem more complicated than the examples they showed.
It is actually slightly more complicated. The existing effects work in GLSL and are just transforming single frames of video. For that effect to work, you need the previous buffer states; this means that seeking will cause the image to be different, and you need to feed the previous render state back as a texture.
Re: Seriously.js
#129I know next to nothing about graphics programming but how does this work? I don't suppose there is a Javascript loop that goes through all the pixels on each frame...
Nope. That would be too slow. I tried that a couple years ago before writing Seriously.js, and the big problem was copying around the memory. You have to first draw the video to a canvas, then you have to extract the pixel array from the canvas, loop through all the pixels and then draw the pixels back to the canvas. Now, for a high-definition video at 4 bytes per pixel (RGBA), you're looking at about 3.5MB of memory for each copy. And on top of that, it has to allocate and garbage collect that 3.5M pixel array for every frame, because it doesn't let you copy into an existing array. If you look at the first video-processing canvas demos, they tend to be pretty small, and this is why.
Instead, this uses WebGL/OpenGL. So the pixels are copied once from the video directly into the GPU memory, and they are processed in parallel there before going straight to your screen. Much, MUCH faster.
Re: Seriously.js
#130Earlier quoted context omitted.
Would also be interesting to see if they could recreate the effect of the original video in JS also.
Isn't the algorithm just, filter out the greenscreen, for each remaining pixel draw it to the buffer, draw the buffer to the screen? That doesn't seem more complicated than the examples they showed.
[deleted]