サブスクリプション型クラウドファンディングPatreonの始め方。


Patreonとは

日本語では金持ちの道楽のようなイメージが強いですが、本来支援者を意味する単語のPatron(パトロン)が語源のクリエイター向けサブスクリプション型クラウドファンディングです。
日本でもKickstarterCAMPFIRE等、単発のプロジェクト型のクラウドファンディングやジャンル特化型のクラウドファンディングは増えてきました。
その手のクラウドファンディングが若干飽和状態にある中、先日CAMPFIREが定額課金型のクラウドファンディングを発表しました。そのビジネスモデルの先駆けがPatreonです。

patreon_logo

THE BRIDGE – CAMPFIREが定額課金の「ファンクラブ」を開始へ、クラウドファンディングを超える事業モデルとは

サブスクリプション型のメリット

サブスクリプション型のメリットは何といっても自分のペースで進められる事だと思います。
単発プロジェクト型のクラウドファンディングでは時間的な制限(終了期限)があるので出来るだけ完璧な状態でローンチする必要がありますが、Patreonは肝となる支援への見返りだけある程度決めたら、とりあえずローンチしてから色々と修正しながら運営できるので短期決戦の単発プロジェクトより気持ち的にかなり楽です。
YouTuberやクリエイターとの相性が良いのでフィーチャーされているプロジェクトもそのようなジャンルの方々が多いです。

デメリットは?

デメリットを挙げるなら初期投資ががっつり必要な商品開発等のプロジェクトとはあまり親和性がないので、そういう点では従来のクラウドファンディングとは棲み分けができていると思います。(サービスそのものもクリエイター向けと謳っています。)
支援に対する見返りも月々だったり設定したゴールにリーチする度に用意する必要がある点も従来のクラウドファンディングとは異なります。総合的な手間という面ではPatreonの方がやること自体は多いと思います。
CAMPFIREが「ファンクラブ」と銘打ったのは上手いと思いました。

ターゲット

まずプロジェクトの肝となるのは他のクラウドファンディングと同様何を作るかです。
自分たちはトロントやオンタリオ州にいる芸術家(アーティスト)のショートビデオを毎週YouTubeでアップロードする“30sec film artists”というプロジェクトをかれこれ1年以上続けてきました。
おかげ様でチャンネル登録者等も増えてきて殆どの撮影したアーティストの方々にはビデオを気に入って貰ってますが、ユーザーの殆どが10代で笑える動画やゲーム動画がメガコンテンツのYouTubeでは自分たちがメインとしているターゲット(20代後半以上のアート好きな女性)とのミスマッチもあって思った以上にオーディエンスの獲得に苦戦しています。
PatreonでもYouTube同様コメディやゲーム動画は依然強いですが、クリエイターやアーティストも多いので他のクラウドファンディングに比べても自分たちのコンテンツとは親和性が高いように思います。

Patreonで稼いでる人のランキングTOP50(Top Patreon Creators 英語)

ちなみにCAMPFIREとは違いアダルトコンテンツにも積極的なので某同人3Dエロゲが海外でのローカライズを目指してPatreonを利用するそうです。

MoguraVR – 話題のアダルトVR体験ソフト「なないちゃんとあそぼ!」海外展開へ

始め方

Patreonが日本語でのサービスを始めるかどうかは分かりませんが、せっかくプロジェクトをローンチしたので始め方をシェアしたいと思います。
まずトップページへ飛ぶと「Sign Up」「Become a Creator」とあるので支援者になりたい場合は前者、支援される側のクリエイターになるには後者を選択。※1つのアカウントでどちらにもなれます。

Patreonトップページ

メールアドレスとパスワードを入力すると初期設定が始まります。

コンテンツの種類や名前、主語になるクリエイターは複数か単数か等色々聞かれます。

Patreonアカウント作成画像1

支援は月額で受けるか、コンテンツ投稿毎に受けるかを選びます。(後から変更可能)

Patreonアカウント作成画像2

アダルトコンテンツかどうか。(こちらも後から変更可能)

Patreonアカウント作成画像3

初期設定が終わるとEdit画面に飛ばされます。

Edit画面のUI

  1. ここで先ほど決めた月額/投稿事に切り替えます。
  2. 2016年10月現在はFacebook/YouTube/Twitter/Twitchのリンクが掲載可能
  3. HTMLでの記述も可能なブログ風UIでプロジェクトの紹介とイントロビデオが設定可能。
    (iframeタグが使えるのでビデオ自体は紹介文内ならどこにでも置けます。scriptタグは消されました。)

  4. 目標金額を設定します。「+Add Another Goal」で段階に分けた目標が設定可能
    (試しに20個くらい追加したけどまだできるので設定数の上限は不明)

  5. 支援者へのRewards(報酬)を設定します。(画像はデフォルト)
  6. アイコン画像の設定(512px*512px推奨)
  7. バナー画像の設定(1600px*400px推奨)

一通り終わりローンチ後はこのような感じになります。

https://www.patreon.com/filmartist

ローンチ前のEdit画面との違いは以下。

ローンチ後UI

  1. 現在の報酬額や目標金額を見せたくない場合は目標金額に対するパーセント表示で表示することもできるようです。
  2. クリエイター紹介で最大$500貰えるキャンペーン中らしいです。

クリエイター紹介説明
30日以内に紹介されたクリエイターの支援者が30超えると$50、75人以上で$100…250人で$500が貰えるらしいです。

というわけなので、Patreonに参加する際、この記事が役に立ったと思った方は是非下記のリンクからクリエイター登録をお願いします

https://patreon.com/invite/lvjrk

具体的な進め方についてはローンチ後に運営から丁寧に運営方法が説明されたドキュメントが登録メールアドレスに送られてくるのでそちらを参考にすれば良いと思います。

Patreonローンチガイド(英語)

というのも自分自身現在地がそこなので、今後アップデートできる事があれば記事にしたいと思います。

最後に

引き続きYouTubeチャンネルの応援よろしくお願いします。

Website: 30sec film artists


Autodesk MayaとDomemaster3Dで360°動画(spherical video)を書き出す方法。


Google CardboardでYouTubeの360°動画を観たら未来を感じました。

観ているうちに自分でも作りたいと思い先日360°カメラとしては破格のRicoh Theta Sを購入しました。

レビューとかは気が向いたら書きます。

撮影動画の編集自体は要領を掴むまで色々苦労しましたが極座標と直交座標の仕組みが分かれば普通の動画編集と変わりませんでした。

しかしYouTubeチャンネルにアップロードする以上カッコいいイントロは必須です。

どうせならイントロも360°にしたいと思い久々にMayaを立ち上げてイントロアニメーションをちょちょっと作成。

OpeningAnime

後はThetaと同じ天球動画、英語で言うとSpherical videoとして書き出します。

3D制作ソフトの中にはFoVを360°にすればそのまま天球イメージが書き出せるものもあるようですがMayaではビューアングルが165°までしか書き出せないようです。

fov165

しかし有能なエンジニア様達がフリーで天球イメージを書き出せるプラグインを作ってくれていたみたいで助かりました。

Domemaster3D

これをリンク先下部の説明に従ってインストールします。

するとメニューにDomemaster3Dの項目が追加されているのでLatLong Stereo Cameraを設置します。

domemaster3d

すると3台のカメラが設置されます。

threecam

今回使用するのは真ん中のカメラだけなので、LatLong Cameraだけの設置でも良いですが、後々複眼タイプの3D動画を書き出したくなった時の為にこちらを選択しておきます。

カメラのアトリビュートからcenter_LatLong_Stereoを選択してFoV(Vert)とFoV(Horiz)がそれぞれ180°と360°なのを確認したらレンダー設定からLatLongStereoCameraY(立体視ペアではない方)を選択。

centerlatsetting

rendersettingjpg

あとはTheta Sの展開イメージと同じ比率(2:1)で書き出します。

今回のような用途の場合は透過のある画像(PNG等)として書き出したほうが後で色々捗ります。

あとはイメージシーケンスとしてPremiereなりFCPにぶち込みましょう。

ちなみにレンダラ―はMental Rayしか使用できないようです。

そして完成した動画がこちら。


Riverdale Art Walk – FILMARTIST 360° Art Experience

チャンネル登録お願いします。

以上です。


【Three.js r73】colladaLoaderのモデルをRaycasterでピッキング(クリック可能)にする。


日本語は勿論英語のStack Overflowやその他色々Three.jsの事を扱っている記事を見ても現行のr73について扱った記事が無かったので備忘録。

結論から言うと以前のバージョンよりかなり簡単になっています。

「Three.js Collada Raycaster」とググって一番最初に出てくるMouse-Picking Collada Models with three.js, Part IIではr62を扱っていますがこれと比べればどの程度簡単になったのか一目瞭然。

開発者様達には感謝です。

まずcolladaLoaderでモデルを読み込む場合以下のように読み込みます。

出力したソフトや設定によってはMeshの場所が異なる場合があるのでconsole.log()等を使って予めMeshの場所を特定してテクスチャやサイズの変更を行います。
※MAYAの場合はcollada.scene.children[0].children[0]にMeshがありました。

しかしcollada.sceneをそのままシーンに追加するとTHREE.Groupとして出力されるためraycasterでピッキングできません。

r73ではレンダリングされたMeshオブジェクトをピッキングしているのでColladaモデルもMeshとしてシーンに追加します。

collada.scene内にMeshが1つの場合はscene.add(model)をscene.add(model.children[0].children[0])に書き換えてMeshを直接シーンに追加できますが、複数のMeshある場合は一つずつ取り出します。

これ全く同じものがレンダリングされますがTHREE.GroupではなくTHREE.Meshとして出力されるため他のMeshと同様にRaycasterでピッキング可能になります。

シーンごと追加した時と違うサイズや座標で出力されてしまう場合はモデル作成時に位置やサイズ情報をフリーズ(全値をデフォルト化)してない可能性があります。

MAYAの場合は「修正(Modify)>トランスフォームのフリーズ(Freeze Transformations)」
Blenderは分からないので自分で調べてください。

この方法で追加したデモがこちら。

colladaLoaderのraycasterデモ
http://cityjumperweb.com/webgl/colladaPick/

See the Pen ZQpZdZ by Yuya Saito (@U-YA) on CodePen.

これは静止したモデルでの場合なのでまだ試していませんが、アニメーションが付いている場合は勝手が違うかもしれません。

順序が逆になりましたがraycasterやcolladaLoaderの使い方については後日書く予定。


『ファイル名をわかりやすくソート』とかいう問題やろうと思ったら。


CodeIQでJavaScriptの問題でも解く練習しようと思いJavaScriptと検索してできそうな問題探してたら『ファイル名をわかりやすくソート』とか言う問題があったので挑戦しようと思いました。

が、結論から言うとコードは書き終わったけど提出できなかった。

よくよく問題を読んでみると回答を提出するには標準入力して標準出力しなければいけないみたいだが何のことだかさっぱり。

そもそもJavaScriptにもRhinoとかSpidermonkeyとか聞きなれない名前が付いてる時点で気づくべきだった。

一応気になるのでググってみるとRhinoやSpidermonkeyとはJavaScriptでコマンドライン操作やネイティブアプリを作る変態さん達用のJavaScriptのようです。

けどせっかく書いたプログラムをそっとじするのも癪なのでブログに張り付ける事にしました。

問題の内容は以下

今回は問題を簡単にするために、以下の仕様で並べ替えることにします。

  • ファイルを識別する名前は「ファイル名」と「拡張子」で構成される。例)file0123.txt
  • ファイル名部分の右端に数字がある場合は、まず右端の数字以外の部分でソートする。
  • その後、数字部分について数値としてソートする。数値として同じ場合は、さらに文字列とみてソートする。
  • 最後に、拡張子部分についてソートする。

ファイル名部分の途中に数字が入っていても、アルファベットと同じように扱うものとします。(右端の数字以外は数値とはみなさない)。
 ファイル名に使われる文字はアルファベット、数字、アンダースコアのみとし、大文字と小文字は区別するものとします。
https://codeiq.jp/challenge/2286

最初はファイル名から数字だけを抽出して文字列と数値に変換すれば良いと思ったんだがそうするとファイル名に数字が入ってる場合にそこまで抽出してしまうのでアウト。

その部分の実装に一番時間がかかり結局注釈に一番苦戦しました・・・。

で、コードがこちら。

正規表現マスターならもっとスマートに書けると思います。

最初のfor文なんか突き詰めれば1行でできそう。

ソートの部分はPHPのmultisortみたいな処理が無いのでこうするしかない。

そもそもソートの関数をアレコレ弄れば多元配列に格納せずにもできそうですが余計複雑になりそうなのでとりあえずこれで。

ちなみに処理の手順自体はすぐに思いつきましたが正規表現苦手なので想定時間の30分ではできませんでした…。


よく利用するThree.js旧バージョンからのコード書き換え(メモ)


毎回調べるのも面倒なので覚書。
色々試したくてGitHubやCodepenから他の人のコード拾ってきて弄繰り回してますが、ライブラリのバージョンが古いと一部コードに互換性が無いので、そのままでは動作しない場合があります。
バージョンアップに伴う仕様の変更はjQuery等の他のライブラリにもよくある事ですがWebGL自体まだ新しい技術なのでThree.jsは特に仕様がコロコロ変わります。
数か月前のコードをそのまま使おうとしても上手く動くことの方が稀。

ImageUtils.loadTexture

Three.jsの現行バージョンr73でもImageUtils.loadTexture(‘src’)は動きますがコンソールにもうすぐ使えなくなるという旨の注意書きがでてくるので書き換え方法

旧コード

新コード

ドキュメンテーションには.load ( url, onLoad, onProgress, onError )とあるのでロード後、ロード中、エラー時と処理を分岐できるのでもっと便利ですが、そうするとコードの構造自体書き換える必要があるのであくまで応急処置。

shadowCamera

旧バージョンではHelperを作成するのにカメラにもライトにもshadowCameraを使っていたようですが、新バージョンではそれぞれに対応するヘルパーがあるのでスポットライトに使っていたshadowCameraは使用でき代わりにSpotLightHelper(),CameraHelper()等を使います。
新しいだけあって此方の方が遥かに便利。

こちらが以前の記事『WebGLライブラリThree.jsの基礎と照明(Light)色々。』にも掲載した各種ライトのヘルパー。

See the Pen KdOVqe by Yuya Saito (@U-YA) on CodePen.

ちなみにこちらがShadowCameraで作った以前のバージョンのSpotlightのヘルパー。(by Mad Dog Tutorials)

See the Pen THREE.js Basic Scene with Spot Light by Patrick (@wpdildine) on CodePen.

今後も気づいたら色々追記していきます。