
Lights - citricsquid
http://lights.elliegoulding.com/?
======
citricsquid
So uh, not to cause a fuss but why was the title edited? I can understand
removing the word "impressive" as that is an opinion, but removing the
explanation (interactive html5 / webgl presentation built with threejs) seems
silly? How are users who casually browse news.yc supposed to look at this and
have any clue what they're clicking? Titles that are descriptive should be
more important than... well I can't think why it was changed to just "lights"?
Surely the title containing some sort of description about the content is a
courtesy that users would appreciate.

(For reference the original title was "Lights -- impressive html5 / webgl
presentation built with threejs" and is now "Lights")

~~~
watty
I agree - the only impressive thing about this is the technology.

~~~
spitfire
I'd say the technology is the least impressive part of it. It feels like
303/acme from 1996. Only on gigahertz machinery instead of a 486. and using
hardware acceleration for very basic 3d effects, rather than software
generated texture/env mapping.

But hey, kids these days.

~~~
spitfire
I should add, that as a demo I like it a lot. But the art is what impresses
me. Not the technology.

Catchy tune too!

------
SnowLprd
For those on Mac OS X 10.7 with Safari and who are seeing a message saying
that your browser doesn't support WebGL, that's only because WebGL isn't
enabled by default. You can turn it on by first going to Safari Preferences >
Advanced and then checking the box labeled "Show Develop menu in menu bar".
Close preferences, and then under the "Develop" menu, choose "Enable WebGL".
If you go back to the "Lights" page now, you should be now be able to check it
out!

~~~
Hoff
The site also works with Safari running 10.6 with WebGL enabled, based on a
test with 5.1.1.

------
marcamillion
This is SURPRISINGLY mesmerizing. Something about the music and the animation
and interaction just hooked me.

Plus the fact that it wasn't in Flash was a major plus. But not sure what it
was...but had me going for a while.

~~~
alanh
_Plus the fact that it wasn't in Flash was a major plus._

On a lame Mac Mini, I noticed my CPU was only at ~20%. No jitters detected.
Very cool.

Laptop users should enjoy the lack of a noisy fan kicking in 30 seconds into
it!

------
ck2
It's amazing. At first I was like - oh shoot, how did they license the music
but then I was "oh".

Try banking hard right (or left) and then when the sky starts to go
technocolor pull up hard. Wow.

Works great in Firefox 7, unless I go full width (2048x1152).

Chrome seems to spaz out if I try to change the window size.

Opera fans with full OpenGL drivers can now use WebGL too
[http://my.opera.com/desktopteam/blog/2011/10/13/introducing-...](http://my.opera.com/desktopteam/blog/2011/10/13/introducing-
opera-12-alpha)

~~~
ericb
> At first I was like - oh shoot, how did they license the music but then I
> was "oh".

What does this mean?

~~~
ck2
It's the music artist's website - I didn't realize it at first.

~~~
palish
Even if it wasn't -- honest question -- why would it be necessary to "license"
their music?

This is a work of art. It's not for any kind of profit.

~~~
function_seven
I suppose for the same reason that movies and television shows have to license
the soundtracks they use in their works of art. I guess it's not
transformative enough? Not sure what the legal definition of a derivative work
is, but I guess it doesn't include a simple pairing up of different mediums.

------
moe
Beautiful, but "interactive" seems a bit of an overstatement here. Unless I
missed some interactivity other than popping those bubbles and steering.

~~~
cshenoy
From the landing page:

"Click to interact with the environment, keep the button pressed to fly
faster."

Try clicking at different speeds and on different elements and you'll see the
interactivity (works better with an external mouse). Contrast it to sitting
back and watching it go.

------
5hoom
WebGL is going to be huge very soon.

Developers that are fluent with the technology are going to be in high demand
once more people know what you can do & stuff like this is what everyone
wants.

Time to get reading!

~~~
theroo
Honestly, why would they be in more demand than Flash developers?

~~~
keen
He didn't say they would be.

But to answer your question: mobile devices that don't support Flash.

~~~
mambodog
Mobile devices don't yet support WebGL either. If you want to do 3D on mobile
you have to use CSS 3D Transforms (not supported on some platforms) or Canvas
Context2D with a "software" renderer (slow).

~~~
exDM69
They will soon enough. If you start any substantial project now, by the time
you finish WebGL will be available on most high-end phones, at least on
Android.

Btw. the Nokia N900 has had WebGL support for a year or so. Too bad it's not a
very popular model.

~~~
keen
Thanks, that's what I meant.

------
ck2
Try changing LIGHTS.releaseBuild = true to false.

Interesting debug data.

This must have been a beast to build, sync and debug.

I'd like to see the author post a "making of" entry.

~~~
skeletonjelly
I didn't get a lot of debug data (only Camera position written to console) but
I did get a `Uncaught TypeError: Cannot call method 'update' of undefined`
every frame. Can I ask what I was meant to see?

~~~
ck2
<http://img812.imageshack.us/img812/640/lightsdebug.png>

Go into firebug and set a breakpoint after line 112 in Lights.js and reload
the page.

Then when it hits the breakpoint, change _LIGHTS.buildRelease=false;_ in the
console.

You have to do it right at that point because it changes other
initializations.

It shows a mini-heads-up display with FPS and other info and the console will
output what "phase" the demo is at.

Someone very talented wrote this, it would probably take me a year from
scratch!

At least listening to this music over and over wouldn't be too bad but at the
1000th time I might go insane.

Looks like it's a coder from the UK, nickname "C4RL05" aka Carlos Ulloa:
<http://twitter.com/#!/c4rl05>

------
DrCatbox
WebGL is a helluva drug.

Have they solved or answered the security considerations from letting a
website issue graphics commands?

~~~
spot
yes: [http://hacks.mozilla.org/2011/06/cross-domain-webgl-
textures...](http://hacks.mozilla.org/2011/06/cross-domain-webgl-textures-
disabled-in-firefox-5/)

unless you mean something else...

~~~
nitrogen
There were also concerns about running arbitrary shader code on the GPU, which
has DMA access (Yes, Direct Memory Access access is a bit redundant...) to
system memory, as well as the framebuffer which is in GPU memory.

~~~
spot
only a problem if there's a bug in the drivers. if you can find such a bug,
please let me know.

~~~
ehsanu1
The issue is that if there does happen to be some type of bug which allows an
exploit, simply pointing your webgl-enabled web browser at some page would let
an attacker compromise your system. This wasn't really a problem before webgl,
since to get 3d graphics running at all, an attacker would have had to have
code execution privileges on a victim's computer (by which time it's already
too late).

~~~
ehsanu1
SoupIce, you may have been hellbanned.

------
tsunamifury
FYI, the Bassnectar remix of this song is very good.

~~~
skeletonjelly
It's amazing. Great build.

For the lazy:

<http://www.youtube.com/watch?v=Imixg3jrJS8>

~~~
morsch

      Unfortunately, this video is not available in Germany because it may contain music for which GEMA has not granted the respective music rights.
      Sorry about that.
    

God damnit.

~~~
akie
I feel your pain. Fix it once and for all by installing this:
<http://hidemyass.com/software/proxy-browser-extension/>

See that message, click the pretty nice yellow button, and hooray! Done.

------
parfe
I think I miss the point. Do I control anything happening with the music or in
the scene? This link reminds me of a Winamp visualization from 10 years ago,
but now I can fly through it, in a web browser.

~~~
nickfrost
Seriously? You control the scene. The music is the ambiance that gives the
scene life. Unless you can build something better, I'd say be impressed.

~~~
parfe
Again, I think I must be missing something. If you hit Play and don't touch
the mouse you see the same exact animations as if you flew in a big arc at
full speed.

You control nothing more than a camera angle with a glowing avatar.

~~~
5hoom
In most artist websites you control the play/pause button. I'm in the
impressed camp.

~~~
parfe
So I "control the scene" the same way I control a youtube video?

~~~
Phil987
No, each person's video will be different depending on what they do.

------
navs
I don't care much for the track but as the environment pulsated, I found
myself smiling. Simply amazing.

Running perfectly on MacBook Pro 5th Gen with Google Chrome Canary (16.0.x.x).

------
DanielRibeiro
Guess it did not get enough traction yesterday:
<http://news.ycombinator.com/item?id=3102979>

~~~
nbashaw
It's always interesting to me what makes it up and what never catches on.
Apparently more HN people are intrigued by the mere title "lights" than a
title with more explanation.

~~~
webspiderus
it was actually on the front page before it got edited to simply "lights" -
the previous title was similar to the earlier submission.

------
matdwyer
Not freezing on me. Wow, very interesting.

I didn't even realize I could control where it was going till half way
through. Had a blast trying to avoid the spotlights. Nice job!

------
ranza
I love that none of the js code is minimized! Great use of Mr. Doob's Three.js
library

For reference:

<http://lights.elliegoulding.com/js/Config.js>

<http://lights.elliegoulding.com/js/Lights.js>

~~~
skeletonjelly
Thanks for linking to them. They make for a great code reference. Makes me
wish I was more motivated about learning Processing.

------
voidfiles
Feels static compared to what the arcade fire did with google.

<http://thewildernessdowntown.com/>

The web is a new medium, and browsers can be more expressive then pretty viz.
Push the boundaries with this stuff don't just do your radio show on camera.

~~~
droz
Every change of medium results in the old being shoe horned into the new until
people figure out the new for what it can be.

------
gourneau
Wow, the last few seconds of the video are so beautiful.

------
taylorlb
Really cool. I get that the Twitter usernames come in with the lyric "they're
calling me" but it might be more sticky if the usernames show up sooner. Not
sure everyone would want to keep flying around for so long.

------
alanh
In case anyone is wondering: In Internet Explorer (IE9 is the only desktop
browser to not support WebGL, or will be once Opera 12 ships [1]), you get an
error message that WebGL was not detected [2].

[1]: Source – <http://caniuse.com/#feat=webgl>

[2]: Screenshot – <http://cl.ly/0b3W0p251C0A2t2X2934>

------
tomlin
I am currently working on a project that indexes beats and sounds to a .json
object tied with a JS library that dispatches events based on the timing of a
media file associated.

Eventually, it would be nice to have all forms of equipment taking queues from
the events dispatched. ie, stage equipment, lights, etc.

This example serves to show that these types of applications are coming soon.

------
aiurtourist
If you're interested in learning WebGL, a fantastic resource is
<http://learningwebgl.com/> — especially the weekly summary of "WebGL Around
the Web." (I have no affiliation — I just found it useful.)

------
flink
Wow, it works for me with FF 7.0.1 and nouveau on Linux. A little laggy when I
go fullscreen, sure but the last time I tried viewing WebGL FF told me that my
3D setup wasn't supported.

Anyhow, cool presentation. It's impressive to see how WebGL is progressing.

------
dangrossman
I wish the visualizations in my media player looked anywhere as good as that.

------
DanBC
Really nice. But whenever I see stuff like this I always wonder if it fits
into less than 4k; some of that demo-scene stuff is amazing.

------
agravier
It's pretty, but it systematically freezes about 2 minutes in on my Mac with
Chrome 14.0.835.202.

Also, if it's laggy, try resizing the window.

~~~
culturestate
No freezes here. Core i7 MBP running 10.7.2 and Safari 5.1.1. This is an
absolutely gorgeous demo.

------
nixarn
Says it doesn't support my browser :S Got a new iMac with OSX Lion and tried
with with both Chrome (15 beta) and Safari.

~~~
lylejohnson
Chrome 16.0.904.0 dev is what I'm running on my MacBook, and it works fine
there. It wasn't working for me with Safari either until I saw the tip in
SnowLprd's comment about enabling WebGL.

------
kruhft
Crashed my browser, Linux Firefox 7.0.1...

~~~
beambot
Didn't just crash my browser... crashed + rebooted the entire machine! Ubuntu
10.04 64-bit, Chrome.

~~~
gzur
Same here. Windows 7 Pro x86, Chrome.

------
sandieman
anyone know the developer(s) behind this?

~~~
sandieman
and to answer my own question: <http://helloenjoy.com/> looks like dev team
behind it.

Do some other cool work in webgl: <http://helloracer.com/webgl/>
<http://helloenjoy.com/helloflower/>

~~~
v21
Yup, the main guy behind it is Carlos Alloa. He was also the guy behind
Papervision, which did 3D in Flash years ago. And is also just a lovely guy.

------
mistertrotsky
Really well-done! This impresses me a lot more than dropping a sphere in a box
of water.

------
kevinchen
Did this remind anybody else of a cell membrane with proteins and stuff
attached?

------
filthylucre
I thought it was great stuff.

------
RyanMcGreal
Not working for me on FF 7.0.1 or Chrome 14.0.835.202 on Windows XP. :(

------
trurl123
Does not work. I try to use Firefox 7 and Chrome.

------
rymedia
This looked effing amazing on my 27inch monitor

------
jpulgarin
Doesn't work on Chromium 12.0 in Ubuntu 11.04

------
tambourine_man
Frame by frame animation here.

ATI Radeon X1600 256 MB, 10.7.2

------
hm2k
This really impressed me.

------
jklipton
This is awesome.

------
spot
if you want real interaction: <http://sp0t.org/videoriot>

------
ajsharp
Rad.

