musicLineアプリ開発日記

作曲を誰でも楽しく簡単に♪

【iOS】作曲画面の進捗報告 7

musicLine(iOS)についての進捗。
MIDIプレイヤーで曲を再生する部分について報告します。

曲再生とテスト音の動作


実装状況
カテゴリタイトル補足
View
Composition
UI配置
ガイド表示
再生バー曲を再生している時に、再生位置をバーで表示
再生ボタン曲を再生/停止を監視して、状態を変更、再生準備が遅い時はインジケーターを表示
再生速度の表示曲の再生速度を表示(iOS独自)
テスト音のガイド鳴っている音階に色をつける
Community
UI配置
Composition
MIDI コンバーターCompositionからMIDIのデータ構造へ変換
曲の再生画面左からMIDI再生、Compositionのデータ構造から曲の再生、再生位置の同期
曲の再生(最初から)再生ボタン長押しで最初から再生 最初から再生されるが、画面は最初に移動しない
曲の再生(位置指定)スクロール領域をダブルタップでその位置から再生(iOS独自)
再生速度の変更ドラッグで曲の再生速度を変更(iOS独自)
再生処理の最適化曲に変更がない時はキャッシュを使う、変更通知とキャッシュの管理
MIDI
Common
MIDI共通
データ構造MIDIフォーマットへ出力できる構造
コントローラー曲の読み込みや再生、再生位置の監視や音源の変更などMIDIの扱いを管理する
サンプラーピアノや音符生成時に単体のMidiイベントから音を鳴らす
Service
サービスモデル
MidiPlayerMIDIを再生する
MidiReaderMIDIファイルの読み込み
MidiWriterMIDIファイル出力
Commnity
Common
コミュニティ
共通
データ構造カテゴリ等の曲情報、いいねやお気に入り等のリスポンスを保持


曲の再生やピアノ音を鳴らす処理について大まかな実装は完了しました。またコミュニティの実装にも着手しました。


全進捗マップを表示

カテゴリタイトル補足
View
Composition
UI配置
ガイド表示
ピアノ
スクロールエリア
小節番号
小節線
分割線拡大率によって間隔を変化
フレーズフレーズがないところはフレーズ作成ボタンを表示
ツールボタン 選択中のツールはツール色にハイライトする
メロディーライン ペンツールでの音符作成時の入力線
メロディー音符 音符の先頭にチョボをつける
リズム音符 ベース音符のみ下に表示
サンプルデータ 手入力したサンプルデータの音符を配置
連符連符は数字で表示、拡大率によって省略
ツールガイド(ペン)長さ編集しているリズム音符、伸ばした時の削る範囲音符移動時、移動先の音階をわかりやすくする
ツールガイド(指)移動中の音符影、矩形選択の枠
ツールガイド(消しゴム)削除範囲、和音のみの削除範囲
ツールガイド(フレーズ)フレーズ移動・伸縮のバー、選択範囲テキスト(iOS独自)
フレーズボタンフレーズボタンとサブボタンを配置、ツールに応じてアイコンを変更、画面拡大率に応じて縮小
フレーズタブツールに応じてアイコンを変更、拡大率に応じて縮小、スクロール状態に応じて移動
音符描画の高速化音符が多くても描画できる速さへ最適化
音符の編集状態選択や変更した時に枠線の色変更
音符音階メロディ音符に音階表示
再生バー曲を再生している時に、再生位置をバーで表示
再生ボタン曲を再生/停止を監視して、状態を変更、再生準備が遅い時はインジケーターを表示
再生速度の表示曲の再生速度を表示(iOS独自)
テスト音のガイド鳴っている音階に色をつける
Community
UI配置
Dialog
ダイアログ
フレーズフレーズの作成・設定・挿入、フレーズの長さやリピート回数の設定
Composition
Common
作曲共通
データ構造座標とサイズ、状態を保持する。レンダラーやコライダー、通知等のロジック
コンバーターDomainのデータ構造へ変換・逆変換
通知機構Modelに変更があった時に、Viewへ通知して再描画。変更状況を監視してキャッシュ
FingerTool
指ツール
音符の編集
データ構造フレーズの音符を取得、基点と移動ベクトルを保持して移動する
音符の移動和音や連符は上下のみに制御
音符の影移動中に操作できているかわかりやすいように(iOS独自)
内外判定音符の移動をフレーズ内に留める
衝突判定移動する音符が他の音符に重なったときの挙動
タップ選択タップした音符の子音符も選択・解除
矩形選択囲った音符を選択
音符の入れ替えリズム音符のスライドで重なった音符と入れ替える(iOS独自)
和音の削除和音を移動した時に重なる時に削除する
連符に切り替えリズム音符タップで切り替え
PenTool
ペンツール
音符の作成
データ構造音符を作成・分割・統合、フレーズへ音符を追加する
音符の作成タップで音符を作成。分割線に合わせて長さを決定
音符列の作成スワイプに沿って複数の音符を作成。音階変わる時に音符分割
有無判定タップやスワイプした縦ラインに既に音符があるか判定
音符の移動音符が既にある場合は、作成ではなく移動。一定距離進むと移動終了
音符の分割リズム音符をタップした時、音符を分割、メロディ線に沿ってY位置を動かす
音符の統合2つのリズム音符の間をタップした場合、音符を統合
音符の伸縮リズム音符を左右にスワイプすることで音符の長さを伸縮、始点で分割なし(仕様変更)
音符の消滅音符の伸縮をした時に長さが0になると削除する(iOS独自)
領域差演算音符伸縮で他の音符に重なる時は差演算して他の音符長さを削る
サンプリング補間素早くスワイプしても音符が移動できるようにサンプリング間を補間する
細かい音符分割線内の細かな音符を移動する挙動
EraserTool
消しゴムツール
音符の削除
データ構造和音と連符の認識、フレーズから音符を削除する
音符の削除タップで音符を削除
和音・連符の削除和音・連符をタップで和音・連符のみを削除(iOS独自)
音符種別判定タップした音符が和音・連符・ルート音符なのか判定する
音符列の削除スワイプで指定する削除範囲内の複数の音符を削除。
和音列の削除リズム音符をスワイプで複数の和音のみを削除。(iOS独自)
休符に切り替えリズム音符タップで休符に切り替える
PhraseTool
フレーズツール
フレーズの編集
データ構造トラックのフレーズを取得・追加、削除、状態
フレーズの作成・挿入ダイアログで長さとリピートを設定 リピートフレーズは未実装
フレーズの選択2点タップで範囲選択、範囲ガイドタップで選択解除(仕様変更)
フレーズの移動左右スワイプで移動、移動は選択フレーズとスワイプ中のフレーズを含む
フレーズの伸縮サブ編集領域をスワイプした時にフレーズ長さを伸縮、長さ0で削除(iOS独自)
フレーズの貼り付け選択フレーズをコピー・ペースト、サブボタンかフレーズタブタップで挿入、選択解除
周囲有無判定作成する小節の近くにフレーズがあるかの判定、設定できる長さやリピート回数の制御
フレーズボタン・タブツールに応じてフレーズボタン、タブの処理を変更
フレーズの結合連続する2フレーズの接する小節線をタップで結合(iOS独自)
フレーズの分割フレーズをタップで分割(iOS独自)
StampTool
スタンプツール
モチーフの編集
Transform
画面移動
座標変換
画面を上下移動ピアノのスワイプにより
画面を左右移動 スクロールエリアのスワイプにより
画面を拡大・縮小ピンチアウト・インにより基点を画面中心に設定する
画面を拡大・縮小(軸指定)長押しからのドラッグ。ピアノでX軸方向、スクロールエリアでY軸方向
MIDI コンバーターCompositionからMIDIのデータ構造へ変換
曲の再生画面左からMIDI再生、Compositionのデータ構造から曲の再生、再生位置の同期
曲の再生(最初から)再生ボタン長押しで最初から再生 最初から再生されるが、画面は最初に移動しない
曲の再生(位置指定)スクロール領域をダブルタップでその位置から再生(iOS独自)
再生速度の変更ドラッグで曲の再生速度を変更(iOS独自)
再生処理の最適化曲に変更がない時はキャッシュを使う、変更通知とキャッシュの管理
MIDI
Common
MIDI共通
データ構造MIDIフォーマットへ出力できる構造
コントローラー曲の読み込みや再生、再生位置の監視や音源の変更などMIDIの扱いを管理する
サンプラーピアノや音符生成時に単体のMidiイベントから音を鳴らす
Service
サービスモデル
MidiPlayerMIDIを再生する
MidiReaderMIDIファイルの読み込み
MidiWriterMIDIファイル出力
Commnity
Common
コミュニティ
共通
データ構造カテゴリ等の曲情報、いいねやお気に入り等のリスポンスを保持
Domain
データ構造
Json形式
Melody MelodyTrack, *MelodyPhrase, NoteContainer, NoteBlock, Note
Drum DrumTrack, *DrumPhrase, BeatContainer, Beat
通化 Original, Repeat, Syncの3種のPhraseをジェネリッククラスとプロトコルで抽象化
Service
サービスモデル
SongRederJsonファイルを読み込み、Domainのデータへ変換
SongWriterDomainのデータからJsonファイルへ書き出し
Common
Service
サービスモデル
リポジトリ保存データを管理


実装の詳細

MIDIのデータ構造

MIDIを再生するためのモデルを作りました。

MIDIのデータ構造

MidiControllerで曲の読み込みや再生を管理します。
再生する際は、まず再生する曲MidiSongchangeSong()メソッドで指定してMidiStreamを作成します。MidiStreamは曲情報や再生状況を保持してます。続いてplay()メソッドによりMidiPlayerMidiStreamを渡すことで再生します。
なお、MIDIファイルから再生したい場合はMidiReaderを使ってファイルをMidiSongモデルに読み込みます。


なぜCompositionとMIDIにモジュールを分ける? 理由は可読性を高めるためです。
実装したコードを後から見直しても分かりやすくするためです。

例えば、musicLineではSongモデルといっても、作曲中やコミュニティ閲覧中なのか、再生するための曲なのかと状況によって曲の概念(曲に付属する情報)が変わります。
もちろんモジュールを一緒にして曲の情報を片っ端から付けまくることはできますが、ある状況では不必要な情報が付いている状態となり可読性が低下します。

つまり状況を混ぜるほど複雑になり、どのメソッド・プロパティを使えばいいかわからなくなる危険性があります。
特に後々の機能拡張や不具合修正を考えると、コードはシンプルな状態にして可読性を高く保つことで効率的な開発ができますね。

この辺りの話に興味がある方はこちらの記事がおすすめ♪
little-hands.hatenablog.com


データ構造の変換(Composition → MIDI)

作曲モデルからMIDIモデルのデータ構造に変換できるように変換モデルSongConverterを作りました。
MIDI再生をするときは、MIDIモデルへ変換して再生します。

作曲とMIDIのデータ構造

SongConverterで作曲モデル(Song Track Phrase Element)をMIDIモデル(MidiSong MidiTrack MidiEvent)に変換します。
モデルを変換してしまえば、あとはMidiControllerMidiSongを渡すだけで再生できるので、わかりやすいですね。
このように事前に扱いやすいモデルに変換すると、モジュール間のアクセスを少なくなる(疎結合)のが良いです。


曲の再生
UI:再生バーと再生ボタン

再生ボタンをタップすると、画面の左位置の時間から曲が再生されます。なお、再生中は再生バーが表示されます。

曲の再生


曲を再生する処理の流れ

曲を編集して再生する流れ

1.曲の編集はCompositionモジュール内で完結しますが、2.曲の再生MIDIモジュールに再生を委託する必要があります。
曲を再生する場合には、MidiControllerMidiSongを渡す必要があります。しかし編集はSongを使っているので、そこまで編集した曲SongMidiSongに変換して渡します。MidiControllerは受け取ったMidiSongからMidiStreamを作成して再生を管理します。MidiStreamと一緒にMidiPlayerに問い合わせることで再生位置を取得します。


テスト音の再生
UI:テスト音のガイド

音で音階を確認できるように音符の作成や移動の時にテスト音を鳴らします。その際に、ピアノとピアノロールで鳴っている音階を光らせます。
あとは音階名も表示させたいですね。

またiOSでは動かす音符が和音の場合、和音で鳴るようになっています。Androidでは短音でしか鳴らないので、和音の鳴り方がいまいちわからないなと思ってました。

テスト音の再生

ちなみに指ツールで複数音符を同時に動かすときは、スワイプで掴んでいる音符の音が鳴ります。


曲の再生(最初から / 位置指定)

再生ボタン長押しで最初から再生します。
(この時に画面も最初に戻したいですが、まだ未実装です。)

また、スクロールバーをダブルタップでその位置から再生します。(iOS独自)
意外と便利そうなのでこの機能を付けてみましたが、誤動作が気になるところですね。

曲の再生(最初から / 位置指定)


再生速度の変更
UI:再生速度の表示

再生中に再生ボタンを右にドラッグすると再生速度が早くなります。
こちらもiOS独自の機能ですが、あまり利用用途がないかも?

再生速度の変更

再生速度の変更は必要ですかあ?
ちなみに左にドラッグすると0.5倍速になります。。。
使う時ないよね〜 (´ㅂ`; )

できそうなのでこの機能を付けてみましたが、こちらも誤動作が気になるところです。
あまり使わなそうだと思ったらリリース前に削除するかもしれないです。(;'-' )


再生処理の最適化
UI:再生ボタン(再生が遅い時)

音符が多くて再生準備に時間がかかる時は再生ボタンにインジケーター(くるくるアイコン)を表示するようにしました。
ちょっとしたことですが、タップできたかどうかがわかりやすいですね。

再生処理の最適化

また、再生後に編集してなければ前回のキャッシュを使うので、2回目以降はすぐに再生できます。



おわりに

MIDIプレイヤーで曲やテスト音を再生する部分について実装しました。
音が出せてようやく作曲アプリ感が出てきましたね✨

次は、使用している楽器で音を変えたり、楽器選択ダイアログあたりについて実装していきたいと思います!



描画表現の追求(OpenGL FBO)

今回は描画ライブラリOpenGLの表現を高める話。
OpenGLの機能FBOを用いることでフィルタを掛けます。

フィルタ表現



はじめに

musicLineでは、コミュニティでユーザーが投稿した曲を再生できるようになっており、再生している曲のイメージを可視化できるソングビジュアライゼーションという機能があります。

ソングビジュアライゼーション

そのソングビジュア機能ですが、ランキング等で上位に入った曲はキラキラのエフェクトを追加し、よりリッチな表現にしています。

キラキラエフェクト

リッチな表現

ちなみに、この辺りの話はこちらの記事で紹介しています。

その中で、殿堂入りした曲はキラキラエフェクトを加えた後、さらにカラフルフィルタを掛けてよりリッチな表現を追求しています。

キラキラエフェクトとカラフルフィルタ

よりリッチな表現へ



フィルタを掛けてレンダリング

フィルタはシーン(音符)の描画結果にさらに色を重ねるような表現です。 なので、フィルタは2回描画することで実現できます。

  1. シーンの描画
  2. 1の結果を使って描画


ちなみに、1回目の描画は画面に映し出されないのでオフスクリーンレンダリングと言います。1回目は画面ではなくテクスチャに描画し、そのシーンを描画したテクスチャにフィルタを掛けて画面に描画します。
なので、リアルタイムにテクスチャを作成しているとも言えます。

https://ics.media/entry/17120/images/180202_webgl2_mrt_offscreen_rendering__960.png
引用:サンプルで理解するWebGL 2.0 – Multiple Render Targetsによる動的なライティング表現 - ICS MEDIA



実装

AndroidOpenGLのFBOを使用して、画面にカラーフィルタを掛けてみます。

FBO実装の参考ページ
orangesignal.hatenadiary.org

処理の流れは

  1. 3種類(テクスチャ、FBO、レンダーバッファ)のバッファ領域確保
  2. 3種類のバッファの設定
  3. テクスチャへ描画 (1回目描画)
  4. フィルタを掛けて画面へ描画 (2回目描画)

となります。


1. 3種類(テクスチャ、FBO、レンダーバッファ)のバッファ領域確保

// テクスチャ
textureId = IntArray(1).also {
    GLES20.glGenTextures(1, it, 0)
}.first()

// FBO
fboId = IntArray(1).also {
    GLES20.glGenFramebuffers(1, it, 0)
}.first()

// レンダーバッファ
renderId = IntArray(1).also {
    GLES20.glGenRenderbuffers(1, it, 0)
}.first()

まずOpen GLのバッファを使うことを宣言します。


ちなみに、使用後必要がなくなったバッファは解放しないとメモリリークになります。

GLES20.glDeleteTextures(1, arrayListOf(textureId).toIntArray(), 0)
GLES20.glDeleteFramebuffers(1, arrayListOf(fboId).toIntArray(), 0)
GLES20.glDeleteRenderbuffers(1, arrayListOf(renderId).toIntArray(), 0)


2. 3種類のバッファの設定

// FBOをバインド
GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, fboId)

// レンダーバッファの幅と高さを指定します。
GLES20.glRenderbufferStorage(GLES20.GL_RENDERBUFFER, GLES20.GL_DEPTH_COMPONENT16, width, height)

// フレームバッファのアタッチメントとしてレンダーバッファをアタッチします。
GLES20.glFramebufferRenderbuffer(GLES20.GL_FRAMEBUFFER, GLES20.GL_DEPTH_ATTACHMENT, GLES20.GL_RENDERBUFFER, renderId)

// テクスチャの設定
GLES20.glActiveTexture(textureSlot)
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureId)
GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, texFormat, width, height, 0, texFormat, GLES20.GL_UNSIGNED_BYTE, null)

// FBOにテクスチャをアタッチ
GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0, GLES20.GL_TEXTURE_2D, textureId, 0)


// FBO, Textureのバインドを解除
GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0)
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0)

まず設定するFBOをバインドして、FBOに紐付けるレンダーバッファの設定をしています。
また、テクスチャも設定します。


3. テクスチャへ描画 (1回目描画)

// 使用するFBOの指定
GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, fboId)

// 使用するテクスチャの指定
GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0, GLES20.GL_TEXTURE_2D, textureId, 0)

// シーンの描画 (オフスクリーンレンダリング)
drawFunction()

GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0)

使用するFBOとテクスチャを指定してから、シーンを描画することでテクスチャに描画します。 drawFunction()の箇所で通常行っている描画処理を行います。


4. フィルタを掛けて画面へ描画 (2回目描画)

// 情報を送信
val propertyCount = 2 // X, Y 座標

// テクスチャ頂点とUV座標
val texVtPoss = listOf(
    Point(-1f, 1f),  // 左上
    Point(1f, 1f),  // 右上
    Point(1f, -1f), // 右下
    Point(-1f, -1f),// 左下
)
val vertexBuffer = toFloatBuffer(texVtPoss)

val texUvPoss = listOf(
    Point(0f, 1f),  // 左上
    Point(1f, 1f),  // 右上
    Point(1f, 0f),  // 右下
    Point(0f, 0f)   // 左下
)
val uvBuffer = toFloatBuffer(texUvPoss)

        
// GLSL設定
GLES20.glUseProgram(shaderProgramId)

// 機能有効
GLES20.glEnable(GLES20.GL_BLEND)
GLES20.glEnable(GLES20.GL_TEXTURE)
GLES20.glDisable(GLES20.GL_DEPTH_TEST)

// 機能設定
GLES20.glActiveTexture(textureSlot)
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureId)
GLES20.glBlendFunc(GLES20.GL_SRC_ALPHA, GLES20.GL_ONE_MINUS_SRC_ALPHA)

// 変数有効
GLES20.glEnableVertexAttribArray(texVtPosLoc)
GLES20.glEnableVertexAttribArray(texUvPosLoc)

// 変数設定
// stride 格納されているデータの間隔を(Objectサイズ)で指定する. 0 を指定したときは, データは密に並んでいるとみなされてsize*typeで自動的に計算される
GLES20.glVertexAttribPointer(texVtPosLoc, propertyCount, GLES20.GL_FLOAT, false, 0, vertexBuffer)
GLES20.glVertexAttribPointer(texUvPosLoc, propertyCount, GLES20.GL_FLOAT, false, 0, uvBuffer)
GLES20.glUniform1i(useTextureSlotLoc, 2) // GL_TEXTURE2
GLES20.glUniform1f(timeLoc, time * 0.001f)


// 描画
GLES20.glDrawArrays(GLES20.GL_TRIANGLE_FAN, 0, texVtPoss.size)


// 変数解除
GLES20.glDisableVertexAttribArray(texVtPosLoc)
GLES20.glDisableVertexAttribArray(texUvPosLoc)
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0)

// 機能解除
GLES20.glDisable(GLES20.GL_TEXTURE)
GLES20.glDisable(GLES20.GL_BLEND)

GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureId) で1回目の描画で作成したテクスチャを指定しています。
リアルタイムに作成したテクスチャを使って新しくレンダリングします。
今回の例では画面全体がカラフルになるようなShaderを書いています。

// uniform
val useTexSlotUni = "tex_id"
val timeUni = "u_time"

// attribute
val vtPosAttr = "v_pos"
val uvPosAttr = "v_uv"

// varying
private val uvPosVary = "f_uv"

override val vertexCode = """
    attribute vec2 $vtPosAttr;
    attribute vec2 $uvPosAttr;
    varying vec2 $uvPosVary;
    void main() {
        gl_Position = vec4($vtPosAttr, 0.0, 1.0);
        $uvPosVary = $uvPosAttr;
    }
""".trimIndent()

override val fragmentCode = """
    precision mediump float;
    varying vec2 $uvPosVary;
    uniform sampler2D $useTexSlotUni;
    uniform float $timeUni;
    #define PI 3.14159265359
    
    void main() {
        vec4 color = texture2D($useTexSlotUni, $uvPosVary);
        vec3 shift = vec3(100.0 * (pos - $timeUni), 1.0, 1.0);

        gl_FragColor = vec4(shift_col(color.rgb, shift), color.a);
    }
""".trimIndent()



全コードを表示

class ColorfulShiftShader() {

    // region Property
    private val textureSlot = GLES20.GL_TEXTURE2 // テクスチャ使用用にGL_TEXTURE1は開けとく
    private val textureId: Int
    private val fboId: Int
    private val renderId: Int
    override val program = Program()

    // Location
    private val texVtPosLoc: Int // 頂点位置
    private val texUvPosLoc: Int  // UV位置
    private val useTextureSlotLoc: Int  // テクスチャスロットNo
    private val timeLoc: Int  //時間

    // endregion

    // region Initializer
    init {
        loadProgram()

        // Textureを作成
        textureId = IntArray(1).also {
            GLES20.glGenTextures(1, it, 0)
        }.first()

        // FBO のバッファ領域確保
        fboId = IntArray(1).also {
            GLES20.glGenFramebuffers(1, it, 0)
        }.first()

        // レンダーバッファ領域確保
        renderId = IntArray(1).also {
            GLES20.glGenRenderbuffers(1, it, 0)
        }.first()

        setupFBO(textureSlot, textureId, fboId, renderId, GLES20.GL_RGB)

        // Location設定
        texVtPosLoc = GLES20.glGetAttribLocation(shaderProgramId, program.vtPosAttr)
        texUvPosLoc = GLES20.glGetAttribLocation(shaderProgramId, program.uvPosAttr)
        useTextureSlotLoc = GLES20.glGetUniformLocation(shaderProgramId, program.useTexSlotUni)
        timeLoc = GLES20.glGetUniformLocation(shaderProgramId, program.timeUni)
    }

    private fun setupFBO(textureSlot: Int, textureId: Int, fboId: Int, renderId: Int, texFormat: Int = GLES20.GL_RGBA) {

        // FBOをバインド
        GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, fboId)

        // レンダーバッファの幅と高さを指定します。
        GLES20.glRenderbufferStorage(GLES20.GL_RENDERBUFFER, GLES20.GL_DEPTH_COMPONENT16, width, height)

        // フレームバッファのアタッチメントとしてレンダーバッファをアタッチします。
        GLES20.glFramebufferRenderbuffer(GLES20.GL_FRAMEBUFFER, GLES20.GL_DEPTH_ATTACHMENT, GLES20.GL_RENDERBUFFER, renderId)

        // テクスチャの設定
        GLES20.glActiveTexture(textureSlot)
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureId)
        GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, texFormat, width, height, 0, texFormat, GLES20.GL_UNSIGNED_BYTE, null)

        // FBOにテクスチャをアタッチ
        GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0, GLES20.GL_TEXTURE_2D, textureId, 0)


        // FBO, Textureのバインドを解除
        GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0)
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0)
    }

    // endregion

    // region Method
    fun draw(drawFunction: () -> Unit) {

        drawInFBO(drawFunction)

        // 情報を送信
        val propertyCount = 2 // X, Y 座標

        // テクスチャ頂点座標
        val texVtPoss = listOf(
            Point(-1f, 1f),  // 左上
            Point(1f, 1f),  // 右上
            Point(1f, -1f), // 右下
            Point(-1f, -1f),// 左下
        )
        val vertexBuffer = toFloatBuffer(texVtPoss)

        // テクスチャUV座標
        val texUvPoss = listOf(// テクスチャのUV座標
            Point(0f, 1f),  // 左上
            Point(1f, 1f),  // 右上
            Point(1f, 0f),  // 右下
            Point(0f, 0f)   // 左下
        )
        val uvBuffer = toFloatBuffer(texUvPoss)

        // GLSL設定
        GLES20.glUseProgram(shaderProgramId)

        // 機能有効
        GLES20.glEnable(GLES20.GL_BLEND)
        GLES20.glEnable(GLES20.GL_TEXTURE)
        GLES20.glDisable(GLES20.GL_DEPTH_TEST)

        // 機能設定
        GLES20.glActiveTexture(textureSlot)
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureId)
        GLES20.glBlendFunc(GLES20.GL_SRC_ALPHA, GLES20.GL_ONE_MINUS_SRC_ALPHA)

        // 変数有効
        GLES20.glEnableVertexAttribArray(texVtPosLoc)
        GLES20.glEnableVertexAttribArray(texUvPosLoc)

        // 変数設定
        // Ref:stride 格納されているデータの間隔を(Objectサイズ)で指定する. 0 を指定したときは, データは密に並んでいるとみなされてsize*typeで自動的に計算される
        GLES20.glVertexAttribPointer(texVtPosLoc, propertyCount, GLES20.GL_FLOAT, false, 0, vertexBuffer)
        GLES20.glVertexAttribPointer(texUvPosLoc, propertyCount, GLES20.GL_FLOAT, false, 0, uvBuffer)
        GLES20.glUniform1i(useTextureSlotLoc, 2) // GL_TEXTURE2
        GLES20.glUniform1f(timeLoc, time * 0.001f)

        // 描画
        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_FAN, 0, texVtPoss.size)

        // 変数解除
        GLES20.glDisableVertexAttribArray(texVtPosLoc)
        GLES20.glDisableVertexAttribArray(texUvPosLoc)
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0)

        // 機能解除
        GLES20.glDisable(GLES20.GL_TEXTURE)
        GLES20.glDisable(GLES20.GL_BLEND)
    }

    // オフスクリーンレンダリング(テクスチャへ描画)
    private fun drawInFBO(drawFunction: () -> Unit) {

        // 機能設定
        GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, fboId)
        GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0, GLES20.GL_TEXTURE_2D, textureId, 0)

        drawFunction()

        GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0)
    }
    // endregion

    // region InnerClass
    class Program : Shader.Program() {

        // uniform
        val useTexSlotUni = "tex_id"
        val timeUni = "u_time"

        // attribute
        val vtPosAttr = "v_pos"
        val uvPosAttr = "v_uv"

        // varying
        private val uvPosVary = "f_uv"

        override val vertexCode = """
            attribute vec2 $vtPosAttr;
            attribute vec2 $uvPosAttr;
            varying vec2 $uvPosVary;
            void main() {
                gl_Position = vec4($vtPosAttr, 0.0, 1.0);
                $uvPosVary = $uvPosAttr;
            }
        """.trimIndent()

        override val fragmentCode = """
            precision mediump float;
            varying vec2 $uvPosVary;
            uniform sampler2D $useTexSlotUni;
            uniform float $timeUni;
            #define PI 3.14159265359
            
            void main() {
                vec4 color = texture2D($useTexSlotUni, $uvPosVary);
                vec3 shift = vec3(100.0 * (pos - $timeUni), 1.0, 1.0);

                gl_FragColor = vec4(shift_col(color.rgb, shift), color.a);
            }
        """.trimIndent()
    }
    // endregion
}



おわりに

今回はOpenGLの機能FBOを用いてフィルタを掛けてみました。
もっとリッチな表現を目指したい気持ちもありますが、作曲の機能拡張やiOS版の開発があるので深追いはやめておきます。。(・ω・;)



Ruliea/るりあさんインタビュー

mL民のインタビュー企画第2弾、3人目のインタビューです。
(インタビュー企画通算で9人目です!)
※mL民:作曲アプリmusicLineユーザーのこと
(「」タグで他も見てね☆)

インタビュー企画第2弾ラストは現在ボカロPとして活躍されている、Ruliea/るりあさんを紹介します。

DMでのやり取りをインタビュー形式にまとめました。


スー

それではRuliea/るりあさん、よろしくお願いします。
ユーザーネームの由来はなんですか?


Ruliea

昔、ゲームのハンドルネームとして適当につけた名前をそのまま使ってます!なので残念ながらこの名前に込めた意味とかは特にありません😭綴りが複雑なのは他の人と名前被りしたくなかったからです!あと当時はこの珍しい綴りがカッコいいと思っていました...わーー恥ずかしい!!!!


スー

か、か、カッコいいですねぇ〜~~
。。発音とか。。先頭がRのとことか、、🙄


ダラーン

(メモメモ)

ゲームのハンドルネームで意味は特にない。
Rulieaという綴りがカッコいいと思った。
スーは思ってもないことを口にした。

アゴォー

カッコいいぞお!!
特に li と a に挟まれた発音しない e とかサイコー


スー

わーー後ろがうるさくてすみません😂


でもmusicLineで使ってるアイコンはキュートな感じのイラストだったので、可愛いイメージがありましたね~
名前もどっちにもとれる感じで、実は初めは女の子かなと思っていました😄

こちらがmusicLineのアイコンです。

そうそうこのピースのやつ😆
こちらはmL民の麦茶さんが描いてくれたみたいです!
やわらかな線で良いタッチのイラストですね~♪

どことなくアイコンが似ていますね?
もしかして、るりあさん自身がモデルになっていたりしますか?


Ruliea

はい!現在のアイコンはボカロPとしての初投稿曲「エゴチャート」のMVイラストなのですが、ご依頼する際に絵師のごまさんにmLで使用していた麦茶さんのイラストをお見せしてこの子を描いてください!とお願いしました!
なのでmLのアイコンと今のアイコンの子は同一人物という設定なんですが、別にモデルが僕自身というわけではありません…こんなカッコよくないし… ; ;


ダラーン

(メモメモ)

絵師のごまさんに同一人物になるように依頼した。
モデルは自分自身というわけではない。
髪の毛が緑の訳ないのにスーは何を聞いてるんだ。

アゴォー

とりあえず髭を生やせば良いよ!!


スー

わーー見学者うるさいよー

なんか変な事聞いてしまってすみません😅
良い曲を書けることがなによりカッコいいですよ♪

それにしても自分のキャラクターがあるっていいですね~
キャラクターと共に頑張っている感じがします。

では次に、ひとこと自己紹介をお願いします。


Ruliea

るりあです!19歳です。現在はボカロPとしての活動や楽曲提供などのお仕事もしています!散歩するのが好きです。あとゴロゴロするのも好きです。よろしくお願いします!


スー

楽曲提供なんてすごい✨
理想に向けて頑張ってるんですね!
でも散歩とゴロゴロが好きって意外です😮


ダラーン

それよりもボカコレ 2024冬 ルーキー6位おめでとうございます!!🎉

ボカコレ 2024冬

musicLine出身で作曲をお仕事にできるユーザーが出てきたらいいなあと話していたので、夢が1つ叶いました☆
少しでもmusicLineが役に立ったと思うと、嬉しいですね~今日は後ろで見学してます😊

アゴォー

えーーーー!!!

ショ・ウ・ゲ・キ!= = = ☆

るりあさん結構すごいんだね〜

じゃ、6位を獲った曲の作成秘話とか聞いちゃっていいですか?

スー

今知ったんだ💦
どんな気持ちで見学しにきたのー
てかその流れで秘話を聞くんじゃないよ😱


ダラーン

まあまあ~♪
るりあさんファンの方はここがかなり気になるところなのでは☆
なので6位を獲った曲「足んないわ」について、どういう曲なのか工夫した点や苦労した点など聞いてもいいですか?


Ruliea

嬉しいお言葉ありがとうございます…!
一年半という短い間でしたがその期間でここまで作曲できるようになったのは間違いなくmusicLineのおかげです、本当に本当に感謝しています😭

「足んないわ」はとにかく聴いてくださる方にどうやって楽しんでもらうかを意識して制作しました!ボカロPというとクリエイターの要素が強いですがそれと同等にリスナーの方に作品を届けてそこから何かを受け取ってもらうエンターテイナーでもありたくて。ボカコレは沢山の方に曲を聴いていただけるいい機会なので、自分がワクワクするクリエイターとしての側面も大事にしつつ後者に重点を置いて作曲を進めました!
苦労した点は主にMIXです…なかなか納得のいくサウンドにならず、友人にアドバイスをもらいながら何回も何回も試行錯誤しました

足んないわ


ダラーン

るりあさんにそう言ってもらえると光栄です✨

クリエイターとエンターテイナーの両方の部分が上手く生かされていると思います!
曲や歌詞だけじゃなく、エフェクトやアニメーションが凝っている映像も素晴らしいです。

試行錯誤は苦労しそうですが、一つの作品を通じて仲間と作り上げていく過程はワクワクしそうですね♪
今回の成果は、ワクワクしたものがリスナーの心にも届いた結果だと思います😄


スー

何回聴いてもいいですね~
改めておめでとうございます!!

なんだか遠い存在になりつつある るりあさんですが、
今でもmL民と呼ばせて頂いていいですか?


アゴォー


是非とも、呼ばせてください!


Ruliea

勿論です!PCで作曲するようになってmL自体はあまり触らなくなりましたが、今でもmLの友達とゲームしたり通話したり会って一緒に遊びに行くこともあるので気持ちはいつまでもmL民です◎iOSに対応したらまたコミュニティもちらちら覗きにいくと思います!好きでよく聴いていた友達の曲もたくさんあるので!!

アゴォー


サンキュー

ずっとmL民ってことでよろしく☆
みんなもmusicLineでるりあさんの初期の曲を聴きにきてね♪


スー

かる!
さっきの深刻そうなお願いはなんだったの😲

ありがとうございます♪
それにしてもイラストを描いてくれたり、みんな仲良くなっててなんだか羨ましいな~
iOSは2025年夏にリリース予定なので、対応したらぜひ覗きに来てください!

では続いて、作曲を始めたきっかけはなんですか?


Ruliea

高校に入ってからというもの勉強を全くしなくなったので学力がどんどん落ちていき自分はこの先どうなるんだろうと不安でいっぱいでした。苦しい出来事が重なりしんどかった時期にEveさんの「心海」という曲に出会ったんです。本当に全てが救われたような気がして、泣きながらずっとリピートしてたのを覚えています。それ以降自分も音楽を作って人に届けたいと思うようになり高2の夏にmLをダウンロードして作曲を始めました!動機は大量にある夏休みの課題からの現実逃避だったんですが…


スー

そうだったんですね!
色々辛かったんですね。。😧
意識高いイメージがあったので、勉強もちゃんとできて順風満帆な学生生活を送ってるんだなーと勝手に思ってました。
そんなきっかけだったのはびっくりですが、musicLineを選んで頂けて嬉しいです!!
るりあさんを救った曲!「心海」聴いてみます。

心海


ダラーン

びっくりー

僕もEveさんのこの曲で勇気を貰えたんだー🥺
なんだか気持ちわかるな~♪

僕らまだアンダーグラウンド


スー

るりあさんもダラーンも今があるのはEveさんのおかげなんだね~

他にも影響を受けたアーティストはいますか?


Ruliea

沢山いますがその中でも特に影響を受けているのはofficial髭男dismさんです!
当時髭男の曲を全曲聴いて耳コピするくらいにはハマっていたので、音楽理論を学んでからmL時代に作っていた曲のコードを見ると髭男の楽曲で多く見られるコード進行がよく使われていたり、様々な場面で自分の体に髭男の音楽が染みついているのを感じます笑
髭男の曲は誇張抜きで全部いいのでアルバム曲まで聴いてほしいです!!!
本当に尊敬しています。

mL内ではぱるぬんさんに影響を受けました!
彼とはとても仲の良い友達なのでさん付けするのもなんだか不思議な感覚なんですが…笑


スー

髭男いいですよね😭
るりあさんが髭男好きなのは知っていましたが、そんなにだったんですね〜!
染み付いてるのが、表現できるのもすごいです。

ぱるぬんさんと仲が良いんですね♪
コミュニティで影響を受けたり、仲良くなって頂けて嬉しいです!
せっかくなので過去にインタビューしたぱるぬんさんの記事も張っときます~

次に作曲活動をしていて、楽しいと思う時はどんなときですか?


Ruliea

新しいことにチャレンジする時です!
型にとらわれずに今まで作ったことないジャンルのパートを作ったり、使ったことのない楽器を使ってみたり。音楽の文字通り音を楽しんでいる感覚があってその感覚がとても好きです。


スー

音を楽しんでる感覚か〜
そういう感覚をいつまでも大切にしたいですね😊
あと自分にない表現ができたりするとやっぱり嬉しいですよね〜

今後の予定や目標を教えていただけますか?


Ruliea

今後もボカロPや作曲家として活動を続けていく予定です!
たくさんMVも出しますしCDなども制作中です💿
目標というと堅苦しいんですが、自分の音楽を多くの方に届けられたらいいなと思っています!
自分の音楽で誰かの生活をちょっとでも後押しできたらとても嬉しいです。


スー

MVやCD制作もるりあさんの今後の活動が楽しみです!
るりあさんの音楽が多くの方に届けられたら素敵ですね♪

では、最後にみなさんに聴いてもらいたいオリジナル曲名を教えてください。


Ruliea

ソラノムコウという曲です。
この曲はmLの卒業制作というか、最後にありのままの自分でやりたい音楽をやってPCに移行しようという思いで作りました。
ボカロ活動ではあまり作っていないようなアニソンチックで元気をもらえるようなとても明るい楽曲になっておりますので是非聴いてくださると嬉しいです!

Ruliea/るりあ「ソラノムコウ」 ︎︎

https://3musicline.com/community/130236 (アプリリンク)


スー

確かに卒業ソングっぽくて爽やかなのがいいですね!
終わる寂しさがありつつも、新たな始まりに対する期待やこれから頑張るぞっていう意気込みを感じました。
るりあさんに限らずmusicLineを離れていくのは寂しいですが。。🥺
でもどんどん新しく挑戦していく皆さんをいつまでも応援しています✨
またmusicLineのコミュニティも覗いてください~♪


アゴォー

できればボカロPもmLも両方してー
僕の最後の願いです。

Androidアプリのリンク張っとくね☆
play.google.com
そうそうiOSは2025年夏リリース予定な☆


スー

もーアゴォーは調子いいんだから~
今後も無理せずにボカロPとしての活動を頑張ってください!😄
今回は第2弾ラストのるりあさんのインタビューでした。
ありがとうございました!



さて、今回のインタビュー企画第2弾もなかなか見ごたえがありましたね!!
るりあさん含め、白夜さんやうえのさんとそれぞれの魅力が伝われば幸いです🤗
これからもインタビュー企画を続けていきたいと思います。

↓ 過去のインタビューも是非みてね☆


インタビュー記事の挿絵について

インタビュー記事の挿絵 (スー、ダラーン、アゴォー) は、使用許可不要です!
(挿絵画像は長押しでDLできます。)
どこでもご自由にお使いください😃
この変なキャラはなに?と思ってmusicLineも一緒に広まれば嬉しいです~♪

ちなみに、今回の挿絵はLINEスタンプの文字無しバージョンを主に使いました☆
musicLine10thを記念して作成したスタンプなので、是非使ってください😊

line.me




うえのさんインタビュー

mL民のインタビュー企画第2弾、2人目のインタビューです。
(インタビュー企画通算で8人目です!)
※mL民:作曲アプリmusicLineユーザーのこと
(「」タグで他も見てね☆)

今回はmL民のお母さん的存在のうえのさんを紹介します。いつもmL民の皆さんのことやアプリのことを考えて頂きありがとうございます。

DMでのやり取りをインタビュー形式にまとめました。

  


スー

うえのさん、よろしくお願いします。
それではまずユーザーネームの由来を教えてください。


うえのさん

本名ですが、ひらがなにする事により親しみやすく覚えてもらいやすいと思いました。


スー

本名そのままだったんですね!
確かにひらがなの方が親しみやすいですね~😊

あとずぅぅっと気になっていたんですが、 うえのさんのアイコンに500円玉を選んだ理由はありますか?


うえのさん

お金は大事なので丸いお金(アイコンのサイズ)で1番大きいのを選びました。


スー

お金が大事!!!!!


(。。えーと、みんな親しみ感じられてる?)


アゴォー

お金は だ・い・じ ☆
現実主義的な考え方、僕は好きだな~


スー

確かにその通りですが。。
はっきりと言いますね😅

今回はそんなうえのさんの魅力を掘り下げていきます✨
それでは、ひとこと自己紹介をお願いします。


うえのさん

音楽や絵、ドラマや映画などの作品を鑑賞する事が好きです。

最近は編集に興味をもち、自身の料理動画の編集に力を入れています。


スー

音楽以外にも色々な芸術を鑑賞することが好きなんですね♪
現状に満足せず新しいことに挑戦する姿もかっこいいと思います🙂

うえのさんの心に残っている作品をなにか一つ教えて頂いてもよろしいですか?


うえのさん

映画「タイタニック」です。船上の演奏家たちの最後の誇りが胸をうちます。


スー

名作ですよね!!
タイタニックは映画としても音楽としても素晴らしいので、うえのさんらしい回答ですね😊
また観たくなってきました~♪


(なんだか親しみを感じてきたぞ☆)

あとYouTubeも見させて頂きました!
料理するうえのさんの適当さが面白くて爆笑してしまいました😁
でもちゃんと合理的で節約料理の勉強にもなるし、料理の楽しさも伝わってきます✨

ダラーン

いや~これは絶賛したい♪
YouTubeでも料理番組でも


そんなに上手くいきますかぁ??

って突っ込みたくなるんですが、うえのさんの動画は普通に上手くいかないです😲(笑)
なので上手くいかないもどかしさを一緒に体験して、その時の対処法を学べるのがめっちゃ良いです😆
あと食材揃ってない時や省スペースでどう調理するのか、無駄にしない節約術がとても参考になります!!


スー

なるほど~
そんな目で料理番組みてたんだね☆

ちなみに、うえのさんおすすめの動画はなんですか?


うえのさん

1番再生数が多い「お好み焼き」ですかね。


スー

こちらがその動画です~

料理する方もしない方も是非観て下さい♪
お好み焼き食べたくなってきた😋


続いて、古くからアプリを使用して頂いてるうえのさんですが、musicLineを使っている理由はなんですか?


うえのさん

音楽を継続するに越したことはないのですが、私のように一旦リタイアして音楽を再開する人もいるので、20年も経つと初心者同様で、その中でも最も使いやすいアプリでした。


スー

musicLineを選んで頂いてありがとうございます~

アゴォー

20年のブランク!?

もしかして想像してるよりも上の世代なのか!!


スー

そこ!?😲
そこはどっちでもいいでしょ~
世代問わずコミュニケーションがとれるのが音楽の良さですね!!

でもアプリ作曲を受け入れて頂き嬉しいです😆
作曲はPCですることが当たり前だったので、上の世代にはあまり受け入れられてないんですよね😅
うえのさんはコメント機能を追加した当初から、よくコミュニティを利用していただいてます。

実はコメントした曲数が一番多いのが、うえのさんです✨

そこで質問です。
コメントで心がけてることはありますか?


うえのさん

1番多いのに驚愕ですが、心がけていることは「初投稿」のタイトルやタグがあると、慣れない場所に踏み込む勇気とゆうのが大変であることが分かるので、できるだけ声をかけたりいいねを押して2回目も待っていますよと伝えたい想いで聴いています。


スー

やさしい

すごくありがたいです♪
確かに初めてコミュニティに投稿するときって勇気がいりそうですよね😭
コメントをもらえたら嬉しいし、二回目も作ろうって思えますね✨
これからもよろしくお願いします!

今後の予定や目標を教えていただけますか?


うえのさん

金と権力が欲しいです。


スー

!!!


(親しみが遠のいていくよぉ。。)


アゴォー

金と権力☆
うん、良い響きだ~


うえのさん

生活の地盤があってこそ夢を見れるのであって、その地盤が整わない環境にいる人の助けに少しでもなりたいです。

そのための金と権力です。


スー

なるほど。
金と権力が欲しいってだけ聞くとかなりダークな感じですが、夢を見れるように手助けしたいってことなんですね🤔

そう思うきっかけになったことはありますか?


うえのさん

家族が病気になってお金が必要になったことがきっかけです。金と権力は悪用しなければ大きな力となります。


スー

そうだったんですね!!
ご苦労されてきたようですね。。


お子さんも育てられてとても尊敬します🙂
世の母親は強いことがよくわかりました!
なんだかうえのさんという人物が少しわかったような気がします。

それでは最後にみなさんに聴いてもらいたい自分のオリジナル曲を教えてください


うえのさん

「フリフリラ」です。 自身の子ども達に書いた前向きな曲で、料理動画のBGMに使っています。


スー

うえのさん「フリフリラ」
https://3musicline.com/community/16693 (アプリリンク)

素敵な曲ですね♪
タイトル「フリフリラ」にはどういう意味が込められてますか?


うえのさん

「フリフリラ」は自身の子ども達に書いた曲ですが全て白鍵で作っています。誰もが親しみ踊れる曲であることを意識しました。


スー

白鍵だけなんですね☆
みなさんもぜひ聞いてください♪

僕もピアノで弾いてみようかな~


というわけで今回はインタビュー企画第2弾、2人目のうえのさんへのインタビューでした。
お忙しい中ありがとうございました!

次回は現在ボカロPとして活躍されている、るりあさんを紹介しますのでお楽しみに☆


次へ




白夜さんインタビュー

mL民のインタビュー企画第2弾1回目のインタビューです。
※mL民:作曲アプリmusicLineユーザーのこと
第1弾を含めると今回でインタビュー7人目になります✨
(「」タグで他も見てね☆)

インタビュー企画第2弾は僕スー(運営)が気になる3名の方にオファーさせていただきました!

今回は白夜さんを紹介します。
DMでのやり取りをインタビュー形式にまとめました。

  


スー

白夜さん、よろしくお願いします。
それではまずユーザーネームの由来を教えてください。


白夜

本名から2文字取ってこれにしました。


スー

なんと!本名からなんですね☆

。。。もしかして!

いや、気になりますが予想するのはやめておきます😊

では次に、ひとこと自己紹介をお願いします。


白夜

白夜です。musiclineはかなり昔から使わせていただいています。
最近はあまり作曲できていないので、私のことを知らない方もいらっしゃるかと思いますが、このインタビューを見て少しでも興味を持っていただけたら嬉しいです。


スー

本当に長く使って頂きありがとうございます!
確かに最近musicLineを使い始めた方は知らないかもしれないですね😭

でも殿堂入りを果たしたり、第1回作曲コンテスト「RPGのBGM」では1位に輝き、昔から魅了的な作品を多く残して頂いているので、オファーしました😆
今回はそんな白夜さんにインタビューできて嬉しいです♪

白夜さんと言えば歯車のアイコンが特徴的ですが、

歯車を選んだ理由はありますか?


白夜

なんかかっこよかったからです!
ただずっと使う気はなくて、いいアイコンが見つかるまでのつなぎとして使っていたのですが、歯車のイメージが定着してしまっていたので結局そのままになっています。


スー

シンプルーーーな答えですね!


でも歯車かっこいいのはわかります~
なんか感覚が似てるかもしれないですね😄

聞くと最近かなり多忙だということですが、どういう仕事をされていますか?


白夜

あまり詳細は言えませんが、企画開発系の仕事をしています。音楽とは完全に無縁の職です。


スー

企画開発ってかなり興味深いところですが。。
色々と言っちゃいけないことが多そうですね~

でも作曲できることって発想力とか論理的思考力が高いと思います!
なので音楽が企画開発の仕事に繋がったんじゃないかな~
そっか!musicLineで作曲してたから、企画や開発の能力が鍛えられたのでは😋

なんてね~
(都合よく解釈しちゃお☆)



それでは、次の質問です。
好きな楽器はなんですか?


白夜

私の曲を聞いたことがある方はだいたい予想できると思いますが、アコースティックピアノが好きです。


スー

確かに、ピアノのイメージありますね〜


白夜

軽く作曲したい際に、楽器1つで完結させられるアコースティックピアノにはつい頼りがちになってしまいます。
ちなみにピアノは弾いたことがないので、こんなん人間には弾けないよって曲になっていても見逃してほしいです...


スー

ピアノ弾いたことないんですか!それでも表現力が高くてびっくりです😲
打ち込みは楽器の経験がなくても良いので、そういう方にもmusicLineを使って頂いて嬉しいです。

こんなん人間には弾けないよって曲、僕は好きです☆
そういう曲を表現できるのも打ち込みの魅力ですからね~♪

音楽知識があまりないということですが、作曲は感覚で音を追加していくような感じですか?


白夜

そうですね。理論はあまり勉強していないので、感覚に頼っています。
ただ、感覚だけで作っているとなかなか引き出しが増えないと感じるので、いずれ理論についてもちゃんと勉強したいですね。


スー

確かに音楽理論があると、引き出しが増えそうですね~



うんうん

(お、いたんだダラーン)

ダラーン

musicLineとしては自然と音楽理論が身に付くような設計にしたいと思ってます。音楽理論って程のものでなくとも、次はどうすれば良い曲に磨いていけるのかがわかるような仕組みを作りたいなあ🤔
知識なしでもセンスで突っ走れば良いけど、大半が作曲できたって実感が沸かずに辞めちゃうんだよね。。

それは勿体ない!!
少しの知識でも、次はこうしてみようかなって思えることで作曲が楽しくなると思うな~


スー

うんそうだね~
ごめんなさい突然musicLineの想いを語っちゃった😄
ありがとう、ダラーン

気を取り直して、
感覚に頼っているということですが、白夜さんは作曲する際に心がけていることはありますか?


白夜

シンプルかつ綺麗な音が鳴るように心がけていますが、如何せん音楽的な知識があまりないので、いつも頭を捻りながら作曲しています。


スー

シンプルーーーな音!

白夜さんの曲は繊細でエモいメロディな曲が多いように感じていましたが、シンプルと綺麗を心がけてるんですね♪
知識よりも音を置いては消してを繰り返して紡ぎ出される感じですかね~🙄

でも音楽知識がないと、思うように作曲できなくて嫌になってしまうような気がします。
作曲始めた頃はどういう思いで作曲してましたか?


白夜

私の場合は、むしろ作曲始めたての方がのめりこめていましたね。なんとなく音を置いて、思ったとおりの音が鳴らせた時が楽しくて、ひたすら曲を作っていました。
むしろある程度自分のスタイルが固まってきて、曲調がワンパターン化してしまう時期の方がモチベーションを保つのが難しい気がします。そういった点で、日々新しい曲調にチャレンジしているmlの方々はとても尊敬しています。
私もそう在れたらいいなと常々思っていますが、そもそもここまで作曲を続けてこれたのは、始めるにあたってmusiclineという使いやすいツールに出会えた事が大きいです。素敵なアプリをありがとうございます🙇‍♂️


スー




musicLineを褒めて頂いてありがとうございます!
思った通りの音が鳴らせた時って楽しいですよね😁

確かに、作曲初めのわからない時期もそうですが、新鮮さを味わえなくなったマンネリ化の時期もハードルがありますね。
何事も続けることは難しいですが、同じ時期に作曲してるmL民がいるって感じれれば、もうちょっと続けるかって気持ちになるかもしれませんね~
白夜さんをはじめ、日々チャレンジングなmL民の方々に感謝です😊

今後の予定や目標を教えていただけますか?


白夜

最近は短いフレーズしか作らなくなってしまっているので、ちゃんとしたものを1曲作るのが目標でしょうか。


スー

今は短い曲も流行っているようですが、ぜひまたフルの曲も期待しています!


白夜

あとiOSに移行してしまったので、iOS版のmusiclineが出ることがあればまたそちらにも顔を出したいと思っています。


ダラーン

ありがとうございます!
iOS版を作る励みになります😆

スー

また白夜さんの曲聴きたいな~
インタビュー時は告知してませんでしたが、iOS版は来年(2025年)夏リリースを目標にしています☆
お仕事も忙しいと思いますが、iOS版を作って待ってます♪

急がなきゃー



それでは最後にみなさんに聴いてもらいたい自分のオリジナル曲名を教えてください!


白夜

night skyと夕立ですかね。
どちらも殿堂入りはしていないのですが、個人的に気に入っている2曲です。


スー

白夜「Night sky」
https://3musicline.com/community/65942 (アプリリンク)

白夜「夕立」
https://3musicline.com/community/34130 (アプリリンク)

殿堂入りしてなかったんですね!
どちらも聞かせていただきました😊
みなさんもぜひ聞いてください♪

というわけで今回はインタビュー企画第2弾1回目の白夜さんのインタビューでした。
お忙しい中ありがとうございました♪
企画開発のお仕事も大変そうですが、無理せずに頑張ってください!

次回はmL民のお母さん的存在、うえのさんを紹介しますのでお楽しみに☆


次へ




【iOS】作曲画面の進捗報告 6

musicLine(iOS)についての進捗。
フレーズツールの追加実装と通知機構の見直し、描画速度の改善について報告します。

フレーズツールと変更通知の動作


実装状況
カテゴリタイトル補足
View
Composition
UI配置
ガイド表示
音符描画の高速化音符が多くても描画できる速さへ最適化
音符の編集状態選択や変更した時に枠線の色変更
Composition
Common
作曲共通
通知機構Modelに変更があった時に、Viewへ通知して再描画。変更状況を監視してキャッシュ
PhraseTool
フレーズツール
フレーズの編集
データ構造トラックのフレーズを取得・追加、削除、状態 通知機構の実装を見直す。現状は一部描画がおかしい
フレーズの結合連続する2フレーズの接する小節線をタップで結合(iOS独自)
フレーズの分割フレーズをタップで分割(iOS独自)
MIDI
Common
MIDI共通
データ構造MIDIフォーマットへ出力できる構造
コンバーターCompositionのデータ構造へ変換・逆変換


全進捗マップを表示

カテゴリタイトル補足
View
Composition
UI配置
ガイド表示
ピアノ
スクロールエリア
小節番号
小節線
分割線拡大率によって間隔を変化
フレーズフレーズがないところはフレーズ作成ボタンを表示
ツールボタン 選択中のツールはツール色にハイライトする
メロディーライン ペンツールでの音符作成時の入力線
メロディー音符 音符の先頭にチョボをつける
リズム音符 ベース音符のみ下に表示
サンプルデータ 手入力したサンプルデータの音符を配置
連符連符は数字で表示、拡大率によって省略
ツールガイド(ペン)長さ編集しているリズム音符、伸ばした時の削る範囲音符移動時、移動先の音階をわかりやすくする
ツールガイド(指)移動中の音符影、矩形選択の枠
ツールガイド(消しゴム)削除範囲、和音のみの削除範囲
ツールガイド(フレーズ)フレーズ移動・伸縮のバー、選択範囲テキスト(iOS独自)
フレーズボタンフレーズボタンとサブボタンを配置、ツールに応じてアイコンを変更、画面拡大率に応じて縮小
フレーズタブツールに応じてアイコンを変更、拡大率に応じて縮小、スクロール状態に応じて移動
音符描画の高速化音符が多くても描画できる速さへ最適化
音符の編集状態選択や変更した時に枠線の色変更
音符音階メロディ音符に音階表示
Community
UI配置
Dialog
ダイアログ
フレーズフレーズの作成・設定・挿入、フレーズの長さやリピート回数の設定
Composition
Common
作曲共通
データ構造座標とサイズ、状態を保持する。レンダラーやコライダー、通知等のロジック
コンバーターDomainのデータ構造へ変換・逆変換
通知機構Modelに変更があった時に、Viewへ通知して再描画。変更状況を監視してキャッシュ
FingerTool
指ツール
音符の編集
データ構造フレーズの音符を取得、基点と移動ベクトルを保持して移動する
音符の移動和音や連符は上下のみに制御
音符の影移動中に操作できているかわかりやすいように(iOS独自)
内外判定音符の移動をフレーズ内に留める
衝突判定移動する音符が他の音符に重なったときの挙動
タップ選択タップした音符の子音符も選択・解除
矩形選択囲った音符を選択
音符の入れ替えリズム音符のスライドで重なった音符と入れ替える(iOS独自)
和音の削除和音を移動した時に重なる時に削除する
連符に切り替えリズム音符タップで切り替え
PenTool
ペンツール
音符の作成
データ構造音符を作成・分割・統合、フレーズへ音符を追加する
音符の作成タップで音符を作成。分割線に合わせて長さを決定
音符列の作成スワイプに沿って複数の音符を作成。音階変わる時に音符分割
有無判定タップやスワイプした縦ラインに既に音符があるか判定
音符の移動音符が既にある場合は、作成ではなく移動。一定距離進むと移動終了
音符の分割リズム音符をタップした時、音符を分割、メロディ線に沿ってY位置を動かす
音符の統合2つのリズム音符の間をタップした場合、音符を統合
音符の伸縮リズム音符を左右にスワイプすることで音符の長さを伸縮、始点で分割なし(仕様変更)
音符の消滅音符の伸縮をした時に長さが0になると削除する(iOS独自)
領域差演算音符伸縮で他の音符に重なる時は差演算して他の音符長さを削る
サンプリング補間素早くスワイプしても音符が移動できるようにサンプリング間を補間する
細かい音符分割線内の細かな音符を移動する挙動
EraserTool
消しゴムツール
音符の削除
データ構造和音と連符の認識、フレーズから音符を削除する
音符の削除タップで音符を削除
和音・連符の削除和音・連符をタップで和音・連符のみを削除(iOS独自)
音符種別判定タップした音符が和音・連符・ルート音符なのか判定する
音符列の削除スワイプで指定する削除範囲内の複数の音符を削除。
和音列の削除リズム音符をスワイプで複数の和音のみを削除。(iOS独自)
休符に切り替えリズム音符タップで休符に切り替える
PhraseTool
フレーズツール
フレーズの編集
データ構造トラックのフレーズを取得・追加、削除、状態 通知機構の実装を見直す。現状は一部描画がおかしい
フレーズの作成・挿入ダイアログで長さとリピートを設定 リピートフレーズは未実装
フレーズの選択2点タップで範囲選択、範囲ガイドタップで選択解除(仕様変更)
フレーズの移動左右スワイプで移動、移動は選択フレーズとスワイプ中のフレーズを含む
フレーズの伸縮サブ編集領域をスワイプした時にフレーズ長さを伸縮、長さ0で削除(iOS独自)
フレーズの貼り付け選択フレーズをコピー・ペースト、サブボタンかフレーズタブタップで挿入、選択解除
周囲有無判定作成する小節の近くにフレーズがあるかの判定、設定できる長さやリピート回数の制御
フレーズボタン・タブツールに応じてフレーズボタン、タブの処理を変更
フレーズの結合連続する2フレーズの接する小節線をタップで結合(iOS独自)
フレーズの分割フレーズをタップで分割(iOS独自)
StampTool
スタンプツール
モチーフの編集
Transform
画面移動
座標変換
画面を上下移動ピアノのスワイプにより
画面を左右移動 スクロールエリアのスワイプにより
画面を拡大・縮小ピンチアウト・インにより基点を画面中心に設定する
画面を拡大・縮小(軸指定)長押しからのドラッグ。ピアノでX軸方向、スクロールエリアでY軸方向
MIDI
Common
MIDI共通
データ構造MIDIフォーマットへ出力できる構造
コンバーターCompositionのデータ構造へ変換・逆変換
Commnity
Common
コミュニティ
共通
データ構造カテゴリ等の曲情報、いいねやお気に入り等のリスポンスを保持
Domain
データ構造
Json形式
Melody MelodyTrack, *MelodyPhrase, NoteContainer, NoteBlock, Note
Drum DrumTrack, *DrumPhrase, BeatContainer, Beat
通化 Original, Repeat, Syncの3種のPhraseをジェネリッククラスとプロトコルで抽象化
Service
サービスモデル
SongRederJsonファイルを読み込み、Domainのデータへ変換
SongWriterDomainのデータからJsonファイルへ書き出し
Common
Service
サービスモデル
MidiPlayerMidiファイルを再生する
リポジトリ保存データを管理


フレーズツールの実装

フレーズの結合

リズム編集領域でフレーズの境目をタップすることで2フレーズを1フレーズに結合します。

フレーズの結合

フレーズの結合はiOSからの新しい操作ですが、音符の統合も同じような操作(音符間の境目をタップ)なので、違和感はないと思います。


フレーズの分割

リズム編集領域でフレーズ内の小節線をタップすることで、その小節線から左右にフレーズを分割します。
なお、音符がフレーズ外にある時は切り取り、音符がフレーズ間を跨っている場合は長さを短くします。

フレーズの分割

こちらも音符の分割と同じような操作を意識しました。



通知機構の見直し

通知機構
音符の編集状態

通知で音符の編集状態が変化

前回はフレーズを変更しても描画に反映されない不具合があり、スクロールをして強制的に描画を要求してました。
これはモデルの通知機構に問題があり、モデルの変更を適切に監視できてないことが要因になっていました。モデルの監視について、ObservableObjectからEventBusの仕組みに変更することで解決しました。

通知機構の選定など内部的な話はこちらの記事で紹介しています。


描画速度の改善

描画速度の改善によるFPSの向上

リズム音符の描画方法を見直し、処理の最適化を行いました。このくらい音符を敷き詰めるとfps10程度になっていましたが、fps20程度に向上しています。



おわりに

フレーズツールの追加実装と通知機構の見直し、描画速度の改善を行いました。

フレーズの結合・分割はmusicLine(Android版)で要望で上がっている機能改善項目です。Androidは基盤が固まっているので修正がかなり大変ですが、iOS版はリメイクするついでに要望も取り入れてます。iOSリリース後に良い機能はAndroidにも反映していきたいと思います。

通知機能は不安定でしたが、かなり安定してきて一安心です。
描画速度が遅いと最後にボトルネックになるので今のうちからちゃんとして最適化しておかないといけないですね。

次は、MIDIのデータ構造へ変換するコンバーターモデルを実装していきます。musicLineの作曲データをMIDIのデータへ変換できると、MIDIプレイヤーで音を鳴らすことができるようになります。



記念動画デザインの観察(ランキング・急上昇・殿堂入り編)

musicLineの記念動画(ランキング・急上昇・殿堂入り)のデザインを紹介。
内部の実装もちょこっと紹介!の第二弾です。

ランキングの記念動画



はじめに

musicLineコミュニティでは曲(MIDI)の再生時に音の可視化映像が流れますが、ランキング等で上位に上がった曲はキラキラしたリッチな表現の映像になります。

ちなみに、前回はコンテストの記念動画を紹介しました。

今回はランキング・急上昇・殿堂入りの映像について観察し、内部実装(GLSLのコーディング)について軽く触れます。



デザインの観察

ランキングと急上昇の記念動画 1~8 位と殿堂入り含めて合計17種類あります。
各々のバリエーションを比較して、記念動画の要素を分解することでデザインを観察します。

バリエーションの比較

殿堂入りとランキング・急上昇の 1~4 位の記念動画を比較します。

殿堂入り
ランキング 急上昇

各々の記念動画を比較すると

  • 順位ごとにテーマカラーがある
  • モチーフの図形が異なる(丸、菱形、格子)
  • ランキング・殿堂入りはノイズ感がある
  • ランキングはチェック模様、殿堂入り奥行きのある背景
  • 3位以上はより華やなエフェクト
  • 殿堂入りは色合いにグラデーションが掛かる

等の違いがあります。


以下に紹介させて頂いた曲のアプリリンクを載せています。
気になった曲はmusicLineで聴いてください ♪

殿堂入り
ランキング 急上昇


要素の分解

この記念動画を分解すると、4つの要素(レイヤー)で構成されています。

名前 イメージ
エフェクト
情報
コンテンツ
背景

この内、エフェクトと背景を変えることで記念動画のバリエーションを出しています。

エフェクト(ランキング)



エフェクトの実装

今回はランキング記念動画を単純化したピカーンエフェクトの実装を紹介します。AndroidはOpenGLESが動作するため、実装はGLSLを使いました。

ピカーンエフェクト

なお、サンプルはWebでGLSLを実行できるエディタ** The Book of Shaders Editor **で表示して確認しました。


エフェクトの構成要素

ピカーンエフェクトは3種類のアルファアニメーションを用いて、カラーとテクスチャをブレンドすることで実現しています。

構成要素 イメージ
アルファ 1

パターン
アニメーション

アルファ 2

コースティクス
アニメーション

アルファ 3

リフレクション
アニメーション

カラー
テクスチャ


パターンアニメーション(アルファ 1)の作成


パターンアニメーションは座標変換アニメーションの2ステップで解説します。

1. 座標変換

菱形を描画しやすいように、
ST座標回転ST座標タイル座標
と座標を変換します。

ST座標

precision mediump float;
uniform vec2 u_resolution;

void main() {
    vec2 st = gl_FragCoord.xy / u_resolution.xy; // 正規化
    gl_FragColor = vec4(st, 0., 1.); 
}

左下原点(0, 0)でサイズ 1 の基準となるST座標空間へ変換します。
このサンプルでは座標を可視化するため、gl_FragColorの赤と緑の値にXとYの値を渡して色を表示しています。なので、値が大きくなる程色がつきます。例えば、座標(1, 1)はRGB(1, 1, 0)となり黄色になります。

回転ST座標(45度回転)

...
vec2 trans_st = (st - 0.5); // 原点を中心に移動    

float rot = radians(45.); 
mat2 rot_matrix = mat2(cos(rot), -sin(rot), sin(rot), cos(rot));
vec2 rot_st = trans_st * rot_matrix; // 45度回転
gl_FragColor = vec4( rot_st, 0., 1.);

菱形になるようにST座標空間を45度回転します。
回転は行列演算を用いますが、これは原点中心を起点として回転します。回転する前に原点を画面の中心に移動しておくことで、後の処理が計算しやすくなります。

タイル座標

vec2 scaled_st = rot_st * 6.;  // スケーリング
vec2 shift_st = scaled_st + .5; // 位置をずらす
vec2 tile = fract(scaled_st); // 小数点のみ(0 ~ 1の間を繰り返す)
gl_FragColor = vec4(tile, 0., 1.); return;

パターンアニメーションは中心の菱形から波紋状に周囲の菱形へ広がっていくアニメーションになります。そのため、同じ菱形が繰り返されるように、座標をタイル状に分割します。shift_stで中央に菱形が来るように位置をずらします。


2. アニメーション

アニメーションは全体と細部の2種類あります。
タイルアニメーションで全体の動き、スケールアニメーションで細部の動きを制御します。

タイルアニメーション(全体)

// 中央からタイルまでの距離
vec2 tile_pos = floor(shift_st);  // 整数へ(小数点切り捨て)
float dist = length(tile_pos);
      
// アニメーション進捗の調整
float progress = sin(u_time - dist); // -1 ~ 1 を周回
float easeIn_progress = progress * progress; // イージング(徐々に加速)
float adjust_progress = pow(easeIn_progress, 2.2) * 0.5; // 出現時間のバランスを調整
gl_FragColor = vec4(vec3(adjust_progress), 1.);

floorでタイルの座標を取得し、lengthで中心からの距離を算出しています。外側に行くほどタイルの色が明るくなります。

progressは中央からの距離と時間に応じてタイル毎のアニメーション進捗度を-1 ~ 1で算出します。ざっくり言うと0 ~ 1でアニメーションを行い、-1 ~ 0でアニメーションを休憩するイメージです。
progressのままでは単純なSin波なので、イージングでメリハリをつけたり出現時間のバランスを調整します。

ちなみに、イージングの変換数式はこちらが参考になりました。 easings.net

スケールアニメーション(細部)

// ルール画像(タイル端から中心までの距離 端 0 中心 0.5)
float animation_rule = min(min(tile.x, 1.0 - tile.x), min(tile.y, 1.0 - tile.y));

// ルール画像を元にアニメーション
float pattern_margin = 0.15;
float preview_progress = pow(sin(u_time), 2.) * .5;
float preview_value = smoothstep( preview_progress - 0.05, preview_progress, 0.95 * (animation_rule - pattern_margin));
gl_FragColor = vec4(vec3( preview_value), 1.); return;

アニメーションするために、ルール画像というものを作成します。ルール画像はアニメーション進捗度0 ~ 1を明度で示した画像です。真ん中から外へ広がるように明度を指定しています。

あとはsmoothstepを使って、ルール画像に基づき菱形が拡大縮小するような動きに制御します。

こちらはsmoothstep関数やShaderについての解説されています。
thebookofshaders.com



コースティクスアニメーション(アルファ 2)の作成

float h12(highp vec2 p) {
    return fract(sin(dot(p,vec2(32.52554,45.5634)))*12432.2355);
}
            
float n12(highp vec2 p)
{
    vec2 i = floor(p);
    vec2 f = fract(p);
    f *= f * (3.-2.*f);
    return mix(
        mix(h12(i+vec2(0.,0.)),h12(i+vec2(1.,0.)),f.x),
        mix(h12(i+vec2(0.,1.)),h12(i+vec2(1.,1.)),f.x),
        f.y
    );
}
            
float caustics(highp vec2 p, highp float t)
{
    highp vec3 k = vec3(p,t);
    highp float l;
    mat3 m = mat3(-2,-1,2,3,-2,1,1,2,2);
    float n = n12(p);
    k = k*m*.5;
    l = length(.5 - fract(k+n));
    k = k*m*.4;
    l = min(l, length(.5-fract(k+n)));
    k = k*m*.3;
    l = min(l, length(.5-fract(k+n)));
    return pow(l,7.)*25.;
}

...
float caust = caustics(st, u_time * 0.3);
gl_FragColor = vec4(vec3(caust), 1.); return;

コースティクスは水に乱反射して映し出された光を意味し、光のCG表現で使われたりします。
こちらは処理が複雑すぎて理解できなかったのですが、乱数に上手いこと規則性を持たせているようです。この辺りは数学の深い部分に入らないとわからなそうですね。。
とりあえず、caustics関数を使うことで表現できます。



リフレクションアニメーション(アルファ 3)の作成

float interval_time = 2.; // 光線が通る時間の間隔
float gap_pos = st.x * 2.0 + st.y; // 斜めにずらす
float speed = 8.0;
float line_width = 1.;
    
float dist_to_line = mod(gap_pos - u_time * speed, interval_time * speed);
float line = (1.0 - step(line_width, dist_to_line));
float decay_line = line - (line_width - dist_to_line) * line;
gl_FragColor = vec4(vec3(decay_line), 1.); 

dist_to_lineは原点から光線までの距離ですが、光線が通る時間の間隔が大きいほど座標系を大きくします。modは剰余演算(割り算の余り)なので、特定の区間を繰り返すことになります。decay_lineで光線が減衰するようにしています。



カラーの作成

vec3 shift_col(vec3 RGB, vec3 shift) {
    vec3 RESULT = vec3(RGB);
    highp float VSU = shift.z * shift.y * cos(shift.x * 3.14159265 / 180.0);
    highp float VSW = shift.z * shift.y * sin(shift.x * 3.14159265 / 180.0);
    
    RESULT.x = (.299 * shift.z + .701 * VSU + .168 * VSW) * RGB.x
        + (.587 * shift.z - .587 * VSU + .330 * VSW) * RGB.y
        + (.114 * shift.z - .114 * VSU - .497 * VSW) * RGB.z;
    
    RESULT.y = (.299 * shift.z - .299 * VSU - .328 * VSW) * RGB.x
        + (.587 * shift.z + .413 * VSU + .035 * VSW) * RGB.y
        + (.114 * shift.z - .114 * VSU + .292 * VSW) * RGB.z;
    
    RESULT.z = (.299 * shift.z - .3 * VSU + 1.25 * VSW) * RGB.x
        + (.587 * shift.z - .588 * VSU - 1.05 * VSW) * RGB.y
        + (.114 * shift.z + .886 * VSU - .203 * VSW) * RGB.z;
    
    return (RESULT);
}

...
float gap_pos0 = (st.x + st.y); // 斜めにずらす
vec3 shift = vec3(200.0 * (gap_pos0 + u_time), 1.0, 1.0);
vec3 rainbow = shift_col(vec3(0.5, 0.3, 0.2), shift);

shiftは(色相、彩度、明度)をshift_col関数に指定しますが、そのうちの色相のみ変更しています。色相はST座標と時間で決めており、時間が進むことで色が変化していきます。



テクスチャの作成

highp float random(highp vec2 st){
    return fract(sin(dot(st.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

...
float sand_noise = mix(.7, 1., random(st));
gl_FragColor = vec4(vec3(sand_noise), 1.);

サンドノイズのテクスチャはrandom関数で簡単にを作れるので、金属感を出す時などにおすすめです。最小を白と最大を黒にすると、コントラストが効きすぎるのでmixで微調整しています。


全コードを表示

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

// 乱数を取得する。
highp float random(highp vec2 st){
    return fract(sin(dot(st.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

// shiftにより、色をずらす。
vec3 shift_col(vec3 RGB, vec3 shift) {
    vec3 RESULT = vec3(RGB);
    highp float VSU = shift.z * shift.y * cos(shift.x * 3.14159265 / 180.0);
    highp float VSW = shift.z * shift.y * sin(shift.x * 3.14159265 / 180.0);
    
    RESULT.x = (.299 * shift.z + .701 * VSU + .168 * VSW) * RGB.x
        + (.587 * shift.z - .587 * VSU + .330 * VSW) * RGB.y
        + (.114 * shift.z - .114 * VSU - .497 * VSW) * RGB.z;
    
    RESULT.y = (.299 * shift.z - .299 * VSU - .328 * VSW) * RGB.x
        + (.587 * shift.z + .413 * VSU + .035 * VSW) * RGB.y
        + (.114 * shift.z - .114 * VSU + .292 * VSW) * RGB.z;
    
    RESULT.z = (.299 * shift.z - .3 * VSU + 1.25 * VSW) * RGB.x
        + (.587 * shift.z - .588 * VSU - 1.05 * VSW) * RGB.y
        + (.114 * shift.z + .886 * VSU - .203 * VSW) * RGB.z;
    
    return (RESULT);
}

float h12(highp vec2 p) {
    return fract(sin(dot(p,vec2(32.52554,45.5634)))*12432.2355);
}
            
float n12(highp vec2 p)
{
    vec2 i = floor(p);
    vec2 f = fract(p);
    f *= f * (3.-2.*f);
    return mix(
        mix(h12(i+vec2(0.,0.)),h12(i+vec2(1.,0.)),f.x),
        mix(h12(i+vec2(0.,1.)),h12(i+vec2(1.,1.)),f.x),
        f.y
    );
}
            
float caustics(highp vec2 p, highp float t)
{
    highp vec3 k = vec3(p,t);
    highp float l;
    mat3 m = mat3(-2,-1,2,3,-2,1,1,2,2);
    float n = n12(p);
    k = k*m*.5;
    l = length(.5 - fract(k+n));
    k = k*m*.4;
    l = min(l, length(.5-fract(k+n)));
    k = k*m*.3;
    l = min(l, length(.5-fract(k+n)));
    return pow(l,7.)*25.;
}

// タイル座標(回転あり)を取得する。
vec2 convertRotatedTileCoord(vec2 st, float degree, float repeat){
    vec2 trans_st = (st - 0.5); // 原点を中心に移動
    float rot = radians(degree); 
    mat2 rot_matrix = mat2(cos(rot), -sin(rot), sin(rot), cos(rot));
    vec2 rot_st = trans_st * rot_matrix; // 回転
    vec2 scaled_st = rot_st * repeat;  // スケーリング
    return scaled_st;
}

void main() {
    // ST座標
    vec2 st = gl_FragCoord.xy / u_resolution.xy;
    // gl_FragColor = vec4(st, 0., 1.); return;
    
    
    // 回転ST座標
    vec2 scaled_st = convertRotatedTileCoord(st, 45., 6.);
    vec2 shift_st = scaled_st + .5;
    // gl_FragColor = vec4(shift_st, 0., 1.); return;
    
    
    // タイル座標
    vec2 tile = fract(shift_st); // 小数点のみ(0 ~ 1の間を繰り返す)
    // gl_FragColor = vec4(tile, 0., 1.); return;
      

    // タイルアニメーション(全体)
    vec2 tile_pos = floor(shift_st);  // 整数へ(小数点切り捨て)
    float dist = length(tile_pos);
    // gl_FragColor = vec4(vec3(dist * .1), 1.); return; // 中央からタイルまでの距離
      
    // アニメーション進捗の調整
    float progress = sin(u_time - dist); // -1 ~ 1 を周回
    float easeIn_progress = progress * progress; // イージング(徐々に加速)
    float adjust_progress = pow(easeIn_progress, 2.2) * .5; // 出現時間のバランスを調整
    // gl_FragColor = vec4(vec3(adjust_progress), 1.); return; 

    
    // スケールアニメーション
    // ルール画像(タイル端から中心までの距離 端 0 中心 0.5)
    float animation_rule = min(min(tile.x, 1.0 - tile.x), min(tile.y, 1.0 - tile.y));
    // float preview_progress = pow(sin(u_time), 2.) * .5;
    // float preview_value = smoothstep( preview_progress - 0.05, preview_progress, 0.95 * (animation_rule - .15));
    // gl_FragColor = vec4(vec3( preview_value), 1.); return; // スケールアニメーションのみ
    
    float pattern_margin = 0.15;
    float value = smoothstep( adjust_progress - 0.05, adjust_progress, 0.95 * (animation_rule - pattern_margin));
    
    // タイルにばらつきを与える
    value *= mix(.5, 1., random(tile_pos));          
    // gl_FragColor = vec4(vec3(value), 1.); return;
      
    
    // コースティクスアニメーション
    float caust = caustics(st, u_time * 0.3);
    // gl_FragColor = vec4(vec3(caust), 1.); return;
    
    
    // リフレクションアニメーション
    float interval_time = 2.; // 光線が通る時間の間隔
    float gap_pos = st.x * 2.0 + st.y; // 斜めにずらす
    float speed = 8.0;
    float line_width = 1.;
    
    float dist_to_line = mod(gap_pos - u_time * speed, interval_time * speed);
    float line = (1.0 - step(line_width, dist_to_line));
    float decay_line = line - (line_width - dist_to_line) * line;
    // gl_FragColor = vec4(vec3(decay_line), 1.); return;
    
    
    // カラーの作成(レインボーパターン)
    float gap_pos0 = (st.x + st.y); // 斜めにずらす
    vec3 shift = vec3(200.0 * (gap_pos0 + u_time), 1.0, 1.0);
    vec3 rainbow = shift_col(vec3(0.5, 0.3, 0.2), shift);
    // gl_FragColor = vec4(rainbow, 1.); return;
    
    
    // テクスチャの作成(金属のサンドノイズ)
    float sand_noise = mix(.7, 1., random(st));
    // gl_FragColor = vec4(vec3(sand_noise), 1.); return;
    
    
     gl_FragColor = vec4(vec3(value + caust + decay_line) * rainbow * sand_noise, 1.); 
}



おわりに

今回はmusicLineの記念動画(ランキング・急上昇・殿堂入り)のデザインを紹介しました。共有動画をもっと美しくしたいと軽い気持ちで手をつけましたが、良い感じにエフェクトを付けることは思ったより大変でした。orz

今回も内部処理をがっつり紹介してしまいましたが、ざっくりイメージが伝われば良いなと思います。奥深いShaderの世界を知って、少しでもプログラミングに興味を持っていただければ嬉しいです。

あと今回は省略しましたが、殿堂入りの記念動画は最後に特殊な処理が施されています。また機会があればOpenGLのFBOという機能について紹介します。


え、そんなマニアックな機能興味ない?
まあそう言わず〜 ( ◜ᴗ◝)و