12 ms·
My Room in 3D
- zuhayeer 5y agoHis portfolio home page is incredible too: https://bruno-simon.com/ https://bruno-simon.com/ It's the website shown on the monitor in the room.
- Zababa 5y agoThanks for sharing that, the website is really cool!
- a_c 5y agoIt actually works on both mobile and desktop. Mind definitely blown
- sva_ 5y agoIt didn't work at all for me in latest Firefox, even with uBlock disabled. But it worked on a Chomium-based browser.
- teitoklien 5y agoIm on firefox latest , with ublock enabled Worked like a charm for me. Im on linux
- laumars 5y agoDidn’t work for me on iOS either.
- arendtio 5y agoArch Linux with Firefox 92.0 and uBlock activated works sometimes. However, it seems somewhat brittle and sometimes the initial loading doesn't complete. I am not 100% certain, but it seems to help to switch to another tab while the page is loading. Feels a bit like a race condition while loading the engine which doesn't occur when the tab runs with a lower priority. After pressing the Start button, everything works fine.
- Tijdreiziger 5y agoWorked great for me on Firefox 92 with Enhanced Tracking Protection and uBlock Origin.
- slim 5y agoIt works in firefox mobile. Ublock enabled
- DantesKite 5y agoMan that portfolio website is amazing. Makes me want to check out each of his individual projects.
- mrtksn 5y agoWow, I've missed the times when websites were made to impress people.
- stjo 5y agoAlthough libraries like threejs (or softwares like blender) give you so many tools and knobs to play around, I cannot for the life of me make a scene look so great. The lighting, the composition, the textures, the even level of detail… I would recommend everyone try it out for themselves to see what I’m talking about. No matter how much you try, there is always something too dark or light. Always something that looks like made from minecraft blocks and something too detailed for those 2 objects to be from the same universe. Animations are either too stiff or move like jelly blobs. How is this so perfect?! I just can’t comprehend how do 3d artist’s brains work.
- errantspark 5y agoDon't be daunted, it just takes time. You'll get faster at it with practice, but the first step is simply brute force, or at least it was for me. Take a picture of something simple, recreate it in 3D with exacting detail. When something doesn't match you drill down, find the optical phenomenon that you weren't modeling correctly, and fix it. That's it. There's no shortcut to being good at this stuff, you just have to learn how the real world works and make sure that when you're simulating it in the computer you're using physically correct numbers for everything. Relentlessly comparing what you're doing to photographs is the only way to truly master the skill. It's a lot easier to take a step back and do stylized realism once you can nail the real thing. That being said this is fantastically executed. I'm especially loving the ability to mix the baked GI live, it's a great effect for static scenes like this. P.S. Ok I probably lied when I said there are no shortcuts. Here are a few: - use a physically based (preferably unbiased) renderer - use only energy conserving materials - use light-probes to light your scene
- a1371 5y agoWhat are energy conserving materials?
- errantspark 5y agohttps://google.github.io/filament/Filament.html#materialsystem/energyconservation https://google.github.io/filament/Filament.html#materialsyst... This document is a good primer on a lot of the concepts that go into PBR. I have a few more open source/free resources on PBR and unbiased rendering as well and I will update this post if I can dig em up.
- diego_sandoval 5y agoApart from Blender, what tools/libraries should I learn to use to do this?
- a1371 5y agoWell, blender itself is a whole world. But you can export to threejs and those are the only two tools you'll need at the very least.
- brundolf 5y agoI'd add that for a diorama like this you could probably get by using Sketchfab instead of Three.js. When the focus is on the art it makes it much easier to get assets imported, lighting set up and working right, camera controls, etc.
- isoskeles 5y agoYou mainly need to know some javascript library for importing the models that were exported from Blender. Three.js is, afaik, the most popular. I've used it myself because it was the first thing I found. If you want to use TypeScript, and you have time on your hands, maybe look at Babylon.js and compare it to Three.js.
- folli 5y agoWhat's your opinion on Three.js versus Babylon.js? What's the advantage of one over the other?
- kalkut 5y agoI spent two years with threejs then the last 2 years with Babylon.js Three.js has a huge community, learning 3D programming by learning three.js from the community is very feasible, lots of nice exemples around. Babylon.js is maintained by a team of Microsoft employees. It is a cohesive piece of software with tons of integrated utilities (controls, GUI, good debugging tools, an excellent jsfiddle equivalent called playground etc). It is the perfect balance between a rendering and a game engine. Also it has a well engineered Typescript codebase that in my humble experience has been more stable than Three. The docs are great, the community is nice and super active, contributing is easy but you have much less online exemples than with Three. So my advice for a 3D novice would be to play with Three.js and see where it goes. If you are in it for art and making things look good, the amount of examples with Three will also help a lot. Now if you value engineering, and you already have even a very modest experience with 3D programming I really recommend Babylon.js Also you will see Aframe, react-fiber or react-babylon thrown around: don't bother if you don't already know Three or Babylon. You will outgrow them and still have to learn Three/Babylon "the correct way". I think that most people decent with Three or Babylon can make their own specific abstraction with less overhead anyway.
- Waterluvian 5y agoThis reminds me of trying to make a game and realizing that game dev is mostly not about programming. The most impressive part of this scene is how beautiful the assets are and how well the lighting has been configured. If I worked with three.Js you’d get some spheres and a cube!
- Aeolun 5y agoI recognize a fuckton of PHP elephants and an Ikea couch (or a 100% lookalike).
- Bulbasaur2015 5y agovery cool
- ceer 5y agoIf you’re curious about the process, you can watch all the steps on Bruno’s Twitch: https://twitch.tv/bruno_simon_dev https://twitch.tv/bruno_simon_dev
- mariocesar 5y agoPart1 is here -> https://www.twitch.tv/videos/1110939896 https://www.twitch.tv/videos/1110939896
- fnord77 5y agozoom in on the coffee mug
- tn1 5y agoI sometimes use SweetHome3D to visualize spaces. It's a little more accessible being point-and-click CAD, and it takes arbitrary objects in OBJ format (and others). You won't be able to get quite to this level but it can render surprisingly well http://www.sweethome3d.com/ http://www.sweethome3d.com/
- epilys 5y agoI recently had to move, and I designed my new place in sweethome3d before the move in order to know where the furniture would go immediately when I arrive. The result was quite good and you can see it here exported to html/js (though it's a 15MB download) https://nessuent.xyz/schlemann/ https://nessuent.xyz/schlemann/
- leoedin 5y agoI've used SweetHome3D to plan various rooms for renovation - it's very intuitive and surprisingly powerful. Definitely better than trying to do building design with a "real" CAD package. The built in library is pretty comprehensive (and has nice scaling features, so even if a bookshelf model doesn't match yours, you can scale it easily to match), and importing custom 3D CAD designs is straightforward.
- johnvega 5y agoNot as elaborate also created in three.js https://3d.delavega.us https://3d.delavega.us
- atum47 5y agoLooks really good. I was thinking about doing something similar for my house, but using my 3d engine and a first person camera, so people could walk around. What is the polycount for this scene? Looks really smooth
- tiff_seattle 5y agoI have that same chair. I can never get it to stay in the highest position though. Do you have that problem?
- fortran77 5y agoIt could be that you're putting more weight on the chair piston than he is....
- romwell 5y agoBack in 2004, I made My Room in 3D using the not-quite-new hotness that was VRML. Can't find it anymore, but I'm glad we're going full circle with this trend :) And I just got my Lightfield Lume Pad today for stuff like this.
- sva_ 5y agoI like your Monstera plant.
- wly_cdgr 5y agoVery cool! Could use a loading animation
- frabjoused 5y agoMore fascinating is his website. https://bruno-simon.com/ https://bruno-simon.com/
- Yenrabbit 5y agoHis course looks fantastic!
- esjeon 5y agoIt's certainly a good time to become a 3D graphics developer, or at least be proficient at it. WebGL simply works. The internet is fast enough to ship a lot of assets. Even phones can render tons of graphical elements. Mix in WASM and it's pretty much golden. The world-wide-web is the true VR.
- PostThisTooFast 5y agoIt does seem very cool, but WebGL is continually derided here and elsewhere. Why?
- sgt 5y agoI tried WebGL about a year ago, and it wasn't ready yet. It spun up CPU quite a bit, and was a different experience in terms of performance across browsers. Has this changed in the last year?
- Mikeb85 5y agoWhat do you mean you 'tried' WebGL? It's just OpenGL in the browser. As mentioned, it just works just like OpenGL/Vulkan/DirectX just works. Now, various WebGL frameworks (Three.js, Babylon.js, etc...) are more performant or easier to use or whatever. Or you can compile native 3D platforms to wasm. Which did you try?
- sgt 5y agoI see your point. I used a WebGL framework (Three.js), not compilation to Wasm. In the case of the latter, what is the best way to start?
- Mikeb85 5y agoYeah Three.js is slow. Godot and Unity can both compile to wasm so I'd try out one of those.
- pjmlp 5y agoOpenGL/Vulkan/DirectX just work, WebGL depends on the whims of the browser and how it evaluates the client machine, eventually blacklisting it, or replacing calls with software emulation instead. OpenGL/Vulkan/DirectX can use 2021 hardware capabilites, WebGL is stuck on a GL ES 3.0 subset, basically 2012 hardware. Cool if you want to do iPhone 6 style graphics, but that is about it.
- Agentlien 5y agoIlove this, and it reminds me of making a Half-Life level of my own room around 20 years ago. So much work to get the little details right, but it felt so strangely satisfying to see an eerie digital simulacrum of it take shape.
- agys 5y agoThat’s a lot of keyboards!
- busymom0 5y agoLive stream of the entire process: https://www.youtube.com/watch?v=Hm7fdd8TD7Y&list=PL5nApUt6Z8sS9XcXJmjgfFOz38DF8acIv https://www.youtube.com/watch?v=Hm7fdd8TD7Y&list=PL5nApUt6Z8...
- PicassoCTs 5y agoIt should have had a 2nd camera in the compscreen rendering the room as the room in the lifestream..
- busymom0 5y agoIs there a way to zoom in? The keyboard shortcuts don't work on the site.
- _squared_ 5y agoIf you're looking to learn how to make this kind of scene, I highly recommend Bruno's Three.js Journey course. Disclaimer: I had the pleasure of having Bruno as an IRL teacher for some time ;)
- codetrotter 5y agoAre those PHP elephants on the bookshelf? :D
- 1f60c 5y agoPretty cool! But where do you sleep?
- sgt 5y agoDoes this export to VRML? I am joking of course, but it would be cool to have an easy way for people to start building 3d models using an open web technology without coding. Any ideas?
- ctrlp 5y agoYour TV is as big as your couch.
- Lamad123 5y agoSo the dog and Octopus have beds but the sapiens doesn't!
- deleted 5y ago[deleted]
- tmilard 5y agoSame with photos ... ( Refresh page twice) 1) Graffities : https://free-visit.net/fr/demo01 https://free-visit.net/fr/demo01 2) My kitchen : https://free-visit.net/fr/demo01/demo02 https://free-visit.net/fr/demo01/demo02
- canada_dry 5y agoI'd like to know more about free-visit.net's "magical" 3D editor... sounds interesting, but the links are coming up 404.
- tmilard 5y agoHere you go ! https://youtu.be/vOUHobV-G9I https://youtu.be/vOUHobV-G9I
- canada_dry 5y agoNice teaser. Where's the software?!
- tmilard 5y agoNot yet public. I sell service around the software : I build the places in 3D myself.
- goldwind1111 5y agoReally admirable, that is for sure. I am excited.
- HeavyStorm 5y agoJust one question: where does he sleep?
- TheRealNGenius 5y agofails in safari
- hyperknot 5y agoDoes anyone know what is the GUI library on the right hand side? I've seen it on multiple websites but the classnames doesn't reveal anything.
- roofio 5y agohttps://cocopon.github.io/tweakpane/ https://cocopon.github.io/tweakpane/