切り絵が趣味の僕がプログラムや創作物について書き溜めるブログ

絵やモデリングやプログラミングなど僕が作った物について。アニメの感想や心動かされたきっかけなどを書き溜めるブログです。Boothで3Dアバターの販売もしていますhttps://paw.booth.pm/

【3日目】VRChat民のための少しづつ身に着けるシェーダー入門

こんぱう~~~
 
今回はスライドショーを作っていきます
シェーダー入門の一日目に画像を動かすってことをしたと思います

kiriesto.hatenablog.com
その画像を動かすプログラミングを応用してスライドショーみたいに画像が切り替わるシェーダーを書いていきます
完成すると ↓ の動画ように動きます!!

youtu.be

 では、さそっく作っていこう!!!

 ・必要なもの

・適当な画像を5枚くらい、正方形のほうが見た目がいいと思います
(別に動く機能を作りたいだけならなんでもOK)
・Unity

・Unityの起動と下準備 

f:id:kiriesto:20210618200728p:plain

さっそく下の四つをそろえていきましょう
・スライドショーに使いたい画像

・Unlit Shader

・3DオブジェクトのPlane

・マテリアル

 適当な場所にスライドショーに使いたい画像を数枚(フォルダーからマウスでピッてやれば入る)、Unlit Shader(右クリックCreate>Shader>Unlit Shaderで作成できる)、3DオブジェクトのPlane(Hierarchyで右クリック>3D Object>Plane)とマテリアル(右クリック>Create>Material )も作成しておきましょう。

Projectのmaterialをドラッグ&ドロップ(マウスでピッてやる)でHierachyのPlaneに入れるとマテリアルを適用できます。

materialのshaderを作ったUnlit Shaderにしておきましょう。

 

・Shaderを書く

f:id:kiriesto:20210618202511p:plain

Show in Explorerを押すとコードがあるファイルに行くので好きなテキストエディターで表示しましょう(僕はVScodeを使っています。)

今回作ったコードは一番下に置いてあるのでコピペして使ってください。

まずはスライドする画像を入れる箱を作ってあげます。

f:id:kiriesto:20210618204050p:plain

こんな感じに書くと...

f:id:kiriesto:20210618204146p:plain
画像をいれるところが増えてる~~~
好きな画像を入れてあげましょう!!

一番上の_MainTexは最初から宣言されていますが、_Tex2~_Tex5は宣言していないので追加しておきましょう。これがないとUnityから入ってきた画像を使えません><

f:id:kiriesto:20210618204327p:plain

最後にfragの中を書いていきます。
今回の中で一番重要なので頑張っていきましょう。

f:id:kiriesto:20210618204710p:plain

完成するとこんな感じ
62行目の

i.uv.x += ((-2*x*x*x) + 3*x*x) + floor(T);

は画像のスライドする速さを調整しています。
簡単なのにすると

i.uv.cx += T;

これでも動きます。これだと一定の速度で常に画像がスライドするっていう感じです。

 

i.uv.x += ((-2*x*x*x) + 3*x*x) + floor(T);

この式の説明をしたいところですが先に

f:id:kiriesto:20210618205336p:plain

このif文がくっついているやつの説明をします。
i.uv.xはUVのx軸座標の値をとってきます。62行目で時間経過で値が足されていることに注意しましょう。

floor()は整数部分のみにしています。
floor(i.uv.x)%5はfloor(i.uv.x)を5で割ったあまりになります。
こうすることで全ての整数が0~4の値であらわされることになります。

f:id:kiriesto:20210618212155p:plain

こんな風に0~29までの値を5で割ったあまりの表作ってみました。
全てのあまり値が0~4になっていることがわかると思います。
しかも、0,1,2,3,4と順番になっているのでこの仕組みを使えば画像を切り替えられそうだなぁと考えました。

(int)floor(i.uv.x)%5の(int)は何??っとなると思います。
これはキャスト演算子と呼ばれ型を強制的に変更するっていうやつです。

今回の場合はfloor(i.uv.x)%5はfloat型(小数点も含んだ値のこと)なので0の場合は0.0という風に1の場合は1.0という扱いになるので==で値が同じかどうか比べる際に==0や==1とすると偽とでてしまったので(int)をつかって無理やりint型(整数部分のみの型)に変換してあげています。

余談、後々に検証したのですがfloor()がなくても(int)でキャストしているので小数点を省いてくれるからちゃんと動いてくれました。

つまり、このif文で画像を切り替えているわけです。UVの値は0~1の間なので
0~1までは一枚目の画像、
1~2の間は二枚目の画像、
2~3の間は三枚目の画像、・・・
ってことです。

62行目に戻って

i.uv.x += ((-2*x*x*x) + 3*x*x) + floor(T);

について説明します。
floor(T)は時間経過Tの整数部分のみを足しています。
小数部分の値の変化が画像の切り替わりかたに直結するので((-2*x*x*x)+3*x*x)でいい感じにしているわけです(xはTの小数部分になります。:float x = frac(T);)
小数部分の値をxに代入しているのでグラフにした場合の範囲は0<=x<1になります。

f:id:kiriesto:20210618214753p:plain
 (0, 0) と (1, 1) を通っていればなんでも大丈夫です。この二点の近くだと値の変化が小さくなるので画像をスライドさせた場合、画像一枚がすべて表示されるところでスライドする速度がゆっくりになります。
62行目のコードをいろいろな式に書き換えて変化を楽しんでみても面白いと思います。

 

それでは今日はここまで、
いい夢を~~~
 

 次の記事

kiriesto.hatenablog.com

 前回の記事

kiriesto.hatenablog.com

 

サンプルコード

    Shader "Unlit/slide"
{
    Properties
    {
        _MainTex ("Texture"2D) = "white" {}
        _Tex2 ("Texture"2D) = "white" {}
        _Tex3 ("Texture"2D) = "white" {}
        _Tex4 ("Texture"2D) = "white" {}
        _Tex5 ("Texture"2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;

            sampler2D _Tex2;
            sampler2D _Tex3;
            sampler2D _Tex4;
            sampler2D _Tex5;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                UNITY_TRANSFER_FOG(o,o.vertex);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                float T = _Time.y/5;
                fixed4 Tex = 0;
                float x = frac(T);

                
                i.uv.x +=( (-2*x*x*x)+3*x*x)+floor(T);
                //i.uv.y += abs(sin(T));

                if( (int)floor(i.uv.x)%5 == 0){
                    Tex = tex2D( _MainTex, i.uv);
                }else if( (int)floor(i.uv.x)%5 == 1){
                    Tex = tex2D( _Tex2, i.uv);
                }else if( (int)floor(i.uv.x)%5 == 2){
                    Tex = tex2D( _Tex3, i.uv);
                }else if( (int)floor(i.uv.x)%5 == 3){
                    Tex = tex2D( _Tex4, i.uv);
                }else if( (int)floor(i.uv.x)%5 == 4){
                    Tex = tex2D( _Tex5, i.uv);
                }

                fixed4 col = Tex;

                // apply fog
                UNITY_APPLY_FOG(i.fogCoord, col);
                return col;
            }
            ENDCG
        }
    }
}

【2日目】VRChat民のための少しづつ身に着けるシェーダー入門

今回、身に着けるのは if文と for文です。
C言語の経験者なら楽勝だと思います!!

前回でシェーダーの作り方、適応の仕方が分かっていると思います。なので、いきなりコードを書いていきましょう。
kiriesto.hatenablog.com

完成するとこんな感じ、
f:id:kiriesto:20210601194139p:plain
画像がちょうど半分のところで色が真っ白になっていると思います。 これは if文を使って画像の x座標が0.5以下のとき真っ白に塗りつぶすということをしています。

・if文とは

まず、if文とは「もし〇〇だったら△△△△してね」という条件分岐を書くときに用いる構文です。
実際にシェーダーで書いてみるとこんな感じ f:id:kiriesto:20210601194638p:plain
追加する場所は赤で囲った場所のみです。

↓こんなイメージ↓ if(条件式){     真だったらここを実行; }else{     偽だったらここを実行; }

さらに、三つ以上に分岐したい場合は else ifを使います。

if(条件式1){     真だったらここを実行; }else if(条件式2){     条件式1が偽かつ条件式2が真ならここを実行; }else {     すべて偽ならここを実行; }

・for文とは

for文とは繰り返して実行したいときに使う構文です。「10回繰り返したい」とか。
実際にシェーダーで書いてみるとこんな感じ
f:id:kiriesto:20210601195529p:plain
実行してみると画像が左に行くほど、だんだんと白くなっていくのが分かると思います。 f:id:kiriesto:20210601195257p:plain

↓こんなイメージ↓
for( 初期化; 条件式; 更新式){
    繰り返し実行したいこと;
}

もっと詳しく知りたい方は ”C言語f or文” でググるといいと思います。

今日はここまでお疲れ様でした!! 習うより慣れろ、いますぐにUnityを起動して下のコードをコピペして実行してみてください。 たった数分でできなかったことができるに!! 少しづづあなたのできることが増えていくのを楽しみにしています。

いい夢を~~~。

このブログが「いいなぁ」、「ためになったなぁ」と思った方はブログの読者に、ツイッターのフォローもよろしくお願いします。 一緒に成長できる仲間を大大大募集中!! コメントも僕の励みになるのでぜひお願いいたします。  

 

・if文のコード

Shader "Unlit/if"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                UNITY_TRANSFER_FOG(o,o.vertex);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                // sample the texture
                fixed4 col = tex2D(_MainTex, i.uv);

                if(i.uv.x <= 0.5){
                    col = ( 1, 1, 1, 1);
                }

                // apply fog
                UNITY_APPLY_FOG(i.fogCoord, col);
                return col;
            }
            ENDCG
        }
    }
}

・for文のコード

Shader "Unlit/for"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                UNITY_TRANSFER_FOG(o,o.vertex);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                // sample the texture
                fixed4 col = tex2D(_MainTex, i.uv);

                for(int n = 0; n < i.uv.x * 10; n++){
                    col += ( 0.1, 0.1 , 0.1, 0.1);
                }
                // apply fog
                UNITY_APPLY_FOG(i.fogCoord, col);
                return col;
            }
            ENDCG
        }
    }
}

【1日目】VRChat民のための少しづつ身に着けるシェーダー入門

こんぱう~~
VRchatでシェーダーに詳しい方から毎週土曜日の21:00~22:00の間に講義をしてもらうことが決まりました!!

初心者の僕に合わせてもらって基本的なことからゆっくりと教えてもらいます
なので、せっかく教わったことをまとめていこう~~~!っていうのがこの"少しづつ身に着けるシェーダー入門"というシリーズにしていこうと考えております

いままでに一度もプログラミングを書いたことがない人には少し難しいかもしれません... C言語でもなんでもいいので少しは触ったことがある。HelloWorldを表示させたことがある人なら大丈夫だと思います

 

今回教わったことは、

・シェーダーとは何なのか?

f:id:kiriesto:20210523080824j:plain
Unityで改変しているとなんとなく聞く言葉で、Toon LitとかUnitychan TOON Shader(UTS)、Matcapみたいなのがあるなぁという感じだと思います。

Toon Litだとアニメみたいな感じになって、Standardだと影がつくみたいな

まさにその通りで
「3Dオブジェクトをディスプレイにどんな感じに映し出すかを記したプログラム」です。

余談ですが、UnityのシェーダはShaderLabと呼ばれるUnity独自の記法で書かれているそうです。
参考:ShaderLab 構文 - Unity マニュアル

・型の宣言

型とはC言語でいうint、char、float、doubleの部分になります。int num;、char str; みたいに変数numはint型、変数strはchar型だよって宣言します。

宣言をしないと機械がコードを読もうとするときに「numって何??」ってなってしまうので、あらかじめ「numという箱には数字を入れます!!」って宣言することで機械がnumの中身を確認した時に「この箱の中身は数字!」と分かるようにします。

shaderでよく使う型の宣言が少し特殊だったので説明したいと思います。

floatとかfloat2、float4みたいに書きます。floatはC言語と同じ32bit浮動小数点値。
では、float2とfloat4にくっついている2と4は何なのか?

それはfloat2だとfloatの値が2個セット、
float4はfloatの値が4個セットという意味になります。

シェーダーは画像(画素)を扱うので、float2だとxy座標の値を入れたり、float4だとrgba(赤、緑、青、アルファ値)で色の情報を入れたりします。

最初はfloatの後ろに2、4がくっついてなんか変だな?って感じでしたが意味が分かるとなんだそんなことかーーって感じですね

・下準備

f:id:kiriesto:20210523111556p:plain
完成したシェーダーを実際に描画するために、上の画像みたいになるようにUnityを設定していきます。

まず、適当な画像を用意してAssetsに入れておきましょう
f:id:kiriesto:20210523111844p:plain
こんな感じになっていると思います。
(New Fol...、Scenesのフォルダはなくても問題ないです。今まで書いたシェーダーとかをしまっているだけです。)

次にprojectの中で右クリックをしてCriate->Materialを選択して、Materialを追加します。
f:id:kiriesto:20210523112328p:plain
Materialが追加されました。
f:id:kiriesto:20210523112427p:plain
Hierarchyの中で右クリックをして3D Object->planeを選択して、planeを追加します。 f:id:kiriesto:20210523123823p:plain
planeを選択した後に、Materialをplaneにドラック&ドロップしてください。
Inspectorのmaterialの名前が変更さえたらOKです。 f:id:kiriesto:20210523124752p:plain
Materialを選択して適当なテクスチャを矢印のところに入れてください f:id:kiriesto:20210523142624p:plain
できたら、planeの色がテクスチャの色になっていると思います。
f:id:kiriesto:20210523142958p:plain
これで下準備ができました。
では実際にシェーダーを書いていきましょう!!

・シェーダー作成する

Assetsで右クリックしてCreate->Shader->Unlit ShaderでShaderを追加しましょう
f:id:kiriesto:20210523144001p:plain
Standard Surface Shaderは描画を自動でしてくれる代わりに内容が複雑で改変しにくい
Unlit Shaderは描画処理を記述しなくてはいけないけど中身を改変しやすい

教えてくれる人がUnlit Shaderから始めましょう!!ってなったのでしばらくはUnlit Shaderからプログラミングします。

出来たシェーダーを右クリックしてShow in Explorerするとフォルダーが開くので適当なテキストエディターでシェーダーを開いてください。(僕はVScodeを愛用してます)
f:id:kiriesto:20210523145440p:plain
f:id:kiriesto:20210523151415p:plain
こんなコードが開けたらOKです。
さっそくコードを書いていきましょう。

・テクスチャを動かす

いまから挑戦するのはテクスチャの位置を動かすってことをします。

何も変更してないシェーダーを適用した場合は f:id:kiriesto:20210523152758p:plain
このようになります。

テクスチャ移動のシェーダーで描画すると右のScroll_X、Scroll_Yの値を変更すると左の画像の位置が動いているのがわかると思います。
f:id:kiriesto:20210523153401p:plain

・シェーダーを書く

一番下に今日作ったシェーダーを記述しておきます。
f:id:kiriesto:20210523160310p:plain
Properties{}はUnityから値を受け取るところになります。
SubShader{}内でUnityからの値を使用するために宣言しておきます。
f:id:kiriesto:20210523170428p:plain
54行目の i.uvにUVデータが入っているのでfloat2型にしたx座標とy座標の値を加算することでテクスチャの表示を動かすことができます。 f:id:kiriesto:20210523170950p:plain

出来たら保存して、MaterialにShaderをドロップ&ドラッグして適応すると更新できます。

以上で今日はここまで
いいゆめを~~~
(一番下にコードがあります。)

kiriesto.hatenablog.com

 

Shader "Unlit/New"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Scroll_X("Scroll_XX", float) = 0
        _Scroll_Y("Scroll_Y", float) = 0
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            float _Scroll_X;
            float _Scroll_Y;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                UNITY_TRANSFER_FOG(o,o.vertex);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                // sample the texture
                fixed4 col = tex2D(_MainTex, i.uv + float2(_Scroll_X, _Scroll_Y) );
                // apply fog
                UNITY_APPLY_FOG(i.fogCoord, col);
                return col;
            }
            ENDCG
        }
    }
}

【blender】みんなとわいわい オンラインモデリングの方法

f:id:kiriesto:20210517213435p:plain

こんぱう~~~!!

モデリングしているときに友達と一緒に作業ができたらいいなぁ~と思うことはありませんかぁ?
一緒に作業できたら操作方法がわからないところも簡単に手伝ってもらうことができるし、一緒にわいわいモデリングできたら楽しそうですね

 

ってことで、それを実現できるblenderアドオンがありました!!
その名もMixer

さらに、普通はhamachiVPNなどがよく使われますがもっと手軽に使用できる方法を今回ご紹介いたします

ubisoft-mixer.readthedocs.io

ポートを開放する側

・Mixerのダウンロード

上のサイトを参考にしながら導入しました
MixerGithubリリースページから最新のリリースページを開いて、zipファイルをダウンロードしてください

f:id:kiriesto:20210516212957p:plain
・Mixterのインストール

Blenderを開いて、編集->プリファレンス

f:id:kiriesto:20210516213959p:plain

アドオン->インストールを押して、先ほどダウンロードしたzipファイルを選択してアドオンをインストールしてください。

・Mixerの設定

続いて検索欄に"Mixer"と入力->Collaboration: Mixerのチェックを入れてアドオンを有効にしましょう

f:id:kiriesto:20210516214652p:plain
アドオンが導入できるていると右側のところ(Nキーで出たりするところ)にMixerというのが増えているので、それを押して歯車->Add-on Preferencesを開いてください
Mixerの設定をしていきます
f:id:kiriesto:20210516222227p:plain

f:id:kiriesto:20210516223732p:plain

BlenderプリファレンスのTabCategory:をMixer、Display Mixer and VRtist Panels: Mixerat、Host: localhostにしましょう
できたら、プリファレンスを閉じてMixerの接続を押しましょう

その後、Createをおして部屋を立てておきます

f:id:kiriesto:20210517002221p:plain

 

・ngrokとは

マルチプレイをするにはポートを開放する必要があります
そのポート開放をするためのアプリがnglokです
設定方法は以下の記事を参考にしました

zenn.dev

・ngrokアカウントの登録

ngrok.comへアクセスして、sign up からアカウントを登録しましょう
僕はGoogleアカウントsign upできたので簡単にできました

・ngrokのダウンロード

Download for Windows をクリックして、ngrokをダウンロードします

f:id:kiriesto:20210516233106p:plain

・ngrokの設定

zipファイルがダウンロードされたら展開してngrok.exeが置いてある場所の赤丸で囲ってある場所に powershell と入力してEnterキーを押してください
すると青色のウィンドウが出てくると思います

f:id:kiriesto:20210516233702p:plain

先ほどngrokをダウンロードしたページに戻って 2. Connect your accountの欄に書いてある ./ngrok authtoken XXXXXXXXXXXXXXXXXXXXX をコピーして下さい
コピーできたらpowershellに戻ってペーストします

f:id:kiriesto:20210516234546p:plain

f:id:kiriesto:20210516235938p:plain

黄色の下線を入力してEnterキーを押すとうまくいったら赤色の下線の表示が出たらうまくいっています

.\ngrok.exe tcp --region ap 12800と入力しましょう
12800の部分はBlenderプリファレンスPort番号を入力してください
Enterキーを押すと三枚目の黒い画面に切り替わったら成功です!!

ポートが解放されて、外部からblenderにアクセスできるようになりました

f:id:kiriesto:20210517000816p:plain

f:id:kiriesto:20210517001209p:plain

f:id:kiriesto:20210517001519p:plain

ポートに入る側

Blenderの設定

ポートを開放する側と同じようにBlenderにMixerをダウンロードしてください

その後、ポートを開放した人から黄色と水色の下線が付いたところの値を教えてもらい、BlenderプリファレンスのHostのところに以下の画像のように入力してください

f:id:kiriesto:20210517210922p:plain

最後に接続して開いてあるRoomにLeaveRoomすれば一緒に作業ができるはずです

※入る側のアドレスと開放する側のアドレスは違うので気を付けてください

・注意事項

MixerでBlenderを共有するときに、有料のアバターを開いたりするのはやめましょう!!
簡単にダウンロードすることができてしまうので注意が必要です

今日はこの辺で、いい夢見ろよ~~~

 

 

【VRC】アバター改変をするならCLIP STUDIO PRO!おすすめする5つの理由

f:id:kiriesto:20210515144835p:plain僕はいままでにいくつかのフリーペイントソフトを触ってきましたがより可愛くきれいにアバターを改変したいなら断然 CLIP STUDIO PAINT PRO がおすすめです!!
クリスタ は有料になるので無料でイラスト改変をしたい人はGIMPやFireAlpacaをまずは試してみるのがいいと思います。)

今回はなぜCLIP STUDIO PAINT PRO おすすめなのかを 解説していきます。

もっとうまくアバターを改変したいと思っているあなたのヒントになる記事になっていると思いますので是非見ていって下さいね。


CLIP STUDIO PAINT とは、最も世界で使われているお絵かきソフトです。
イラストだけじゃなく漫画も描けて、デジタルで絵を描く人にとっておすすめのソフトです。

テクスチャ改変はデジタルがを描くこととほぼ同じなので、シェアNo.1のクリスタ をおすすめしたいってわけです。

1.ブラシの素材が豊富

f:id:kiriesto:20210515202737p:plain

 BOOTH でクリスタ用の素材を調べてみるとこんなにも多くて選び放題!!
また、CLIP STUDIO ASSETS でもたくさんの素材がそろっています。

素材が多いと便利なことがあります。例えば服に柄を付けたいと思ったときにクリスタのブラシを使えば花柄やいろんな模様(フリルとか)を簡単にしかも綺麗で可愛く描くことができます。

2.綺麗に描くためのコツや塗り方の記事、動画が豊富

f:id:kiriesto:20210515203656p:plain

この画像は一度も夜空を描いたことがなかった僕がネットの記事を参考にして初めて描いた夜空になります。
とってもきれいに描けていると思いませんか??
初めての僕ができたならきっとあなたにも使いこなせるはず!!
記事が多いということはそれだけで勉強しやすいし、やりたいことを実現しやすいってことです!!

文字は苦手~って方はyoutube動画もたくさんアップされているので問題ないです。
しかも、CLIP STUDIO PAINT公式の「創作応援サイト」では、使い方講座や質問できるコーナーもあり、使い方で分からなくても情報を得やすいというメリットがあります。

ichi-up.net

3.テクスチャの改変がいい感じにできる

VRCのテクスチャの色味を変更するときに「色相・彩度・明度」を変更するっていう方法をとる人が多い気がしますが下のツイッターのようにグラデーションマップを使うと「色相・彩度・明度」を変更しただけでは表現できない細かい改変ができるようになります。この機能を使えばもっと改変が楽になる??

 

4.初心者からプロまで様々な人が使っている

f:id:kiriesto:20210515231739j:plain

初心者やアマチュアに人気があるのはもちろん、漫画家やアニメーターといったプロでも使われています。実際に知り合いの漫画家もクリスタ を使っていました。
(漫画にはCLIP STUDIO PAINT EX のほうがおすすめ)

つまり、改変から始めて、もっと色々なことがしたい!!ってなった時に学んだ知識をそのまま活かすことができるってことです!!

すばらしい!!

5.相談ができる

コー​​ルセンター, ヘッドセット, 女性, 人間, 個人, サービス, 顧客

僕の周りだけかもしれませんがシェア率No.1なだけあって、VRCの友達に「どのソフトで改変しているの?」って聞いてみるとクリスタ っていう人がダントツで多い気がします。
そのほかにはGIMPFireAlpacaフリーソフトを使っている人が多いと思います。

困ったときに相談相手がいるととっても助かります。
僕もはじめのうちは何をどうしていいかわからなくて友達に聞きまくって助けてもらいました。
動画を見て勉強もしますが、実際に改変をしている人に話を聞くと「こんな方法があるのか!!」ってなるので周りに使っている人がいるっていうのはとっても大事なことだなぁと感じました~。

 

・実は CLIP STUDIO PAINT EX ならもっとすごいことができちゃう!!

 EXになると3Dモデルをクリスタ に入れることができるようになるのでblenderとの相性がめちゃよいです。ここまでくると改変が目的ではなくて漫画やイラストを作るためにblenderを利用するって感じになると思います。

note.com

 今日はここまで!
最後まで読んでいただきありがとうございました。

この記事がよかった、もっといろんな記事を書いて欲しい!など応援したいなぁ~と思っと方はツイッターのフォローはてなブログの読者になってください!!
あなたの応援が、僕が記事を書くための力になります!!

ではでは、いいゆめみろよ~~~

 

 

【最大95%off】blender不要!?Unityだけでメッシュ改変アセットがお買い得!!

Unityでとんでもないセールが来ました!!

f:id:kiriesto:20210512230150p:plain

Chart Your Course Mega Bundles

おおくのアセットがUnity2019対応となっていますが、VRchatものちにバージョンアップすると言われているので今のうちに購入を検討してみるのがいいと思います!!

また、バーチャルキャストclusterがUnity2019を扱っているのでぜひ最後まで見ていってください!

今回のセールは3つのの詰め合わせセットが約$15、約$30、約$40で販売されています。価格が高くなるにつれて詰め合わせのアセット数が増えていく感じになっています。

・$15セットでは4アセット
・$30セットでは$15セット+5アセットの計9アセット
・$40セットでは$30セット+15アセットの計24アセット 

おすすめなのが全部詰め合わせの$40セットです。
今回は$40セットに含まれているおすすめアセットを紹介していきます!!

assetstore.unity.com


・Mesh Deformation Full Collection

今回僕が一番注目している商品です。
Unity上でメッシュの変形ができるアセットです。本来ならblenderやMayaなどのモデリングツールを用いてメッシュを変形するのですがこのアセットを使えばUnity上で完結できます。
また、アセットが素晴らしいのはもちろんサポートもしっかりしているそうで操作などわからないことがあれば相談に乗ってくれるとコメントに書いてありました。英語でなかなか記事が見つからないとちゃんと使えるか不安ですが、サポートがしっかりしている書いてあると安心しますね。

youtu.be

assetstore.unity.com

・Grabbit - Editor Physics Transforms

 散らかっている部屋を作ったりするときに物理演算を実行して、より自然なちらかった状態を作り出せるアセットです。手動で散らかった状態を表現するには1つずつ場所を決めて、壁や床に接地しているかどうか確認しながら設置しないといけないのでとても面倒ですが、これを使うと楽に配置できるようになります。激アツ。

youtu.be

assetstore.unity.com

・Technie Collider Creator

複数のボックスコライダーをペンキで塗るみたいな感覚で適応できるアセット。
詳しくは下の動画を見てみると使い方がわかると思います。
面倒なコライダーを張る作業もこれを使うと楽になると思いました。

youtu.be

assetstore.unity.com

・Asset Usage Finder

依存関係にあるアセットを簡単に見つけてくれるアセットです。
Unityをつかっているとどんどん物が増えてどこになにがあるか分からなくなることが多いと思います。これは依存関係にあるアセットを右クリックすることで検索してくれてとっても便利だと思います。
ダイナミックボーンを探したりとか使えそう。これはUnity2018.4.0以降で使用可能みたいなのでVRchat民にもいますぐ使用できそうです。

youtu.be

assetstore.unity.com


・Simple Waypoint System

これもUnity2018.4.0以降で使用可能みたいなのでVRchat民でもいますぐ使用できると思います。ベジエカーブを用いた曲線を描いて飛行機や魚の動きを表現してアニメーションの作成を手伝ってくれるアセットになります。また、ワールドなどのギミックを作るのに使用できそうです。これ一つ持っていれば表現できるアニメーションが増えるのでとってもいいなぁと思いました。

youtu.be

assetstore.unity.com

まとめ

 今回はUnityの期間限定で実施されるまとめ売りの中から特に気になった商品についてまとめました。結果、約$40のセットを購入しておくのがおすすめです。
VRchatのためだけにUnityを使用している人にとってはバージョンがあっていなくて使いづらいですが今後、VRCが2019にアップデートするなら買っておいて損はないだろうという感じでした。
最悪、Asset Usage FinderSimple Waypoint Systemが使えそうなのでもとは取れそうっていう感じでした。

assetstore.unity.com



他にもおすすめな商品があれば教えていただけると記事を書く参考になります。
あなたの応援が僕が記事を書くやる気に繋がるのでぜひ いいね やお気に入り登録、Twitterのフォローをよろしくお願いいたします。

ではでは、
いいゆめみろよ

   

 

 

 

VRC民と仮想通貨のマイニングが相性いいのでは??

こんぱう~~~
いつもVRchatなどをPCVRで遊んでいるあなたに朗報です!!

PCVRを始めるのにVR機器を買って、デスクトップパソコンを買って、さらにはコロナが追い打ち...
で、VR睡眠とかしていると電気代が...みたいな

そこでいまオススメしたいのが仮想通貨のマイニングです
現在勉強中かつ試験的に運用をしているのですが意外とたまります(2021/05/04)

僕の使っているGPUがGTX1660superというものでPCVRをするのには割とぎりぎりの性能なのですが仮想通貨のマイニングで一日に得られる金額が230円ぐらいです(電気代は除く)
これで睡眠と仕事をしている時間(計14時間ぐらい)を一か月動かしていれば30×14/24×230=4025円と電気代がちょうど賄えるぐらいの金額になると思います

VRCをきっかけに初めてデスクトップパソコンを買った人も多いと思います。そんな僕と同じような状況の人は日中などVRに入っていないときはパソコンの性能を持て余しているのではないかと思うのです

 僕よりあとにデスクトップを買った人はRTX2070superとか僕のよりももっといいグラボを積んでいるので電気代以上の稼ぎが出るのでは??と予想しています

最近、仮想通貨のブームが来ているのかマイニングの収益が日々よくなっていると思います
せっかく持て余しているなら使っちゃおう!!ということです

ただ、PCを酷使すると壊れちゃう可能性が高くなるので温度が上がりすぎない、ホコリをためないなどのメンテナンスは欠かせません
さらにみんなマイニングをしているせいかグラボ単体の値段が爆あがりしているので絶対に壊したくありません><
(VRCに行けなくなったら死んでしまいます)

細心の注意を払いながら電気代になれば家計が助かる~~という気持ちでやっています
くれぐれもマイニングするためだけに新しいパソコンを買うのはちょっとおすすめできません...あくまでデスクトップパソコンを持っていて使わない時間帯はマイニングして電気代の足しにしよう~~~
稼げなくてもまぁいいか~~~ぐらいの気持ちでやるのがいいと思います

VRと仮想通貨の関係性は今後どんどん密接になると思います
例えばNeosVRやバーチャルキャストでは独自の通貨があったりします
今後さらに発展すればVR上でものを売り買いできるようになればもっとVRに人が集まってきてコミケみたいなことができたり、どんどん大企業が参入したりと面白いことが起きる予感がします

まとめ-せっかくマシンパワーが余っているのに使わないのはもったいない
とりあえずお金もかからないマイニングをしてみてはいかがでしょうか?

ではでは、今日はこの辺で
いい夢みろよ~~~