【Unity】シェーダーを利用して音声波形を描く

f:id:setchi_q:20151025203335p:plain

今、広い範囲の音声波形を高速にリアルタイム描画する問題に取り組んでいます。

要件として描画対象の範囲をグリグリ変更できる必要があって、これまでLineRendererやGLによる描画を試みましたがどれも欲しいパフォーマンスに届きませんでした。

そこで、波形情報をテクスチャに埋め込んでシェーダーで描画する方法を試してみました。

AudioClipから波形情報を取得する

var audioSource = GetComponent<AudioSource>();
var samples = new float[audioSource.clip.samples * audioSource.clip.channels];
audioSource.clip.GetData(samples, 0);

で取得できます。
docs.unity3d.com

波形情報をテクスチャに埋め込む

描画領域の横幅 x 1サイズのテクスチャを生成して、色情報に波形データを埋め込んでいきます。
手抜き実装なので r 成分しか使ってませんが、rgba 全ての成分を使えばより小さいテクスチャサイズで実現できます。
また、1サンプルを1ピクセルに対応させるとテクスチャサイズが膨大になりすぎるので適当に間引きします。

public class WaveformRenderer : MonoBehaviour
{
    [SerializeField]
    AudioSource audioSource;
    [SerializeField]
    RawImage image;
    [SerializeField]
    int imageWidth;

    Texture2D texture;
    float[] samples = new float[500000];

    void Start()
    {
        texture = new Texture2D(imageWidth, 1);
        texture.SetPixels(Enumerable.Range(0, imageWidth).Select(_ => Color.clear).ToArray());
        texture.Apply();
        image.texture = texture;
    }

    void Update()
    {
        audioSource.clip.GetData(samples, audioSource.timeSamples);

        int textureX = 0;
        int skipSamples = 200;
        float maxSample = 0;

        for (int i = 0, l = samples.Length; i < l && textureX < imageWidth; i++)
        {
            maxSample = Mathf.Max(maxSample, samples[i]);

            if (i % skipSamples == 0)
            {
                texture.SetPixel(textureX, 0, new Color(maxSample, 0, 0));
                maxSample = 0;
                textureX++;
            }
        }

        texture.Apply();
    }
}

説明に余分なコードは省いています。実際のソースコードはここにあります。
NoteEditor/WaveformRenderer.cs at 21a1878556f1b492a7a9a150339512a6ba5330ca · setchi/NoteEditor · GitHub

このようなテクスチャが生成されます。
(実際は縦1pxです。見やすく縦方向に伸ばしています)
f:id:setchi_q:20151025202741p:plain

シェーダーで波形を描画する

フルソースはここにあります。
NoteEditor/Waveform.shader at a56ec2d55987a8f22c392bfe1739af87a9e97bc9 · setchi/NoteEditor · GitHub


重要なのは下記の部分です。
テクスチャの r 成分からボリュームを取り出して、自身のV座標がボリュームの範囲内なら緑、そうでなければ黒を出力しています。

fixed4 frag(v2f v) : SV_Target{
    float volume = tex2D(_MainTex, v.uv.x).r * 0.5;
    float uvY = v.uv.y - 0.5;

    return lerp(
        fixed4(0, 0, 0, 1),
        fixed4(0, 1, 0, 1),
        -volume < uvY && uvY < volume
    );
}

最終的にこのように出力されます。
f:id:setchi_q:20151025201359p:plain

良くなった点

GLで即時描画していた時は必ず毎フレーム更新する必要がありました。
この方法では波形に変化がなければ前に適用したテクスチャを使えるのでCPUの処理を少なくできます。

テクスチャに直接波形を描画するのと比べた場合、Y方向の展開はGPU側で行うのでCPU → GPUへのデータ転送量が削減できます。

【Unity】スクリプトからuGUIのEventTriggerへリスナー登録する拡張を書きました

f:id:setchi_q:20150727222736p:plain
uGUI要素へ特殊なイベントを登録する際EventTriggerコンポーネントを追加してインスペクター上からぽちぽちやっていくと思いますが、スクリプトから直接AddListenerできる拡張を書きました。

こんな風にイベントリスナを登録できます。EventTriggerが無い場合は自動的にAddComponentされます。

// 要 using UnityEngine.EventSystems;
button.AddListener(EventTriggerType.PointerUp, e => Debug.Log("PointerUp!"));

【Unity C#】Undo / Redoの実装

今Unityで音ゲーの譜面を作るエディタを開発していて、Undo/Redo の実装をする機会があったのでメモです。
f:id:setchi_q:20150716001544g:plain

今回はCommandパターンで実装しました。

UndoRedoManager.cs
NoteEditor/CommandManager.cs at master · setchi/NotesEditor · GitHub

 

ユーザが何か行動すると、それに対するUndoメソッド/Redoメソッドを内包したコマンドオブジェクトをマネージャに渡します。
NoteEditor/CanvasWidthScalePresenter.cs at master · setchi/NotesEditor · GitHub

 

マネージャは受け取ったコマンドをUndo用スタックにPushしていきます。
Undoの実行はUndo用スタックからPopして、コマンドのUndoメソッドを実行します。

RedoはUndoに対するUndo実装です。
NoteEditor/CommandManager.cs at master · setchi/NotesEditor · GitHub

【Unity】テクスチャを分割して個別に保存する

f:id:setchi_q:20150308174638p:plain


↑のような画像を等間隔に分割したくて、なんかUnityで動くスクリプト書きました。

まず対象の画像ファイルをAssetsフォルダに放り込みます。
スクリプトから画素値を扱うための設定として、ImportSettingsでTextureTypeを「Advanced」にして、Read/Write Enabledにチェックを入れる必要があります。
f:id:setchi_q:20150308184836p:plain

ImageSlicerスクリプトを適当なゲームオブジェクトにアタッチして、対象のテクスチャを選んで、縦横の分割数と保存先をいれます。
f:id:setchi_q:20150308175428p:plain
再生すると指定したディレクトリに分割された画像が保存されます。
f:id:setchi_q:20150308190104p:plain

(汚い)ソースはgistにあげました。

【n Back Tracer】リリースしました。

Unity習作2本目のカジュアルゲームをリリースしました。

次々と現れるパターンを記憶しながら、N個前のパターンを素早くなぞる脳トレゲームです。難しい選択肢を選ぶほど高得点を狙えます。

n Back Tracer - Google Play の Android アプリ
f:id:setchi_q:20150214171501p:plain

コードはGitHubに公開しています。

setchi/n_back_tracer · GitHub

【Kagaribi】リリースしました

Unity習作のカジュアルゲームをリリースしました。
火の玉を操作して白い枠をできるだけ多くくぐっていくシンプルなゲームです。
真ん中を通るのが高得点のコツです。

Kagaribi - Google Play の Android アプリ
f:id:setchi_q:20150208123110p:plain

コードはGitHubに公開しています。

setchi/kagaribi · GitHub

【Unity】手軽にHTTP通信する

Unityで手軽にHTTP通信するクラスを作りました。
Actionを使うので使用する側でSystemを読み込みます。

using System;

POSTではパラメータをDictionaryで渡すので下記も必要です。

using System.Collections.Generic;


UnityでHTTP通信するクラス

静的サイトジェネレータHEXOを試したメモ

http://hexo.io/
ブログといえば動的生成が当たり前だと思ってたんですが、静的ファイルに生成してデプロイする手法もあるらしいです。

静的サイトジェネレータにも色々あるんですが、普段良く使っているNode.js上で動くものにします。その中でGitHubスター数が一番多い(2014/11/27現在)、
hexojs/hexo · GitHub
を選びました。

インストールからデプロイまで、この記事が参考になりました。

個人的にハマった点

faviconの設定方法が分からん

テーマフォルダの中で設定できました。
僕はLightというテーマにしたので、

themes/light/source/

favicon.pngを置いて
テーマフォルダ内の_config.ymlに設定することで反映されました。

favicon: /favicon.png

DISQUSのコメント欄が反映されない

こんな感じになってしまう。
f:id:setchi_q:20141127105851p:plain
DISQUSのshortnameを登録していなかったのが原因でした。ここから登録できます。
Disqus | Register site

登録したshortnameを、プロジェクト直下の_config.ymlに設定します。

# Disqus
disqus_shortname: shortname

無事コメント欄が現れました。
f:id:setchi_q:20141127110538p:plain

プラグイン

ここでプラグインの一覧が見れます。
Plugins · hexojs/hexo Wiki · GitHub

導入したもの

FlashSoft/hexo-console-optimize · GitHub

HTML/CSS/JavaScriptをminifyして出力してくれます。

hexojs/hexo-generator-sitemap · GitHub

sitemapを生成してくれます。

jaredly/hexo-admin · GitHub

記事の投稿・編集ができる管理画面が使えるようになります。
f:id:setchi_q:20141127113447p:plain

左上のNew Postの挙動がおかしくて、_draftフォルダ内にタイトル名.mdは生成されるのだけど管理画面に反映されませんでした。

マークダウン編集していて、右のプレビューのスクロール位置が同期するのは地味に便利でした。右上の歯車アイコンからカテゴリなどの詳細設定ができます。
f:id:setchi_q:20141127113655p:plain


Github Pagesにデプロイしました。
http://setchi.github.io/
あとOGPの設定方法とか画像の投稿方法とか調べながら遊んでみます。

mixi Scrap Challenge 2014に参加した

11/16に行われたmixi主催のScrap Challenge 2014に参加してきました。

午前[セキュリティ概論]

午前中はWebセキュリティについて解説がありました。

過去にmixiが実際に受けた攻撃についての解説もあって、「やばい感」が伝わってきました。

特にCSRFの実証コードが公開されてしまった話はびびりました。当時脆弱性をどこに報告すればよいか分かりづらく、報告する前に公開されてしまったとのこと。

ちなみに、脆弱性報告先に迷ったらIPAも窓口になってくれるらしいです。覚えとこ。
脆弱性関連情報の届出:IPA 独立行政法人 情報処理推進機構

昼食

f:id:setchi_q:20141123202219j:plain
f:id:setchi_q:20141123200100j:plain
写真のデータが壊れてる。なぜ。
とにかくおいしかったです。ごちそうさまでした!

午後[競技開始]

問題に沿って、偽mixiサイトに攻撃してチームごとにポイントを競います。

普段からWebさわっているけど、ちょっとひねった問題とか規格を詳しく知らないと解けない問題もあって一筋縄ではいかず。2時間半があっという間に過ぎ去りました。

あと途中から、集中力を乱す妨害コンテンツが投入されました。組み合わせ爆発おねえさんの動画とか流れてた気がする。いろいろたのしかった!

結果

なんとか2位になりました!
上手く問題分担したりチームワーク良かったと思います。みんなありがとう!

感想

自分が攻撃側に回ってWebセキュリティを学べる凄いイベントだと思いました。

普段から趣味でWeb触ってたりしていても気づかなかった攻撃手法や、「こんな手が!!」と思う目から鱗的な手法も知れて、とても勉強になりました。今まで作ったWebアプリの脆弱性もチェックしておきたいと思います。

お世話になった方ありがとうございました!

f:id:setchi_q:20141123204027j:plain

ko-chaリニューアルしました。

手軽にコーディングチャットができるwebアプリ「ko-cha」をリニューアルしました。
前作は暇つぶしに数日で開発して色々と機能不足だったので、友達同士で使っている時に気になっていたところを今回のリニューアルで実装しました。
http://setchi.jp/ko-cha2/

主な変更点

複数タブに対応

前作はひとつのファイルしか共有できませんでした。タブ数の上限は特に設けてませんが、多すぎると重くなります。

全員がファイル共有できる

前作では最初に入場した2人のみエディタの編集権限が与えられました。今回のリニューアルで全員に専用のエディタが与えられ、それぞれ共有できるようになりました。

見てない部分が更新されると光って通知

自分が見ていないタブが更新されると、そのタブの色が変わって通知します。また、表示してないユーザーが内容を更新した場合、左上のアイコンが光って通知します。

レイアウトを変更できる

例:横分割のレイアウトからf:id:setchi_q:20140726231852p:plain
アイコンをドラッグして、f:id:setchi_q:20140726231859p:plain
ドロップ位置によってレイアウト変更します。
f:id:setchi_q:20140726231856p:plain
真ん中辺りでドロップすると一面表示もできます。f:id:setchi_q:20140726234315j:plain

用途や画面に合わせて見やすいレイアウトで使ってください。


リアルタイム通信の部分は前作のものを引き継いでPHPでlong-pollingしてるので、若干タイムラグがあります。ここはnode.jsでSocket.IOとか使いたいですが、今のレンタルサーバー対応してないのでサーバー変えたいなあ…。
主に学校の人とプログラム教え合う用途でローカルに使ってますが、機会があったら活用してやってください(*_*)
http://setchi.jp/ko-cha2/