info

多分フロントエンドエンジニア寄りのフリーランスWeb制作者のサイトです。

他バンドでギター弾いたり、max/msp触ったり等もしております。
最近はチャリ買ってはしゃいでます。
あと犬が飼いたい。

どうぞお気軽にご連絡いただけまししたら幸いです。

works

  • > toyota
  • > glico
  • > bandainamco
  • > shiseido
  • > pioner
  • > mitsui
  • > yodobashi
  • > panasonic
  • > square enix
  • etc..

※詳細をご希望の方はお手数ですが

contactよりご連絡お願いします。

links

リンクです。増えるといいな

contact

ご依頼/ご相談は下記よりお問い合わせください。
その他ご質問等ありましたらお気軽にご連絡ください。

Video要素の音声をWeb Audio APIのAnalyserNodeで解析してWebGLで動画のポストプロセスと連動

概要

html5のVideo要素をWeb Audio APIとWebGLであそんでみました。
createMediaElementSourceでvideoの音声を取得、
analyserNode経由で解析した音声データをWebGLのシェーダーGLSLと連動させて
videoのテクセルを操作してリアルタイムでグリッチっぽいポストプロセスかけてます。
色々用語あっているのか不明ですが。

とりあえずの結果

色々相談重なって今月後半は忙しくなるぞーって思って片手間にゴニョゴニョやってたら未だ作業が始まらず。
フリーランスあるあるですがせっかくなので記事にしてみます。

素材動画は恥ずかしながら趣味でやってるバンドのリハーサル風景です。

Web Audio APIもスマホだと一回タップとか挟まないと制限があるのでロード用のUI入れてます。



再生位置(変更だけ)

こうゆう系僕の中ではmax/mspとかopenFrameworksとか利用する物という認識だったのですが
(あと使った事ないけどもSuperColliderとか?)

Audio API/WebGL使ってブラウザで結構さくさく動くので驚きです。
GPU処理っていうのが結構大きいのでしょうか?

[ブラウザ対応]

ブラウザ対応とか細かい所はみてないので最新のクロームとかでお願いします。
端末によっては見れないとか処理重いとかあると思います。
誰も興味ないと思いますが見れないよって場合に一応youtubeにもアップしてます。

こうゆうリアルタイム系の動画をデータとして形にするってどういうのが一般的なのだろうか、
サイズ大きいとquicktimeでフレーム落ちるので小さめです。

audio/analyserNode

video要素からcreateMediaElementSourceでaudioのsource取得して

this.video = document.createElement('video');
this.source = this.audioCtx.createMediaElementSource(this.video)
this.analyserNode = this.audioCtx.createAnalyser();
this.analyserNode.fftSize = 1024; //FFTサイズ
this.times = new Uint8Array(this.analyserNode.frequencyBinCount); //波形データ入れる配列Uint8Arrayで用意する
this.freqs = new Uint8Array(this.analyserNode.frequencyBinCount); //波形データ入れる配列Uint8Arrayで用意する

requestAnimationFrameとかでアップデートします

update(){
  window.requestAnimationFrame(this.update.bind(this));
  this.analyserNode.getByteFrequencyData(this.freqs); //周波数領域
  this.analyserNode.getByteTimeDomainData(this.times); //時間領域
}

FFT

Wikipediaみても意味不明です。

フーリエ変換(多分離散フーリエ変換?)に関しては久々見ても窓関数や虚数とかしっかりとは良く分かってないのだが、
昔max(msp)触りながら下記のページとか参考に勉強させてもらって何となく自分の利用したいようには使えてるということで良しとします。

どこかでギター演奏の達人がギター本体やエフェクターとかの工学や細部を理解する必要はかならずしも無い。
とかの文言みかけて妙に納得したので甘んじて受け入れます。

ちなみに誰も興味ないと思いますがPCにlive/max起動して演奏中足でグラニュラーシンセの操作とかしてます。

描画側 WebGL/THREE

描画はWebGLです。THREE使ってます。
かなり抜粋ですがTHREE.VideoTexture使えば割と簡単に動画のテクスチャ利用ができました。

const uniforms = {
  'uTex': {
  type: "t",
  value: new THREE.VideoTexture(window.glitch.audio.video)
};
// ~~~~
const material = new THREE.ShaderMaterial({
  vertexShader : vertex,
  fragmentShader : fragment,
  uniforms : uniforms,
});

あとEffectComposerが分かりやすそうだったので利用しました。
ShaderPassにGLSL渡します。
GLSLもUV座標とかマトリックスとか何となーくの多少の知識でサンプル見ながら何とかとかします。
ポストプロセスなので多分fragmentShaderだけ変えたり加えたりしてればなんとなく変わります。

this.composer = new EffectComposer(this.renderer);
this.composer.addPass(new RenderPass(this.scene, this.camera));
this.effectPass = new ShaderPass("ここにGLSL");
this.composer.addPass(this.effectPass);

あとはまたrequestAnimationFrameとかでaudioの解析データに合わせて
uniformsとかに数値入れれば描画結果が変わります。

update(){
  window.requestAnimationFrame(this.update.bind(this));
  this.renderer.setClearColor(0x000000, 1.0);
  this.renderer.clear();
  // -------------------------
  this.effectPass.uniforms.hoge.value = store.hoge;
  // uniformsとかにaudio解析の結果とかの数値入れてrender
  // -------------------------
  this.composer.render(this.clock.getDelta());
}

描画と三角関数とかノイズ

GLSLに限らずですが描画に関しては色々な使い方あるとは思うのですが、
グリッジとかこうゆうアブストラクトな表現?って言い方であってるのか分からないけども
利用する場合とかもsin/cosの三角関数とかパーリンノイズとかの疑似乱数の使い方が重要になるのかなと個人的に思います。
例によって完全に理解はできないけども利用だけできれば個人的にはありだと思っています。

以上です。

関連記事

phina.jsで簡単なお手軽暇つぶしブラウザゲーム作ってみました

概要 phina.jsで簡単なお手軽暇つぶしブラウザゲーム作ってみました 宣伝ついでにphina.js使ってみての勝手な所感/評価等書いてみます。 宣伝 とりあえずさっそくの宣伝です。 暇つぶしゲーム 飛べない豚 flightlesspig 別に働きたくないとかでは無いのだが目標として とりあえず少なくても良いので不労所得獲得の為試行錯誤してみてます。 客仕事だと時間とか量が調整できないとかって点のぞけば むしろポチポチコード書く作業自体は結構好きな方です。 うまくいくといいなぁ、という事でぜひやってみてください。 ブラウザゲームのjsライブラリ 昔はas3カリカリ書いていた方なので というか上記のゲーム自体...

Nunjucksの変数出力(Variables)とvueとかののデータバインドどっちも使いたい時

概要 Nunjucksの変数出力(Variables)とvueのデータバインドはともに {{}}なので共存したい場合のとりあえずの方法。 Nunjucks/Vue.js 普段jqueryでいいじゃん派なのですが最近案件でvue.js使う機会があり。 軽く使う程度であれば便利は便利なので個人的な案件でも使ってみてます。 あんまり深く使ってはいる訳では無いけどもAngular1(2は知らない)とかより手軽に使い始められそうな感じな印象です。 .vueファイルとでコンポーネントとかまで使うとしばらく後で見て何だっけコレ?現象がおこりそうな気がするので個人的にはまだ本格的に使う気は無いです。 {{}}の展開 で本題ですがNunjucksは{{}}が変数展開,Vueは{{}}データバインドってそれぞれ言い方...

HTML5の<video>タグFullscreen制御

概要 html5の<video>タグは PC/スマホ/タブレット各ブラウザ,端末ios/android,でも仕様が異なったり 変わったりで毎回面倒な思いしてる気がするのでメモ代わりの備忘録としてまとめます。 IE11/android等もある程度対応してます。 PCはIE11はまだ対応する流れだと思うので それぞれベンダープレフィックスつける必要もあり スマホとかタブレットもiOS10以降からインライ再生が可能になってりハンドラの名前が変わったり? android4系とか入れるとかなるとさらに調整いるかもです。 ...

運営サイト

広告なのよー

ツイッター