Shade  1.1

The latest update to Shade is now out! These are the new features that make it easier to use and much more powerful

Export Plugins

The biggest new feature in this version of Shade is the Export Plugin system. By default, Shade allows you to export your shaders to Codea and Unity. Now you can write your own plugins for Shade to export to any platform or game engine you like

A plugin consists of a Lua script and template files which transform the graph data into one or more shader files to be used by the target platform

How do you add them? Just drop the plugin into Shade’s Documents/Library/Plugins folder

This feature is available in to Pro users only

You can check out https://github.com/JohnTM/Shade-Plugins for documentation and example exporters. In a future article I will do a deep dive into export plugins and show how you can write one yourself

Multi-Select

A fairly major limitation of Shade was the single-selection for node editing. Now by using a hold and drag gesture you can select multiple nodes. They can then be moved, deleted, copied, duplicated and grouped

New Context Menus

Grouping

Grouping nodes can now be done via the dropdown menu or ⌘-G if you have a keyboard. You can also recenter the graph to show all nodes at once

Duplicate and Copy/Paste

Sometimes you need to re-use a section of a graph or want to copy some boilerplate nodes between shaders. With multi-select and duplicate this is now easy

Single-tap Context

Tapping on a selected node will instantly bring up its context menu, and tapping the canvas without a selection will bring up the canvas context menu. Long press still works but this is a nice quick alternative for power users

System-wide Undo/Redo

The undo system has been rewritten from scratch to be much more reliable and also makes use of the iOS 13 system-wide undo gestures (triple finger tap or swipe) 

New & Improved Preview Options

Fullscreen Mode

The preview panel can now be set to fullscreen mode, so you can see your shaders in glorious detail (really, they look amazing with the new HDR environments)

Environment

The Sunny and Night environment options have been removed to make way for Atmosphere, a physically based atmospheric sky dome. Sun angle, colour and intensity can also be controlled 

Custom HDR backgrounds can also be used by placing a .hdr image in Shade’s Documents/Library/HDR folder to take advantage of Image Based Lighting (IBL)

Exposure options have been added to adjust both the environment brightness as well as an exposure-based tone mapping option to give more control over the look of previewed shaders (especially useful for beauty renders)

Custom Models

Custom models can be used in the preview viewport by placing them inside Shade’s Documents/Library/Models folder. Currently .fbx, .obj, .blend, and .stl formats are supported

New Nodes

Tiler & Tile Data

Using the Tiler node to create a brick pattern

Inspired by the various tiling nodes in Substance Designer, the Tiler node is designed to make creating seamless tiled textures as simple as possible

The Tiler node takes in both height and colour information in the form of a background input (to blend on top of) and a pattern input to stamp in various places. The pattern itself is an expression, which can vary depending on where it is placed (via the Tile Data node)

There are built-in options to control the pattern placement, scale, rotation and random variations. Optional inputs allow you to vary each tile individually using nodes (scale, position, rotation, height and so on)

Tiler nodes can also be daisy chained together to layer various details together. A future post will deep dive into the Tiler node workflow

Ambient Occlusion

Create realistic looking PBR effects with Ambient Occlusion. Realtime or baked!

In the Physically Based Rendering (PBR) workflow, indirect lighting has become an important part of making surfaces look realistic and appealing. Shade can now generate AO maps directly from height and normal information using the Ambient Occlusion node

Curvature

Using the Curvature node to create worn edges on some painted metal

The Curvature node is useful for mapping sharp convex and concave regions within a surface which can then be used for various weathering and roughness effects

Parallax Offset

Parallax Offset is useful for creating a simple parallax effect within a shader for things like holes, highlights and translucent crystalline materials

New Workflow

With the addition of the Tiler, Ambient Occlusion and Curvature nodes, it is now much easier to create PBR-style texture maps for use with game engines, rather than just Shaders. The .shader bundle format that Shade uses contains all exported maps in png format, which can then be used in whatever engine you wish (via iCloud, zip export, Unity export, and so on)

Below are some examples of materials created with the new nodes

New Image Formats

Initially Shade only supported 8-bit RGBA images for all baked textures. Now there is support for RGBA, Grayscale and RGB textures with both 8-bit and 16-bit precision. This allows for better use of available GPU resources and more detailed height maps for normal, curvature and AO generation

Bug Fixes, Stability & Performance Improvements

With this release many bugs have been found and squashed, various problems with the graph system have been reworked, and some performance issues have been identified and fixed. Obviously there are going to still be some issues, but we’re going to fix those as well

Future Updates & Roadmap

Shade 1.1 represents a considerable jump over 1.0.1, but there’s more to come. Here are some of our plans for the future of Shade

Short Term

More Sensor Nodes

We have a microphone node but want to add some more ways for you to get your device’s sensor data into your nodes

  • Camera (front and back)
  • TrueDepth Camera (depth sensor)
  • Accelerometer
  • Gyroscope
  • Magnetometer
  • GPS

In-Editor Export Option

The ability to export directly from the shader graph editor, rather than needing to leave first

Map Exporter

The ability to tag baked images (albedo, height, etc) for quick export to third-party engines

Screenshot Export

Export a full sized screenshot of the entire node graph

Mid to Long Term

Graph Annotations

Make use of Apple Pencil so you can fully annotate the canvas to leave freeform comments

Custom Lighting Input

A new Surface Node input allowing for customised lighting equations

Function Graphs & Sub-Graphs

The ability to create and edit sub-graphs that appear as a single node. These would allow for more reusability and sharing within the community

Custom Node Plugins

Fully custom user nodes written in Lua

Graph to Graph Import & Export

An interface within the Export Plugins system to facilitate graph to graph export and import (i.e. Unreal/Unity shader/material graph interoperability)

Switching from Open GL ES to Metal

Shade is built on top of Codea, our iOS-based coding app. We plan to move both these apps to a new Metal-based runtime engine

We’ll see performance benefits, proper support for volume textures, compute shaders, new image filters such as flood fill and connected components. As well as potential support for hardware tessellation in the preview viewport

You'll get new posts delivered to your inbox and the occasional update