Apparently transparent – CSS3D HTML5 Experiment • Hacker News Board

Re: Apparently transparent – CSS3D HTML5 Experiment

#21

Post by code_duck » Thu, Feb 19, 2015, 1:22 PM UTC

fredleblanc wrote: post #19

code_duck wrote: post #18

I loaded this page in Safari, tried scrolling it, and then Safari did the 'This page was reloaded' thing. Then my iPhone 6 Plus spontaneously rebooted. The crash is repeatable, too.

Worked fine on my iPhone 6 not plus.

I can view it successfully in Chrome (and this is an amazing demo!). Safari shows a gray background with a blue circle, then crashes as described. I don't have the latest iOS update installed though...

Re: Apparently transparent – CSS3D HTML5 Experiment

#22

Post by Kiro » Thu, Feb 19, 2015, 1:26 PM UTC

How can this be achieved with so little code? I was expecting thousands of lines. It's like 100.

Re: Apparently transparent – CSS3D HTML5 Experiment

#23

Post by mattdesl » Thu, Feb 19, 2015, 1:45 PM UTC

IPhone 5s, ios 8: crashes the page, then forces a system reboot. :/

Re: Apparently transparent – CSS3D HTML5 Experiment

#24

Post by runeks » Thu, Feb 19, 2015, 1:53 PM UTC

code_duck wrote: post #18

I loaded this page in Safari, tried scrolling it, and then Safari did the 'This page was reloaded' thing. Then my iPhone 6 Plus spontaneously rebooted. The crash is repeatable, too.

Which iOS version?

Works perfectly on my iPhone 6 (no Plus) in iOS 8.1.3.

Re: Apparently transparent – CSS3D HTML5 Experiment

#25

Post by matthijs_ » Thu, Feb 19, 2015, 1:54 PM UTC

Do look at his (Gerard Ferrandez) other work: http://www.dhteumeuleu.com/index

Amazing stuff in there.

Re: Apparently transparent – CSS3D HTML5 Experiment

#26

Post by code_duck » Thu, Feb 19, 2015, 1:55 PM UTC

runeks wrote: post #24

code_duck wrote: post #18

I loaded this page in Safari, tried scrolling it, and then Safari did the 'This page was reloaded' thing. Then my iPhone 6 Plus spontaneously rebooted. The crash is repeatable, too.

Which iOS version? Works perfectly on my iPhone 6 (no Plus) in iOS 8.1.3.

8.1.2 (12B440).

I'll try it after I upgrade to 8.1.3.

Re: Apparently transparent – CSS3D HTML5 Experiment

#27

Post by jasonlfunk » Thu, Feb 19, 2015, 2:02 PM UTC

This is cool. I'm freaked out that the statue is in the reflections but not in the room....

Re: Apparently transparent – CSS3D HTML5 Experiment

#28

Post by hawleyal » Thu, Feb 19, 2015, 2:24 PM UTC

Aardwolf wrote: post #3

So CSS can do 3D, but still not vertically center multiline text in a straightforward way?

You should not center things vertically.

Re: Apparently transparent – CSS3D HTML5 Experiment

#29

Post by TazeTSchnitzel » Thu, Feb 19, 2015, 2:41 PM UTC

code_duck wrote: post #18

I loaded this page in Safari, tried scrolling it, and then Safari did the 'This page was reloaded' thing. Then my iPhone 6 Plus spontaneously rebooted. The crash is repeatable, too.

Works fine on my iPhone 5C, and that's a phone with an A6.

Re: Apparently transparent – CSS3D HTML5 Experiment

#30

Post by TazeTSchnitzel » Thu, Feb 19, 2015, 2:46 PM UTC

Kiro wrote: post #22

How can this be achieved with so little code? I was expecting thousands of lines. It's like 100.

If you have a look at the scene (with Inspect Element), it's actually pretty simple. It's six walls (each an image), and each of the four sides also has another 5 walls behind it (each also an image) with a statue (image).

That, combined with how CSS 3D transforms let you describe 3D graphics in a declarative way (there's an image at some position with some rotation), rather than in an imperative way (bind the buffer, link the shader, do the 3D rendering dance, draw this thing at some position I bound and some rotation I chose, etc.), allows it to be very small.

As always, while declarative programming doesn't lead to brilliant performance, it produces much nicer code and it's much easier to write.