Lamps on Babylon / Open Contest!

[Rodrix3]

1) I would like to have real lamps on Babylon. Like this:

 

I know what you might be thinking - on Babylon we have "lights".

However, I want to be able to have a  *lamp* that emits light, and at the same time the lampshade gets lit and occludes the lightning. Just like in real life, in photo above.
Is this possible?

If not, can it be simulated? E.g: using a translucent material for the lampshade material and using a spot light? Any ideas of how to achieve this as realistically as possible?
Is there any demo of an actual lamp object + a light source?

2) What about ceiling lights, like this one:

How could this one be simulated? Could we use no light source at all, and just use emissive material and glow layer post process?

3) Performance.
Could we have the light just light up certain elements (the lamp, the  lampshade, and the floor where it is positioned), or does it necessary need to light all scene?
Because using this idea could get very expensive in terms of performance.

Thanks so much everyone

 

[Wingnut]

Hiya R.  Did you do a forum search for 'lamp'?  Probably should/could.

Anyway, here's one that Hersir and I did, once upon a time.

https://www.babylonjs-playground.com/#1GUOCF#9

More streetlight than lamp, sorry.  And, it's faked... of course. 

You might discover... that just a bright color and some highLight layer or glowLayer on the shade itself... will give you a nice effect.

Our BJS omni-lightbulbs blast right thru all mesh that are not shadowing items... so... you MIGHT even find-out that putting the shade into the light's .excludedMeshes is wise.  Then just use a bright color on the shade... and some glow/highlight.  Maybe don't even bother trying to light the shade itself... with the light inside.

Anyway, you have something to play-with, now.  Put a tube in place of the sphere... see what happens, eh?  Others will surely comment, soon, too.

LAMP CONTEST!!!  Fun!

Real-acting shade would be like wax paper.  Photonic opacity.  Can't see thru it, but light it brightly enough from behind, and some photons will pass-thru.  A serious challenge, likely.  Might have to fake THAT, too.    The REAL fun comes when you put the dimmer on the light bulb.  As the light.intensity gets brighter and dimmer, you change the color of the shade material, and adjust the amount of glow on the shade mesh.  Wow! 

Put a flower pattern on the shade using emissiveTexture and "wash it out" using emissiveTexture.level.  SuperWOW.  So the dimmer would change light.intensity, shade material diffuseColor, shade material emissiveTexture.level, and glowLayer/highightLayer thickness around the shade edges... at the same time.  Holy cow.  Super-Lamp!  :)

[Rodrix3]

Thanks @Wingnut! Really appreciate your kind message and help :).

I am trying your idea, and for ceiling lights emissive + glow looks good.
However for lamps with a lampshade.. it looks unrealistic!

Take a look:

This is the model without emissive:

 

I still need to add the prebaked occlusion map shadow, but I don't think that will make much difference.
Any further ideas to make this more realistic?

P.S: I love your idea of "lamp contest". I have just changed the name of this post.
It would be great if others post their lamps! + technique!

Edit: I can't seem to find how to edit the title of the post ...

 

[JohnK]

5 hours ago, Rodrix3 said:

I can't seem to find how to edit the title of the post

Edit your first post in this topic, this allows you to edit the title.

[Wingnut]

What?  No playground... with your shades?  How are you ever going to hold a contest when others can't turn your knobs?  (that didn't come out right) 

Have you tried 2-tube shades, where the outer tube is created "frontside" and the inner tube created "backside"?

That might allow a different color/texture on the inside of the shade... than the ones on the outside.

Not sure what that would do, but it would certainly make things more complicated/complex, and isn't that what we are seeking?  No?  oh. 

[V!nc3r]

I always use lightmaps. This allow to have precalculted rendering quality to realtime scene. Here a little scene where all shadows are lightmaps (except of course the dynamic one under the flying logo).

 

[Wingnut]

Heya @V!nc3r.   Do you ever "grapple with" the baked shadow map drawbacks?  (PG #71)

- players cannot change position or rotation of shadow-casters (or baked shadow will be mis-positioned)
- textures cannot be re-used in other parts of the scene
- textures are needed, instead of colors-only (side walls)

These things can cause scene bloat and handcuffs user-interaction (rot/pos/scale/mesh-add/mesh-remove) with the mesh in the scene.

Plus, there's added game-making time... to produce the bakery goods, right?

Do you ever ponder these things... which are the "costs" of using baked shadowmaps?

Just curious.  I have never used baked shadowmaps in a scene.  I'm not sure how they're created or if they come back to haunt you... if you ever need to re-position a mesh.  I would assume that they make the programmer avoid changing a mesh pos/rot/scale/existence... "late in the game", huh?

It's almost like... photo-realism costs dynamics money. 

Can you tell us some of the thoughts that you think about... regarding these restrictions?  (if not, it's fine... thx, either way.)

Comments welcome from everyone, of course (especially other bakers).    Maybe I should put this question in Wingnut Chronicles... to avoid sending Rodrix's thread on a tangent.

[babbleon]

I gave up using baked light / AO maps on a recent project as the customer wanted bits of the scene to move.

Not that it's very helpful to the OP,  but when processors get fast enough.. this is that kind of thing that would be great to have for realtime realistic scenes:

https://erichlof.github.io/THREE.js-PathTracing-Renderer/

[V!nc3r]

Regarding visual quality for lighting, as an artist you need GI, AO, IES or similar lamps, translucency of some materials sometimes, color bleeding, etc ;  which are difficult to get in realtime without texture baking (here a very little quick try with the cornellbox scene without lightmaps). Even on engines like UE or Unity you need a precomputed light pass to get a nice result.

Of course all lightmapped objects need to stay statics, so it's greatly depends of your project, plus it's generate a lot of textures if you're scene is in large scale.

(I can't show you - yet - our demos from my company here, but as soon as we can make them public, you will see that lightmap baking is a must have to enhance a lot the lighting of a scene [edit] in fact I've forgot that some screenshots are already on my website : they're some demos with combination of dyn lighting and baked one, but the need of lightmaps to tend to realistic and cleaned lighting still stays.)

 

Edited June 1, 2018 by V!nc3r
adding app examples with lightmaps

[Rodrix3]

Very nice @V!nc3r!
You got a ver nice showcase.

Could you tell me more about your ideas?
I have tried adding ambient occlussion shadow,  pre-baked texture, to the lampshade. However, as soon as emissive is on, all traits of ambient occlusion shadows disappear.
What exactly do you bake and how? In my models, I just bake AO for all.

I am not familiar with IES.

@Wingnut, I agree with Vinc3r that baking textures  is important. Beware, however! You can bake AO shadows and still have dynamic lights.
AO is the fine details of the shadow, usually independent of a light source. For me this is the key to achieving realisim. And yes, it takes LOTS of work from setting up the scene, export, baking, and setting up the materials again. But it is worth it!

Anyways.... I still can't think of how to make this lampshade realistic. I am beginning to think that emissive should NOT be used at all.

Any ideas?

[dbawel]

What is needed is Scattering, Caustics, and other "natural light attributes. Currently, these can be accomplished using "baked in" approaches, or you could build some of these using shaders if you need dynamic lighting effects. However, this is simply a re-visitation of the recent past... as we were in the very same place with the very same lighting effects in the mid 1990s. But as in the 90s, the computing power began to increase dramatically, as did the renderers. So I know that more dynamic natural lighting is coming to WebGL... but first WebGL has to natively support such high computation without slowing down the renderer; and WebGL itself has to support this. When caustics were first introduced into rendering in the late 90s, we were in heaven. That's when you saw a huge improvement in feature film VFX - as most people believe that realistic digital imagery is in the models and textures; but really it's in the lighting most of all. It's coming. 

This is a great discussion and exercise, but simply revisit the evolution of digital renderers in the last 15 years, and you'll see exactly where we are in the timeline concerning rendering on the web. The good news is that we're not 15 years away, but far less than 5 - since we've done this all before. Now we know exactly what to do, and we're all working on it.

DB

[Rodrix3]

Thanks @dbawel  and @V!nc3r!

However could you guys go into more specifics?

For example, for my scenes I use AO baking, and an hemisphere light, and sometimes a point light.

The AO baking I do it by exporting the model from 3ds Studio Max and then using XNormal app to bake the AO, which is applied on channel 2 where I have planar uv maps.

My work flow is the following:

- I apply PBR materials to all scene and adjust until I am happy with the result.

- Then I bake the AO shadows for each of the objects of the scene with XNormal.

- Then I apply the hemisphere light and any other light with physical model.

What would you recommend me to add to my workflow or change, so I can make the lamps look realistic?

 

Unfortunately I am not familiar with any other type of baking than AO. I am aware of full light maps baking (although I never used) but know that is not compatible with adding lights on the scene as I am doing.

Please give me some more concrete names of techniques or what apps to use so I can investigate further, and make these lamps more realistic!

Thanks so much!

 

 

[dbawel]

@rodrix

I don't see where you could improve your current lighting pipeline with the exception of integrating lighting specific shaders - which are generally highly complicated and computational. So unless you're not getting acceptable results, then I believe you've reached the practical lighting limits currently available.

DB 

[Rodrix3]

@dbawel, thanks for the reply. I am interested in the lighting specific shaders and what else can I do.
Even if not "practical" it is good for me.

The reason is, my target machine is a 32 gm RAM machine with a 1080 GTX card (target = my computer).
So I don't care about low fps as long as I get the most photorealistic resutls...

I just want to achieve the best result, not matter the fps cost.

What else can I do? Can you give me some pointers so I can investigate?

How could I use lighting shaders if I am using PBR material? Are you talking about replacing the PBR material completely by another Material shader?
Or are you talking about using PBR and applying a postprocess to the material shader? (not sure if that's actually possible with the current Babylon pipeline)

Also I don't understand how the baking of light can be done (regular light, no AO). How would I use that combined with AO maps?
Would I bake the entire  diffuse texture with the lights and apply that as albedo texture (I am using PBR), and on top of that use the AO baking? Or are these two different incompatible techniques? The thing is, the AO doesn't give me the yellowish glow on the lampshade that I am looking for, it just gives me a black and white graident that doesn't even take into account lights.

Are you using XNormal?
Are you using some other tools?

Thanks so much for sharing this valuable informaiton - it could be really helpful for me.

 

P.S: @Wingnut, I haven't posted any sandbox yet, because my results aren't good enough.. (not better than the photo I posted). Plus it would be just uploading a glb with no code, since the AO texture is prebaked. But as I mentioned before, using emissive is killing the AO texture.. so the whole thing is worthless (I was about to post and prepared a sample.. but the results are not good). Once I am able to achieve a better result, I might upload something to the sandbox

 

[V!nc3r]

If you can wait few days, I'm going to make a very basic Blender scene (let's say, with a lamp? :) ) served with an article on my blog (FR usually, but this will be with my first EN) to explain the basic workflow.

Some keys:

• I have a scene dedicated to BJS, which is the master scene for production
• another scene dedicated to texture baking (with Cycles), to extract Diffuse & AO passes, BUT! with the Diffuse path without color option, just direct & indirect lighting. Then AO is multiply with Diffuse to get only one texture, and you have your lightmap (useAsShadowMap checked). Blender baking default worflow is shitty, so I use a plugin.

 

[Wingnut]

Listen to these guys!  Holy crap... I think the contest needs to branch.  I'm staying on Kindergarten Avenue for awhile... and offer an extra 13 cents in prize money... for the best lamp made from a doublesided BJS Tube (and no AO passes or bakery items).  heh.   You guys just need to get the .emissiveTexture (and possibly opacityTexture) under control... using the .level prop (on all BJS Textures).

In my opinion, the only good lamp... is a bake-free lamp.

Art-wise, yeah, the bakers will have prettier scenes.  But in VR adventure land... where everything is carry-able (including torches and lamps), the bakers are in trouble. 

I HAVE done some PBR work, but it has always resulted in a blur effect, with increased pee-rates. 

[V!nc3r]

Yep of course having dynamic objects on your scene make you excluding them from static lighting passes, we're agree on that. But you still have few options to enhance your dynamic objects:

• highpoly to lowpoly baking (to get self-AO even if some meshes faces are flat)
• for a dynamic light, you can play with texture projection and also (for example a torch) have an emit map on it to make glow... glowing
• plus some post-processes like SSAO for example

[Rodrix3]

14 hours ago, V!nc3r said:

If you can wait few days, I'm going to make a very basic Blender scene (let's say, with a lamp? ) served with an article on my blog (FR usually, but this will be with my first EN) to explain the basic workflow.

 

 

Yes! Please!!! I would be delighted!!! Thanks so much in advance @V!nc3r!
That article would be priceless!! 

These free 3d models of a lampshade might be usefu if you are struggling finding one: https://archive3d.net/?a=download&id=35c453f0#, https://archive3d.net/?a=download&id=cd1743e0.
Or literraly thousands here: https://archive3d.net/?category=20&page=49

...or do it with any model you have at hand.
Thanks again @V!nc3r.

I will be eargely waiting for your article!

P.S. @Wingnut, did you know that you can bake only AO, and still have dynamic lightining and move objects around?
AO shadows are usually not light source dependent (they are the shadows that the object casts on itself). So that means that you can combine AO baking + dynamic lightening!
This creates much more realistic VR scenes! 

 

[dbawel]

@Rodrix3

There are numerous shaders which produce reasonable caustics, ambient, and other lighting effects which are dynamic... but the one approach I generally get the most out of when attempting more realistic dynamic ambient lighting comes from Evan Wallace in the following shader:

http://madebyevan.com/webgl-path-tracing/

Specific modifications to the shader will produce fantastic results - once it is generally understood. The link above provides a brief explanation, however everything within the "webgl-path-tracing" directory contains usable shader code. It may not be "out of the box" but it should accomplish what you are seeking.

DB

[Rodrix3]

Thanks @dbawel, I appreciate the link and input. Very interesting!!!

However, I think would be attractive for @Wingnut :D, who wants everything to be dynamic! As for me I am looking for the most photorealistic results, but it cannot "render" on the fly.

I am happy to have static lights, and static lightening, as long as it is photorealistic. So it should be either pre-renderered or "faked" since what I am doing is a VR experience for very high-end computers. So everything needs to be already rendered on every frame, and the user should not see the pixels forming.

I think that my pipeline is missing what @V!nc3r is mentioning, as I am only baking AO.
Do you have any other tips?

Thanks so much for your time. Really appreciate it

[dbawel]

@Rodrix3-

Perhaps you're already using unconventional techniques in baking lighting into your scene; but if not, then the approach I used years back provides the most flexibility I've personally found. In the example of a lamp which requires ambient light illuminating the lamp itself as well as objects within proximity - this requires multiple duplicates of the same surfaces. Thus you won't be creating a mesh of a lamp and lamp shade, but duplicates of the lamp shade and other meshes... depending on the desired result.

Most all meshes will have their lighting baked into an emmisive texture, although you'll want to use as much ambient lighting as possible. However for the lamp shade, you'll want two lamp shades with different emmisive textures applied to each. Perhaps you'll want the interior mesh to either receive a dynamic shadow of the lamp components, or perhaps the shadows will be baked... it all depends upon the desired result as it applies to the overall lighting within the scene.

However, the simplest way to define the method and approach to simulating realistic baked lighting is to commonly duplicate meshes using various texture types, transparencies, and both ambient and emmisive textures such that you are viewing a separate mesh with a different texture when viewed from the interior of the lamp; and a separate mesh and texture when viewed from the exterior of the lamp.And a KEY element to creating realistic simulated lighting - is to duplicate your lamp shade (only as a possible example) and make this duplicate entirely transparent using an alpha channel - but create shadows and other lighting effects to display on (appearing through) by applying a texture to this additional duplicate lamp shade only to display a shadow or other lighting attribute which provide realistic lighting effects.

When working on films in the past, I've often duplicated several of the same mesh and/or hierarchy which is used only to apply a subtle lighting effect and/or shadow - such as the glow of the bulb and it's unique detailed shadow - as this cannot currently be used to produce a realistic shadow of the mechanics of the light bulb and internal switch. So perhaps I'll have one lamp shade which has the texture of the fabric, one which has a texture of the glow, one for the detailed shadow of the bulb and internal switch, and as many as I need to produce precisely what is seen if taking a photo in a room only illuminated by the lamp.

This is a technique which I rarely see used, as most devs don't look beyond lighting their scenes using only the geometry which is necessary for basic texturing. However working in layered geometry provides all of the lighting choices ever possible. And you'll also find that you don't need to duplicate geometry at the same resolution for texturing layered lighting effects - as often a far reduced mesh will do the trick.

If you're not using this "old" yet  tried and true method used before we had anything but an ambient light available, you'll find practically no limitations to the realistic lighting effects you can achieve with a little experimentation. I hope I'm clear in my explanation. And keep in mind that you can animate your textures and meshes to simulate realistic flames and fire effects - as your elements don't need to remain static.

Even since we've been given limitless shaders and a full spectrum of lighting effects in most renderers these days, these still don't always provide what we need, and/or they are labor intensive to set up. So most lighting TDs and animators still use duplicate geometry only to apply layered textures to simulate realistic lighting. There are many scenes in the Lord of the Rings films where the renderer isn't creating the lighting effects seen on screen, as we had so much more control animating flickering textures for many of the torch and candlelit scenes.

Just use your imagination, and you'll find this is far more flexible than any shader or pre-existing light or effect. That's as simple as it gets.

Cheers,

DB

[Rodrix3]

@dbawel thanks so much taking the time to write such a comprehensive reply!
I really really appreciate it! Sorry it took me some time to reply, I needed to digest all what you wrote to understand it.

It sounds like golden nuggets to my ears!

However, I am not being able to understand it all.

>> ... creating multiple duplicates of same surfaces.
If I do, I get mesh artifacts. Maybe you are talking about giving the "outer face" a material, and the "inner face" another materials?
Or actually creating multiple "inner faces"a few units away, so it is always at the same position but not really touching, so to get like a parallax effect?

If so, what is the benefit of doing this, versus, applying emmisive, transparency, and all maps together on one material?

>> ... make the duplicate entirely transparent.

When you say "entirely transparent" do you actually mean like 90% transparent? Because if it is entirely transparent what's the point of having the object.
Obviously I am missing something that I am not understanding....

Could you explain a little more this idea of overlapping multiple layers of the same mesh?
Thanks so much in advance!
REALLY appreciate all your help 

[dbawel]

@Rodrix3

I use low res duplicates of the mesh I'm texturing, when I run out of  texture channels and / or their attributes to use. Make these duplicates children of the original mesh, and use the alpha channels in the 32 bit textures for transparency. This provides endless possibilities, including animating the meshes and textures on the duolicate low res meshes.

 I hope this explains how we create awesome scenes at Sony.

DB

[Pryme8]

You are talking about real time global illumination...

once we have access to webGL 3.0 scope you could voxalize the scene  http://simonstechblog.blogspot.com/2013/01/implementing-voxel-cone-tracing.html
but till then:
https://github.com/iryoku/separable-sss/blob/master/SeparableSSS.h <- might be able to reference this
http://developer.download.nvidia.com/books/HTML/gpugems/gpugems_ch16.html
http://codeflow.org/entries/2012/aug/25/webgl-deferred-irradiance-volumes/
https://threejs.org/examples/webgl_simple_gi.html

http://realtimeradiosity.com/demos/
 

https://en.wikibooks.org/wiki/GLSL_Programming/Unity/Translucent_Surfaces
https://en.wikibooks.org/wiki/GLSL_Programming/Unity/Translucent_Bodies

http://people.compute.dtu.dk/jerf/papers/dirsss.pdf
http://www.pixelnerve.com/webgl/sss/sss_multilight.html <-- Best bet.

 

[Rodrix3]

@Pryme8 wow wow wow!
What is this?

Look at this screenshot. It runs at 60fps on my computer (with vsync on) having all quality settings maxed out:

 

It's absolutely amazing! I can't believe it is dynamic light.
Here is the direct link to the demo: http://codeflow.org/webgl/deferred-irradiance-volumes/www
Article: http://codeflow.org/entries/2012/aug/25/webgl-deferred-irradiance-volumes/#goodies
(it is one of the links from @Pryme8).

..what even surprises me more is that the demo is from 2012?
What? How come this hasn't been implemented into any actual engine?

The article reads:
>> In order to sample the scene I need to render it from the point of view of 47 lightprobes. These probes are 6-side cubemaps in a low resolution. A naive approach would be to render the scene 47 times, but that would be too slow. So instead I build a dictionary that maps to UV coordinates in the lightmap as well as the diffuse color of the scene from the probe.

WOW. What a clever idea. No plans to create this on Babylon?
The post from 2012 even has implemented Variance SSAO.

I am just plain confused!
How is it possible that 6 years passed and none of this is mainstream?

The voxel webgl 3.0 technique  also impressed me, but I think I was even more impressed by the demo from 2012.
Thanks @Pryme8 for a glimpse into the future - or into the past???  

I still don't understand why this hasn't even implemented on other engines... or has it?