【Unity】シェーダーを利用して音声波形を描く
今、広い範囲の音声波形を高速にリアルタイム描画する問題に取り組んでいます。
要件として描画対象の範囲をグリグリ変更できる必要があって、これまで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です。見やすく縦方向に伸ばしています)
シェーダーで波形を描画する
フルソースはここにあります。
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 ); }
最終的にこのように出力されます。
【Unity C#】Undo / Redoの実装
今Unityで音ゲーの譜面を作るエディタを開発していて、Undo/Redo の実装をする機会があったのでメモです。
今回は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
【n Back Tracer】リリースしました。
Unity習作2本目のカジュアルゲームをリリースしました。
次々と現れるパターンを記憶しながら、N個前のパターンを素早くなぞる脳トレゲームです。難しい選択肢を選ぶほど高得点を狙えます。
n Back Tracer - Google Play の Android アプリ
コードはGitHubに公開しています。
setchi/n_back_tracer · GitHub
【Kagaribi】リリースしました
Unity習作のカジュアルゲームをリリースしました。
火の玉を操作して白い枠をできるだけ多くくぐっていくシンプルなゲームです。
真ん中を通るのが高得点のコツです。
Kagaribi - Google Play の Android アプリ
コードはGitHubに公開しています。
setchi/kagaribi · GitHub
【Unity】手軽にHTTP通信する
Unityで手軽にHTTP通信するクラスを作りました。
Actionを使うので使用する側でSystemを読み込みます。
using System;
POSTではパラメータをDictionaryで渡すので下記も必要です。
using System.Collections.Generic;
静的サイトジェネレータ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のコメント欄が反映されない
こんな感じになってしまう。
DISQUSのshortnameを登録していなかったのが原因でした。ここから登録できます。
Disqus | Register site
登録したshortnameを、プロジェクト直下の_config.ymlに設定します。
# Disqus disqus_shortname: shortname
無事コメント欄が現れました。
プラグイン
ここでプラグインの一覧が見れます。
Plugins · hexojs/hexo Wiki · GitHub
導入したもの
FlashSoft/hexo-console-optimize · GitHub
HTML/CSS/JavaScriptをminifyして出力してくれます。
hexojs/hexo-generator-sitemap · GitHub
sitemapを生成してくれます。
jaredly/hexo-admin · GitHub
記事の投稿・編集ができる管理画面が使えるようになります。
左上のNew Postの挙動がおかしくて、_draftフォルダ内にタイトル名.mdは生成されるのだけど管理画面に反映されませんでした。
マークダウン編集していて、右のプレビューのスクロール位置が同期するのは地味に便利でした。右上の歯車アイコンからカテゴリなどの詳細設定ができます。
Github Pagesにデプロイしました。
http://setchi.github.io/
あとOGPの設定方法とか画像の投稿方法とか調べながら遊んでみます。
mixi Scrap Challenge 2014に参加した
11/16に行われたmixi主催のScrap Challenge 2014に参加してきました。
午前[セキュリティ概論]
午前中はWebセキュリティについて解説がありました。
過去にmixiが実際に受けた攻撃についての解説もあって、「やばい感」が伝わってきました。
特にCSRFの実証コードが公開されてしまった話はびびりました。当時脆弱性をどこに報告すればよいか分かりづらく、報告する前に公開されてしまったとのこと。
ちなみに、脆弱性報告先に迷ったらIPAも窓口になってくれるらしいです。覚えとこ。
脆弱性関連情報の届出:IPA 独立行政法人 情報処理推進機構
昼食
写真のデータが壊れてる。なぜ。
とにかくおいしかったです。ごちそうさまでした!
午後[競技開始]
問題に沿って、偽mixiサイトに攻撃してチームごとにポイントを競います。
普段からWebさわっているけど、ちょっとひねった問題とか規格を詳しく知らないと解けない問題もあって一筋縄ではいかず。2時間半があっという間に過ぎ去りました。
あと途中から、集中力を乱す妨害コンテンツが投入されました。組み合わせ爆発おねえさんの動画とか流れてた気がする。いろいろたのしかった!
結果
なんとか2位になりました!
上手く問題分担したりチームワーク良かったと思います。みんなありがとう!
感想
自分が攻撃側に回ってWebセキュリティを学べる凄いイベントだと思いました。
普段から趣味でWeb触ってたりしていても気づかなかった攻撃手法や、「こんな手が!!」と思う目から鱗的な手法も知れて、とても勉強になりました。今まで作ったWebアプリの脆弱性もチェックしておきたいと思います。
お世話になった方ありがとうございました!
ko-chaリニューアルしました。
手軽にコーディングチャットができるwebアプリ「ko-cha」をリニューアルしました。
前作は暇つぶしに数日で開発して色々と機能不足だったので、友達同士で使っている時に気になっていたところを今回のリニューアルで実装しました。
http://setchi.jp/ko-cha2/
主な変更点
複数タブに対応
前作はひとつのファイルしか共有できませんでした。タブ数の上限は特に設けてませんが、多すぎると重くなります。
全員がファイル共有できる
前作では最初に入場した2人のみエディタの編集権限が与えられました。今回のリニューアルで全員に専用のエディタが与えられ、それぞれ共有できるようになりました。
見てない部分が更新されると光って通知
自分が見ていないタブが更新されると、そのタブの色が変わって通知します。また、表示してないユーザーが内容を更新した場合、左上のアイコンが光って通知します。
レイアウトを変更できる
例:横分割のレイアウトから
アイコンをドラッグして、
ドロップ位置によってレイアウト変更します。
真ん中辺りでドロップすると一面表示もできます。
用途や画面に合わせて見やすいレイアウトで使ってください。
リアルタイム通信の部分は前作のものを引き継いでPHPでlong-pollingしてるので、若干タイムラグがあります。ここはnode.jsでSocket.IOとか使いたいですが、今のレンタルサーバー対応してないのでサーバー変えたいなあ…。
主に学校の人とプログラム教え合う用途でローカルに使ってますが、機会があったら活用してやってください(*_*)
http://setchi.jp/ko-cha2/