画像をGLSLで編集できるShadronの紹介

こんばんは。@rootxです。
この記事では、画像編集などをGLSLを使って行うShadronというツールを紹介します。

------

今年もGPUで暖をとる季節がやってきましたね！！＞＜
さまざまなGLSLデモを見始めると一気にGPUコア温度が上がり始めますが、温度が上がる様子を見ることでテンションもアガリますね↑↑

（参考）GPU温度を監視するにはフリーソフトを入れるのがお手軽かと思います。今回のWindows環境では[OpenHardwareMonitor](http://openhardwaremonitor.org/)を使っています。

![OpenHardwareMonitorGpuTemp.PNG](https://qiita-image-store.s3.amazonaws.com/0/18711/f600236f-ae8d-c97a-eca8-f21d210fa21f.png)


------

はじめに
==================

## Shadronとは

Shadron（シェードロンと読むらしいです！）は、GLSLで描画できるプロシージャルな画像編集ツール（有償）です。
公式サイトの言葉を借りると、"procedural asset generator and editor" とのことです。
※注意： 現在(2016/12/03時点)はWindows用しかありません。……が、Windows版の売れ行きによってはOSX版も提供する意思があるそうです。……QuartzComposer？ 知らない子ですね。（QuartzComposerのGLSLパッチのWindows版というイメージが近いです）

### Shadronでは、どんなことができるのですか？

- [x] GLSLによる画像編集
- [x] 画像生成
- [x] アニメーション生成（連番エクスポート
- [x] 環境マップ構築
- [x] 3Dモデル構築
- [x] テクスチャ生成
- [x] マテリアルデザイン
- [x] パーティクル
- [x] 音声生成
- [ ] （注意）直接の動画出力は不可（連番ファイル出力は可能です）
- [ ] （その他）スクリプトのライブラリ化が可能(#includeできる)
- [ ] （その他）スクリプトで定義したパラメータのGUI表示。

言葉で説明するよりも動画を見たほうがわかりやすいですね＞＜

[![Shadron Introduction](http://img.youtube.com/vi/NefbthPVJAs/0.jpg)](http://www.youtube.com/watch?v=NefbthPVJAs)


Shadronで何ができるか、だいたいわかったかな？！？ わかったよね。
ちなみに最初に現れたロゴ画面もShadronで作られているんだよ！すごい！


Shadronをつかってみよう
----------------------------

ShadronではGLSLを独自のShadronスクリプト（仮称）に記述します。
ここではShadronのアプリに含まれるサンプルを動かしてみましょう。Shadronには、おおよその機能を網羅したサンプルが付属しています。
サンプルフォルダはShadronのインストールディレクトリのExampleフォルダに存在しますが、Steam版の場合は少し分かりにくいです。ショートカット`Alt+F1`でExampleフォルダを開けるようです。。。が、私の環境の場合、他のショートカットと競合して動かなかったのでパスを示します:（Steam版の場合）`\Program Files (x86)\Steam\steamapps\common\Shadron`

Exmapleフォルダには次のようなサンプルがあります。
#### 付属のサンプル
- billboard.shadron :: 一枚板にテクスチャ
- cube.shadron :: 立方体にテクスチャ
- cubemap.shadron :: キューブマップ
- diamonds.shadron :: ダイヤモンド風の画像生成
- game-of-life.shadron :: 入力画像でライフゲーム
- heightmap.shadron :: ハイトマップ（輝度を高さに見立てた形状の生成）
- julia.shadron :: ジュリア集合
- loading-animation.shadron :: 一枚板にテクスチャ
- mandelbrot.shadron :: マンデルブロ集合
- material.shadron :: Defferedの画像4枚を与えてレンダリング
- mosaic.shadron :: 画像のモザイク（ステンドグラス風に変換する）
- multipass.shadron :: マルチパスレンダリング
- noise.shadron :: ノイズのサンプル
- particles.shadron :: パーティクル表現
- sphere.shadron :: 球体
- synth.shadron :: 波形によるサウンド出力
- wave.shadron :: 波っぽい画像の生成
- white-to-alpha.shadron :: 輝度を透明度に変換


#### 基本操作

Shadronを起動すると次のようなメイン画面が表示されます。
![ShadronMainWindow.PNG](https://qiita-image-store.s3.amazonaws.com/0/18711/9dbbc9f9-f67a-f26d-7de4-a0148ae559a0.png)

メイン画面の上部に並んだ4つのボタンは、それぞれ次のような意味です。
- リロード（右クリックで自動リロードと手動リロードの切替）
- エクスポートの実行（エクスポート処理がスクリプトに書いてある場合だけ有効）
- パラメータリセット（ダブルクリック）
- ヘルプドキュメントの表示

では、Exampleフォルダにある`Cube.shadron`をメイン画面へドラッグ&ドロップして開いてみましょう。次のような画面になります。

![OpenExampleCube.PNG](https://qiita-image-store.s3.amazonaws.com/0/18711/ca5f4585-dabe-e9bc-d267-fd847168a84d.png)

Shadronファイルが読み込まれると、上記画像のように幾つかのウィンドウがさらに表示されます。右側には、実行結果を表すビュー（ビューア画面）が表示されてます。
さらに、shadronスクリプトに記載されたパラメータに応じて、メイン画面に数値のスライダが表示されたり、画像入力パラメータが指定されている場合は別ウィンドウ（画像左下図）が現れテクスチャ画像を受け取れるようになります。

それではテクスチャ画像をtextureと書かれたウィンドウにドラッグ&ドロップしてみましょう。

![CubeSetTexture.PNG](https://qiita-image-store.s3.amazonaws.com/0/18711/cd5e47cf-0048-ffca-74d5-23774b952051.png)

ビューア画面がテクスチャテクスチャが貼られてしまいました！　やったね！
メイン画面にあるスライダを動かして、Shadronスクリプトにあるパラメータ（ほぼGLSLのUniformパラメータですが）を操作することができます。残念ながら、マウス入力は拾えないので、ぐりぐり動かす（OrbitControl）ようなことはできません。後述のCommunityでどなたかが機能追加リクエストをしていたので、今後の処理に期待です＞＜；


#### 出力を保存するには？
単純な画像出力の場合は、ビューア画面からドラッグ&ドロップでPNG形式で保存できます。
そうでない場合は、*スクリプトにexport処理があれば*、メイン画面のエクスポートボタンで実行できます。

動画出力するには、連番ファイル出力が可能なので、各自でffmpegなどでやってね、という男前仕様です＞＜；
- Example for GIF
    - `ffmpeg.exe -f image2 -framerate 60 -r 60 -i "frames/frame%03d.png" output.gif`
- Example for video (MP4):
    - `ffmpeg.exe -f image2 -framerate 60 -r 60 -i "frames/frame%03d.png" -c:v libx264 output.mp4`


ここでは、サンプルの`white-to-alpha.shadron`（輝度を透明度に変換）を試してみましょう。
`white-to-alpha.shadron`ファイルを読み込み、適当な画像を`Input`画面に入れます。出力されたビューア画面をドラッグ&ドロップすると、このサンプルでは白色が抜かれた画像として保存されます。

保存結果のPNGはコレ↓
![Output.png](https://qiita-image-store.s3.amazonaws.com/0/18711/8221f447-0d00-621e-7613-b670120999b8.png)

わかりにくいですね。デスクトップのアイコン表示も示します。
![ExampleSaveOutput.PNG](https://qiita-image-store.s3.amazonaws.com/0/18711/6ca011eb-a938-cfc7-a7f4-6b1e13483312.png)


Shadronスクリプトの特徴
----------------------------

-　C++風`#include`やテンプレートが使える。
-　標準ライブラリに便利なnoise関数や定数が揃っている。
-　ライブリロード

**＜＜あとで追記＞＞**


導入とか
===========

## 購入方法

steam版とスタンドアロン版があり、steam経由の購入とスタンドアロン版を公式サイトから直接購入の2種類があります。どちらも機能的には同じです。

#### 1. Steam版(Steamから購入する)の場合
価格は、¥1,990でした (2016/12/03時点)
http://store.steampowered.com/app/524490/
自動アップデートされるのが便利かも。

#### 2. スタンドアロン版の場合
公式サイトから"Buy Shadron"
Paypal払いの $19.90 です。



その他のShadron情報
=========================

### 最近の開発状況
比較的活発にアップデートがされていて、先日、version 1.0.5にアップデートされました！　やったね！

#### 今後の計画？
redditのShadronタグでは次のようなコメントがありました。期待です！
- コマンドラインモード！
- サウンドファイル入力対応
- （できたら、mac版/linux版の開発）

#### (v1.0.5 <- v1.0.2)
- 連続画像をアニメーションとして読み込めるようになった
- キーボード操作に一部対応
- export宣言を任意のパラメータのサブセットに付与できるようになった
- パラメータは非表示で宣言されるようになった、画像やその他の構築と同じ。
- プリプロセッサの可変長マクロに対応
- TGA形式の画像フォーマットに対応
- フィードバックバッファが複雑なインタラクションを実現するために同期されるようになった
- フィードバックバッファもPNGやTIFFの連続画像として出力できるようになった
- 連続画像の出力はゼロ時間の場合に最後の画像を出力しないように修正
- アニメーションが初期フレームを画像として出力するように
- アドホックスクリプトの相対パスのファイル名は作業ディレクトリではなく、ユーザのホームディレクトリに変更
- 指定されたFPSをキープできないGPUの場合に、ラグって雪玉が出る問題を修正した
- 定義にマクロ自身を含んでいる場合にプリプロセッサにおけるスタックオーバーフローエラーを修正。
- その他の細かい修正

#### (v1.0.2 <- v1.0.0)
- 32bit浮動小数点の画像の読み込み、およびTIFFファイル出力に対応(full_range modifierを参照)。
- 画像読み込みのTIFFとGIFファイルの対応。
- modifierにhiddenを追加： 表示の必要のない中間出力用
- GLSL生成関数の必要なAPIが緩和され、幾つかの引数が削除されて、異なる型を返すように
- 新しいサンプルの追加： multipass - マルチパスを実現するための方法のデモ
- Alt+F1がサンプルのディレクトリを直接開ける（Steam版のユーザ向け）
- 高DPI設定での動作時のアピアランスを修正。
- ユーザ名に非標準文字が含まれる場合にアクティベーションファイルの保存時のバグを修正
- OpenGLが正しく実装されていない幾つかのAMDドライバで発生する問題を修正
- ファイルアクセスハンドリングの改善 特定のエディタと自動リフレッシュがコンフリクトする
- ライブラリ関数からswitch文を破棄しました。GLSLの仕様にないので。
- sizeofがcubemapで正しく動作し、intを返すようになりました。
- cubemapのファイル名指定の不具合修正
- スクリプトで指定された入力画像のリロードができないバグを修正。
- 大きなファイルを開こうとした場合にクラッシュする問題を修正
- 画像とアニメーションで、高さや幅がゼロになったり最大テクスチャを超えたりしないようになった。
- PNG出力のパフォーマンス改善
- その他の細かい修正。

### Shadron 関連サイト

[Shadron公式サイト](https://www.arteryengine.com/shadron/)
[steamのShadron ストアページ](http://store.steampowered.com/app/524490/)
[redditのShadronタグ（サポート用？）](https://www.reddit.com/r/Shadron/)
[YoutubeのShadronチャンネル](https://www.youtube.com/channel/UCOFwdyoC6v56d-z0oUarwOA)


# 所感
GLSLなどシェーダを活用したジェネラティブな画像生成ツールとしては面白いですね。
発展途上という感じは否めませんが、GPUを活用して暖をとりつつ、さまざまな加工ができる環境を簡単に用意できるので、次のような方にはオススメです。
> [GPU だけが俺の心を温めてくれる](https://connpass.com/event/44258/)


それでは良いGLSLライフを！
ではでは！＞＜