Every $2 will be transferred to the Ukrainian Volunteers Fund. Do not remain indifferent, support Ukraine!

Interactive presentation of SVOYA interior (WebGL/PlayCanvas). Part 6.


Author MastaMan
Updated on May 30, 2022
English and Русский

Index

Intro Part 6

This is Part 6 of a series of tutorials on creating an interactive SVOYA interior with WebGL/PlayCanvas.

For those who haven't read the previous parts, here's a demo video.






In this series of tutorials, we will make an interactive interior presentation that can be viewed in real time through a web browser.

Access to materials, such as: models in the "FBX" format, baked textures and more, you can get by subscribing to Patreon.

Patreon - 3DGROUND

Adding Models to the Scene

So, our textures are baked. The texture name contains the name of the model and the postfix "Corona_Beauty". In the "Bake to Texture" settings, we didn't really change anything.
baked textures
Loading...

Export2Playcanvas export script

I wrote a script that optimizes the process of exporting models to the "FBX" format. The script code is attached below, in order to download it, scroll through the code block, right-click on "view raw", then "Save link as...". To run the script, drag the downloaded "Export2Playcanvas.ms" file into the "Viewport" of the 3Ds Max program.



This is what the script looks like when run in 3Ds Max.
export2playcanvas script
Loading...
Features:

  • Automatically configure "FBX" exports to include "EmbedMedia"
  • Remove current object materials and create a new "Standard" material with special settings
  • Automatically adding textures to the "FBX" package
  • Removing unnecessary "IDs" objects
  • Moving the second Unwrap scan channel to the first and then removing the second channel
  • Collapsing all stacks
  • Quick export to "FBX"
  • Proper naming of export files
Of course, you can export manually, but to save time, it is convenient to use the Export2Playcanvas script.

Using the Export2Playcanvas script

export2playcanvas script
Loading...
Drag the "Export2Playcanvas.ms" script into the "Viewport" of the 3Ds Max program, select the "Textures Path" path where you have your baked textures.
Important!
For each model, a texture with the name of the model and the postfix "Corona_Beauty" must be baked!
If the texture for the model is not found during export, you will not be able to export it. You will be notified about this by a notification with an error.
Select the model, click "Export Selected". Models are exported one at a time. After export, a "FBX" file will be created in the "Textures Path" folder.
exported fbx models
Loading...
Above is an example of what the list of files looks like after export.

Under "the hood" the following actions take place in the script:

  • For "FBX" the "EmbedMedia" option is enabled, which allows you to avoid manually adding textures to Playcanvas
  • The "Standard" material is created, since Playcanvas understands some of its settings
  • An automatically baked texture is added to the "Standard" material, which the script finds itself
  • The baked texture is added to the "Self-Illumination" slot and the material will not need to be changed in the Playcanvas if it has no glare, there will be no lighting in the Playcanvas scene.
  • Extra Unwrap channels are removed, to save weight "FBX" files
  • Extra "Material Id"
  • are removed >
  • All modifier stacks are collapsed
  • The correct "FBX" names are assigned and the prefix "SM_" is added
  • Files are exported in "silent" mode, without pop-up windows
I recommend exporting the models one at a time and then adding them to the Playcanvas scene right away. Thus, you can immediately see if a mistake was made at any of the stages.

Export models

Before exporting, I copied all the objects into a new scene using the CopyTo PRO script. You can "Merge" or transfer objects in any other way.

CopyTo PRO


A new scene is needed in order not to spoil the current one.

For almost all models, export will occur through a script with default settings.

I have objects in the scene, these are "TV", "Oven" and "GlassDoors", which require "Multimaterial" and when exporting them, you need to enable the "Two Material Ids" checkbox in the script . This will create a "Multimaterial", in the first slot there will be a material with our baked texture, and in the second slot, just a regular material, which will be replaced with glass in the Playcanvas.

Since, in my case, more than two "IDs" were not needed for materials, I implemented exactly this functionality in the script.

I started exporting from walls, ceilings and windows. As described above, select the model, press "Export Selected". Drag the exported "FBX" to the "Assets" panel in the "models" folder.

I created a separate "Entity" named "Apartment" and started adding models.
add model walls
Loading...
We continue to export other objects, carefully, one by one, and add them to the Playcanvas. As long as we don't touch the materials.
add other objects to playcanvas
Loading...
We fill the scene, remember about the objects that need to enable the "Two Material Ids" option - these are "GlassDoor", "Oven" and "TV". Previously for these objects, I reassigned "ID" to "EditablePoly" in the temporary scene and for all glass elements I set "id": 2.
add other objects to playcanvas 2
Loading...
As you can see from the screenshot above, I used the filter in the "Assets" panel for the "Template" objects and I'm looking for the model I just added in the search. When the list of models grows, this is the most efficient way.
scene completed
Loading...
All models have been added. Even in "Editor", it already looks nice.

Setting Collisions

Now we need to adjust "collisions" so that we don't fall through walls and floors.

To do this, select "Walls", "Podium", "Cabinet" and "ConcreteFloor", add the components "RigidBody" and "Collision" to them.
add rigidbody and collison
Loading...
Then expand each "Template, select "Asset Template", and for the "Collision" component, change the type to "Mesh", select the suggestive "Render Asset". See the example below with "Walls" .
assing collision to walls
Loading...
Let's try to start the project by pressing the "Play" button.
test collisions realtime
Loading...
Fine! We can move around the room and do not fall through the floor and walls.

There's only one problem left, we can't climb stairs since our "Player" can only move on flat ground.

I created a "Plane" in 3Ds Max like in the picture below, this is the sloping surface on which the "Player" will "slip".
stairs playcanvas fake
Loading...
I exported and added Playcanvas to the scene, added "RigidBody" and "Collision" components, for "Collision" I chose "Mesh" type and advised "Render Assets".
playcanvas plane collision stairs
Loading...
Let's run the project again with the "Play" button, great, now we can go up the steps.

Checking textures

I noticed that after baking, some textures don't look good enough. For example, the "Cooker" texture looks like this even if you set the texture size to "2048px".
cooker 512 corona beauty
Loading...
So I manually redrawn it in Photopea (Photoshop).
cooker 2048 corona beauty
Loading...
The "Oven" texture also baked badly. Some elements on the texture, such as a digital clock, were redrawn by hand.
oven 512 corona beauty
Loading...
After drawing.
oven 2048 corona beauty
Loading...
There were no problems with the rest of the textures.

Exported the problematic objects to Playcanvas again, after deleting the old ones.

Conclusion

In this part, we did a big piece of work - added all the models, set up "collisions", fixed problematic textures and launched the project in test mode.

In the next part, we will come to grips with the materials.

Go To Lesson Interactive presentation of SVOYA interior (WebGL/PlayCanvas). Part 7.


Go To Lesson Interactive presentation of SVOYA interior (WebGL/PlayCanvas). Part 5.


{{commentsMsg}}
  

No one has posted a comment yet
{{comment.lastname}} {{comment.name}} {{comment.date}}
{{comment.text}}


SUBSCRIBE TO OUR NEWSLETTER

{{subscribeMsg}}