8 ms·
Although 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 gr
by stjo 5y ago
Although 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.
- wyager 5y agoThey don’t reflect more light than the amount of light that falls on them.
- gmueckl 5y agoThe things that you list as shortcuts aren't actually shortcuts, but the best tools for their respective jobs. To put it differently: this is what renderers were aspiring to from the start, but couldn't quite reach initially in real world applications because if a severe lack of computing power. So, for the better part of three decades, computer graphics relied on ugly shortcuts that required laborious workarounds from skilled artists. With the right tools you just don't need a lot of them anymore.
- errantspark 5y agoTrue! I meant shortcut in a more sapiocentric way, i.e. "These are the top 3 things you can quickly google and implement for a big realism gain for low effort cost."
- chadcmulligan 5y agoHere's the source to look at https://github.com/brunosimon/my-room-in-3d https://github.com/brunosimon/my-room-in-3d
- mrspeaker 5y agoA lot of it is the baked lighting (he mentions it takes about 7 hours to bake the lighting if he wants to change the scene! https://www.twitch.tv/videos/1144467679?t=00h18m03s https://www.twitch.tv/videos/1144467679?t=00h18m03s). I love doing 3D stuff for fun - but like you, everything looks like minecraft blocks from different worlds. Certainly not real. But if you open Blender and put a couple of cubes in a scene and render it using Cycles (in the Scene tab change the Render Engine dropdown from the default Eevee) then the cubes looks way better: https://imgur.com/a/q9xvZeI https://imgur.com/a/q9xvZeI The ambient occlusion, and proper light bouncing and reflections make even the boring-est cubes look pretty good!
- Jasper_ 5y agoFirst off, it's art. You need to stop thinking like a programmer and think more like an artist. That means thinking about colors and lighting, tones and hues and highlights and shadows. If you're unfamiliar with these things, that's fine, you can find plenty of training material and courses online. It takes time, because it's a skill that requires training and practice and self-discovery. Second, lighting is a careful balance, but in general, the simpler the rig, the better. Pull an IBL HDR map from somewhere, use a single directional light, and let the bounce lighting do the main work here. Outdoors looks gorgeous and that's a single directional light, and a ton of bounce. And that's the same thing providing the light in this room scene as well. Third, learn the tricks and technologies. Learn about lightmapping, about shadow mapping, about the different shader tricks, about why real-time transparency is hard. Yes, libraries like Three.JS can abstract over some of this, but some fundamentals in the tech can help you focus on the things that will work, and the things that don't. Simon Schreibt has some excellent guides and tutorials that are artist-focused about tech art. The lightning here isn't realtime: just a bunch of baked lightmaps fading in and out. Not even SH probes!
- peignoir 5y agoI agree it takes time! But would be amazing if the author(s) could make a tutorial / step by step on how they did it. I would def pay for that info / tutorial
- nine_k 5y agoJust a nit: the lighting outside is not a single directional source, unless you're in the Moon. There is sun, which is slightly yellowish (or orange to red at sunset), and there is sky light which is obviously bluish. Sun is directional, sky light is not. Sun is a light source far away, but sky is a light source all around the scene. The rest, well, can be done with a lot of bouncing, refraction, diffusion subsurface scattering, etc.
- overgard 5y agoLighting is the main thing. Especially global illumination/ambient occlusion. Do a google search for "ambient occlusion" and you'll see a lot of scenes that are literally plain white but look amazing. Throw in some soft shadows and area light sources and things start to look really nice even with very plain materials. If you look at this scene, I'm fairly certain all the lighting is prebaked in something like blender/maya etc. There's also a lot of other little environment art things you can do. For instance, small bevels on sharp edges help things look more natural (look around your house and you'll notice even sharp corners aren't as sharp as you think). Adding roughness and specular lighting to materials helps a bit too, even things like wood or asphalt have some amount of reflectiveness at certain angles.
- gmueckl 5y agoThe lighting is completely prebaked in this scene. The shadow of the chair isn't animating. You can see the shadow of the armrest remain atatic on the table. If you can, go for global illumination over abient occlusion if you want a realistic look. Ambient occlusion is a pretty rough approximation of diffuse light from the surroundings. A proper global illumination rendering captures the same effect more accurately. You get a lot of subtle hues in the lighting which instantly make even flat single color surfaces more interesting and real. You can also go over board with your materials, adding texture maps for roughness and normals, which vary how the surface reacts to the light. There are plenty of free materials out there that demonstrate what I mean. But good texturing is a topic all of its own, with its own tools and processes. If you start to add textures, my advice would be to keep them really, really subtle. The amount of variation you really need is a lot less than you would probably think.
- amelius 5y agoIt's not perfect. Look at the shadow cast by the chair. The chair is moving, the shadow is not.
- dylan604 5y ago> I cannot for the life of me make a scene look so great You mean that not just anyone can be a 3D artist and make a Pixar movie? Say it ain't so!! /s However, it is kind of insulting that someone would think they could just walk up to a block of stone with a hammer and chisel and think they will create the David. Now imagine it is the fisher price version of that hammer and chisel. Threejs and Blender might be capable for certain things and calling it fisher price is not fair either, but there are definite limitations. >How is this so perfect?! I just can’t comprehend how do 3d artist’s brains work. Honestly, this looks closer to game engine rendering than something from a photo realistic engine.
- janci 5y agoI've had the exact same problem when I was designing (trying to) websites. It's the same but 2D and simpler. I was feeling the result is fine but quite not right. Compared to "real" website made by professional, my design was clearly inferior but I could not fanthom why exactly. Only later I discovered it was the font size few pts smaller, the padding 1 pixel larger, the color little bit less contrasting, the 1px additional light border on top of dark border, the shadow a bit more blurry and million subtle things you can get right and balanced only with experience.
- 127 5y agoHe recorded the entire process on Twitch. You're seeing the end result: the forest. When you're seeing how each tree is built one step a time it all seems a lot less magical. It's just a lot of work. A lot more people (on average seem to) think it is.
- dylan604 5y agoDid you leave out a "than a lot more", or are you saying too many people think it is more work than it is?
- abnercoimbre 5y agoYes I'd love some clarification, I kind of lost the true meaning of that last sentence.
- 127 5y agoIn my experience people inexperienced with the process think 3D requires about 10x less work than it actually does.
- dylan604 5y agoThat's common to all things. Can't you just make changes to the app? Can't you just port the app to X? Can't you just build me this bookshelf? Can't you just fix the dishwasher? Can't you just... means they have no fucking clue.
- DonHopkins 5y agoIt takes x^3 more work!
- djmips 5y agorepost from elsewhere in comments. A lot of that seems to be captured here: https://www.youtube.com/watch?v=Hm7fdd8TD7Y&list=PL5nApUt6Z8sS9XcXJmjgfFOz38DF8acIv&index=1 https://www.youtube.com/watch?v=Hm7fdd8TD7Y&list=PL5nApUt6Z8...
- lifeformed 5y agoDon't use pure black. Make sure the ambient color is a dark blue or purple or something.
- shahar2k 5y agoas a 3d artist, every time I work on a new piece, there's a long painful time where I KNOW it could look good, and it looks like crap. and things will continue to look like crap, as I flounder around adding shapes here, forms there whatever... until something clicks, it's like being lost in the woods until the moment you see some glimmer of a direction to start going in. honestly making art is almost always like that, and what makes it easier is not necessarily what makes you better artist, a lot of people find "shortcuts" what you'd call a style, put certain lighting in, certain forms, and that makes it really easy to skip the middle part and just work with your established artistic vocabulary but it's not what will push you to create better art... I'm not sure what I said was helpful but I have completely gone through that process you mentioned over and over.
- exikyut 5y agoYes, this description does capture the fundamentals of the process IMO. Particularly the part about not being satisfied until you exactly execute what you had in mind, as opposed to funneling everything through layered techniques that lose fidelity. The problem with this is that it involves reacquiring orientation over and over. Each time that is done successfully, it becomes easier to hold onto more details at the same time, and execute with more finesse, but it requires the interest in the subject to come from a very fundamental place in order to keep getting back on the horse with a centered mindset that retains focus on the bigger picture, and doesn't get distracted with shortcuts like you mentioned.
- aargh_aargh 5y agoIn reply, there's the famous quote by Ira Glass: https://www.goodreads.com/author/quotes/113989.Ira_Glass https://www.goodreads.com/author/quotes/113989.Ira_Glass
- iampims 5y agoI found it a bit easier to start with voxels: https://ephtracy.github.io/ https://ephtracy.github.io/
- exikyut 5y agoTry poking https://blender.stackexchange.com/questions/167940/is-filmic-blender-already-included-in-blender-2-8 https://blender.stackexchange.com/questions/167940/is-filmic.... Was recommended https://www.youtube.com/watch?v=m9AT7H4GGrA https://www.youtube.com/watch?v=m9AT7H4GGrA a little while back, it basically goes 'round in circles a bunch of times describing exactly what you're talking about, then recommends Filmic Blender. I kind of hit my TL;DR point at ~12min. I have no idea if this information is relevant or insightful. Hopefully at some point I'll be able to play around with this stuff one day. (This machine hits 100°C if I try and play *video*... HP thermal design FTW. Not even going to try launching blender, no need to prove it'll melt everything lol)
- m12k 5y agoIf you use a tool with global illumination, so it's not up to you to fake how the light bounces, but it's calculated for you, then you're much less likely to get the problem you describe. If the tech you want to play around with doesn't support GI, then at least you can use one that does to create a reference that you can follow along with on your target platform.
- qwertox 5y agoI noticed that there was the build process displayed on the laptop, then even a video of him, which made me think that he might have streamed the process. Indeed he did, here is the playlist: https://www.youtube.com/watch?v=Hm7fdd8TD7Y&list=PL5nApUt6Z8sS9XcXJmjgfFOz38DF8acIv https://www.youtube.com/watch?v=Hm7fdd8TD7Y&list=PL5nApUt6Z8...
- xupybd 5y agoI suggest watching the Youtube playlist below. It's insane how much work went into this. He paid attention to every detail.
- jiggawatts 5y agoThe #1 best "Blender tip" (that also applies to computer graphics in general), is that by default it is horribly incorrect with its treatment of colour spaces and especially gamma/tonemapping. Rather than me clumsily explaining with text how to get this right and have your artwork "pop" with very little effort, watch this video titled "The Secret Ingredient to Photorealism": https://www.youtube.com/watch?v=m9AT7H4GGrA https://www.youtube.com/watch?v=m9AT7H4GGrA Combine that with physically correct materials and rendering, and you could literally "sketch" a handful of grey boxes with a single area light and have it nearly pop out of the screen with uncanny realism! The #2 tip is that chances are that you're probably working with a cheap LCD monitor. Even for $600-$1000 you can get a very decent monitor with DCI-P3 or AdodeRGB wide gamut support and more accurate colour. That helps to produce content that is consistent and correct. That, or invest in a calibrator and set up your operating system colour management with the ICC profile of your panel. Without this, images you grab from Chrome or Firefox will shift in hue and/or brightness when you import them into image editing software. Test your browser with this site: https://cameratico.com/tools/web-browser-color-management-test/ https://cameratico.com/tools/web-browser-color-management-te... The #3 tip is that you can make much better colour choices working in a perceptual space. The colour pickers in most software use trivial RGB 0..255 ranges mapped to a rectangle. This is garbage, criminally lazy, clownshoes programming. Yet, everybody does it, resulting in these "curtains of colour" controls: https://www.google.com/search?q=colors+picker+control&tbm=isch https://www.google.com/search?q=colors+picker+control&tbm=is... You shouldn't be seeing those vertical streaks! The transitions should be smooth and even. An excellent space to use for picking colours or creating gradients is Oklab: https://bottosson.github.io/posts/oklab/ https://bottosson.github.io/posts/oklab/ Notice how beautiful it looks compared to the other spaces, which are horribly uneven looking? Even just these tips can make someone like me, a non-artist, produce beautiful images, web pages, or 3D models. Art isn't magic, it's a technical skill and you can learn it!
- bjornornorn 5y agoFor color picking, I have just released two new color spaces based on Oklab, trying to improve on HSV and HSL. You can try them and compare with other options here: https://bottosson.github.io/misc/colorpicker/ https://bottosson.github.io/misc/colorpicker/
- f0e4c2f7 5y agoRecently Unreal Engine 5 released a beta version with a new lighting feature called "lumen." It makes lighting an order of magnitude easier if you can export your scene or create in Unreal. For example: https://youtu.be/oT2DDu9vRJk https://youtu.be/oT2DDu9vRJk
- atoav 5y agoAs a VFX freelancer: the tools are actually making this a lot simpler nowadays. 15 years ago it wasn't uncommon that instead of having physical correct(-looking) renderers one would have to fake even the light bounces by hand to make things look decent. The issue with 3D tools is that in order to make real use of them you have to basically be a good photographer, you have to be extremely provicient with both natural and artifical lighting, you have to be very observant of the physical properties of materials, you have to model accurately and to scale etc. These are things any software can help you with, but just like the greatest piano won't make you a great pianist, a great 3d software won't make you produce great images. Like any art form VFX and CGI depends on people who are willing to work on their results and learn from each other till they are perfect.