If you tack '#debug' on the end, a debugger panel shows up, and you can fiddle with things like the blurryness and lighting and some spring coefficients.

https://bruno-simon.com/#debug

The performance on my low spec Android phone is amazing. Really awesome work.

You have to press shift in order to unlock more power and clear that jump.

Very smooth on on my laptop using Chromium v78 and very laggy on Firefox v70 (Ubuntu 19.10).

Same for me. I wonder what makes the latter so bad?

Turning off hardware acceleration in Firefox seems to make it work much better. No idea why!

Awesome. Does anyone know of something with a similar structure that can be used as a spatial journal or memory palace? I find that when I’m remembering various things I naturally associate them with random geographic places I know and have been looking for an open-world type 3D environment where I could place information (links, document, text) explicitly to help with organization and recall.

This seems along the lines of what you're describing. The technique is called using a "memory palace", regardless if it's a palace or not.

https://www.microsoft.com/en-us/p/loci-memory-palace/9nfmz63...

Also "Roman room".

beautifully done. I miss creative websites like these. Amazing experimental interfaces would pop up every day before Flash got stabbed to death.

Amazing! One piece of feedback, if author stops by:

One the first linked project: https://prior.co.jp/discover/en/hospitality

The scroll controls the flow, but it doesn't respect OS setting. I am using "inverted" scrolling (aka Windows style) on a Mac, but the site only works with the default Mac style scrolling. Something to watch out for :)

I see a number of folks saying this site ran flawlessly on their phones (and it did on my LG G7, chrome browser), but lags on laptops in various browsers.

Seriously, what is going on here? This tangent is related, but slightly off-topic...

I have a similar issue with 3D graphics at work. We use a HTC vive with a software called Revizto to view industrial 3D models (for what is essentially power plant designs). The problem is that you can only load part of the model because it's apparently too complex for the system to handle and some objects won't render. Say you loaded an architectural model of something a football stadium, with Revizto you can only run perhaps 1/20th, of the model in VR. It works a little better in you double the PC's video RAM, but not much. It's a major pain. However, you can run VR games that seem far more complex, the environments go on forever, and you can even have smooth animations and physics interactions.

What gives? It seems to me I should be able to run my 3D models in VR to run as smoothly as a game. How do I load a complex 3D model to run smoothly in VR?

There is a huge difference between architectural or CAD models to game optimized assets. Optimizing a model is called retopology.

What an amazing work! Your other websites look amazing too! The website of your 3D Curriculum is really really slow on my Chrome, may be linked with some configuration in terms of performance optimization probably. But on Edge it ran smooth and fast. Congrats for your work!

This is the best thing I've seen in a long time, you took a fairly mundane topic of cv work etc and made it fantastic and fun and engaging.

Aw. That reminds me of the days when Adobe/Macromedia licensed the Havok physics engine and put in Shockwave. For a year or two, about 15 years ago, you could do this in Shockwave on the web. But Adobe dropped the Havok license and took out the physics engine.

Woah! Really amazing

What's the technology stack?

I wonder if the author drives cars? Everything is flawless, but the steering when the car goes in reverse is just wrong.

It's one of those things that should immediately pop out as "feels wrong" in interaction design.

The reverse steering seems correct, maybe you could elaborate on what you’d change. It is difficult, because it’s reversed, but that’s what happens when you drive real cars in reverse.

The reverse effect is correct, this is the classic game interaction design challenge of 3rd person vehicle cameras which aren't pegged facing the forward direction of the vehicle.

Our hand-eye coordination does not intuitively adapt to remap the arrow keys relative to the spatial position/orientation of the vehicle, and we keep thinking relative to the screen coordinates itself. After you play with it for about 5 minutes you will project to the car instead of the screen and it will feel intuitive again.

To all the commenters: I was ready to agree, but after testing a second time, initially it behaves as it should, but somehow you can enter a state where the steering in reverse starts acting weird and doing the opposite of what you’d expect. Seems to be related to the camera angles.

Very nice usage of WebGL. Did you use an engine for rendering or physics?

The site uses Three for rendering and cannon for physics. It's open sourced at https://github.com/brunosimon/folio-2019 :)

Fantastic. Im thinking about building something which will help me to get better job, but Im jus Machine Learning Guy... Its a long way from me to the front end.

This comment is kind of funny to me, because I know a number of FE devs who share the same sentiment but with reverse trajectory.

Is this open source? Wondering if this was written in JS or something compiled to WebAssembly. Runs very smoothly on my Pixel 3A XL.

It is open source: https://github.com/brunosimon/folio-2019

Anyone else notice the animated tab title with the car icon moving forward or back in time with your vehicle?

Cool, but I prefer a first-person view, because it makes the controls more natural.

Really awesome effort. My iPad heated up playing it for 5 mins. Fun game demo.

The slight bump of the front axle when accelerating ️<3 Great work!

This is amazing!

Does anyone have any similar sites? I really enjoyed this.

He has a lot of other projects which are also 3d websites:

https://prior.co.jp/discover/en

https://www.orano.group/experience/innovation/en/slider

Unfortunately I got tired of the gimmick pretty quickly and didn't make it to the next few examples. Having to drive a car just to open a link is too much work!

Does anyone have any _aphysical_ 3D sites? Or videos, sketches, inspirations, whatever?

I'm focused on HMDs and DIY shutter/anaglyph/wiggle 3D and hand tracking above laptop keyboard. For non-novice professional GUIs, why simulate the physical world? That's a big bag of restrictions, unlikely to align well with desired domain affordances. It feels skeuomorphic - nice for onboarding novices, but generally not where you want to end up. But with VR currently focused on gaming and presenting the physical world, and AR on onboarding and reality overlays, there's not a lot of inspiration around for 3D UI design where the "R" isn't a priority.

This also came up on HN the other day: https://3dforreddit.com/r/pics

Neat!

Runs flawlessly in Chrome on a 3yr old Samsung A5

very very cool! the handling is so touchy though, maybe turn that sensitivity down a touch

I miss Flash so much it hurts.

Weird, it runs at 15fps on my phone, and is not even one of the expensive ones (moto G6 play)

If something runs horribly in WebGL, it's likely fallen back to software rendering. Device driver versions are routinely blacklisted (and occasionally entire product SKUs), I think usually for security reasons.

A given device (such as what I'm typing this on) might have an Intel integrated GPU, a discrete GPU, and depending on the system configuration run the same content at 1fps, 30fps, or 120fps.

I'm currently doing multiplayer WebGL games, and compatibility is not a very fun aspect of it.

That is probably the main reason why WebGL has not taken off like Flash for Web games.

It is always hit and miss regarding hardware 3D acceleration.

Runs smoothly on iPad Air 3