かぴばらさんの覚書ブログ (nonkapibara 自分メモ)

かぴばらさんの覚書ブログ (nonkapibara 自分メモ)

Unity勉強中です。 AR、VR、エンターテイメント全般、ワクワクする事が大好き♪♪ O(≧∇≦)O イエイ!!

遠近感のある背景のお勉強(パース遠近法)「高層ビルの夜景」デジタルイラスト描いてみた

環境メモ
⭐️Mac Book Pro(macOS Catalina)
⭐️CLIP STUDIO PAINT PRO 

 

遠近感のある背景のお勉強(パース遠近法)
「高層ビルの夜景」をデジタルイラストで(CLIP STUDIO PAINT)描いてみました。

↓完成内容

f:id:nonkapibara:20210613190418j:plain

 

1つの消失点(消点)を基準にしてパース線描く方法を「一点透視図法」という。
「高層ビルの夜景」は「一点透視図法」で描きました。
※消失点(消点)とは、平行な直線群が集まる点

遠近感や物の大きさを正しく描くには、パース(遠近法)を用いて、ガイド線を描きます。

まずは練習で「一点透視図法」の簡単なビルを色鉛筆を使ってスケッチしてみました。

f:id:nonkapibara:20210613190540j:plain

 

手前にあるビルを描くのに、消失点(消点)を基準にパース線を描きます。

f:id:nonkapibara:20210613190702p:plain

 

次に、奥にあるビルのパース線を描きます。

f:id:nonkapibara:20210613190827p:plain

手前のビルをパース線を元に描いていきます

f:id:nonkapibara:20210613190913p:plain

奥のビルもパース線を元に描いていきます

f:id:nonkapibara:20210613190949p:plain

ビルの窓を描いていきます

f:id:nonkapibara:20210613191017p:plain

 

中間のビルの窓を描いていきます。f:id:nonkapibara:20210613191035p:plain

奥の高層ビルの窓を描いていきます。

f:id:nonkapibara:20210613191354p:plain

 

窓の明かりを塗っていきます。

f:id:nonkapibara:20210613191130p:plain

 

窓の明かりをいろんな色を使って塗っていきます。

もう、これだけでもキレイ♫

f:id:nonkapibara:20210613191440p:plain

奥のビルを、少しぼかしたり、明度をつける。

背景を夜っぽく、黒くする。

f:id:nonkapibara:20210613191542p:plain

あとは、手前の道を、キラキラ道路を描いて、完成!

O(≧∇≦)O 

 

 

【Blender2.92】マグロのお寿司を作ってみたよぉ

環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️Blender2.92

 

↓↓↓完成内容

f:id:nonkapibara:20210517012540p:plain

 

 

マグロをモデリングする
Cubeからシャリ部分を作る

f:id:nonkapibara:20210517012647p:plain

 

f:id:nonkapibara:20210517012700p:plain

 

f:id:nonkapibara:20210517012712p:plain

 

f:id:nonkapibara:20210517012724p:plain

 

f:id:nonkapibara:20210517012736p:plain

 

f:id:nonkapibara:20210517012748p:plain

 

f:id:nonkapibara:20210517012759p:plain

 

f:id:nonkapibara:20210517012811p:plain

 

スムーズにして、滑らかにする。

f:id:nonkapibara:20210517012825p:plain

 

マグロを作る

f:id:nonkapibara:20210517012918p:plain

f:id:nonkapibara:20210517012950p:plain

f:id:nonkapibara:20210517013002p:plain

f:id:nonkapibara:20210517013015p:plain

f:id:nonkapibara:20210517013033p:plain

f:id:nonkapibara:20210517013053p:plain

f:id:nonkapibara:20210517013110p:plain

f:id:nonkapibara:20210517013126p:plain

 

 

マグロの色をつける

f:id:nonkapibara:20210517013148p:plain

f:id:nonkapibara:20210517013208p:plain

f:id:nonkapibara:20210517013225p:plain

f:id:nonkapibara:20210517013243p:plain

f:id:nonkapibara:20210517013301p:plain

f:id:nonkapibara:20210517013317p:plain

f:id:nonkapibara:20210517013334p:plain

f:id:nonkapibara:20210517013349p:plain

 

お米の粒は、Bump(凹凸で描きました)

nonkapibaraリリース一覧(作ったものです)

nonkapibaraリリース一覧(作ったものです)

twitter:https://twitter.com/nonnonkapiba

 

cluster VR「non Night Aquarium」
(WindowsPC、MaciPhoneiPadAndroid、Oculusで遊べる)

https://cluster.mu/w/24822013-3b1c-42bf-ad37-322ce1a0fab3

cluster.mu

  

Androidアプリ
AndroidスマホVRゴーグルで遊ぶ)
VR ダイヤモンドクラッシュゲーム〜VR Diamond Crash Game

play.google.com

 

Androidアプリ
AndroidスマホVRゴーグルで遊ぶ)
VR ピヨくまちゃんのシューティング〜VR Shooting Piyo-Kuma-Chan
https://play.google.com/store/apps/details?id=com.non.VRPiyokumaChanShooting

play.google.com



Androidアプリ
Androidスマホで遊ぶ)
CherryCocktailGlassチェリーカクテルグラス〜無料簡単ミニゲームFree games

https://play.google.com/store/apps/details?id=com.non.CherryCocktailGrass

play.google.com

 

【Blender2.8】箱うし&箱くま本 STAGE1ペアレントのアニメーションやってみた

環境メモ
⭐️Mac OS Mojave バージョン10.14

⭐️Blender2.8

 

 

 

箱うし&箱くま本 STAGE1ペアレントのアニメーションやってみた

無料ではじめるBlender CGアニメーションテクニック ~3DCGの構造と動かし方がしっかりわかる【Blender 2.8対応版】:書籍案内|技術評論社

 

STAGE1-1 移動/回転/縮小 

■メモ
・「G」で移動する
・「G」移動の取り消しは「ESC」
・移動方向の限定は「G」の後に、各キーで軸移動する(「X」「Y」「Z」)
・1ミリ刻みの移動は「Ctr」を押したまま移動
・「R」で回転
・「S」で拡大縮小
・「F12」レンダリング(取り消しは「ESC」)
・「T」でツールバー表示/非表示

 

LESSON-1  移動ツールを使って花を完成させる

完成

f:id:nonkapibara:20200224184302p:plain


LESSON-2 回転ツールを使って花を完成させる
完成

f:id:nonkapibara:20200224184402p:plain

LESSON-3 拡大縮小ツールを使って花を完成させる
完成

f:id:nonkapibara:20200224184509p:plain

CHALLENGE 雪だるまを組み立てる
完成!!

f:id:nonkapibara:20200224184607p:plain


STAGE1-2 キーフレームアニメーション

メモ
・キーフレームの位置を選択する。
対象のオブジェクトを選択する
「I」で”キーフレーム挿入メニュー”を起動し、「位置」を選ぶ。

・キーフレームを削除する場合は「X」キーを押す。


LESSON-4 ドアを開閉するアニメーション

完成!!

f:id:nonkapibara:20200224185522g:plain


CHALLENGE 扉を開く
完成!!

f:id:nonkapibara:20200224192321g:plain



STAGE1-3 ペアレント

メモ

・ペアレントは、子、親の順に選択し、「Ctrl」+「P」キー(ペアレント)で選択して、ペアレント対象を「オブジェクト」を選択する。
・ペアレントが終わったら、親を動かすと子も一緒に動く。


PはペアレントのPで覚える
回転を戻す「option」+「R」

 


LESSON-5 卓上ライトのペアライト

完成!!

f:id:nonkapibara:20200224202614g:plain

f:id:nonkapibara:20200224202555p:plain

LESSON-6 箱くまのペアレント

f:id:nonkapibara:20200225025051p:plain

完成

f:id:nonkapibara:20200225021547p:plain

 

 

CHALLENGE 箱うしのアレント

完成

f:id:nonkapibara:20200225021315p:plain



 

 


STAGE1-5 ペアレントを用いた歩行アニメーション


LESSON-8 箱くまの歩行アニメーションを作る

f:id:nonkapibara:20200225020035g:plain



CHALLENGE 箱うしの歩行アニメーションを作る

 

f:id:nonkapibara:20200225020133g:plain

 

【機械学習】Create MLモデルをXcodeのPlaygroundで作ってみた

環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️Xcode11.2

 

↓↓↓実際に動かした動画

https://twitter.com/nonnonkapibara/status/1222857714319024129

 

Create MLとは

Core MLのモデルを作成するためのmacOSの新フレームワークです。
Macで独自の機械学習モデルを作成してトレーニングします。
Drag&Drop機械学習モデルが作れます。

※Core MLは、下記で試しています。
機械学習】Core MLモデルをXcodeで実装してiPhoneで画像分類を試してみた
https://qiita.com/nonkapibara/items/c3ed86a125c916baadc0

 

データの準備

猫と犬の画像が12,500枚あるデータサンプルデータ
「Kaggle Cats and Dogs Dataset」を使います。
まず、ダウンロードします。

Kaggle Cats and Dogs Dataset
https://www.microsoft.com/en-us/download/details.aspx?id=54765

f:id:nonkapibara:20200130065729p:plain

 

2.ダウンロードしたら、PetImagesフォルダの中に「Cat」と「Dog」があるので、これを使います。

f:id:nonkapibara:20200130065752p:plain

f:id:nonkapibara:20200130065809p:plain

 

※画像は「299×299」ピクセル以上を推奨する

3.学習用と評価用とフォルダを作ります。

f:id:nonkapibara:20200130065853p:plain

作業開始

4.Xcodeを起動し、「File」-「New」-「Playground」を選択する

f:id:nonkapibara:20200130070009p:plain

5.「Blank」を選択して「Next」ボタンで次へ行く

f:id:nonkapibara:20200130070024p:plain

6.Playgroundの画面が起動する

f:id:nonkapibara:20200130070127p:plain

 

7.コードを書く
CreateMLUIをインポートする。
MLImageClassifierBuilderを生成して、Playground画面にUIを表示する。

f:id:nonkapibara:20200130070148p:plain

import CreateMLUI

let mlui_builder = MLImageClassifierBuilder()

mlui_builder.showInLiveView()

 

8.インポート文で「No such module "CreateMLUI"」のエラーが出たら

プロパティを表示して、iosからMacOSに変更する

f:id:nonkapibara:20200130070234p:plain

f:id:nonkapibara:20200130070427p:plain

 

9.ここで、保存して「FIle」-「Save」

f:id:nonkapibara:20200130070456p:plain

 

「Command+Q」でXcodeを終了させて再びPlaygroundを起動します。
そうすると、インポートのエラーが消えます。

f:id:nonkapibara:20200130070628p:plain

10.スクリプトの実行ボタンを押します。

f:id:nonkapibara:20200130070642p:plain

11.下記の、画像分類モデルを学習させるUIが起動します。

f:id:nonkapibara:20200130070712p:plain

 

12.学習用の画像ファイルをDrag&Dropでアップロードします。

f:id:nonkapibara:20200130070759p:plain

13.学習が始まるので、しばらく待ちます。

f:id:nonkapibara:20200130070927p:plain

 

14.学習が終わり、学習データの正解率と検証データと正解率が表示されます。

f:id:nonkapibara:20200130071150p:plain

15.では、次に評価データを入れます。
評価用の画像ファイルをDrag&Dropでアップロードします。

f:id:nonkapibara:20200130071355p:plain

16.評価完了

f:id:nonkapibara:20200130071431p:plain

 

予測結果もみれます。

f:id:nonkapibara:20200130071552p:plain

f:id:nonkapibara:20200130071757p:plain

 

f:id:nonkapibara:20200130071810p:plain

17.モデルの保存

右上のボタンを押して、Saveします。

f:id:nonkapibara:20200130071915p:plain




f:id:nonkapibara:20200130071944p:plain

 

保存完了

f:id:nonkapibara:20200130071955p:plain



※なお、正解率が低い場合は、「Max Iterations」で学習の最大回数を増やしたり「Augmentation」で学習データの数を増やしたりして再度、学習する事ができます。

f:id:nonkapibara:20200130205845p:plain

f:id:nonkapibara:20200130205857p:plain

詳細はAppleのドキュメントを参照

https://developer.apple.com/jp/documentation/createml/improving_your_model_s_accuracy/

f:id:nonkapibara:20200130210116p:plain













 

 

Vue.js サンプル「カウントアップ」

↓↓完成図

https://twitter.com/nonnonkapibara/status/1166711295384510465

 

 

Vue.jsで、ハート型のボタン「Count Up」をTapする度に、カウントアップしていくサンプル。

 

【Unity】360度全天球をSkyBoxに設定する(Skybox/Cubemap)

環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️Unity 2018.2.15f1
⭐️Blender v2.79.6
⭐️Inkscape 0.92

 

↓↓↓完成内容

f:id:nonkapibara:20190622223300p:plain

 

 

 

1.Inkscapeで360度全天球を描く。
png形式で出力する

f:id:nonkapibara:20190622223406p:plain

 

2.GIMPに取り込み、サイズを縮小する。
試しに、幅を「3600」にしてみた。
jpg形式で出力する。

f:id:nonkapibara:20190622223459p:plain

3.拡張子hdr形式で出力する

 

f:id:nonkapibara:20190622223438p:plain

 

4. それをUnityにDrag&Dropで取り込む

f:id:nonkapibara:20190622223600p:plain

5. Texture Shapeを「Cube」にして「Apply」を押す

f:id:nonkapibara:20190622223649p:plain

6.Assetsに新規マテリアルを作る

f:id:nonkapibara:20190622223808p:plain

7.Shaderを「Skybox/Cubemap」にする

f:id:nonkapibara:20190622223845p:plain

8.そのマテリアルに、「hdr」画像をDrag&Dropでセットする

f:id:nonkapibara:20190622223940p:plain

 

9.SkyBoxを設定する。

「Window」-「Rendering」-「Lighting Settings」を開く

f:id:nonkapibara:20190622224022p:plain

10.マテリアルを選択する。

f:id:nonkapibara:20190622224144p:plain

 

完成!!

 

類似内容

https://twitter.com/nonnonkapibara/status/1142279959416696833

 

qiita.com

 

 

 

 

qiita.com