How was the Orange Room demo made?

Hello all !

I’m trying to make my own archviz in playcanvas and I’m starting from the orange room base I deleted the assets and put mines, textured them etc… But I’m used to work on UE4 and here I don’t really understand how this scene works. Orange Room seems to use light from the HDRI image (tell me if I’m wrong) but I can’t obtain a nice lighting as the orange room would you have an idea why? (I’ve tried to hit
bake lightmaps but nothing changes).

Thanks in advance!

(Link to the scene http://playcanv.as/p/77EJoOLU/)

Denis

To begin with, it is definitely worth reading the User Manual. Specifically, these pages:

http://developer.playcanvas.com/en/user-manual/graphics/physical-rendering/
http://developer.playcanvas.com/en/user-manual/graphics/physical-rendering/physical-materials/

Now let’s talk about how Orange Room is constructed. First of all, here’s the link to the full project:

https://playcanvas.com/project/404977/overview/orange-room

Orange Room is actually pretty simple. It is a single model with 23 materials. There are two cubemaps in the scene: ‘Sky’ (the external background that acts at the skybox) and ‘Room’ (the room environment rendered to HDR images in 3DS Max where the room was modeled).

The lighting is influenced heavily by the ‘Rendering’ settings:

You can see the Sky cubemap is set as the backdrop here. Note that tonemapping has been set to Filmic, gamma correction is enabled, and the exposure of the scene is set to 12.

The main room has a lightmap applied to everything. The lightmap generated by the artist is named LM03.hdr - it’s an HDR lightmap.

All materials in the scene need to reflect the room itself and not the external skybox. So you’ll notice that all materials have the ‘Room’ cubemap set in the ‘Envrironment’ section. e.g.:

Setting a cubemap on the material itself will force it to override the reflection supplied by the cubemap set in ‘Rendering’ settings for the scene (namely the ‘Sky’ cubemap). This is what enables you to see the room reflected in the TV screen and not the external cityscape:

You might notice a discrepancy between how the scene is rendered in the viewport and how it is rendered when you launch the scene. This is because of this script:

https://playcanvas.com/editor/code/345310/HDR_LM.js

This script sets the projection for the room cubemap as a box projection on all the scene’s materials. This treats the cubemap as ‘local’ rather than infinitely far away (like the skybox). The size of the room is defined by the model on the entity named ‘box-proj-reference’.

The script also does some rather advanced stuff around replacing certain bits of shader coder in the standard material to achieve some graphical tweaks, but that’s probably beyond this scope of this post. :smile:

1 Like

Thanks a lot for your answer will !
It looks like I have plenty of work ahead :smiley:

Thanks again for all your work I will post some screenshots when it’s finished !

I have another little question I’ve made a lightmap with vray and I wanted to use it on my floor and I got this result :

My floor is becoming kind of blue and nothing can change it :frowning:
What did I miss?

Thanks in advance

On the right hand side of the texture picker (the area you highlighted) there is a dropdown which selects the channel of the texture that should be used. In your case you have selected B (or the blue channel). Try changing it to RGB

Hello vaios thanks for your answer !
B is selected here because I’ve tried all channels but nothing change even when RGB is selected.

OK in that case can you share a project link so one of us can have a look?

https://playcanvas.com/project/394718/overview/roomtest

Here it is ! :slight_smile:

Hmm I don’t see a blue floor:

Try refreshing the Editor ?

1 Like

OK I’ve refreshed the editor and yes no more blue floor.
Sorry to have bothered you vaios !
Thanks for your fast answers

Noticed you’ve selected UV0, and you have wooden tiles on it. You probably want to have lightmap on UV1.

Yes I have some UV problems to fix and I will do that !
Thanks for the advice !

hello,I am a newer in playcanvans.I am doing with my project ,but I have some problems.
How can I use UI html like button to change my obj material.

Thanks for teach me!

@1117 I think you should have started a new thread instead of posting in this one. There are lots of learning resources on the PlayCanvas Developer Site (also available in Chinese) for you to learn from. You should check out the tutorials section too, which has examples showing how to do HTML interfaces. There are also many projects made by site users doing things similar to what you want, like this one.

THANK YOU , I had finished this problem yesterday. Thank you for your advice.