Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Shiny.js simulates reflections on the web for mobile devices

github.com

Post reply on HN
Print view View original

11–20 of 41 posts

Re: Show HN: Shiny.js simulates reflections on the web for mobile devices

#11

Post by rikschennink »

onion2k wrote: post #10
LordHeini wrote: post #9

This is a cool idea. The website says it is untested on android and it shows how weird and inconsistent browsers are. On android firefox it looks like the iPhone example but the light movement is very choppy (maybe hardware acceleration is missing or something like that). On chrome the movement is smooth but the markup is not rendered correctly.

maybe hardware acceleration is missing or something like that It's doing some seriously slow stuff behind the scenes. For example, when the library initialises it creates a 64 * pixelDensity square canvas and then loops through all the pixels in it one by one using a randomly generated transparent color value to draw a 1x1 rectangle to each one (See the 'generateNoise()' function in https://github.com/rikschennink/sh…

It does that once, and it does it to prevent having to ship an image or base64 encoded string to create a noise effect. It's a balancing act between a bigger library and CPU usage. It takes the CPU 15 milliseconds (it's more than I expected, but it's on page load). Good to know that putImageData is faster, will look into that.

What is most likely causing the chopiness is that it's animating background gradients. There is a lot of room for improvement there, instead of animating the background gradient we could transform a layer instead.

Anyway, PR's are always welcome.

Re: Show HN: Shiny.js simulates reflections on the web for mobile devices

#12

Post by cheeaun »

I did a similar implementation before (2017) but for huge landscape background images (tweet with video): https://twitter.com/cheeaun/status/820821687239221249

Commit with code: https://github.com/webuildsg/geekbrunch.sg/commit/b995205094...

Now the site no longer uses this effect, but using another (much) cooler effect.

Re: Show HN: Shiny.js simulates reflections on the web for mobile devices

#13

Post by codetrotter »

onion2k wrote: post #10
LordHeini wrote: post #9

This is a cool idea. The website says it is untested on android and it shows how weird and inconsistent browsers are. On android firefox it looks like the iPhone example but the light movement is very choppy (maybe hardware acceleration is missing or something like that). On chrome the movement is smooth but the markup is not rendered correctly.

maybe hardware acceleration is missing or something like that It's doing some seriously slow stuff behind the scenes. For example, when the library initialises it creates a 64 * pixelDensity square canvas and then loops through all the pixels in it one by one using a randomly generated transparent color value to draw a 1x1 rectangle to each one (See the 'generateNoise()' function in https://github.com/rikschennink/sh…

> https://react-neon.ooer.com/

Using Firefox 64.0 on KDE Neon 18.04, the contents of this page shows up for a brief moment but then goes white.

Re: Show HN: Shiny.js simulates reflections on the web for mobile devices

#15

Post by onion2k »

codetrotter wrote: post #13
onion2k wrote: post #10

Earlier quoted context omitted.

maybe hardware acceleration is missing or something like that It's doing some seriously slow stuff behind the scenes. For example, when the library initialises it creates a 64 * pixelDensity square canvas and then loops through all the pixels in it one by one using a randomly generated transparent color value to draw a 1x1 rectangle to each one (See the 'generateNoise()' function in https://github.com/rikschennink/sh…

> https://react-neon.ooer.com/ Using Firefox 64.0 on KDE Neon 18.04, the contents of this page shows up for a brief moment but then goes white.

Cheers. It's the same in OSX Firefox (and everything that isn't Chrome) as "window.ResizeObserver is not a constructor". When I get time I'll fix that.

Re: Show HN: Shiny.js simulates reflections on the web for mobile devices

#18

Post by stupidcar »

This is pretty cool. I could see Apple or someone taking this idea and running with it. Like Face ID, they could use the front-facing camera with a NN to determine the location of nearby light sources, then provide an API to render 3D and reflective surfaces in a environmentally consistent way. Perhaps not just reflective highlights, but actual reflected and refracted images from the camera.

Re: Show HN: Shiny.js simulates reflections on the web for mobile devices

#19

Post by rikschennink »

bibyte wrote: post #16

Cool effect. It works fine on my Moto G5 using Chrome. But the page feels really slow. I guess that's because of my low end CPU.

Thanks for testing! Code is not really optimized at this point in time, I'm looking in to switching to GPU acceleration which should improve performance a lot.
Post reply on HN