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...

• 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.

• 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.

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.

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

• 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.

• 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

• 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.

• 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.

• 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