6 ms·

Show HN: A WebGL Tribute to Tron, the movie that made me fall in love with CGI

209 points by mgzme 6y ago

lmedinas 6y ago
Pretty cool! You got some other impressive projects in your website. Congrats! It's impressive the type of 3D graphics that can be done in a modern browser, i'm surprised why we don't see more websites using these technologies.
- cycloptic 6y ago
  With all due respect, please don't encourage more websites to use WebGL for trivial things! This stuff is only really useful for games or some other kind of interactive demo, and wastes power when used for decorative graphics on ordinary informational web sites. I think compiling native OpenGL ES programs to WASM is probably a bit more of a practical use case, but that comes with its own set of problems... WebGL still suffers from various security issues and bugs on certain platforms: https://github.com/chromium/chromium/blob/master/gpu/config/software_rendering_list.json https://github.com/chromium/chromium/blob/master/gpu/config/...
  - testbot123 6y ago
    Couterpoint: encourage more people to use WebGL for trivial things! Learn new concepts, break old ways of thinking, experiment with half-baked ideas, allow yourself room to grow. Don't let people tell you that the web is one single thing with rules. There are no rules! You can do whatever you want!
    - cycloptic 6y ago
      That is all fine for a personal website, but if you're thinking of WebGL for general use, there are an absurd number of rules. I even linked some of them in the parent post.
    - uxcolumbo 6y ago
      It really depends what the use case is. For example one of the sites linked off a site further above is Orano[0]. Beautiful and looks pretty cool, but accessibility doesn't seem that great, i.e. contrast ratio and overall legibility. So when creating informational sites always keep accessibility in mind, regardless what technology you choose to use. https://www.orano.group/experience/innovation/en https://www.orano.group/experience/innovation/en
  - BubRoss 6y ago
    If only someone would invent a back button so you wouldn't have to stay on the same page. Also OpenGl ES isn't something that is compiled to WASM, it is a javascript API. WASM does not have access to the DOM or IO.
    - cycloptic 6y ago
      I'm not sure what you're saying. WASM can definitely get access to those things through javascript shims. A native OpenGL ES program can be compiled relatively easily to WASM because it maps one-to-one with the WebGL API and barely needs a shim at all. This has been supported in Emscripten for a while now and makes it a lot easier to do things like port mobile games over to the web.
      - BubRoss 6y ago
        Yes, this is a more detailed version of what I said. Which part makes you want to control what other people make?
    - na85 6y ago
      Interestingly enough, this website hijacks the back button so you can't go back. (Android/Firefox)
    - dgellow 6y ago
      Have you tried? The website actually hijack the back button...
- _bxg1 6y ago
  Agreed! If not for the current fashion of hyper-minimalism we could be living in the golden age of 3D/skeuomorphic UIs right now. I think it would bring some flavor back to the web. The rest of the site (click the three-bar menu icon in the top-right) is a testament to what can be done with this stuff in a UI setting.
sixothree 6y ago
The future was supposed to have surface lighting.
noughtme 6y ago
Nice! But also, please stop breaking the back button.
- mgzme 6y ago
  Thank you so much for the feedback! I'll keep in mind as a priority to fix the back button issue. I'm glad you enjoyed the scenes.
SmallPeePeeMan 6y ago
How is this done? I mean, are they original animations or mapped from videos in some automated way?
bitwize 6y ago
Nice! Some of these also remind me of Rez, which after eighteen years is still my favorite video game.
- syoc 6y ago
  Reminds me of GLtron. It's GPL and tons of fun. http://gltron.org/ http://gltron.org/
- WantonQuantum 6y ago
  I love Rez too. On a work trip to Tokyo I look a day off to see the sights and went to the Sony building. On one floor, I was beckoned to sit in a chair and take a rumble pack and controller and play Rez, which I'd never heard of. I had no idea what was going on at first but it was such a great experience! You can bet I bought Rez when I got home from that trip! Rez Infinite in VR is seriously good too!
avolcano 6y ago
This is fantastic! Is it open source, by any chance? I'd love to see how you implemented the scanline filters and particle effects. I've been juuust dipping my toe into 3D games with a little spline generator I'm hoping to make a game with (https://disco.zone/splines/3/ https://disco.zone/splines/3/), and as a fellow Tron fan, I'm very inspired by what you were able to do aesthetically here!
- airstrike 6y ago
  Nice! Rode that like a slow, peaceful roller coaster
- fractallyte 6y ago
  That's strangely reminiscent of the gameplay from Stunt Car Racer on the Amiga... You should definitely keep going with this!
Yen 6y ago
Looks great! This kind of generative art is, I think, one of the best "non-productive" things that computers have enabled. Two extremely minor nitpicks - * When browsing through scenes, I notice that a title subtly fades in and out in the lower left corner. I missed this for the first several scenes, and then would often miss it when hitting a new scene, and I'd wonder what the scene was called. * The "gallery" menu to choose scenes isn't in the upper-left nav, but rather, the hamburger menu. Before trying it out, I expected that clicking on it would take me away from the graphics, and show me a gallery of other projects.
- amelius 6y ago
  Another nitpick: it hijacks the back button.
- mgzme 6y ago
  Thank you so much for the feedback Yen! I really appreciate the time people take to provide constructive criticism. I agree with you, the navigation can be greatly improved. I have some ideas for better transitions, and I plan to place a more intuitive way to access the scenes gallery throughout this week.
Melting_Harps 6y ago
Very cool, it reminds me of Lifelike - So Electric music video; that was like one of the first synthwave tracks I ever head, too. Thanks for reminding me of it. Never got into Tron, might have started it but left it mid way or earlier. And when the Disney versions came out I never bothered. I might give it a go this weekend.
- sosborn 6y ago
  The original Tron was produced by Disney too.
- on_and_off 6y ago
  The new movie has a fantastic soundtrack and awesome CGI. Sadly that's pretty much the only parts that keep it fresh. It is pretty forgettable and uses some tropes that are both very lazy and "problematic" like born sexy yesterday. Still, if you end up watching the first one and liking it, it might be worth a watch as well.
- strictnein 6y ago
  The scenes in the first Tron before they get into the virtual world can be a little rough, and feel like they were kind of rushing through some of them. I'd definitely give it and Tron 2 a chance.
29athrowaway 6y ago
If you want a higher framerate, make the window smaller.
pjmlp 6y ago
It looks great on the desktop. On a Nokia 7.1 Plus not so much, too slow loading the resource and it drops frames.
- lsb 6y ago
  On a Pixel 4 it looks great!
skavi 6y ago
this is so stylish. used to love stuff like this on the chrome experiments website.
Folcon 6y ago
This is really attractive, but a warning about it having a autoplaying soundtrack that I was not expecting and had no idea how to easily mute without killing the page.
rb808 6y ago
Nice! I saw it was made with threejs which I hadnt really seen before. Gallery looks awesome. https://threejs.org/ https://threejs.org/ eg https://bruno-simon.com/ https://bruno-simon.com/
spiritplumber 6y ago
oooh, shiny.
jsgo 6y ago
Maybe a typo, maybe not, but near the end of the About section it says “...pure sweatness...”. Was thinking sweetness, but may be intentional as well. Regardless, very well done. Liked the ability to swipe on my phone to essentially shift camera direction temporarily (specifically, during the “city” view). Everything seemed well thought out and interactive. Looked great and performed well on an iPhone X in Safari.
austincheney 6y ago
Nice demo. It works well on my IPhone except that it breaks the back button in Safari. If you are making changes to the page address please use location.replace to avoid extra steps in the browser history.
djaychela 6y ago
I think it's incredible that a website and desktop computer can generate the kind of graphics in real-time that were state-of-the-art (and not real-time) "only" 38 years ago. I would show this to my friends, but none of them are technical so they'd just think it was a video that's playing. Great work, thanks for sharing. (And please fix the back button!)
- naavis 6y ago
  It works decently even on a smartphone.
  - rhizome31 6y ago
    It didn't work on mine. There was a loading screen and then it pretty much froze the browser and I had to kill the tab.
Venkatesh10 6y ago
Looks good, but back button doesn't work when inside the website and I had to close the tab.
the_squirrel 6y ago
Great effort!

209 points by mgzme 6y ago

Pretty cool! You got some other impressive projects in your website. Congrats! It's impressive the type of 3D graphics that can be done in a modern browser, i'm surprised why we don't see more websites using these technologies.

cycloptic 6y ago
With all due respect, please don't encourage more websites to use WebGL for trivial things! This stuff is only really useful for games or some other kind of interactive demo, and wastes power when used for decorative graphics on ordinary informational web sites. I think compiling native OpenGL ES programs to WASM is probably a bit more of a practical use case, but that comes with its own set of problems... WebGL still suffers from various security issues and bugs on certain platforms: https://github.com/chromium/chromium/blob/master/gpu/config/software_rendering_list.json https://github.com/chromium/chromium/blob/master/gpu/config/...
- testbot123 6y ago
  Couterpoint: encourage more people to use WebGL for trivial things! Learn new concepts, break old ways of thinking, experiment with half-baked ideas, allow yourself room to grow. Don't let people tell you that the web is one single thing with rules. There are no rules! You can do whatever you want!
  - cycloptic 6y ago
    That is all fine for a personal website, but if you're thinking of WebGL for general use, there are an absurd number of rules. I even linked some of them in the parent post.
  - uxcolumbo 6y ago
    It really depends what the use case is. For example one of the sites linked off a site further above is Orano[0]. Beautiful and looks pretty cool, but accessibility doesn't seem that great, i.e. contrast ratio and overall legibility. So when creating informational sites always keep accessibility in mind, regardless what technology you choose to use. https://www.orano.group/experience/innovation/en https://www.orano.group/experience/innovation/en
- BubRoss 6y ago
  If only someone would invent a back button so you wouldn't have to stay on the same page. Also OpenGl ES isn't something that is compiled to WASM, it is a javascript API. WASM does not have access to the DOM or IO.
  - cycloptic 6y ago
    I'm not sure what you're saying. WASM can definitely get access to those things through javascript shims. A native OpenGL ES program can be compiled relatively easily to WASM because it maps one-to-one with the WebGL API and barely needs a shim at all. This has been supported in Emscripten for a while now and makes it a lot easier to do things like port mobile games over to the web.
    - BubRoss 6y ago
      Yes, this is a more detailed version of what I said. Which part makes you want to control what other people make?
  - na85 6y ago
    Interestingly enough, this website hijacks the back button so you can't go back. (Android/Firefox)
  - dgellow 6y ago
    Have you tried? The website actually hijack the back button...
_bxg1 6y ago
Agreed! If not for the current fashion of hyper-minimalism we could be living in the golden age of 3D/skeuomorphic UIs right now. I think it would bring some flavor back to the web. The rest of the site (click the three-bar menu icon in the top-right) is a testament to what can be done with this stuff in a UI setting.

sixothree 6y ago

The future was supposed to have surface lighting.

noughtme 6y ago

Nice! But also, please stop breaking the back button.

mgzme 6y ago
Thank you so much for the feedback! I'll keep in mind as a priority to fix the back button issue. I'm glad you enjoyed the scenes.

SmallPeePeeMan 6y ago

How is this done? I mean, are they original animations or mapped from videos in some automated way?

bitwize 6y ago

Nice! Some of these also remind me of Rez, which after eighteen years is still my favorite video game.

syoc 6y ago
Reminds me of GLtron. It's GPL and tons of fun. http://gltron.org/ http://gltron.org/
WantonQuantum 6y ago
I love Rez too. On a work trip to Tokyo I look a day off to see the sights and went to the Sony building. On one floor, I was beckoned to sit in a chair and take a rumble pack and controller and play Rez, which I'd never heard of. I had no idea what was going on at first but it was such a great experience! You can bet I bought Rez when I got home from that trip! Rez Infinite in VR is seriously good too!

avolcano 6y ago

This is fantastic! Is it open source, by any chance? I'd love to see how you implemented the scanline filters and particle effects. I've been juuust dipping my toe into 3D games with a little spline generator I'm hoping to make a game with (https://disco.zone/splines/3/ https://disco.zone/splines/3/), and as a fellow Tron fan, I'm very inspired by what you were able to do aesthetically here!

airstrike 6y ago
Nice! Rode that like a slow, peaceful roller coaster
fractallyte 6y ago
That's strangely reminiscent of the gameplay from Stunt Car Racer on the Amiga... You should definitely keep going with this!

Yen 6y ago

Looks great! This kind of generative art is, I think, one of the best "non-productive" things that computers have enabled. Two extremely minor nitpicks - * When browsing through scenes, I notice that a title subtly fades in and out in the lower left corner. I missed this for the first several scenes, and then would often miss it when hitting a new scene, and I'd wonder what the scene was called. * The "gallery" menu to choose scenes isn't in the upper-left nav, but rather, the hamburger menu. Before trying it out, I expected that clicking on it would take me away from the graphics, and show me a gallery of other projects.

amelius 6y ago
Another nitpick: it hijacks the back button.
mgzme 6y ago
Thank you so much for the feedback Yen! I really appreciate the time people take to provide constructive criticism. I agree with you, the navigation can be greatly improved. I have some ideas for better transitions, and I plan to place a more intuitive way to access the scenes gallery throughout this week.

Melting_Harps 6y ago

Very cool, it reminds me of Lifelike - So Electric music video; that was like one of the first synthwave tracks I ever head, too. Thanks for reminding me of it. Never got into Tron, might have started it but left it mid way or earlier. And when the Disney versions came out I never bothered. I might give it a go this weekend.

sosborn 6y ago
The original Tron was produced by Disney too.
on_and_off 6y ago
The new movie has a fantastic soundtrack and awesome CGI. Sadly that's pretty much the only parts that keep it fresh. It is pretty forgettable and uses some tropes that are both very lazy and "problematic" like born sexy yesterday. Still, if you end up watching the first one and liking it, it might be worth a watch as well.
strictnein 6y ago
The scenes in the first Tron before they get into the virtual world can be a little rough, and feel like they were kind of rushing through some of them. I'd definitely give it and Tron 2 a chance.

29athrowaway 6y ago

If you want a higher framerate, make the window smaller.

pjmlp 6y ago

It looks great on the desktop. On a Nokia 7.1 Plus not so much, too slow loading the resource and it drops frames.

lsb 6y ago
On a Pixel 4 it looks great!

skavi 6y ago

this is so stylish. used to love stuff like this on the chrome experiments website.

Folcon 6y ago

This is really attractive, but a warning about it having a autoplaying soundtrack that I was not expecting and had no idea how to easily mute without killing the page.

rb808 6y ago

Nice! I saw it was made with threejs which I hadnt really seen before. Gallery looks awesome. https://threejs.org/ https://threejs.org/ eg https://bruno-simon.com/ https://bruno-simon.com/

spiritplumber 6y ago

oooh, shiny.

jsgo 6y ago

Maybe a typo, maybe not, but near the end of the About section it says “...pure sweatness...”. Was thinking sweetness, but may be intentional as well. Regardless, very well done. Liked the ability to swipe on my phone to essentially shift camera direction temporarily (specifically, during the “city” view). Everything seemed well thought out and interactive. Looked great and performed well on an iPhone X in Safari.

austincheney 6y ago

Nice demo. It works well on my IPhone except that it breaks the back button in Safari. If you are making changes to the page address please use location.replace to avoid extra steps in the browser history.

djaychela 6y ago

I think it's incredible that a website and desktop computer can generate the kind of graphics in real-time that were state-of-the-art (and not real-time) "only" 38 years ago. I would show this to my friends, but none of them are technical so they'd just think it was a video that's playing. Great work, thanks for sharing. (And please fix the back button!)

naavis 6y ago
It works decently even on a smartphone.
- rhizome31 6y ago
  It didn't work on mine. There was a loading screen and then it pretty much froze the browser and I had to kill the tab.

Venkatesh10 6y ago

Looks good, but back button doesn't work when inside the website and I had to close the tab.

the_squirrel 6y ago

Great effort!