見出し画像

⑤色を変化させるエフェクトとシャープ、ぼかし、エッジをつける方法

このノートでは1番質問が多かった
ちょっとややこしい
色彩の変化があるエフェクトの作り方と、
シャープにさせたりぼかしたり
エッジを効かせたエフェクトの作り方を
自分なりにわかりやすく説明したいとおもいます
😋🙏🏼🌼
例えば私のエフェクトでいうと

画像1

画像2

ここらへんのエフェクトです〜!

今回は自分が使ってるノイズやLUTの画像
、Patchを載せてます🙇🏼‍♀️🌼

①まず素材の準備
色の変化をつけるためにLUTの画像?
を用意します!

https://github.com/positlabs/spark-lut-patch

https://drive.google.com/file/d/1pN9xoIk-utOfBXf9xXLFpCZZDXWBjVNu/view

このURLから無料で画像をダウンロード
できます😌

画像3

画像4

画像5

またこちらの画像もお使い下さい!
この画像を画像編集のアプリなどで
色彩を変化させて使用したりして
いろいろ使える思います👏🏼🌼

次にLUTのパッチを用意します!

こちらからfast color lutのpatchを
パソコンに保存してください!🙏🏼

これで素材は準備できました!

sparkARを開きます!🌼

画像6

左上create newからblank projectをクリックします。

画像7

開いたら左上のaddから2d object→Rectangle
を選択します。

画像8

画面右上のsizeをタテヨコどちらも
full sizeにします!
枠の中をクリックするとfull widthを
選択できます☺️

画像9

こんな感じになりました!
そのまま右下のmaterialの+をクリックします。

画像10

画面左下のmaterialを選択して

画像11

画面右上のshader typeをflatにします!

画像12

そしたらそのまま下にあるtextureの左の
黄色い矢印をクリックします!

画像13


するとこんな感じでpatch editerが出てきますー!

画像14


次に画面左下にある+Add Assetをクリックして

画像15

一番上のimport from computerを
クリックします!

画像16

するとパソコンのフォルダが開くので
最初に用意しておいたLUTの画像と
Fast Color LUTのパッチを選択して開きます!!

画像17

開くと画面左下に出てきましたー!👏🏼

画像18

画像は選択して画面右側の
no compressionに印をつけておいて下さい!

画像19

左下フォルダから追加された

Fast Color LUTパッチを
画像のように
ドラッグ&ドロップでpatch editerの中に
入れて下さい〜!

画像20

次に画面左上のCameraをクリックします

画像21

次に画面右側のtexture extractionの右の
+をクリックします。

画像22

すると画面左下にCamera texture0というのが
出てくるのでそれを選択して画像のように
ドラッグ&ドロップでまた
patch editerの中に入れてください☺️

画像23

次に画面左下のフォルダマークの
Libraryを選択します!

画像24

するとAR Libraryが開きます!
その中のpatch assetsをクリックします🌼

画像25

次にShadersをクリックします!

画像26

画像27

Shadersの中からAdjust Colorsを選択して
右上のimportfreeをクリックしてください!
ダウンロードできたら×で閉じてください!

画像28

すると画面左下にAdjustColorShaderが
追加されたと思うので
それを選択してまたドラッグ&ドロップ
でpatch editerの中に入れますー!

画像29

次に画像のように4つのパッチを
矢印をクリックしながらひも?を伸ばして
繋げていってください!
そしてFastColorLUTパッチのLUTで
フォルダから追加した画像から
好きな画像を選んで選択してください!

画像30

モニターを見てもらったら分かると思いますが
選ぶ画像によってエフェクトの色が
変化します🔥🔥

画像31

次にAdjustColorShaderの枠の中に
数字を入力していきます!

brightnessは輝度(まぶしさ)
contrast コントラスト
hueは色相 
saturationは彩度、鮮やかさ
lightnessは明度(淡い)
が調節できます!

画像32

とりあえずこんな感じに調節してみました!
すべて-1から+1まで入力できます🐍
何度も何度もカメラで試しながら
数字を調節していってください!!

画像33

最後に前にも説明しましたが
ノイズ加工を追加します! 
画面左上にいって最初に作った
rectangleを選択して
duplicateをクリックして複製します🙆🏼‍♀️

複製して作ったrectangleを選択して

右側、materialからnew materialを

作っておいてください!

作ったら左側でmaterial選択して

画像34

そして画面右側のShadertypeをflatにして
そのまま下にあるnew textureから
new animation sequenceをクリックします!

画像35

画像36

左下にnew nimation sequence0が
追加されてるのでそれをクリックして

画像37

右上のtextureからnew image textureを
クリックします!

画像38

前の記事にも貼らせて頂いた
ノイズの画像を選択しました!

画像39

すると画面がこんなことになりました!
右側のFPSはgifの速さを調節できます。
今回は15にしました!

画像40

そしたら画面左下側のノイズのマテリアルの
material1をクリックして

画像41

画面右側のblend modeをscreenにして
opacityを20くらいにします!(薄くする)


画像42

こんな感じになりましたーー!!!

画像43

画像44

無加工と比べると色が変わっています!

画像45


画像46

色の加工をすると美肌効果のエフェクトが
何故か無くなってしまうので
私はいつもノイズ加工をするのですが、

ノイズの加工は今回の様に
animation sequenceを使わなくても、
2d object→rectangle→material→
texture画像追加で
この画像を選択して
blend modeでopacityを調節して
使うこともできますので上記のノイズ画像を
ご自由にお使いください☀️

画像47

そして!
いずれかのmaterialを選択して
textureのうえの
Colorの白い四角をクリックすると

画像48

画像49

画像50

色が選べるので
色彩の変化を調節して様々な色に
加工できるのでこれも楽しくてオススメです!

〜〜〜〜追記〜〜〜〜
シャープなエフェクトを作るときのpatch並べ方
(全て同じ様に上記で作ったAdgust Colorのpatchの位置に配置します!)

画像51

ぼかしたエフェクトのとき

画像52

エッジのきいたエフェクトのとき

画像53

それぞれのpatchに数字を入力して加工の強弱を
調節してみてください!
エフェクトの幅が広がって
楽しいですよ🌼🌼
〜〜〜〜〜〜〜〜〜〜〜〜

この上から文字や画像を追加して
様々なエフェクトも作れるので
是非いろいろ試しながら
作ってみてください🥰🥰🥰
私も初心者なので
答えられ無いことの方が多いですが
もし質問などがありましたら
コメントしてください🙏🏼

とても長くなりましたが以上です!
読んで頂いてありがとうございました!🌼


この記事が気に入ったらサポートをしてみませんか?