Arch Viz Example quest

Thanks Will, it’s a complex FBX,
Any chance of knowing why it’s happening to avoid in future?

Erm, is there supposed to be an image attached?

1 Like

Sorry, had this open at work and at home and it didn’t post in either. I will do proper screen shots on Monday, we are struggling with interiors not looking great, but I need to do a clean project with good examples to make it more clear.
Will update on Monday

TLDR Version.
The Play Canvas Material is a washed out with only a lightmap and diffuse texture when compared to other engines.
Let me setup a project and screen shots to show why on Monday.

Play with Gamma Correction and Tonemapping settings.
And check this tutorial for this:

I did and it doesn’t work as I would hope it should compared to other engines. Let me set up something clear on Monday. Working from that tutorial literally :slight_smile:

Hi Everyone,
I have assembled a few things to look at.
Sorry this took so long but there’s a lot of work flow issues to be sorted versus what we already do with other tools.

First is an Interior that uses the bake maps directly in the lightmap slots of the materials:



Now here is where we are running into issues:

Same mesh and render, using light maps

Lightmap only build:

The project:

(the scene with textures is the wip)

For sure these light maps are a bit washed out compared to our internal Web GL, though they could have a bit more contrast. Working on some tests for that now.

Here is the same file in our VDC:

To see the options try turning off the Blocker object and then try looking at the lightmaps and bake maps options.
This is close to what was in the GI test renders we did.

Re the tutorial and workflow around it,.

The materials need a ton of tweaks in Play Canvas to approach the what bake looks like in our VDC using 3js:

The light maps in the Play Canvas PBR shader don’t seem to comp into the diffuse texture properly / strongly enough.
The seem very washed out compared to what I expect them to look like in other engines.

Any chance of exposing the strength of the Lightmap in the shader / or fixing it so it’s stronger / looks closer to what it should be default?
Along with that, maybe adding some brightness contrast controls to the tone mapper?

That is the sort of thing Unreal and Unity need too some times, to get things to match / look good.

A basic pipeline of Diffuse map, Light map and a normal and a gloss is pretty standard, and the Cube map environment could be done, but the additional AO and hand tweaking when you swap out darker or lighter textures is a bit of a killer.

If we have customers swapping out textures for options it’s not practical to tweak the , materials that are dark or very light to work per texture option…or even a range.

The need for AO is a killer, we don’t use AO for high quality renders, it’s too much of a fake. So having to use it too make the material look decent means it looks decent, but doesn’t match the renders that don’t use it.

A clean comp of the lightmap with the albedo (A lot of our textures in Arch Viz are really Diffuse maps) would be a little more straight forward. I did the AO trick (Sort of…Lightmap plus Photoshop) and it sort of works, but it’s too arbitrary, to done by eye. And it crushes the corners in darkness and my bosses don’t like the way it looks, which as we all know is the real killer :slight_smile:

Sorry to be long winded, but we are looking at implementing Play Canvas in production, so solving these pain points is going to be helpful in making some calls internally.

Play Canvas has been great fixing some core bugs that affected us recently, many many thanks, so I am hoping this sounds constructive!! :slight_smile: It’s some thing that would benefit a lot of people in Arch Viz if it could be streamlined and made to be a bit more predictable.

Thanks ahead of time
Mike K

First of all, you are using Linear tonemapping with 1.0 gamma. Which is not what our tutorial example suggests.
Additionally you are using LDR lightmaps, not HDR as tutorial suggests. HDR lightmaps will allow you to have much better light and dark dynamics.

This is not about material setup, this is about scene rendering settings and hdr lightmaps plus the way you render them.

Check tutorial project and its scene rendering settings for reference:

Hi Max,
Those features are coming, (HDR and AO maps) we use a specific pipeline for this so that takes time to get recoded.
I switched to Gama 2.2 in this version, the lightmaps still don’t exist even with a Photshop converted HDR maps for the floor, that’s the one that shows the least lightmapping.

For the HDR lightmaps, I noticed one example had a script and another did not,
Though when I brought the script in it seemed hard coded to that project (I’m an artist not a coder)

Following that specific pipepline is going to be a problem though, we are going to be switching to Corona for baking and lightmaps so none of this will apply. It’s going to come back to the above.

If some one isn’t using Vray or even 3ds max for that matter, the very specific pipe line won’t work well, it’s a bit tough

Here’s an a few examples.

My bosses want to use Corona, so I matched that Vray look, I can only put put Png’s for now.

Here is the bakemapped version in play canvas, it’s pretty close to the renders and the internal Web GL tool we use now

on Our Web GL tool:

(Turn on bakemaps and uncheck the blocker to see it more clearly)

This is a default lightmaps setup using Gama 2.2 set to look similar the above link when set to lightmaps)

As you can see the lightmaps are close to non existent.
I can’t replicate that exact workflow in the tutorial yet, but this is pretty close to it in terms of basics, the lightmaps just don’t mix well.

Here is a fork of one of your examples with the AO maps removed, the lightmaps in the example don’t look right either
when the AO is gone.

Not trying to be a pain here, trying to make this a bit more flexible, not every pipeline can follow that tutorial exactly.
We are going to try and get HDR files going, but it’s going to take time, and the light maps should at least look like something even if not perfect.

The Lightmaps are massively blown out in the Example and won’t fly when we have to use them in multiple applications.Tried converting one of ours to an HDR and blowing it out like the example and it doesn’t work.

Would you guys be able to release the Max file so people could see, if using 3ds Max and Vray, how you set it up?

I put out two latest Max files here:

The textures are pretty much all from the example file with some modifications to get the look we wanted.


AO and Lightmap are very different things in terms of materials.

AO interacts with glossiness and intensity of reflections or PBR surfaces. AO effect gets reduced on lit surfaces.
Lightmap does not interacts with reflectivity, it only adds amount of light to diffuse color and does reduces effect of AO in lit areas. Lightmap has no directional information in it as well, only diffuse light.

Our users use many different rendering pipelines. VRay being most popular but far from the only one. The rules explained in the tutorial, are actually pretty generic for HDR real-time rendering, and any rendering pipeline should allow you to produce very similar results.

Tutorial from archviz explains exact settings of how and what you need to set up. You can simply follow it step by step and will have the result. I’m not sure I will be able to find original max file.

Approach I would recommend for you is this:

  1. Fork green room project and try set up your rendering pipeline to produce as close as possible HDR lightmap as the one in demo.
  2. Try finding all toggles and switches in your rendering pipeline that allows you to produce similar results.
  3. You will not be able to produce identical result just because different lightmap rendering engines will not render same way.
  4. Potentially play a bit with exposure settings in a project, but not too much as if it goes away from reasonable values, then other material stuff will look off.

I’m playing with that now,Photoshop conversion to HDR and playing with exposure in PS.
The project shows the update.It’s gonna cause a few headaches in our pipeline and with my bosses, but it is what it is I guess.

I know the green room works, I used it as the basis for working on. The orange room looks bad with AO and only lighmaps, that’s what we are running into.

Is there any way to get cubemaps to not be blown out vs the inputs?

I pumped it through a few steps to darken it, but even when re-importing and creating a new cubemap, the rotatable example still looks too bright.

Because it heavily relies on box projected prefiltered cubemap, and to make it look good, you have to add AO.

Doesn’t look very real, don’t think we’d use that.

For the HDR Lightmaps you guys created, did they come that blown out out of Max / Vray or were they bumped up in post?

I went extreme an it darkened, but it’s as little off for anything I import.

This is the result with HDR Lightmaps done in Photoshop.

I can’t seem to get a cubemap (When viewing the little window that rotates) that looks like the actual cubemaps sides that are imported, it’s way brighter. Refresh the Cache maybe?

Thanks again for all the input Max!

No. It was not post editing.
Tutorial I’ve gave you link to explains all the steps that been taken to produce the results. It does not misses anything.

AO is actually very important to ensure stuff looks more realistic. The technique is of course approximation, but it has physical reasoning behind it. Here is clear tutorial that shows how important AO is to make it more realistic:

Might be cache, try re-prefiltering it. Do not un-tick “rgbm” on face textures.

The HDR’s I Photoshop worked as expected,
Set Exposure to 2.2 and Gamma Correction to .45, and it seems to match our Corona output.

This is a hack, we need to post process I think for our pipeline, multiple outputs sort of deal, but if I can get my coder to had HDR and AO to the script I think we’re a lot closer in Play Canvas.
I use AO all the time in non Arch Viz work and we might need to add it, but I am gonna get called on it :slight_smile:

Yeah, it was cache, but took a few tries to clear is, seems good now

Real-time rendering and offline rendering for archviz is very different.

Easiest way to present, is make two versions, show them first one with AO, but do not tell them about AO, and then show another same one without AO, without telling that. Ask for difference. Make sure scene actually have use for AO so it to be noticeable difference.

Whatever they choose based on what they believe is more realistic - stick to it. Don’t forget to test enough people, as if sample is small, then it wont be statistically significant.

I bet, people will go with AO option :slight_smile:

I have a question, the HDR maps once converted can’t be compressed?
We are trying to get this to work on mobile, that’s a bit of a concern.
Is there any way to get this work flow to work with compressed textures?

Currently if RGBM PNG compressed, it will create artifacts on Alpha channel, which will lead to issues with RGBM decompression. So RGBM PNG cannot be compressed directly.

There are no HDR formats currently available for WebGL in form of either native or extensions support. This is something that community need to express a need for and communicate to Khronos members. Easiest way to do it using WebGL Public Mailing List:

Okay, so that throws a wrench in our plans to use play canvas.

I hate coming back to this, but here’s my take on lightmaps in Play Canvas.

I know you guys worked hard to get it too this point. The problem with the work flow is now two fold.
It limits mobile playback with out compressed textures, the entire point of why we would move to this from Unity and Unreal.

The other issue is the lightmaps being HDR and having to be very blown out to work is a problem.
We need to swap textures in and out for our projects, and even tiny changes in the texture need a diffuse tint adjustment to look good.

Could there in any possible way be another shader that could work with not blown out and compressed lightmaps?

This is nothing to do with PlayCanvas, but with WebGL technology - which is any 3d web engine.[quote=“Mike_Kennedy, post:18, topic:4445”]
It limits mobile playback with out compressed textures, the entire point of why we would move to this from Unity and Unreal.
If you do not need WebGL and happy to do native application, then Unity does work as good alternative.
But if your requirement is WebGL - then Unity WebGL exporter is not supported for mobile.

You could use LDR textures and contrast them if that suits your case. You can write any shader you want using shader chunks for lightmaps. And use LDR textures (compressed) with it.

Just to wrap up. The workflow in tutorial - is recommended workflow, but not the only possible to use. We have clients using huge variety of tools and their own ways of doing lightmapping, and our tools allow for any workflow that suits you. But part of that workflow is your job to implement as it is impossible to implement hundreds workflows for different tools and use cases - because there are as many cases as clients.

Max, I am an artist trying to make the case for Play Canvas use, is there an example shader for this LDR shader chunks I can pass onto one of our devs?