This is a tutorial that’ll show you how to make one of these preview areas for your own script! We’ll be creating a custom editor script that gives the MeshFilter component a preview. It’s fairly simple but it’ll arm you with everything you need to know to build your own previews like above!

To start with, lets just get that preview area to show up! It is fairly straight forward to achieve this. You’ll need to write your own custom inspector for your behaviour (This tutorial assumes you know how to do that already! Check here for a how-to). Normally you’d override the OnInspectorGUI method and define your own inspector GUI code. But there are some other methods there that we can override to define our Preview GUI!

First, we need to tell Unity that the inspector for our component does infact have a Preview GUI. To do this, just override the HasPreviewGUI method return true! You may choose to conditionally show a preview GUI (Based on some settings parameter or variable value on the target object), and this is where you do all your checks to decide if you want to show the GUI or not. We’ll just return true and signal to Unity to always draw the preview area.

Add this script to an Editor folder in your project, create a Cube in your scene, select it and check out the inspector!

MeshFilterPreview (Part 1)

Now, with the preview area visible, we can see exactly what part Unity will play in rendering your preview. You don’t have to worry about writing the code for a resizable preview area. Unity does all that for you and places the objects title in the bar too. If its up to you to do the rest. The next step is to override OnPreviewGUI and render our preview inside the box!

Unity will pass a Rect to your OnPreviewGUI method. This Rect represents the size and location of the dark gray box in the image above. it is up to you to decide what you want to draw in this area! For example, the UnityUI framework uses this preview area to display information about a UI elements layout properties. This is achieved just by using a few GUI.Labels and drawing those labels within that Rect. Basically, you can do all the stuff you do in OnInspectorGUI in OnPreviewGUI too.

This is all well and good, but it is common to want to render some 2D or 3D graphics in a preview. How do we achieve that? Introducing the PreviewRenderUtility class. A PreviewRenderUtility is like a self contained little Unity scene with a camera and light! You can position the camera and light however you like by accessing the camera or lights transform.

You’ll need to create a new instance of a PreviewRenderUtility object and use it to render your 3D preview.

You have to use your imagination here as there is no scene view to help you out so you need to position everything by code.

MeshFilterPreview (Part 2)

As mentioned above, we don’t have to render a 3D preview in to the preview area. We can just render some GUI, and in certain situations we are not able to present our user with a preview even if we want to. As an example, if we remove the Mesh Renderer from our object, we will get lots of errors! Our preview GUI assumes the object has a Mesh Filter and a Mesh Renderer. Let’s do some error checking, and inform the user that their object requires a Mesh Renderer if they wish to preview it.

MeshFilterPreview (Part 3)

To polish up our preview, I’ve added some code to let you rotate the camera around. The code is pretty much identical to how Unity handles their camera rotation in the preview area, and is pretty straight forward.

I’ve also added a ‘reset camera’ button to the Preview header area! You can put whatever you like in that preview area by overriding OnPreviewSettings and rendering your own GUI. Again, check out the full code example bellow to see how it is done - it is super simple! :)

Hopefully this has been somewhat helpful! Have fun with it! :D

MeshFilterPreview (Final)