Lights | Hacker News Reader

Lights

lights.elliegoulding.com

567 pointscitricsquid91 comments

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")

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

Even that's debatable.

I'd say the demo itself is incredible. It only became better when I realized it was WebGL

What else is supposed to be impressive about this?

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.

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!

How are users who casually browse news.yc supposed to look at this and have any clue what they're clicking?

Since there's no way to hide these links with uninformative titles, the no-addon solution is to get them to display as "visited". So I click them and then immediately close the tab.

Website owners: Sorry for throwing off your stats.

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!

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

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.

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!

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-...

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

What does this mean?

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

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.

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.

I tried with Opera Next (12 alpha) but it was stuck in loading phase, and the lights were a bit slower than recent chrome beta on the loading screen.

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

Moving your mouse would move the orientation of the light that was travelling across the landscape.

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.

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!

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

He didn't say they would be.

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

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).

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.

Thanks, that's what I meant.

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.

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?

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

WebGL is a helluva drug.

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

yes: http://hacks.mozilla.org/2011/06/cross-domain-webgl-textures...

unless you mean something else...

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.

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

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).

SoupIce, you may have been hellbanned.

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

It's amazing. Great build.

For the lazy:

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

  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.

Curses!

Try these I suppose:

http://www.youtube.com/results?search_query=lights+bassnecta...

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.

http://soundcloud.com/bassnectar/ellie-goulding-lights-bassn...

That's a matter of taste & opinion, but personally I find the original to be much better. Not a huge fan of dubstep, I must say.

I forget that the remix is in fact just a remix

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.

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.

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.

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

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

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

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).

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

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.

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

I'm sure timing counts as well. Lunch breaks and all.

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!

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

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

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.

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.

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

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.

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

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.

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.)

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.

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

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.

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.

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

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.

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.

I'm using Chrome 14 on Lion and it works fine.

Crashed my browser, Linux Firefox 7.0.1...

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

Same here. Windows 7 Pro x86, Chrome.

anyone know the developer(s) behind this?

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/

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.

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

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

I thought it was great stuff.

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

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

This looked effing amazing on my 27inch monitor

Doesn't work on Chromium 12.0 in Ubuntu 11.04

Frame by frame animation here.

ATI Radeon X1600 256 MB, 10.7.2

This really impressed me.

This is awesome.

if you want real interaction: http://sp0t.org/videoriot

Rad.

Reply on news.ycombinator.com