6 ms·

First 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 an

First 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 ago
I 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
- karimf 5y ago
  Here’s a course by the creator of the post: https://threejs-journey.xyz/ https://threejs-journey.xyz/
- pgeorgi 5y ago
  When you look at the laptop on the desk, the editing process of the scene is shown there. Nice touch :-)
nine_k 5y ago
Just 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.
- Jasper_ 5y ago
  The blue light of the sky is technically the result of Rayleigh scattering of the sun through the atmosphere, which can be emulated (and often is these days! [0]), but fair; it's often cheaper and easier for an artist to model them separately. I was going for a classic physics demonstration to point out how simple sources can often result in beauty. [0] The classic is Naty Hoffman's 2002 work on atmospheric scattering http://developer.amd.com/wordpress/media/2012/10/GDC_02_HoffmanPreetham.pdf http://developer.amd.com/wordpress/media/2012/10/GDC_02_Hoff... , but it has been developed over the years, e.g. Sebastian Hillaire's work on both Frostbite https://media.contentapi.ea.com/content/dam/eacom/frostbite/files/s2016_pbs_frostbite_sky_clouds.pdf https://media.contentapi.ea.com/content/dam/eacom/frostbite/... and Unreal Engine https://blog.selfshadow.com/publications/s2020-shading-course/hillaire/s2020_pbs_hillaire_slides.pdf https://blog.selfshadow.com/publications/s2020-shading-cours...
  - nine_k 5y ago
    While technically true, this is not how most 3D animation software models light — even if it (roughly) models Rayleigh scattering in solids, like opal or ground glass. In all realistic rendering software, skylight and sun (or other celestial bodies, like Moon) are modeled as separate sources of light, with different light characteristics.
- bnegreve 5y ago
  > There is sun, which is slightly yellowish The sun light is white during the day, otherwise, anything white would appear yellow.
Agentlien 5y ago
I do agree with this. I just want to add that the "thinking like an artist" doesn't have to be as intimidating as it may sound. I don't really do any visual art outside of graphics programing, I don't see myself as an artist, I'm very much not a visual thinker, and my deuteranomaly does make some aspects of my work harder at times. Besides all that I've found I can do a good job and get some really nice looking results just by focusing on an understanding of the underlying equations and common tricks like mentioned above.
hyferg 5y ago
It can be both art and programming! Here's a paper showing how programmers work with artists to develop the classic TF2 half lambert [0]. This shader also makes use of an efficient method for representing diffuse environmental contributions using low order contributions on a spherical harmonic basis which is similar to techniques from quantum mechanics [1]. [0] https://steamcdn-a.akamaihd.net/apps/valve/2007/NPAR07_IllustrativeRenderingInTeamFortress2.pdf https://steamcdn-a.akamaihd.net/apps/valve/2007/NPAR07_Illus... [1] https://cseweb.ucsd.edu/~ravir/papers/envmap/envmap.pdf https://cseweb.ucsd.edu/~ravir/papers/envmap/envmap.pdf
- goldwind1111 5y ago
  damn, I haven't played Team Fortress in so long lol. This is a cool thread, I'm going to have to Bookmark this so I can always come back to it for foundational inspiration and as a reference key for doing artwork.
- Jasper_ 5y ago
  You read the paper wrong. They use a 6-face ambient cube instead of the SH9 term. I guess the SH9 term was somewhat expensive in 2007, but it's now pretty standard for representing ambient diffuse light, and has much better results than the ambient cube. For more on that, see this slide deck: https://steamcdn-a.akamaihd.net/apps/valve/2006/SIGGRAPH06_Course_ShadingInValvesSourceEngine_Slides.pdf#page=28 https://steamcdn-a.akamaihd.net/apps/valve/2006/SIGGRAPH06_C... But yes, understanding some physical basis for lighting is helpful even for non-photo-realistic rendering.

peignoir 5y ago

I 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

karimf 5y ago
Here’s a course by the creator of the post: https://threejs-journey.xyz/ https://threejs-journey.xyz/
pgeorgi 5y ago
When you look at the laptop on the desk, the editing process of the scene is shown there. Nice touch :-)

nine_k 5y ago

Just 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.

Jasper_ 5y ago
The blue light of the sky is technically the result of Rayleigh scattering of the sun through the atmosphere, which can be emulated (and often is these days! [0]), but fair; it's often cheaper and easier for an artist to model them separately. I was going for a classic physics demonstration to point out how simple sources can often result in beauty. [0] The classic is Naty Hoffman's 2002 work on atmospheric scattering http://developer.amd.com/wordpress/media/2012/10/GDC_02_HoffmanPreetham.pdf http://developer.amd.com/wordpress/media/2012/10/GDC_02_Hoff... , but it has been developed over the years, e.g. Sebastian Hillaire's work on both Frostbite https://media.contentapi.ea.com/content/dam/eacom/frostbite/files/s2016_pbs_frostbite_sky_clouds.pdf https://media.contentapi.ea.com/content/dam/eacom/frostbite/... and Unreal Engine https://blog.selfshadow.com/publications/s2020-shading-course/hillaire/s2020_pbs_hillaire_slides.pdf https://blog.selfshadow.com/publications/s2020-shading-cours...
- nine_k 5y ago
  While technically true, this is not how most 3D animation software models light — even if it (roughly) models Rayleigh scattering in solids, like opal or ground glass. In all realistic rendering software, skylight and sun (or other celestial bodies, like Moon) are modeled as separate sources of light, with different light characteristics.
bnegreve 5y ago
> There is sun, which is slightly yellowish The sun light is white during the day, otherwise, anything white would appear yellow.

Agentlien 5y ago

I do agree with this. I just want to add that the "thinking like an artist" doesn't have to be as intimidating as it may sound. I don't really do any visual art outside of graphics programing, I don't see myself as an artist, I'm very much not a visual thinker, and my deuteranomaly does make some aspects of my work harder at times. Besides all that I've found I can do a good job and get some really nice looking results just by focusing on an understanding of the underlying equations and common tricks like mentioned above.

hyferg 5y ago

It can be both art and programming! Here's a paper showing how programmers work with artists to develop the classic TF2 half lambert [0]. This shader also makes use of an efficient method for representing diffuse environmental contributions using low order contributions on a spherical harmonic basis which is similar to techniques from quantum mechanics [1]. [0] https://steamcdn-a.akamaihd.net/apps/valve/2007/NPAR07_IllustrativeRenderingInTeamFortress2.pdf https://steamcdn-a.akamaihd.net/apps/valve/2007/NPAR07_Illus... [1] https://cseweb.ucsd.edu/~ravir/papers/envmap/envmap.pdf https://cseweb.ucsd.edu/~ravir/papers/envmap/envmap.pdf

goldwind1111 5y ago
damn, I haven't played Team Fortress in so long lol. This is a cool thread, I'm going to have to Bookmark this so I can always come back to it for foundational inspiration and as a reference key for doing artwork.
Jasper_ 5y ago
You read the paper wrong. They use a 6-face ambient cube instead of the SH9 term. I guess the SH9 term was somewhat expensive in 2007, but it's now pretty standard for representing ambient diffuse light, and has much better results than the ambient cube. For more on that, see this slide deck: https://steamcdn-a.akamaihd.net/apps/valve/2006/SIGGRAPH06_Course_ShadingInValvesSourceEngine_Slides.pdf#page=28 https://steamcdn-a.akamaihd.net/apps/valve/2006/SIGGRAPH06_C... But yes, understanding some physical basis for lighting is helpful even for non-photo-realistic rendering.