Custom Canvases

It is possible to customise your canvases in Mona to look like anything you want by creating a custom model for the canvas to be displayed on.

Both images and live streams can be put onto a custom canvas, but the result may vary due to how UVs work with each process. Using a Livestream on the canvas seems to be more in line with the mapping.

Creating a Custom Canvas

• First, we need to create a model to place our canvas onto. For this tutorial, we can just create some simple examples. Note that you don't have to label the material canvas or make it red in the example below, these were just to show that it was one mesh with one material. Other examples of custom canvases include :

  • Creating multiple screens of the same livestream (as there can only be one live stream in a space)

  • Using animated gifs or a livestream to have an animated texture on an asset in your space

  • Combining livestreams from Touch Designer or other visualisation tools to add interesting dynamic environmental elements to your space

  • and many more...

Make sure your assets are one mesh and one material

Note that the asset needs to be one object with one material. Otherwise, the canvas will not work.

• It is recommended to make sure that you 'Apply Transforms' or at least 'Apply Scale' to your mesh. This will make sure that your UVs will be scaled correctly. You can do this in Blender by using Ctrl + A in Object mode.

Apply Transforms to your model

• Unwrap the model as you see fit. The UV Square represents the canvas itself. If you have a 16:9 ratio stream, you need to stretch any rectangle's UV to the full square. In the example below, both the square and the rectangle are applied the same, this is the correct approach. Just a reminder that applying an Image (instead of a Livestream) may have results that are less predictable.

Adjust the UV Maps as you see fit

For more information on interesting approaches to Unwrapping UVs, you could check out the tutorial. By creatively utilising UVs on your model you could create very unique and interesting uses of canvas assets.

• Once done, export as an .fbx to the Mona project in Unity.

Adding the Asset as a custom Canvas

• In the Unity project, drag a Canvas into the Artifacts gameobject. We will use this as a template to build our custom canvas.

Add a CanvasPrefab to the Artifacts gameobject

• You may want to Unpack the prefab to reduce warnings about modifying the prefab.

Unpack the Canvas Prefab to reduce warnings

• Drag your custom model into the base Canvas prefab object. This object will replace the Canvas tagged object after we copy over the elements that make it a canvas.

Add your custom canvas mesh to the canvas prefab

• There are three things you need to add to your model to make it recognised as a canvas.

  • Add the 'Canvas' tag to the asset

  • Add a Mesh Collider to the asset

  • Add the correct Mona Canvas material

Setting up the Custom Canvas Asset

• Once done, delete the original Canvas Tagged object ' UniqueCanvasName_1'.

• Don't forget to name your asset as you would like it to be recognised in the Canvas tools within the Mona space.

Delete original canvas and rename your own

• If you test the space in the playground the texture should be replaced with the 'Coming Soon' image. If so, your custom canvas is ready to go.

Test in the Playground

• Note how the Coming soon image is not to adjusted on the first plane and rectangle, these would look correct using the Livestream feature on a canvas.

• Once uploaded to your wallet you can assign the Image/Livestream URL as per usual. FOr more information you can go to :

  • Livestream - Add a Livestream to a Canvas

  • Images - Add Images to a Canvas