Advice on Platform Capabilities

Help & Support
1

I have my working proof-of-concept here:

https://playcanvas.com/editor/scene/883888

The idea is a virtual art gallery. The goal is to showcase high-quality images (of weird subjects) in a space that feels like a gallery.

I’m sorry I don’t know much about this stuff. I only learned it for this specific project.

This works great so far but I don’t know what I’m doing as far as resources and performance go. All of the textures I used are full-resolution right out of the camera. I know that’s got to be a bad idea.

At a gallery of only this small scale, with not that many photos, the performance is surprisingly good but I suspect it won’t scale.

  1. Do you have any suggestions for the resolution of the textures that I should be making to use for the photos hanging on the wall? I’d like them to look as detailed as they do now but I’m sure the resolution of the textures I used is overkill.

  2. For the floor textures, and the wall textures (everything other than the works “on display”) can you recommend a resolution that will look as good as it does now but be more appropriate than what I used?

  3. You see how I am lighting the works that aren’t blank canvases. I’m going to light everything like that as I fill in the blank canvases. Am I going to run into performance problems with all that lighting?

  4. As you can see I used a TON of primitives to make this. Cubes. Because I’m an avid Minecrafter I guess. Is this a bad way to do this as far as performance goes?. It had the very nice side-benefit of letting me rotate the floor cubes so that the tiles looked appropriately non-repetitive.

  5. Looking at this, if I continued exactly like the way I’m going, using full resolution textures (I know that’s a bad idea but I’m trying to understand the capabilities of the platform) and one huge scene, is this the kind of thing you would say: “you won’t even be able to finish filling in the blank canvases and doing the lighting in this gallery because performance will be so bad” or is it more the kind of thing you’d say “don’t worry about it, you could build a city-sized gallery this way.”

  6. I imagine of course that every texture used in the scene has to be fully loaded in the browser when the scene is running? For example, If I had another room next to this with more photos, would they all have to load regardless of whether or not they were visible?

  7. In projects with multiple scenes, is only the active scene loaded into memory?

  8. What am I doing wrong or inefficiently here? I want to get it set up correctly from the beginning so I can reuse what I started with and build it up from there.

Thanks for your help! I’m getting ready to upgrade my plan but before I do I just wanted to make sure that the project is even viable.

2

  1. Varies on the device. Desktops can handle up 4K textures (AFAIK) whereas mobile you would have to step down to 2K or even 1K pending on the range of devices you would like to support. You could have all the different sizes available and only download/load the textures that are suitable for the device the user has. That way you get the best quality on the devices that can support higher resolution.

  2. I would use seamless textures and tile it on large areas like floors and walls. The texture resolution would vary based on the tile size but I can imagine being able to get away with 256 or 512.

  3. For something like this, I wouldn’t use dynamic lights (and yes, more dynamic lights = less performance). Either bake the lightmaps in PlayCanvas or generate the lightmap in the modelling program you are using.

  4. Generally, yes. You could get more performance by using batching but really, this should be a single mesh for the room which can be single entity. In this particular case, you could use a single plane mesh and tile the texture on the material to achieve the same effect with a lot less polys and entities.

  5. The idea is possible, just not in the same way you are currently doing now. As you scale, you have to start looking at how to manage assets, loading/unloading as the user goes through all the galleries/rooms/buildings etc.

  6. It doesn’t have to be. You have control over the assets to load and unload textures from memory. So you could load/unload a gallery picture at a time or do a room by room unload/load sequence. If you use the compression feature in PlayCanvas, you can fit even more textures in GPU memory.

  7. You can load multiple scenes at once so you can have as many or as few scenes ‘active’. Assets (like the textures) are separate from the scenes so you can load/unload them separately from the scene itself.

Please note the issue is not really the platform of PlayCanvas but more of what the device the web app is being ran on. A low end mobile is going to be capable of less compared to a PC desktop.

1 Like
3

Hi @Scott_Boyan,

Here is a similar project built with Playcanvas and featuring an art gallery:

http://schwittek.com/clients/lenox/

1 Like
4

Thanks yaustar!!! I appreciate the advice.

5

Thanks Leonidas! I will check it out now.

1 Like
6

Yaustar, as I mentioned I’m very new to this workflow so I apologize.

When you say the entire room should be a single mesh . . .

  1. Should I create that mesh in a tool like Blender, export is as FBX, import it into PlayCanvas as a model, and work from there?

  2. If I make the entire mesh as a single room, walls, floors, and ceiling as a complete unit like you suggested, would I be able to apply different materials to different parts of that model? For example, would I be able to use a different material for the floors and the ceiling?

7
  1. Yes
  2. Yes but you have to do this in the 3D modelling program. When it gets imported into PlayCanvas editor, it will generate the material mappings.
8

I see. The textures will come with the mesh from Blender.

9

Not quite. In Blender, you can assign different materials to different sub meshes/mesh instances. The mapping of those materials to meshes gets imported in with the FBX into the PlayCanvas editor and material assets gets created. You then also have to import your textures as a separately and assign them to the materials.

10

I see! Thank you!

So in Blender I get as far as saying, this wall should use a material called Wall1, this floor should use a material called Floor3.

Then after I import the FBX, I have an empty material Wall1 and Floor3 that doesn’t look like anything, but in PlayCanvas I then import the actual texture and set the appropriate settings so that the region I defined in Blender gets filled with the texture I imported in PlayCanvas.

For practice I’m going to try making a complete ceiling and beams for my demo exhibit room in Blender and importing it all as one mesh. The beams will have a different texture than the ceiling.

11

For the record, you can include the textures together with the materials in your FBX. But as @yaustar said, it’s a better practice to upload them separately in the Playcanvas editor.

That way you can have more control on how and where you use them, especially helpful if you are using texture compression.

1 Like