mardi 6 février 2018

Unity shader development on a tiny tablet, in the metro...


I am spending quite some time each day on public transportation, for my work/home commute.

There are several ways to use that time purposefully when you are a developer :
- read blogposts about code or gamedev (if you have a wireless connection on your phone/tablet. If not, go Instapaper or Pocket)
- read scientific PDF printed on paper (easier to deal with cross/back references for graphs and bibliography than following them on a screen. Especially if you scribble some BRDFs in the margins ;)
- develop on a tablet...

That last option is very tempting. I'm standing up nearly the whole travel up and commuting several times during the travel, so a laptop/netbook isn't a viable option. So the tablet is the way to go.

Shaders


I like to dabble with shaders in my free time. With code dedicated to graphical programming, you have a rapid feedback on what your are creating. Furthermore, (simple) shaders are somewhat limited in scope, so the end result can be displayed in a few sessions of code.
While Cg/HLSL/GLSL can be quite verbose, shaders and material are well suited to the visual programming paradigm : curves drawn across boxes, carrying the flow of the computation to the end result (usually displayed onscreen). It's already the usual workflow for technical artists that want to edit their materials and their favorite DCC tool (3DS Max/Maya/Blender...).

Unity has a few assets dedicated to visual programming for shaders. Shaderforge and Amplify Shader Editor are the more well known currently. I own a license for both, but Shaderforge support seems to go downhill while ASE is on the rise.

Amplify Shader Editor in Unity : illustrative shadergraph


The hardware


After settling on the app, with need a machine to let it run.
I was looking for the cheapest Windows 8/Windows 10 tablet, with at least 2 GB of RAM and the more 'powerful' CPU available (everything is relative), while staying under 100$, on which I could install Unity. I managed to find a Teclast X80 Pro for around 50$.



While having read mixed reviews on its mediocre wifi and its lack of support of high density micro-SD cards, everything else, hardware-based, seemed aligned with the price point.

Since the tablet has two OS (Windows and Android) installed on it, there isn't much space left for your own apps and data. I'm planning to mostly code shaders with it, so it won't be too much of a nuisance.

I installed a 32 GB micro SD card. I tested with a 64 GB one, but it wasn't properly recognized. It's something I need to clear out later. For the moment, I stick with a 'small' one, I don't want any data to be trashed out by a malfunctioning controller or bad driver.


The Wifi


The wifi is indeed bad. I have a router with whitelisting enabled for the MAC addresses allowed on my network. Although everything was properly set up, the tablet wouldn't access the wifi. I though 2 minutes about using a cheap USB wifi key (with all its dangling cables beauty...). However, after spending a few minutes with the windows peripheral manager, I noticed that some settings of the X80's wifi card were odd. After switching the Antenna Diversity to Enabled, the wifi was on and fully operational! I don't know in what measure it's specific to my model (or what's done from the factory for every tablet). If it doesn't work for you, you still have the wifi USB key solution.


Unity, ASE & interactions


I installed Unity 2017.1f on it, and started the IDE.
I created a new Unity project on the SD card, and imported the Amplify Shader Editor (ASE) in it.
While it's a great way to code shaders on the go, you will still encounter a few quirks when using using this setup.
For example, ASE is slow when clicking on the 'compile shader' button (but that was also true for me on my regular desktop machine...)

ASE opened in Unity, on  a Teclast X80 Pro
Other problems can be solved with a bit of creativity :


  • The keyboard

The click isn't precise on those small screens so you'll need the keyboard really soon to use the various keyboard shortcuts... 

However : the touch keyboard on windows 10 isn't complete. A few very needed key are unavailable (among them : F2, the quickest way to rename a file, isn't there. No 'Ctrl' nor 'Alt' nor 'Maj'...)
If you use this keyboard, don't forget to split it in the center, you will see what you are working on!

The splitted touch keyboard

You still have access to the 'Visual Keyboard' program, located in the Start menu. It's less beautiful and responsive than the Win10 on-screen keyboard, but you'll have access to all the keys. You won't be able to have opened, at the same time, both keyboards. You need to close one to see the other.

Visual keyboard, more complete
  •  Zoom
The pinch gesture to zoom is properly registered by Windows, but not by ASE. It is then currently difficult to move around the shader editor.
You need to move around the ASE canvas, you need to click-and-hold a moment to use the 'right mouse button', and then, without lifting the finger, you can move it around.
To draw a curve between two slots, you need to click once on the starting slot and very quickly click-and-draw the curve to the receiving slot.



Andromouse touchpad emulator
If a mouse is really needed, I modded a bit the setup. I downloaded Andromouse server (http://andromouse.com/) on the X80 and installed the app on my phone (https://play.google.com/store/apps/details?id=com.iandrobot.andromouse.free&hl=fr). After pairing the two via Bluetooth, I can move the mouse by using the phone as a touchpad. If you are in a situation where you would need to scroll when in front of a desktop computer, you can use the right side of andromouse client app for that (and zoom in and out of an ASE graph!). The soft keyboard provided by the app is also useful at times, but doesn't provide a 'print screen' key!


Another option is to install the TouchMouse Pointer for windows (http://www.lovesummertrue.com/touchmousepointer/en-us/) app and dock it on the right of the screen. You will have access to a 'fake' touchpad, for precise pointing, and a scroll area to emulate the mouse wheel. You have now the capacity to use complex gestures combining hold and scroll, for example!

TouchMouse Pointer, docked on right side of the screen

Conclusion


To conclude, I'm pleasantly surprised by the experience! I can try shaders on the go, at a very low cost. This small tablet won't be able to showcase all techniques available in shaders, but it's a good way to prototype something.
Don't forget to set up some kind of Git/Github/Gitlab repo, to exchange data with this tablet and your main machine !


What's next


This setup isn't constrained to shader development. Another thing to try would be 'flow programming' (Bolt, Flow Canvas or the likes) on the X80. Since it's not very convenient to code on a soft keyboard for a long time, it would be interesting to see if at least some basic app prototyping, to bootstrap a project, is possible with those visual programming tools.

It's a long post now, I'll then reserve another future post to showcase a few shader developped with this setup, while commuting !