Verto Studio 3D

User Guide Table of Contents Getting Started 5 About this document...... 5 The Scene Library...... 5 Importing OBJ files...... 6 The Scene Editor 6 Overview...... 6 The Object Toolbar (blue)...... 7 Tools...... 8 The Auto Tool...... 8 The Pan Tool...... 9 The Move Tool...... 9 The Rotate Tool...... 10 The Scale Tool...... 10 The Select Tool and the Selection...... 11 Views and Transformations...... 12 The Camera View...... 12 Split View...... 13 Advanced Camera Options...... 13 Object Transformations...... 13 Mesh Types...... 14 Plane 14 Sphere...... 14 Torus 15 Cube 15 Terrain...... 15 Sketches...... 15 Text 17 Skybox...... 17 Cubemap Renderer...... 18 Materials and Lights...... 18 Material Properties...... 18 Texture Properties...... 19 The Texture Library...... 20 Light Properties...... 21 Shaders...... 22 Gouraud...... 23 Phong...... 23 Bump Map...... 23 Cartoon...... 25 Reflective Environment Mapping...... 25 Refractive Environment Mapping...... 25 Reflective & Refractive Environment Mapping...... 26 Ward Simple BRDF...... 26 Multitexture...... 26 Depth render...... 27 Grid Snapping...... 27 Constructive Solid Geometry (CSG)...... 27 Edit Mode 28 The Edit Toolbar (green)...... 29 Mesh and Element Operations...... 30 Set smooth/flat...... 30 Reduce Polycount...... 31 Element Operations...... 31 Extrude...... 35 Advanced Techniques 35 Environment Mapping...... 35 Cubemaps...... 35 Dynamic Cubemaps...... 36 Multipass rendering, Post-FX Processing, and the Render Pipeline Editor...... 39 Render Node Types...... 40 Scene Rendering Pass (Root Node)...... 40 Post-processing Pass (Post-FX Node)...... 40 Screen...... 41 The Main Pipeline...... 41 Adding Render Pipeline Nodes...... 41 Defining inputs...... 41 Configuring pass renderer output...... 42 A Render Pipeline Example...... 43 Shader Programming Guide 44 Verto Studio’s Shading Language (loose GLSL)...... 44 Verto Studio Shader Attributes...... 45 Verto Studio Shader Uniforms...... 46 The Shader Builder Window...... 48 Custom Post-FX Shaders...... 49 Verto Community 50 Getting Started

Congratulations on your purchase of Verto Studio 3D. Verto Studio runs on top of the most advanced editable graphics system on iOS. This document will help you wield that power and create amazing renderings and 3D artwork of your own. Let’s dive in and get started!

About this document

This document assumes the reader has a basic understanding of introductory 3D concepts such as cameras, polygons, vertices, normals, lighting and shading. Furthermore, experience in usage of 3D modeling software is beneficial, but not required in understanding this manual.

The Scene Library

Verto Studio 3D functions in one of two screens, the Scene Library and the Scene Editor.

Within a moment of starting Verto Studio, you will be presented with the scene library screen. This screen allows you to organize and manage your various scenes, create a new blank scene, or import an OBJ file into a new scene. The library screen shows 2 scenes at once (or 1 in portrait orientation). Swipe left or right to navigate through your library. When you have more than a hand-full of scenes in your library, an option to switch to a grid display becomes available. Grid display allows you to see and browse through many documents at once on the screen screen for convenience.

Each document contains a set of 3 document buttons.

•The document button allows you to duplicate or rename a scene. •The send button allows you to export and share the scene as a Verto Studio file or an OBJ file. •The trash button will prompt you to remove a scene file. Importing OBJ files

Verto Studio 3D comes with a built-in ability to import OBJ files as new documents.

To ensure importing is successful, OBJ files should be generated with triangles and quads only (no edges). The file should also contain both normals, and texture coordinates. Additionally if applicable, MTL files and associated texture maps should be included as well.

Once an OBJ file, MTL file, and textures are ready for import, open iTunes while your device is connected to your computer. Navigate to the apps tab and scroll down to "File Sharing" select "Verto Studio" from the list and drag in the associated files into the app's documents. After sync, the OBJ file will now be available for import.

Alternatively, OBJ files may be opened from the Mail application from attachments within emails, from within dropbox, and from hyperlinks to OBJ files over the web. However, these method will not be able to load MTL files or textures like the aforementioned import method.

The Scene Editor

Overview

The Scene Editor is where scenes may be viewed, explored, and of-course edited. It features a gesture-driven interface designed to be as simple and unobtrusive as possible. Most operations are supported through gestures performed within the auto tool, however precise tools and operations are available. During object mode, only one toolbar is visible. This is the blue toolbar at the top.

During operation within the scene editor, the current scene is auto-saved approximately once every minute. The scene editor, can be exited at any time by tapping the “Library” button in the upper right hand corner. Exiting the scene editor will automatically save the current scene before returning you to the Library.

The Object Toolbar (blue)

Object selected

The buttons of the object toolbar are context-sensitive meaning they change depending on whether or not an object is selected. The buttons are explained as follows (from left to right, top to bottom)

• Add button • Adds new objects to the scene. Currently the supported list of objects are the plane, cube, sketch, sphere, cylinder, terrain, torus, cubemap renderer, skybox, and light. With the exception of cubemap renderer and light, all of these objects are mesh types. Refer to the mesh types section for more information. • Undo button • This button prompts for an undo. Just about every operation in Verto Studio 3D is undoable. The software maintains at most 15 levels of undo which may decrease depending on the level of available system memory. • The tool selector • Allows you to select the current tool. Operations within the editor are highly dependent on the currently active tool. For more information, refer to the tools section. • The camera button • Displays a screen to allow configuration of the current camera view. For more information, refer to the camera view section. • The library button • Exits the current scene and returns to the scene library. The current scene is saved. • Object/Material button (sphere) • Displays a screen to allow configuration of the selected object's general properties and material properties. For light objects, the light’s properties may be edited here. For more information, refer to the materials and lights section. • Clipboard button • Allows you to copy/paste objects or mesh data within or between scenes. • Duplicate button • Makes a copy of the current selection and selects it. To ensure an in-place duplicate does not complicate the scene, the duplicated objects should be moved. • Mirror button • Allows for the current selection to be mirrored in either the X, Y, or Z dimension. • Edit button • Enters edit mode with the currently selected object to enable vertex-level editing of the mesh. For more information, refer to the edit mode section. • Delete button • Deletes the selection from the scene.

Tools

Verto Studio currently features 6 tools: the auto tool, pan tool, move tool, rotate tool, scale tool, and select tool. With the exception of the auto tool, each tool can be configured via the wrench button that appears on the blue toolbar when that tool is selected. Each tool's specific options will be explained below in the respective section. In portrait orientation, only 3 of the tools are visible on the toolbar. To use the other three tools, rotate the device to landscape.

The Auto Tool The auto tool can perform a subset of tasks covered by the other 5 tools. It is designed to accomplish many basic tasks using multi touch gestures instead of constantly switching back and forth between tools.

To select an object under the auto tool, you simply tap that object. Tapping again anywhere else on the background will deselect all objects. To pan the screen, simply swipe your finger across the background or anywhere that is not a selected object. To move an object, first select it, then swipe your finger over that selected object to drag it. Similarly, to scale an object, pinch the object with two fingers. Lastly, you can rotate an object by twirling it with two fingers. Again, an object must first be selected before it can be manipulated. When the camera is in free mode, a two finger drag gesture will move the camera laterally (panning) the view.

While many basic operations can be accomplished from within the auto tool, the other tools exist to ensure that precise editing operations are available.

The Pan Tool The pan tool allows you to move the camera view to actively pan around the scene. When active, use the pan tool by simply swiping across the screen. To zoom in or out of the scene, use two fingers to pinch the screen. Unlike the auto tool, the pan tool will always perform a pan or zoom regardless of where the gesture occurs on the screen. Additionally, it is worth noting that tapping the screen with the pan tool will not alter the selection.

When the camera view is in free view mode, the tool will rotate the camera view, otherwise it will laterally pan the screen. This behavior can be configured in the pan options view which is accessible from the wrench icon that appears on the blue object toolbar while the pan tool is active. For more information on camera views, refer to the camera views section.

The Move Tool The move tool allows you to move the selection across the screen. To use the pan tool, first ensure a selection has been made, then swipe your finger anywhere across the screen to move the object. The object will move according to your swipe direction and the current camera view. Unlike the auto tool, the swipe is not required to be over the object for the move to perform. For convenience, you may still tap on the screen to make individual selections using the move tool.

For precise translation, drag any one of the colored handles attached to the selected object to move in the respective axis. Additionally, the move tool's options pane (wrench icon) allows you to lock the movement to any of the 3 axes (X, Y, Z). You can also key-in units into the 3 text boxes and apply a one-time precise translation of the selection. The Rotate Tool The rotate tool allows you to rotate the selection. To use the rotate tool, first ensure a selection has been made, then use your finger to drag anywhere on the screen to perform a rotation around the center of the selection. The axis of rotation is perpendicular to the current camera view's forward axis. A two-finger twirl gesture will also perform a rotation. Unlike the auto tool, the twirl is not required to be over the object for the rotation to perform. For convenience, you may still tap on the screen to make individual selections using the rotate tool.

For precision rotations, grab one of the colored handles to perform an axis-aligned rotation. Additionally, The rotate tool's options pane (wrench icon) allows you to key-in angles in degrees into the 3 text boxes and apply a one-time precise rotation of the selection about the X, Y or Z axes.

The Scale Tool The scale tool allows you to scale the current selection. To use the scale tool, first ensure a selection has been made, then drag your finger either towards or away from the center of the selection. Alternatively you can pinch two fingers anywhere on the screen to scale the object. The object will scale according to your pinch direction (inward or outward) and the current camera view. Unlike the auto tool, a pinch is not required to be over the object for the scale to perform. For convenience, you may still tap on the screen to make individual selections using the scale tool.

For precise scaling, grab one of the colored handles to perform a single-axis (non-uniform) scale. Additionally, the scale tool's options pane (wrench icon) allows you to lock the scale to any of the 3 axes (X, Y, Z) to perform a non-uniform scale. You can also key-in units into the 3 text boxes and apply a one-time precise scale of the selection. Please note that in order to ensure integrity of surface normals, a non uniform scale forces an application of the current transformation to the mesh data. For very complex meshes, this application of the transformation may be slow. For more information, refer to the object transformations section. The Select Tool and the Selection

The select tool allows you to fine-tune your current selection. It is the only tool that allows you to select more than one object at a time. During object mode, selected objects are shown with a green bounding cube surrounding them. During edit mode, they are highlighted in bright yellow.

To select or deselect an single object using the select tool, one may tap on an object or the background just like in the auto tool. However, to select multiple objects, you can drag a rectangle across the screen to perform a rectangle select. Anything the box touches will be selected.

When the select tool is active, some additional buttons appear in the bottom right for convenience. The first button allows you to quickly perform “select-all”, “select-none” operations. The second button allows you to change the selection mode from the default of “Replace”, “Additive select”, and “De- Select”. These buttons will remain on the screen as long as the select tool is active.

Rectangular selection is the default mode, the selection mode can be altered using the selection mode selector accessible from the tool's options screen (right). The selection tool options screen has some additional options such as performing an inverse of the current selection. Additionally you can access the swipe selection mode, a special additive selection mode where any objects swiped over are added to the current selection. Swipe-mode is a legacy feature that dates back to before the “additive-select” feature. It may still be useful for some, but is likely not necessary. Likewise, a deselect toggle switch is available within the selection tool options pane.

It is also useful to note that any changes to the current selection are always reversible using the undo button.

Lastly, to select an object by its name, tap the object list button to be presented with a list of objects that can be selected. This feature is useful when an object exists in the scene that is not easily accessible via the normal selection methods, such as a skybox or a cubemap renderer. Views and Transformations

The Camera View

The camera view determines how the current scene is displayed from the perspective of the viewer. It also contains options for how the scene is rendered.

Each scene contains one implicit camera that defines the current view. As mentioned previously, the auto and pan tools allow manipulation of the current camera view along with the camera button on the object toolbar.

Using the options available from the camera button, the camera can be configured to display a top down view, bottom up view, left view, right view, front view, back view, and free view of the scene. A user-interactive game-like fly-through mode is also available. This mode will function like a typical touchscreen FPS (first person style) game with dual touchpad controls for movement and looking around.

Within free view, the camera is centered around a focal point and may be revolved freely about the scene to obtain the desired perspective, this is the default as it is the most convenient and intuitive. To alter the center while in free view, you may either use the pan tool, do a two-finger drag with the auto tool, or make a selection and use the center view button. If no selection is made, the center view button resets the center to the origin.

Additionally, the view may be toggled between perspective and orthographic (parallel) projection. Orthographic projection may be more familiar and natural to users of CAD and engineering software.

Options are available to change the default pastel blue background color and to save a rendering of the current scene to an image within your device's photo album. After using the render image feature, switch to your "photos" app to see the resulting image.

Lastly, there is a shortcut to the “Render-Pipeline Editor” (which can also be accessed with a simple swipe from the top of the screen). This will be covered in detail in the Render Pipeline Editor section. Split View

To display multiple views at once, toggled the “split view” setting on. This mode allows you to conveniently edit and view your scenes from 4 view perspectives simultaneously. Initially these 4 perspectives are: top view, left view, front view, free view. Any of these 4 view panes can set “active” by touching inside the view. The active view can then be configured to another camera perspective by opening the camera options and selecting one of the blue view buttons. Normal singular view functionality can be restored at any time by selecting the “single view” setting within the camera view options

Advanced Camera Options

For advanced camera settings, tap the gear icon. These settings configure how the scene is rendered on the graphics hardware, and affect the precision of the Z- buffer. For larger scenes, increase the near plane distance and increase the far plane distance. For smaller scenes, decrease the near plane distance and decrease the far plane distance. A narrow field of view angle can be used to zoom far into the scene, while a larger one creates a wide angle view. At any time, the settings can be reset to the system default by tapping the “Reset to default” button.

Object Transformations

Within a scene, each object has a set of transformations that are local to that single object. These transformations are referred to as object-space transformations or just object transformations.

An object's transformation consists of its position (commonly called translation), its size (commonly called scale), and its orientation (rotation). These three elements are kept as properties of the object and are not permanently applied to the underlying vertex data unless explicitly requested.

To apply an object's transformation to the underlying mesh, first select the object, then tap and hold your finger on the selected object until the object menu appears, and finally select "Apply transform to object data". As an alternative to using the move, rotate, and scale tools, the object menu allows you to modify the objects transformation as well.

Mesh Types

As mentioned previously, in Verto Studio 3D, objects within a scene are either mesh types or lights. Meshes are made up of quadrilateral or triangular faces which in-turn are made up of vertices. The add button, introduced previously, allows you to generate different types of mesh objects, and change the mesh generation mode. Whether or not new meshes are created with triangles or quadrilaterals is configurable by changing the current mesh generation mode (accessible from the small to your icon which appears on the add menu). The default mesh generation mode is initially set to quads.

Once generated, all mesh types behave fundamentally the same and can be manipulated and edited as normal. The different types of meshes that can be generated by Verto Studio 3D are explained here.

Plane

A simple plane made from two triangular faces or one quadrilateral. Often used as a strategic starting point for basic 3D shapes.

Sphere A UV sphere generated with configurable number of slices and stacks.

Torus

A donut-shaped object. Configurable with inner and outer radii, slice, and ring counts.

Cube

Flat-shaded 3D cube made of 12 triangular faces or 6 quadrilaterals.

Terrain

Unlike the previous meshes, Terrains are not a simple 3D primitive. Terrains are generated from height fields, a 2D array of vertices organized into a tessellated plane. Vertex heights are generated using a built-in mathematical function modulated with a degree of randomness, or using image data. Terrains can be quite interesting when the image used to generate the mesh is also applied as a texture (see materials and lights).

Sketches Sketches are extrusion surfaces generated using the users input. When you select "sketch" from the add menu, a moveable sketch configuration screen appears. At this point, you can use your fingers to draw a shape on the screen, when finished, tapping the "done" button will generate an extrusion of your shape in 3D and add it to the scene as a new mesh object. For closed shapes, the sketch should not self-intersect.

Within the sketch configuration window, a number of controls are present to help define how the 3D sketch is created. The top selector allows you to switch between continuous sketch mode, polygon mode, circle mode, and square mode to draw your shapes. The extrude switch allows you to control whether or not the shape should be extruded in 3D, or left as a 2D flat surface. The number of segments allows you to define how many extrusion segments are generated by the extrusion process.

Lastly, the closed shape switch may be toggled off to prevent filling of the sketch as a closed shape, and to only perform an extrusion of the drawn path. Non-closed shapes support self-intersection, like the "o" in the "hello" image above.

When finished, you can either start a shape over, mirror the shape, or tap done to generate it. Mirroring will mirror the shape about it's automatically determined axis of symmetry. It was used to generate the heart above. To create interesting non-closed patterns, see what happens when the mirror button is tapped repeatedly. Text

New since Verto Studio 1.4, is the ability to create beautiful 3D text objects within your scene with customizable fonts. Once selecting the text object type, you can configure the text relative size and resolution, the text phrase you wish to create, the desired font, and whether or not to extrude the text shape in 3D. Much like the sketch tool, the generated text will always be facing the camera in the current view. Once generated, text objects are triangular meshes and can be edited just like any other primitive object.

Skybox Skyboxes display a environment map (cubemap texture) in all possible directions. They are designed to efficiently add environmental detail to a scene that would otherwise require very complex meshes in all directions to achieve the same effect. They represent an infinitely large cube at the center of the scene that completely encompasses the viewer. For more information, see the section on cubemaps within the environment mapping section.

Important Note: To avoid the annoyance of repeated accidental selection, Skyboxes can only ever be selected from the “Object List” within the selection options pane of the selection tool (see “Select Tool” section). This is also the only way to delete an existing skybox (selecting it first, then deleting via the trash icon).

Cubemap Renderer

These special objects live-capture a cubemapped environment map by rendering the scene from every possible direction at 90-degree angles. For more information, see the section on dynamic cubemaps within the environment mapping section.

Materials and Lights

Every object has a set of properties that refer to it's material. An objects material refers to how it is textured and how it is shaded by the lights in the scene.

Material Properties

To modify an object's material properties, select a single object and tap the material icon. Select a material group to reveal the material editor. A material is split up by it's various types of reflectivities. These reflectivities determine which of the light's colors are reflected by the object's surface. They are explained below.

Diffuse The base color of the object. The diffuse color shows on a dull (non-shiny) surface. Highlight The specular reflective color. This is the color of the shiny areas of the surface.

Emit The Emissive color. This color is light added by the surface, independent of the lights in the scene. The emissive color is actually not a reflective color, but one added by the surface (as if it was emitting it's own light).

Ambient The ambient color. The amount of the light's ambient light that is reflected by the object. Ambient light is shown even in the dark areas of the surface that are not facing any lights.

Apart from the these properties, is the material's shininess property. The shininess determines how shiny a surface is. This of course will be utilized by the aforementioned highlight color.

Opacity To set an object as semi-transparent, modify the “opacity” property in the material properties pane. Rendering of semi-transparent objects will significantly reduce performance however, so exercise caution when using this feature.

As an additional step to ensure fast rendering performance, Verto Studio does not automatically sort transparent objects. This means that certain transparent objects that appear in front of or behind others may produce an unrealistic 3D rendering. To combat this, Verto Studio added a new feature that allows you to alter the rendering order of objects within the scene by sending a selected object to the back of the render order list. To accomplish this, long-tap (tap and hold) on an object outside of edit mode until the Object menu appears, and then select “Send to back”. This will send the object to the back of the rendering order. It will have no effect on opaque objects.

Texture Properties

The texture properties screen allows you to apply an image-based texture to the object's material. Tapping the image on the top allows you to select or replace the texture image from the texture library.

Once selected, a texture can be tweaked with the remaining controls in the texture properties screen. Altering the quality determines the actual texture resolution used in memory. The qualities range from low (256x256), medium (512x512), high (1024x1024), to full (2048x2048). For memory conservation purposes, high resolution textures are not recommended unless explicitly required.

The tile parameters allow you to determine the number of times a texture is repeated in the X or Y direction.

The wrap mode configures how the repeating is handled. Repeat mode simply repeats a texture as normal, mirror mode does a seamless mirrored repeat of the image, and clamp mode propagates the image boundary's colors past the edge of the image.

Tri-linear filtering smooths out textures when they are viewed from grazing angles. Lastly, reset will remove the actively selected texture from the material, restoring it to it's initial state.

The Texture Library

Within the texture library, one can choose from the set of built-in starter textures that come with Verto Studio 3D, or select one from their own photo library. Additionally, on devices with cameras, Verto Studio supports the capability to take pictures and use them as textures on the fly.

The user texture library contains the textures that have been imported into the current scene document.

As a shortcut, when importing images directly from the internet web browser, tap-and-hold any image on a web page and select “copy” to copy that image to the clipboard, then within Verto Studio, tap the clipboard icon on the blue object bar and select “paste” to immediately copy that image into the texture library.

All textures added go to the user space of the texture library and are saved into the scene document for portability. To conserve memory, when a texture is no longer needed, remove it from the library by swiping over it and tapping delete. Light Properties

Selecting a light and tapping the sphere button will display the light’s properties screen. At the bottom, the familiar diffuse, highlight, and ambient options are available. These determine how much of each of the respective types of light are emitted by the light.

The light's position (X, Y, Z) is also editable. Also, attenuation is editable. Attenuation affects the light energy's falloff with distance from the light. Constant, Linear, and Quadratic attenuation factors are available.

The light can be set to one of three types: point light (default), direction light, and spot light. Point lights radiate energy uniformly in all directions (like a spherical light bulb), direction lights radiate light from an infinite distance in a given direction (like the sun), and spot lights emit light in a single direction in the shape of a cone. A spot light is illustrated below. Example of a spot light emitting red light on a shiny surface

Shaders

In version 2.0, Verto Studio 3D's graphic system was rewritten from the ground up to support a more versatile mechanism of 3D rendering called shaders.

A shader is a mechanism used by the GPU of a modern tablet or computer which performs all the grunt-work of rendering a 3D object to the screen. It allows efficiently and flexibly processing the vertex & polygon data of a mesh to create very interesting and sometimes more realistic 3D renderings in real-time that are far more powerful than the “default” shader which performs basic lighting.

Previous to version 2.0, the only shader available was the default shader which is called “Gouraud”. This shader utilized ambient, diffuse, specular, and emissive parameters to produce a cheap “plastic-like” rendering of a surface complete with basic texture mapping capability. Now, along with this default shader, Verto Studio provides a set of its own built-in shaders that you can set for any material. These shaders allow you to achieve rendering effects beyond the scope of basic texturing and lighting and you should feel free to explore and experiment with them to see what kind of renderings and effects you can make. It’s also worth noting that excepting the default shader, not every shader uses every input from the material settings (such as ambient, emissive etc) or from every light (some shaders only utilize the first light in the scene).

The list of shaders supported in Verto Studio 2.0 are below Gouraud

Gouraud is the default shader for devices older than iPad Air and iPhone 5s. It performs lighting at every vertex. It is the fastest (and ugliest) shader and was the default for all objects prior to Verto Studio 2.0

Phong

Phong is a high-quality shader which performs lighting at every pixel instead of at every vertex. It’s image quality comes at a performance cost that is more noticeable on older devices. Phong is the default shader for devices since the iPad Air and iPhone 5s. It utilizes all material inputs and lights in the system and is fundamentally equivalent in capability to Gouraud except it has much higher rendering quality.

Bump Map

Bump map is an advanced shader which takes lighting information not only from surface normals, but rasterized normals in the form of a bump map (also called normal map). These normal maps are special kinds of textures that can be found in many places including on the web. This shader utilizes all material inputs and lights in the system and is fundamentally equivalent in capability to phong except it has a higher rendering quality.

The bump map texture input does NOT come from the default texture map assignment in the material, but from the shader uniform inputs section of the shader selection pane. It is worth noting that all advanced shaders that require additional inputs will expose those inputs to this section and must have those inputs set to function correctly. In the case of the bump map shader, simply tap the “bumpTexture” input and then proceed to select a valid bump map texture. The “bumpScale” input is used to provide an independent tiling scale of the bump texture.

An example of a valid bump map texture Cartoon

The cartoon shader provides a cartoon-like rendering which was popularized in gaming during the early 2000's. It simplifies the phong lighting model to include just 4 colors as a shading output. If texturing is desired, this shader will look best when combined with cartoon-like texture maps.

Reflective Environment Mapping

The reflective environment mapping shader produces a rendering that simulates a mirror-like reflection of an environment (cubemap texture). This rendering effect was popularized during action movies in the early 90s. For more information on cubemap textures, refer to the cubemap texture section within the environment mapping section.

Refractive Environment Mapping The refractive environment mapping shader produces a rendering that simulates a glass-like refraction of an environment (cubemap texture). For more information on cubemap textures, refer to the cubemap texture section within the environment mapping section.

Reflective & Refractive Environment Mapping

This shader combines the two previous techniques into one with a mixRatio input which defines how the two effects are combined.

Ward Simple BRDF

The Ward Simple BRDF shader provides a simple implementation of the ward BRDF (bidirectional reflectance distribution function) lighting model characterized by inputs α and ρ) which define the shininess of the surface in two separate directions (tangent to the surface).

Multitexture The multitexture shader allows you to define a second texture which is mixed with the existing main texture set by the material. This type of effect helps combat unrealistic effects that result in repeatedly tiling one texture many times over a surface. For this shader to function optimally, both textures must be set (the main texture, and the “secondaryTexture” input to this shader).

Depth render

The Depth Render shader renders the depth coordinate of the surface to grayscale. Further depth values result in brighter pixels, and closer depth values result in darker. On it's own, this shader is not very interesting. However, combined with other renderings (through use of the multipass render pipeline system), this can be used to produce interesting composited renderings.

Grid Snapping

Verto Studio 2.3 introduces the ability to snap objects at their local pivots, and selected primitives to the grid, or to any vertices, faces, or edges in the scene. This feature works by immediately snapping the selection to the nearest grid location upon releasing the selection of the object after a translate, rotate, scale, or grip-grab.

To enable one of the snapping modes, simply toggle its the respective button within the Dots Menu. Object pivots themselves can be snapped as well allowing you to snap an object’s transform pivot to its outer faces, edges, or vertices.

Constructive Solid Geometry (CSG)

Verto Studio 2.3 introduces the experimental CSG feature allowing you to intersect, union, subtract and chisel objects from each other in object mode. To use this feature, simply place one object overlapping another’s bounding box, and select Union, Intersect, Subtract, or Chisel from the CSG Menu. Your selection will be replaced with the resultant object. In desktop mode, you can use the CSG menu to change the CSG mode from overlapping objects to selected objects as well. A few very important caveats regarding CSG are below.

CSG requires very low polygon counts. The default resolution of many Verto Studio primitives such as the sphere (24x24) are way too high. Lower them greatly before using CSG on them. If CSG is ran on a mesh that is too complex, it will likely fail.

CSG currently produces meshes that are no longer watertight or manifold due to t-junction cracks. Thus, further editing functions such as adjusting normals, reducing polygon counts, etc will likely produce incorrect results on them.

Edit Mode

Edit mode begins once you select an object and tap the "edit" button on the blue toolbar. Edit mode allows you to edit mesh objects at the vertex-level. Once edit mode begins, the selected mesh will render in wireframe, exposing individual polygons and vertices. Within edit mode, a second green edit toolbar appears at the bottom of the screen which contains several functions to aid in mesh editing. The edit toolbar is explained in detail in the following section. It is important to note that while in edit mode, most of the features of blue toolbar will continue to function, this includes the add button, undo, all of the tools, duplicate, etc.

The Edit Toolbar (green)

The items in the edit toolbar are explained as follows (from left to right)

• The vert count • Shows how many logical vertices (V) and faces (F) make up the current mesh. Tap this label to toggle between display of many logical vertices and actual vertices (A). Actual vertices are the actual number if vertices used in graphics hardware to accommodate the mesh as designed. Features such as flat shading will increase the number of actual vertices that are required for a mesh. • Edit selection mode • The edit selection mode can be set to either vertex mode or face mode. Vertex mode is the default mode and allows editing at the individual vertex level. Face mode allows editing at the triangular/quadrilateral face level. The edit selection mode affects how the wireframe is rendered as well. • Opacity mode • This selector affects the opacity of the wireframe rendering. Setting it to translucent mode will allow background vertices (or faces) to show through and be selected. When the mode is opaque, only visible front-facing elements will be selectable. • Mesh options button • Displays the mesh options. Currently two options reside here: the ability to set a model's shading mode and to toggle the rendering of surface normals. If surface normal rendering is enabled, either vertex or face normals will appear (dependent on the current edit selection mode). • Element operations • Depending on what is selected, this button will display vertex or triangle (face) operations. The triangle options may be one of (subdivide, flip, create new, texture coordinate editor, smooth, select connected, assign to material group, split quads, and separate). Currently the only vertex operations are weld and select connected. See the mesh and element operations section for more information. • Extrude button • Brings up the extrude tool for extruding faces and edges. See the mesh and element operations section for more information • Selection button • A handy shortcut for select all and select none. • Done button • Ends edit mode and returns to object mode. Mesh and Element Operations

Set smooth/flat

Meshes in Verto Studio 3D can be rendered using smooth shading or flat shading. Flat shading uses only the flat face normals to light the object, whereas smooth shading uses a weighted average of these face normals at each vertex. The set smooth button enables 100% smooth shading throughout the model. The flat shading option is explained below.

Flat shading can be done for some or all of the edges in the mesh. This is determined using the minimum angle between surface normals at each edge. Setting the angle lower will result in more flat shading, whereas setting it higher will result in less. A value of 0 degrees will result in 100% flat shading. The default value of 45 degrees will look natural in many situations. Both the face and vertex (surface) normals can be visualized by turning on surface normal rendering in the mesh options.

The special “only for texcoords” check allows you to provide special texture coordinate edges that appear smooth, but provide a separate set of UV-coordinates on each side of the edge. This allows for advanced texture mapping that would otherwise not be possible.

Examples of flat shading and face normal visualization. Reduce Polycount

This powerful feature allows you to dynamically reduce the amount of polygons in your model by a percentage of the original. To use it, there must exist only one material group, and all quads must be removed (via the split quad feature). To get around the first constraint, you can temporarily separate out irrelevant material groups, or assign all polygons to a single material group before removing the others. The original model is replaced, so care should be taken to duplicate copies of the model if keeping the original mesh is desired.

Note: The reduce algorithm will not work on faces that contain logical (multiply joined) vertices. This is done to preserve important flat-shaded model features and texture mapping junctions. In the event that the desired reduction is not achieved, try using various combinations of the “set smooth” and “merge doubles” features first.

Element Operations

Element operations work on either faces or vertices. The element operations button will become active and change it's title depending on the current selection and the operations that are available for that selection. The possible operations are listed here.

Subdivide

Subdivides triangular faces into 3 equally divided smaller faces and quadrilateral faces into 4 equally divided quads. It is a common technique to increase model complexity by performing a subdivide operation followed by a smooth operation. A triangular face (left) and it's equivalent subdivision (right).

Be aware that repeatedly subdividing large meshes requires significantly more memory and device resources.

Flip

Reverses a face's vertex order. This is useful when a flipping of the faces normal vector is desired to achieve consistency for mesh lighting. The perceived result will be that of the face turning towards the opposite direction (either away or towards the light).

Create New

Available when exactly 3 or 4 unassigned (free) vertices have been selected. Creates a new face using the selected vertices and adds it to the currently edited mesh.

Assign to material group

Available when the currently edited mesh has more than one material group. Assigns the current selection to a new material group, removing its membership from the existing group.

Split quads

Splits up selected quadrilateral faces into equivalent two-triangle panels (also described as as triangulating the mesh). This feature will improve rendering efficiency on graphics hardware and is recommended when quadrilateral faces are not particularly required for modeling.

Separate Separates the selected mesh into a new distinct model. Useful for splitting very large complex models into smaller models to improve rendering performance and overall responsiveness during edit mode.

Texture Coordinate Editor

Enables editing of texture coordinates for meshes that have been assigned texture mapped materials. Precise texture mapping allows usage of all editing tools (auto, move, scale, select, pan) to modify texture coordinates as desired from within the texture coordinate editor view.

Texture mapping presets are also available and consist of spherical mapping, box unwrap, and screen projection modes.

Smooth

Performs one iteration of the laplacian smooth operator on the selected faces. This operation will smoothen surfaces by averaging vertices with neighbor vertices. Works well when paired with the subdivide feature to increase mesh resolution. To ensure consistency of the mesh, smooth should only be applied to well-formed (connected, non-intersecting, seamless) meshes. Extra caution should be exercised when smoothing large meshes due to excessive memory consumption. The extrude options screen and the result of an extrusion operation on a simple mesh

On the iPad2 and other devices with multi-core CPUs, this routine is accelerated using parallel processing techniques.

Select Connected

Selects all vertices or faces that are contiguous with the current selection. Useful for selecting large mesh groups within multi-group meshes.

Weld (vertex only)

Weld essentially merges two vertices into one. All faces involved in the weld are properly merged and reconstructed. This is useful for situations where a gap exists in the mesh that you wish to close. In this circumstance, one would weld each of the vertices in the gap to bridge it.

Merge Doubles

When working with badly-formed imported models that have duplicate vertices, you can select all vertices, and then use the merge doubles feature to unify them. Upon completion, multiple merged vertices will be joined as single logical vertices. To truly physically complete the merge (such that it will hold up even when exporting to other file formats), you can follow the merge with a “set smooth” operation from the mesh options. This feature only operates on vertices that are identical in position.

Extrude

The extrude tool allows for the rapid creation of new faces through the extrusion of selected edges and faces. The tool is used by selecting a series of faces or vertices and tapping the extrude button. A panel containing parameters for the extrude operation will appear. Among the parameters are extrusion depth, direction, and cap- off. Depth will determine the amount of distance the extrusion will be from it's emanating position. Direction (X, Y, or Z) determines the axis the extrusion will occur. Lastly, cap-off determines whether or not surface faces (ones not making the the outer edge of the body) are created as part of the extrusion result.

Due to the disruption of the internal mesh structure, an extrusion operation will cause flat shading to reset to smooth. To regenerate the flat shading mesh, simply follow the final extrude operation with a "set flat" operation as well.

Advanced Techniques

Environment Mapping

As discussed in the Shaders section, Verto Studio 3D provides built-in capability to perform environment mapping through the usage of the “reflective environment mapping” and “refractive environment mapping” built-in shaders. Environment mapping is a technique that simulates perfectly reflective or refractive surface types such as mirrors, glass, and water. It can also be used to implement the Skybox rendering effect mentioned previously as well. The most popular form of environment mapping done on modern graphics hardware today is called cubemapping.

Cubemaps

Verto Studio’s built-in environment mapping shaders utilize cubemaps to perform environment mapping. Cubemaps are special kinds of textures which are actually built out of 6 separate 2D texture images. Each of these 6 images represent one face of a virtual cube, aligned with the positive and negative directions of the 3D axes X,Y and Z. The six faces in order are, X+ (positive X), X- (negative X), Y+ (positive Y), Y- (negative Y), Z+ (positive Z), Z- (negative Z). Each of these images represents a 90º camera angle view of the scene facing in one of these specific directions. For these reasons, cubemap textures typically cannot be just “any old 2D texture”. In the real world, cubemaps are usually obtained by using a special camera set with special wide angle settings. Once generated, they are usually saved in 6 separate images named after the axis directions (“pos-x”, “neg-x”, etc).

In the virtual world, cubemaps can be obtained by rendering a 3D scene facing all 6 directions using 90º fov angle. For more on this, see the next section.

For shader inputs and skybox inputs that require cubemaps as their input, you must define and set each face of the cubemap properly for the environment mapping effect to work.

When defining cubemap face inputs, be sure to define them in the proper order, making sure you don’t miss any. Also be sure to use the same texture settings “such as quality” for all 6 faces.

Because defining cubemaps can be somewhat tedious, Verto Studio includes a set of stock cubemaps, that when selected, will populate all 6 faces of the cubemap for you. These cubemaps will help you quickly test and display your environment mapping effects. To select a stock cubemap, simply tap the “Stock cube maps” button in the cubemap entry panel, and then proceed to tap any of the stock cubemaps shown in the stock cube maps panel.

Dynamic Cubemaps

Dynamic cubemaps allow you to generate and use environment maps dynamically captured from the scene. In other words, they allow you to simulate reflections between the mesh objects of your scene. They are obtained by rendering a 3D scene facing all 6 directions using 90º fov angle using a special camera setting. Anything present in the scene, including skyboxes, will be captured when rendering a dynamic cubemap.

The object type that does this for you, is called a “cubemap renderer” and can be added to the scene via the Add (+) icon on the top left blue object toolbar.

The options for a cubemap renderer can be displayed by tapping the object/material button (sphere) when a cubemap renderer is selected and are shown on the right.

Cubemap renderers usually are associated with environment mapped mesh objects that use them as their cubemap inputs. This way, the vantage point of the cubemap renderer and the object displaying the rendering are in agreement. To do this, press the “attach to mesh” button and then tap the mesh you wish to attach to. Once this is done, the cubemap renderer will embed inside the object and move with it. At this point a mesh- attached cubemap renderer can only be selected via the “Object list” or from the Render Pipeline Editor. To undo this attachment, simply press “clear attachment”.

It should be noted that because this object performs 6 more rendering passes through the scene each frame, you will notice a quite-severe lack in performance once you add a cubemap renderer object to complex scenes. To limit this performance hit, set the rendering update frequency to “Static” instead of “Dynamic”. In this mode, the cubemap rendering is updated only once (when the scene loads) or when “update now” is pressed. Naturally, the scene will no longer update the cubemap dynamically as object positions and properties change within the scene (which is the tradeoff).

The resolution of the cubemap renderer drastically affects the memory usage of the cubemap (as it affects the dimension of all 6 texture faces). It can be set from 64 to 1024.

Lastly, if you would like to “render” the dynamic cubemap to 6 static images for usage in other scenes or applications, you can use the “Export cubemap” feature. This will generate a zip file of all 6 faces for you and allow you to share it to cloud storage applications or email applications for quick upload to the internet. This feature alone, turns Verto Studio 3D into a creative cubemap environment map generator.

To utilize your dynamic cubemap, simply tap “Dynamic cubemaps” (under “Stock cubemaps”) in a cubemap input panel, and then select your cubemap renderer. An interesting, but usually unwanted, phenomenon known as cubemap renderer feedback can occur if an object utilizing a dynamic cubemap rendering, is itself, captured by the cubemap rendering. To avoid cubemap renderer feedback, Verto Studio automatically does not include the object the renderer is attached to in the rendering. For this reason, it’s a good idea to always attach the cubemap renderer to the object utilizing its output.

It is also generally a bad idea to use a dynamic cubemap as input to a skybox. Multipass rendering, Post-FX Processing, and the Render Pipeline Editor

In the world of modern computer graphics, it is usually very difficult to obtain realistic renderings in just a single rendering pass (ie without the use of post-processing). For this reason, Verto Studio 2.0 added the ability to do post-processing through the introduction of the Verto Studio Post-FX system and the Render Pipeline Editor. This editor, allows you to visualize and see every step of the rendering pipeline that your scene follows during rendering, and to fundamentally change it to obtain powerful post processing effects.

To display the render pipeline editor, simply swipe-down from the top edge of the screen. Alternatively, you can tap the “render pipeline editor” shortcut from the view settings panel (camera button).

Every box or circle displayed on this screen represents a rendering node. Rendering nodes are simply visual representations of different stages in the rendering pipeline. They can have inputs, and outputs, which are represented as arrows in the rendering graph. Multiple pipelines can exist and cross paths, ultimately leading to a rendering to the screen. Typically, the most basic rendering configuration consists of a single pipeline, the main pipeline. This pipeline consists of the “Main” rendering pass node, and a “Screen” node. This represents a single rendering pass of the scene, to your device display. Render Node Types

Scene Rendering Pass (Root Node)

A scene rendering pass performs one rendering of the entire scene, including all meshes and objects, lights, shaders, etc. It is referred to as a root node because it is the first stage in a rendering pipeline and it does not require any other node inputs.

Rendering passes define the beginning of a complete rendering pipeline. Because a scene rendering pass performs an additional rendering of the entire scene, they come at a large performance cost. For this reason, their outputs should always be utilized.

Post-processing Pass (Post-FX Node)

A post-processing pass performs additional processing on the framebuffer (pixel-image) output of a previous node in the pipeline. Because it operates on a previously-captured image of the scene or prior post-fx pass, it does not incur as much of a performance penalty as a scene rendering pass. These nodes always require at least one input. The behavior of a post-processing node is highly dependent on its type.

Currently, Verto Studio 3D supports the following types of post-fx nodes:

• Add • Subtract • Multiply • Divide • Screen • Overlay • Bloom Blur • Custom

With the exception of “Custom” and “Bloom Blur”, all of these post-fx node types are built-in operators which perform simple compositing of two inputs.

The “Bloom blur” only requires one input, and performs a special bright gaussian blur which is best suited for the “bloom” effect used by modern games during HDR rendering.

The “custom” type is a special node that allows you the powerful capability of writing your own post-fx shaders from scratch using glsl (see the Shader Programming Guide section). Screen

The pale-blue “Screen” node is always present, and is the only rendering special destination node that doesn’t actually represent an additional rendering pass. It’s displayed to show you where your rendering ultimately is going, which is to the display of your device (what you see on the screen). Naturally, this node can have no outputs.

The Main Pipeline

As mentioned before, in a scene, multiple pipelines can exist and cross paths ultimately leading to a rendering to the screen. Every scene must contain one unique main rendering pipeline, and therefore every scene must contain a main root node, leading to a screen node. All nodes in the main rendering pipeline are colored cyan. All nodes in alternative rendering pipelines are colored white.

When the entire rendering pipeline (all pipelines) are being rendered, the main pipeline is always rendered last, after all alternative pipelines complete. Thus, in the Verto Studio rendering system, all rendering pipelines should funnel their inputs towards the main rendering pipeline, and not the other way around.

Adding Render Pipeline Nodes

To add a scene rendering node, press the Add (+) symbol in the upper left hand corner. This will begin a new alternate rendering pipeline rooted at your new node. This node, or any of its post-stages can be fed as input to any post-fx node.

To add a post-fx node, tap any rendering node and select “Add post-processing pass”, followed by the desired type of post processing.

Defining inputs

When you add a post-fx node, the first input to the node is already set for you. If that node only has one input (such as bloom blur), you will be finished. However, for nodes that require a second (or more) input, you must define the input yourself. Nodes with missing inputs are considered incomplete, and will be rendered red. To rectify this, tap the red node, and select “Input properties”. Then select the desired input to define, and select “use pass rendering output”. Lastly, select the name of one of your other previous pass renderer nodes to use as the input. Because it is extremely inefficient, the render pass system does not allow you to define the same pass renderer input twice for a post-fx stage input.

Inputs are shown on the render pipeline editor as arrows between nodes. Solid arrows show the direction that the rendering pipeline takes. If a rendering pass node’s output is used a second time, then this utilization is visualized using a dotted arrow, signifying that the connection is there, but does not directly affect the dependency ordering of the rendering.

Configuring pass renderer output

With the exception of the final node of the main pipeline, all render pass nodes generate a texture image which can be utilized throughout the rest of the system. The size and format of this texture image is configurable. To configure the pass renderer output, tap the node and select “Output properties”.

Within this panel, you can define a specific resolution of the texture image that this pass renderer node generates. Leaving “same as display” will provide a screen-native size which will dynamically update when the scene is ran on other devices (phone vs tablet) and when the device is rotated to portrait vs landscape orientation. Setting the resolution to lower values such as 256x256 or 512x512 will make this stage perform downsampling during rendering. It is strongly advised to not set the resolution to values higher than the native screen resolution of the device.

Pixel format allows you to define the format of the pixels stored in the texture image. Unsigned byte, the default, uses 8-bits per RGBA channel (32-bit pixel). Float (floating point) uses a 16-bit half-precision floating point value per RGBA channel (64-bit pixel). On desktop systems, the float setting will provide 32-bit single-precision per RGBA channel.

Texture filter determines how pixels are displayed when the texture is over-sampled (blown up) larger than its intended size. Nearest will cause a “blocky” interpolation whereas linear will cause a smooth one. The default value of “nearest” should be used if the image is going to be used at screen-native resolution.

The pass properties window also displays the pass index number at the top. This number is useful only when doing custom shader programming as it identifies to the shader which pass is currently being rendered. See the shader programming guide for more information. A Render Pipeline Example

The following example shows a utilization of the render pipeline editor to perform a HDR-like bloom effect which shows bright regions of the image as over-exposed bright areas. Shader Programming Guide

Verto Studio 3D runs on top of a highly-customizable graphics system. This system supports development of custom shaders directly within the app.

Verto Studio shaders are written in the same OpenGL shading language that production games and graphics systems use (GLSL language), and even some of the built-in shaders that come with Verto Studio were actually developed entirely within the app itself. This capability gives graphics and game developers the ability to create their own shaders from their mobile device and distribute them anywhere they want. Because these are production shaders, the resulting shaders developed with Verto Studio 3D’s shader builder can be exported and used directly in desktop and mobile games!

It’s important to state that this is guide assumes the reader has already a general understanding of both shader programming, and the GLSL language (version 130 on desktop and GLES 2.0 on mobile). Therefore, this is not a general shader programming guide, as there are hundreds of excellent resources on modern shader programming that can be found on the web. Instead, this guide is to familiarize yourself with Verto Studio’s OpenGL shader system and how to write shaders that work best within that system on both mobile and desktop.

Verto Studio’s Shading Language (loose GLSL)

Verto Studio’s shading language fundamentally is GLSL. More exactly, it is GLSL with a few very minor modifications to loosen the language differences between mobile and desktop versions. This was done for two reasons. One, to make it as easy as possible to port shaders from other systems to and from Verto Studio, and two, to support writing a shader once for the mobile and desktop versions of Verto Studio. This section will go over the principle differences between standard GLSL and Verto Studio’s GLSL.

Verto Studio’s GLSL is essentially desktop GLSL version 150.

GLSL code written and ran in Verto Studio is syntax-massaged to run on the underlying OpenGL system the app utilizes. On mobile, this is currently OpenGLES 2.0 (with eventual plans to move to GLES 3.0). On desktop, this is OpenGL 3.2 core profile. GLSL 150 style code is automatically converted on mobile to GLES 2.0 for you and you do not have to directly support this language. On desktop, GLSL 150 is ran natively. While it is not required to write portable shader code that runs without errors on both desktop and mobile, it is strongly recommended. Because code versioning and conversions are automatic, it is an error to add a “#version” line at the top of a Verto Studio shader! Do not do this, the system will automatically for you. The following rules exist to automatically support GLSL 150 style code on mobile devices running OpenGL ES 2.0 (again this is done automatically for you)

On mobile…. In a shader type You write… System converts to…

Vertex Shader in vec3 a; attribute vec3 a;

Vertex Shader out vec3 b; varying vec3 b;

Fragment Shader in vec3 b; varying vec3 b;

Fragment Shader out vec4 fragColor; nothing

Fragment Shader fragColor gl_FragColor

Fragment Shader texture(sampler2d, …); texture2D(sampler2d, …);

Fragment Shader texture(samplerCube, …); textureCube(samplerCube, …);

Any Shader flat, smooth, or noperspective nothing

On desktop… In a shader type You write… System converts to…

Vertex Shader attribute vec3 a; in vec3 a;

Vertex Shader varying vec3 b; out vec3 b;

Fragment Shader varying vec3 b; in vec3 b;

Fragment Shader texture2D(…) texture(…)

Fragment Shader textureCube(…) texture(…)

Verto Studio Shader Attributes

Because GLSL 150 does not support legacy fixed functionality inputs (such as gl_Vertex and gl_Normal), Verto Studio replaces these fixed functionality inputs with its own set of standard shader attributes. These are listed below. With the exception of position, declaring these attributes is optional and thus, you only need to declare the ones that you intend to use in your shader. Vero Studio Shader Attributes

Attribute name Description in vec4 position; The vertex position, recommended highp on mobile. in vec3 normal; The vertex normal, normalized. in vec2 texcoord0 The vertex texture coordinate. Recommended mediump on mobile. in vec3 tangent; The tangent vector, normalized. Only defined if “generate tangents” is enabled in the mesh options in edit mode. The binormal can be obtained by doing a cross(normal, tangent).

Verto Studio Shader Uniforms

Because GLSL 150 does not support legacy fixed functionality uniform inputs (such as gl_Material), Verto Studio replaces these fixed functionality inputs with its own set of system uniforms. By simply declaring these, the Verto Studio GL system will automatically populate them for you with the correct values when your shader is ran. Some other important built-ins such as gl_FrontFacing remain. Refer to the OpenGLES 2.0 reference card to see what OpenGL built-ins remain.

Verto Studio Shader Uniforms (these are all optional and must be declared exactly as shown with the uniform qualifier to be used, ie “uniform mat4 modelViewProjectionMatrix;” ) Uniform name Description uniform mat4 modelViewProjectionMatrix; A composition of the current model view matrix and projection matrix. uniform mat4 modelViewMatrix; The current model view matrix (composition of the object-space and view-space transforms). uniform mat3 normalMatrix; A transformation matrix suitable for transforming the normal vector without skewing it when a non- uniform scale is present. uniform mat4 modelMatrixInverse; An inverse of the model matrix (object-space transform inverse). uniform vec3 cameraPosition; The world-space position of the camera (viewer). uniform vec2 textureScale; A scale representing the tiling amounts for the current texture. Uniform name Description struct Material The standard material inputs as defined by the { current surface material. vec4 ambient, diffuse, specular, emissive; float alpha; float shininess; }; uniform Material material; struct Light An array of the maximum 8 lights in the system. { Each light has a view-space position, world-space vec4 position; position, reflectivities, spot parameters, attentuation vec4 worldPosition; factors, and a boolean constituting whether or not it vec4 ambient, diffuse, specular; is enabled. vec3 spotDirection; vec3 worldSpotDirection; float spotExponent, spotCosCutoff; float constantAttenuation, linearAttenuation, quadraticAttenuation; bool enabled; }; uniform Light lights[8]; //up to 8 lights uniform vec4 lightModelProductSceneColor; RGBA light model product color. Essentially this is the scene-computed ambient color. uniform bool textureEnabled; A boolean determining whether or not texturing is enabled for this surface. uniform sampler2D texture0; The texture sampler used for texture mapping for this surface. uniform vec2 renderTargetSize; The dimensions of the currently rendering pass- renderer output. uniform int renderPassIndex; The integer index of the currently rendering pass (see “Configuring pass renderer output” section of the Render Pipeline Editor section) Uniform name Description uniform float time; Perhaps the most interesting system uniform. Time is the time (in seconds) since the user has pressed the “fly-through” button to enable fly-through mode. It can be used to perform all sorts of animations within shaders. Currently, animation is only performed during fly-through mode.

In addition to all of the built in uniform variables described above, you can declare as many uniforms as the underlying hardware supports, and they will be exposed for you to the user interface so that users of your shader can define and edit them. A well- designed shader exposes its functionality to the user in the form of well-defined uniform inputs.

The Shader Builder Window

Now that the basics are out of the way, to create a new editable shader, simply click the add (plus) icon next to the shader selector in the shader properties panel. You will then be prompted to name your new shader. After this step, you will be presented with the shader builder window.

This window can be moved around the screen by dragging it with your finger. It will display full screen when the device is held in portrait, and a smaller size when the device is in landscape. When creating a new shader, you are presented with the default Basic lighting shader template. This will give you a basic starting point for developing your shader. To load other templates, press the gear icon on the shader builder toolbar (bottom). The shader builder supports editing both vertex and fragment shaders which can be toggled between by selecting their respective types on the toolbar.

As you work on your shader code, it will automatically be saved with the scene document. Additionally, to copy and entire shader between seen documents, simply press the clipboard icon on the toolbar and select “copy entire shader”. You can then paste the shader into another scene document and it will become available in the shader list for that scene.

When you are ready to test and run your shader, press “Build”. You should see your results update immediately for all surfaces that are utilizing your shader. If the build failed, the log will automatically pop up and tell you what went wrong. Shaders that fail to build will remain inactive until they the next time they are successfully built.

To delete an unwanted shader, tap the trash icon and confirm. You should be warned that deleting a shader is irreversible.

Custom Post-FX Shaders

As mentioned in the “render pipeline editor” section, a special type of post-processing rendering node called “custom” allows you to write your own post-processing effects using GLSL and the shader builder. These effects use only the fragment processor, and thus, do not have editable vertex shaders.

To create a custom post-fx shader. Tap a rendering node and select “add post- processing pass” and then select “custom”. Tap the custom node and select “edit” to be presented with the shader builder.

These special shaders allow you to access pass input images in the form of a texture and do whatever you want to generate the output to the next rendering pass or the screen. The example effect above, performs a simple sepia-tone on the pass input.

To develop post-fx nodes that utilize more than one input, simply declare a new uniform sampler2D with the special prefix “passInputTexture”. These special uniform inputs function as desired and will mark the post-FX node as incomplete until they are set properly. It may now become clear that all of the built-in post-FX operators in Verto Studio (add, subtract, screen, overlay, etc) were actually developed using the shader builder within the app itself. That same power is now yours.

The standard and post-fx shader systems in Verto Studio can be programmed to produce some highly sophisticated real-time effects such as depth-of-field focus blurring, reflective glass, parallax occlusion mapping, and more! You’ve read all there is to read. Get out there and start creating!

Verto Community

Verto Studio 3D has an integrated link to the Verto community which allows users to share information, tips, artwork, and even document scenes with each other. Users can upload rendered images directly from their iPad devices. Additionally, Verto Studio Mobile files (*.vsxproj) can be uploaded from your Mac/PC and shared with others in the community. Moving forward, this will be the place for users to obtain all information related to Verto Studio including tutorials, videos, example scenes and more. This is also the first place for news about upcoming releases and other product support direct from the developer. User contributions are always welcome! If you have not yet registered for the community, tap the “Verto Community” button on the main library screen and join today!