15 ms·

Bruno Simon – 3D Curriculum

251 points by laurentdc 7y ago

onion2k 7y ago
The performance on my low spec Android phone is amazing. Really awesome work.
hoxmark 7y ago
This is amazing! Does anyone have any similar sites? I really enjoyed this.
- th-th-throwaway 7y ago
  He has a lot of other projects which are also 3d websites: https://prior.co.jp/discover/en https://prior.co.jp/discover/en https://www.orano.group/experience/innovation/en/slider 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!
- th-th-throwaway 7y ago
  This also came up on HN the other day: https://3dforreddit.com/r/pics https://3dforreddit.com/r/pics
- mncharity 7y ago
  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.
legends2k 7y ago
Very nice usage of WebGL. Did you use an engine for rendering or physics?
- petetnt 7y ago
  The site uses Three for rendering and cannon for physics. It's open sourced at https://github.com/brunosimon/folio-2019 https://github.com/brunosimon/folio-2019 :)
kekeblom 7y ago
You have to press shift in order to unlock more power and clear that jump.
mly 7y ago
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!
deleted 7y ago
[deleted]
ryu2k2 7y ago
Runs at 1 FPS on my laptop. The web and browser truely is the future!
- mattigames 7y ago
  Weird, it runs at 15fps on my phone, and is not even one of the expensive ones (moto G6 play)
  - reitzensteinm 7y ago
    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.
    - pjmlp 7y ago
      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.
- mrmonkeyman 7y ago
  Runs 40fps on my cheapass old samsung phone. Your laptop sucks, man.
- Tepix 7y ago
  Runs smoothly on iPad Air 3
ozmaverick72 7y ago
Really awesome effort. My iPad heated up playing it for 5 mins. Fun game demo.
krm01 7y ago
beautifully done. I miss creative websites like these. Amazing experimental interfaces would pop up every day before Flash got stabbed to death.
wtlstudio 7y ago
The slight bump of the front axle when accelerating ️<3 Great work!
simjue 7y ago
Very smooth on on my laptop using Chromium v78 and very laggy on Firefox v70 (Ubuntu 19.10).
- marcosscriven 7y ago
  Same for me. I wonder what makes the latter so bad?
  - gsanghera 7y ago
    Turning off hardware acceleration in Firefox seems to make it work much better. No idea why!
strawberrycheez 7y ago
Woah! Really amazing What's the technology stack?
sotp 7y ago
Neat! Runs flawlessly in Chrome on a 3yr old Samsung A5
amelius 7y ago
Cool, but I prefer a first-person view, because it makes the controls more natural.
bil-20392039 7y ago
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.
- superhuzza 7y ago
  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/9nfmz63mgjrf?activetab=pivot:overviewtab https://www.microsoft.com/en-us/p/loci-memory-palace/9nfmz63...
  - WalterGR 7y ago
    Also "Roman room".
sebringj 7y ago
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.
mojomark 7y ago
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?
- cecja 7y ago
  There is a huge difference between architectural or CAD models to game optimized assets. Optimizing a model is called retopology.
xixixao 7y ago
Amazing! One piece of feedback, if author stops by: One the first linked project: https://prior.co.jp/discover/en/hospitality 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 :)
dceddia 7y ago
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 https://bruno-simon.com/#debug
ivanstojic 7y ago
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.
- dahart 7y ago
  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.
- keerthiko 7y ago
  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.
- jiofih 7y ago
  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.
adblu 7y ago
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.
- tomashubelbauer 7y ago
  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.
Animats 7y ago
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.
cousin_it 7y ago
I miss Flash so much it hurts.
hexagonsun 7y ago
very very cool! the handling is so touchy though, maybe turn that sensitivity down a touch
tachyonbeam 7y ago
Is this open source? Wondering if this was written in JS or something compiled to WebAssembly. Runs very smoothly on my Pixel 3A XL.
- mrdoob2 7y ago
  It is open source: https://github.com/brunosimon/folio-2019 https://github.com/brunosimon/folio-2019
gotrythis 7y ago
Anyone else notice the animated tab title with the car icon moving forward or back in time with your vehicle?

251 points by laurentdc 7y ago

onion2k 7y ago

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

hoxmark 7y ago

This is amazing! Does anyone have any similar sites? I really enjoyed this.

th-th-throwaway 7y ago
He has a lot of other projects which are also 3d websites: https://prior.co.jp/discover/en https://prior.co.jp/discover/en https://www.orano.group/experience/innovation/en/slider 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!
th-th-throwaway 7y ago
This also came up on HN the other day: https://3dforreddit.com/r/pics https://3dforreddit.com/r/pics
mncharity 7y ago
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.

legends2k 7y ago

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

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

kekeblom 7y ago

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

mly 7y ago

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!

deleted 7y ago

[deleted]

ryu2k2 7y ago

Runs at 1 FPS on my laptop. The web and browser truely is the future!

mattigames 7y ago
Weird, it runs at 15fps on my phone, and is not even one of the expensive ones (moto G6 play)
- reitzensteinm 7y ago
  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.
  - pjmlp 7y ago
    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.
mrmonkeyman 7y ago
Runs 40fps on my cheapass old samsung phone. Your laptop sucks, man.
Tepix 7y ago
Runs smoothly on iPad Air 3

ozmaverick72 7y ago

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

krm01 7y ago

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

wtlstudio 7y ago

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

simjue 7y ago

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

marcosscriven 7y ago
Same for me. I wonder what makes the latter so bad?
- gsanghera 7y ago
  Turning off hardware acceleration in Firefox seems to make it work much better. No idea why!

strawberrycheez 7y ago

Woah! Really amazing What's the technology stack?

sotp 7y ago

Neat! Runs flawlessly in Chrome on a 3yr old Samsung A5

amelius 7y ago

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

bil-20392039 7y ago

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.

superhuzza 7y ago
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/9nfmz63mgjrf?activetab=pivot:overviewtab https://www.microsoft.com/en-us/p/loci-memory-palace/9nfmz63...
- WalterGR 7y ago
  Also "Roman room".

sebringj 7y ago

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.

mojomark 7y ago

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?

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

xixixao 7y ago

Amazing! One piece of feedback, if author stops by: One the first linked project: https://prior.co.jp/discover/en/hospitality 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 :)

dceddia 7y ago

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 https://bruno-simon.com/#debug

ivanstojic 7y ago

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.

dahart 7y ago
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.
keerthiko 7y ago
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.
jiofih 7y ago
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.

adblu 7y ago

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.

tomashubelbauer 7y ago
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.

Animats 7y ago

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.

cousin_it 7y ago

I miss Flash so much it hurts.

hexagonsun 7y ago

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

tachyonbeam 7y ago

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

mrdoob2 7y ago
It is open source: https://github.com/brunosimon/folio-2019 https://github.com/brunosimon/folio-2019

gotrythis 7y ago

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