*blog... kind of... *rss 



Or so they say... July 25th 2010, mr.doob
This weekend Euskal took place and for quite a while I was considering doing a demo for it, but it wasn't until Friday night that I finally got free time for doing it (and the deadline was Saturday evening...).

Now that three.js was starting to get stable and also thanks to some sequencing code I had done some months ago I had no excuses to get working on it. So, from Friday midnight until Saturday afternoon, I managed to get this:



That's just a video of the demo, watch the actual demo.

Quite amazing how quickly you can get stuff done with javascript once you have the basic libs ready ;)

I need to check what's wrong with Opera, for some reason is not cleaning the screen. Apart from that it should work in all browsers (albeit quite slow in some, specially MacOS ones). Oh, I think it wouldn't work on Safari either, as it seems to be the only modern browser that doesn't support .ogg files.

In case anyone is interested, I've also shared the source code.

EDIT: Found the problem with Opera. Turns out context.clearRect() doesn't work if the context has been transformed with negative values. I'll let them fix their bug ;)
34 comments

Pretty sweet, doobers.
July 25th 2010, Duncan
Wow pretty impressive. No WebGL and plugins and looks very impressive.
July 25th 2010, wonderwhy-er
Wow, I didn't know that anyone had forced javascript this deep into the 3D realm yet! Quite amazing my friend! My Quad-Core CPU was having some trouble but it played pretty smoothly.
July 25th 2010, David
congratulatios!! :)
July 26th 2010, Diego
I tested on Fixfoc 3.5.5

Just shown me a constant loop in the status bar that switched between...

waiting for data
transfering data from aplsv.com

.. with a blank black screen
July 26th 2010, Tink
No Fixfoc isn't a new browser, I meant Firefox ;)
July 26th 2010, Tink
I just tried with Firefox 4/MacOS and (albeit slow) it worked fine. Although Apple has been pushing HTML5 quite a lot these days, their platform doesn't seem to perform very well...
July 26th 2010, mr.doob
Stunning. Awesome work Doob.
July 26th 2010, Lawrie
Thanks, that was a great show! Once more impressive.
Runs smoothly and instant in Chrome on Fedora 64bit.
July 26th 2010, Jon & Ibe
WOOOW, rockin !!
whats happening on Opera?!
July 26th 2010, riss
Works nice in Chrome.

Nuf.
July 26th 2010, Danny
Works great with Opera (in my case)

I love it! A lot!
July 26th 2010, Simeon
Does not work in IE8 and IE9preview.
July 26th 2010, Anton
I know... It doesn't work on a toaster either.

Seriously speaking, I think it doesn't work on IE9preview because they do not support .ogg files.
July 26th 2010, mr.doob
Seem it is not work on Chrom 5 on Mac.
July 26th 2010, William
big upps for first place! :D and releasing sth at all! Seemed quite slow this this year at euskal.
demo:ran slow on Firefox. But good on Chrome. I actually like more fastpaced stuff. But the optics were nice.
July 26th 2010, eRiC
Epic! I was actually working on something remotely similar, a simulation of a galaxy using particles. :)
July 26th 2010, 29a
Hehe! At some point I also considered doing the galaxy with particles but seemed too complicated. Textured plane looked good enough ;)
July 26th 2010, mr.doob
Dude, that's awesome. Good show.
July 27th 2010, Jacob Seidelin
fricking awesome demo, though it was slow on mac chrome 5
July 28th 2010, sambao21
Muy buena nene... no me esperaba una cosa de estas hasta que mis compis de trabajo me lo han dicho esta mañana y me ha entrado la curiosidad... ¡Enhorabuena!
July 29th 2010, humphr3y
we've been there before with Java software rendering though
August 1st 2010, greg
Amazing collection. Some beautiful, psychedelic creations. Great music too.
You should collaborate with Simon Posford
August 6th 2010, ClayFus
Not working in Chromium 6.0.472.22 running on Ubuntu 10.04

Error: Uncaught TypeError: Object #<an HTMLElement> has no method 'play' (xplsv_orsotheysay line 135)
August 8th 2010, Sean
"I just tried with Firefox 4/MacOS and (albeit slow) it worked fine. Although Apple has been pushing HTML5 quite a lot these days, their platform doesn't seem to perform very well..."

That would be Firefox's javascript rendering issues there as opposed to MacOS - tried it in Safari 5/MacOS and it ran beautifully.

Great piece of work!
August 18th 2010, Luke
It's like a cool demo circa 1992, it's amazing to think how many layers are at play here before something's actually drawn on the screen. What's funny is we'll probably just end up condensing the middle of the stack and the browser will be the first class object.
August 20th 2010, benjaminRRR
Excelent blog! How did you learn to do all of that? It's quite amazing
August 26th 2010, David
I try harmony and I couldn't stop! My simple 5 minutes doodle became something really Picassoish if that even a word
August 27th 2010, Ganesha
OMG. I am impressed! This is amazing! *speechless*

Regards
Fabian
September 3rd 2010, werbeagentur bodense
The bug in Opera is fixed in the newest Snapshot! Get it at http://my.opera.com/desktopteam
September 8th 2010, Martin
Great! Thanks for the tip Martin! :)
September 9th 2010, mr.doob
Have you tried making it interactive rather than a continuous video? I've done it with a flat image of the world but never anything as intense as your's.
September 14th 2010, scrapped cola
Yeah, good point. Long term challenge. I think I'll add simple interactive controls :)
September 14th 2010, mr.doob
I think I read a while back that instead of doing clearRect(), it's better to set the width as the width.

basically something like:
context.width = context.width

I don't remember the argument for it, maybe you may have some insight?

would also fix (the now fixed) bug
October 2nd 2010, kyle