Uploading Your Own Frame Environments

Note: our updated documentation about Frame 3D environment creation can be found here.

---------------------------------------------------------------

Beyond the Frame environments you can choose in our environment picker, you can upload your own 3D models to be the environment for your Frames. We have some requirements and some tips and tricks to get you off the virtual ground with your own beautiful models. Once you have your file by following all of the guidelines below, this video shows you how to actually upload it to your Frame.

For starters, your model must be a .glb model and be no more than 50MB in size. We will occasionally make exceptions to this if you want to upload a larger model (email hello@framevr.io if you do), but we encourage you to try to get your model well below that size limit to ensure good performance and decent load times for your Frame.

Also, the environment model must have a bounding radius of 500m or less. Ensure the scale of your model is correct by using our sample avatar model for scale.

Frame runs from a web browser, and if you expect any of your audience to join from VR headsets, mobile devices, or older desktops, you should do your best to get your file size as low as possible and follow the guidelines below. We are confident that with the right techniques and optimizations, you can bring gorgeous spaces into Frame.

If you are struggling to get your model in a state where it can imported as a Frame environment, we may be able to help. Email hello@framevr.io

GLB/GLTF

As mentioned, we only support .glb models. .glb is the binary, single-file form of a gltf model. You can learn more about the gltf format here. It's a flexible, open-source format that is specifically designed for web environments like FRAME.. Most 3D design tools have native .glb export tools or plugins/extensions that let you export your models to .glb

We make most of our models in Blender, or they at least end up there before we do our final exports, because we have found that Blender has the best support for the gltf/glb format. That said, Microsoft makes an exporter for 3ds Max, and many other tools besides Blender have native glb exporting available. You can ensure that your model is a valid gltf/glb model here.

Overall, if you're new to GLTF, and especially if you also use Blender, this is a great article with some good tips.

SPAWN SPOT

The origin point (0, 0, 0) of your 3D scene will be the default spawn location for users that enter your FRAME, so make sure that you strategically position your origin point. If your model has an origin point that is far away from the model itself, it may not even work at all. Also, avoid having the origin point of your scene directly inside any enclosed geometry in your environment. Ideally, your origin point is at an open area with not too much going on around it, to help your users not feel overwhelmed when they first spawn in your space.

TEXTURES/MATERIALS

You should limit the amount of textures in your model, and definitely avoid really heavy textures. If you can avoid using textures where you can instead use vertex colors or color palettes, then do so. If you're having a hard time reducing the heaviness of your textures and you want help, let us know at hello@framevr.io and we'll see how we can help.

CONSIDERATIONS WITH THE BLENDER GLTF EXPORTER

Your material definition in the Blender node editor is not always completely honored in the process of exporting to .glb.  There is somewhat of a narrow path in terms of meeting the exporter's expectations.  We suggest enabling the Node Wrangler Blender add-on.  Use the CTRL + SHIFT + T to open the Node Wrangler from within the Node Editor.  Navigate to the folder with your PBR textures, select them, and click the button for the Node Wrangler to constitute the node material definition. Then, set your external assets to be automatically packed and reduce your PBR texture maps to 512x512 or maybe 1024x1024.  Then, export and your environment should look good in Frame.

Be sure to adjust the scaling of the mapping nodes in your editor to reflect the level of tiling you want.

GEOMETRY/POLY COUNT

Reduce your poly count as much as possible. For geometry that you can duplicate, set them up as linked duplicates in Blender.

Use back-face culling where appropriate.

If you want to use a more advanced technique to compress the geometry in your model, you can apply Draco compression to your model. You can build the Draco compression library yourself, or you can use tools like Cesium's gltf-pipeline library.

For models with very complex geometry, Draco compression will make a dramatic difference. Otherwise, you will only get some small gains.

NAVIGATION MESH

Frame automatically generates a nav-mesh based on your uploaded environment. However, if you want to bypass this and define your own mesh to be used as the basis for the navigation mesh, you can include another file when you upload your 3D environment, a.glb file including __nm in the name. Check out this tutorial on creating your own navigation mesh.

LIGHTING

There is no real-time lighting in Frame (yet), so we suggest using unlit materials and baked lighting/shadows. To create unlit materials in Blender, use the background material type.

That said, if you are familiar with some advanced techniques we do let you leverage lightmapping. Lightmapping your environment enables you to increase the fidelity of scene highlights and shadows as well as leverage the use of tiled textures. Create a gorgeous environment using your favorite tiled textures. Bake a lightmap capturing the highlights, shadows, and bounced lighting. Export your environment as a .glb with __lm in the name.  Export your lightmap as a .jpg with __lm in the name.  Go to one of your frames and click "UPLOAD ENVIRONMENT".  Select both your .glb and .jpg files. Click open, and wait for the magic to happen. Enjoy your lightmapped environment!

Note: each mesh in your model requiring the lightmap should have a second UV set, and other meshes that aren't using the lightmap should contain __skiplm in the name.  Note that you need not provide any specific node graph defined material for lightmapping used in Frame.  We only require the second set of UVs and the separate LM file.

As for combining separate lightmaps into one, you would have to create a new uv Chanel for each of your objects and pack their UVs together in that layer. Then you could bake all of them to a single lightmap texture. Note that by default the lightmap will be applied to the second uv channel.

You can also include your own lights in your glb file. For example, you can add lights to Blender scene and export them in your .glb file. Keep in mind though that PBR materials that respond to real-time lighting will take a toll on performance. If you are working with your own custom lights and want to turn off the default Frame scene light, you can do that in your Frame settings.

Lights can also be animated like in this example.

SCALE

3D creation tools sometimes have different scale systems, and getting this right can be tough. In FRAME, we try to respect "1 unit is 1 meter".

To make this easier to visualize, here's a model of one of our avatars so that you can scale your model accordingly. Keep in mind that the avatar doesn't represent the full physical height as it is just the torso and the head. We typically set the avatar eye height to be 1.6 meters.

ANIMATIONS

Frame supports the playback of animations that are baked into your .glb model! You can even animate lights - check out this example.

SEATS AND EASY PANELS

Frame has a few special environment assets with special behaviors like seats and our "easy panels", little blue buttons that make it easy for your end user to attach assets to surfaces.

To add seats to your custom environment:

1. add an empty in Blender and name it “fcta”.

2. Place it on top of the object you’d like the avatar to sit on.

3. Align the local y axis of the fcta empty to the direction you’d like the avatar to face when seated.

For easy panels:

1. make an empty and give it the name "ezpanel" -it will be facing in it's local y direction.

2. When scaled at a ratio of 1.8y:1x, the +- buttons will be in it's top right corner. The center of the easy panel should be in the center of the object it's trying to fit. Then you can measure the height of the object you're scaling it to and match that to the x axis scale.

2. Also make sure you have "Show wall buttons" enabled in your frame settings

‍

CUSTOM WEBGL SHADERS

You can include shaders in your environment model, either shaders from our Frame Library or shaders that you create yourself with the Babylon Node Material Editor. In Blender, just include this tag in the name of the mesh that you want to apply the shader to: shader_nm_#yoursnippetid (but replace your snippet ID with the snippet ID of the shader you want to use).

For example, to apply our hyperbeam shader to a mesh in your environment, you would include shader_nm_#13LGZG#2 in the name of the mesh in Blender before exporting the .glb file.

For more detail about including custom shaders and particle systems in your Frame environment, check out this dedicated blog post that includes sample files.

TARGET METRICS

Try to keep your model within these bounds, on the lower side if you can:

• 30 draw calls max
• 130,000 active faces max
• 20 materials max

You can upload your model to the babylon sandbox to see how it does before uploading it to Frame!