おもちゃラボ

Unityで遊びを作ってます

シェーダ

【Unity】広重のような雨のエフェクトを作る

歌川広重の描いたような雨をUnityで降らせる方法を紹介します。地面に雨粒があたったときは、そこから波紋が広がるようにします。完成版は↓こんなかんじです〜Unityも梅雨のシーズンです pic.twitter.com/InQBVtepkM— 北村愛実 (@tasonco_company) 2019年7月…

【Unityシェーダ】テクスチャを円形にトランジションさせる

uGUIのImageを使うと、画像のトランジションを簡単に実現することができます。この記事では円形のトランジションを通常のテクスチャやスプライトでも行えるようなシェーダを作ります。円形にトランジションするシェーダ pic.twitter.com/8hqMJM6FZN— 北村愛…

【Unityシェーダ入門】シェーダだけで描く図形10選

フラグメントシェーダのプログラムだけで円や四角形、市松模様などの図形を描くことができます。ここではUnityで使うことを想定して、フラグメントシェーダで描ける図形を10種類集めてみました。図形を作るための方法も解説しているので、参考になればと思い…

【Unityシェーダ】Shader Graph超入門

Unity2018からシェーダをノードベースで作れる「Shader Graph」という機能が提供されています(まだPreviewですが)これまでは、ノードベースでシェーダを開発しようとするとShader Forgeとかの有料アセットを使う必要がありましたが、これからは「Shader Gr…

【Unityシェーダ入門】3Dモデルをワイヤーフレームで表示する

前回の記事では3Dモデルの頂点を点(ドット)で表示する方法を紹介しました。今回は頂点の表示ではなく辺の表示、つまりポリゴンをワイヤーフレームで表示してみます。また、綺麗にワイヤーフレームを表示するためのシェーダも作成します! メッシュのトポロ…

【Unityシェーダ入門】ポリゴンの表面と裏面に別テクスチャを貼る

UnityでPlaneにテクスチャを貼って普通に回転させると、裏面が透明になってしまいます。これを防ぐためにカリングをオフにしたシェーダを作りました。nn-hokuson.hatenablog.comこのように、カリングをオフにすることで、両面ともテクスチャを表示することが…

7日間でマスターするUnityシェーダ入門

この記事は、これまでにおもちゃラボで紹介してきたUnityのシェーダ入門記事40本のまとめです。1日に5記事読めば7日間で読み切れるはず...今のところ(笑)シェーダって時々聞くけど難しそう・・・というイメージをお持ちの方も多いと思います。でも、Unity…

【Unityシェーダ入門】デプスバッファの内容を表示する

デプスバッファ(深度バッファ、Zバッファ)とはカメラからオブジェクトまでの距離(深度値、Z値)を格納したバッファになります。このデプスバッファは被写界深度のエフェクトや影の計算など、さまざまな場面で使われています。Unityを使っていると影やエフ…

【Unityシェーダ入門】アウトラインシェーダを作る

トゥーンシェーダなどを使ってアニメ調の塗りをする場合、モデルにアウトラインを付けたいことがあります。ここでは、モデルと背景の境界線上にアウトラインを表示するシェーダを作る方法を紹介します。今回の記事の内容は次のとおりです。 アウトラインの概…

【Unityシェーダ入門】綺麗に半透明のモデルが表示できるシェーダを作る

UnityのStandard Surface Shaderを使うと3Dモデルを半透明で表示することが出来ます。ただ、モデルの形状が複雑な場合には、裏面のポリゴンが見えて汚い表示になってしまうことがあります。そこで、隠面は表示せず、手前側の面のみ半透明で表示するシェーダ…

【Unity】地形作りで学ぶShader Forge超入門

シェーダをグラフィカルに作れるツール「Shader Forge」を使って、ノイズ画像から立体的な地形を作ったり、シェーダで色をつけたりする方法を紹介します。作成する地形は次のような感じになります。Shader Forgeを使うことで、難しいシェーダ言語を覚えなく…

【Unityシェーダ入門】コントラストを調節できるポストエフェクトを作る

今回はゲーム画面のコントラストを調節するポストエフェクトの作り方を紹介します。Photoshopなどでは、スライダを動かすだけでコントラストを調整できますね。この機能をUnityのシェーダで作ってみましょう。今回の記事の内容は次のとおりです。 コントラス…

【Unityシェーダ入門】スパイクノイズを作る

スパイクノイズは、ブランドロゴのイントロとかでよく使われる感じのエフェクトです。といっても伝わりにくいので↓のような感じのものを作ります。スパイクノイズという言葉はもともとは電子回路の言葉で、スイッチをオン・オフしたときに生じるパルスノイズ…

【Unityシェーダ入門】ポリゴンをポイント(点)で表現する

Unityで3Dモデルを普通に描画するとポリゴンが表示されます。ここではポリゴンの頂点だけをポイントで表示する方法を紹介します。頂点の表示方法を変えるだけなら、なんと2行のスクリプトだけですみます。それぞれの頂点に異なる色をつける場合はシェーダを…

【Unityシェーダ入門】オブジェクトが重なった部分をくり抜く

特定のオブジェクトと重なった部分を透明にくり抜くシェーダを紹介します。このシェーダを使えば、次のように、好きな形で別のオブジェクトをくり抜くことができます。 オブジェクトの形にくり抜くためには 今回のシェーダの原理は非常に簡単です。まずは抜…

【Unityシェーダ入門】画面をセピア色にするポストエフェクトを作る

今回はスクリーンをセピア調にするポストエフェクトシェーダを作ります。ちなみに・・・Wikipediaによるとセピアとはイカスミのことらしいです。 セピア(sepia)とは、イカ墨のこと。また、イカ墨由来の黒褐色をも意味する。かつてモノクロ写真などにこの色の…

【Unityシェーダ入門】ステンシルバッファを使って隠れた部分を描く

プレイヤがゲームステージに配置されている障害物などの後ろ側に回り込むと、見えなくて操作しづらくなってしまいます。そこで、障害物によって隠れた部分は影だけ描いたりします。この記事では、Unityで隠れた部分を影で描画する方法を紹介します。今回の記…

【Unityシェーダ入門】シェーダを使って世界に雪を降らせよう

季節はどんどん夏に向かっていっていますが・・・今回はシェーダを使ってUnityで雪を降らせる方法を紹介したいと思います。 雪を積もらせるアルゴリズム 深さのある雪を積もらせる場合は色々と計算が大変ですが、表面に薄っすらと積もらせるだけであれば、テ…

【Unityシェーダ入門】Dissolve(溶けるような)シェーダをつくる

Dissolveってなんのこっちゃら?と思って辞書を調べてみたら・・・ Dissolve : 分解する、分解させる、溶かす、解消する だそうです!Dissolveシェーダ自体は分解というよりも侵食に近い感じがしますが、ジワーっと消えていくタイプのアニメーションのこと…

【Unityシェーダ入門】シェーダで旗や水面をなびかせる

ゲーム中で、旗や水面は静止していることはあまりなく、風にあおられてなびいていることが多いですね。リアルになびかせようとすると、シミュレーションやボーンアニメーションをする必要があります。この記事ではUnityの頂点シェーダを使ってお手軽に旗や波…

【Unityシェーダ入門】頂点カラーを表示するシェーダを作る

3Dモデルの表現には通常テクスチャを使いますが、3Dモデルの頂点ごとに色を設定したモデルを使用することもできます。こちらの動画で使われているモデルは、テクスチャを使わずすべて頂点カラーで表現されています。たぶん、世界観に統一感をもたせるためのD…

【Unityシェーダ入門】トゥーンシェーダを自作してみる

Unityではフォトリアルな映像を作るのは簡単ですが、風ノ旅ビトやGravity dazeなどの独自にデフォルメされた映像を作るためにはシェーダを使う必要があります。その中でアニメ風の映像を作るためには、トゥーンシェーダ(Toon Shader)を使います。Unityには…

【Unityシェーダ】テクスチャの両面を描画する方法

Planeオブジェクトにテクスチャを貼り付けると、両面が描画されるのではなく裏面は透明になってしまいます。片面だけが描画されてしまうのは、カリングと呼ばれる「見えないところは描画しない設定」が原因です。カリングをオフにして両面を表示するためには…

【Unityシェーダ入門】暗闇から光が溢れ出るライトブルームの演出をする

室内から外を眺めたときや、トンネルから出るとき、イルミネーションなど、暗い場所から明るい場所を眺めるときに、光が溢れ出るような映像がよく使われます。この光のあふれるエフェクトをライトブルーム(Light Bloom)と呼びます。Unityでは標準機能を使…

【Unityシェーダ入門】粘性のある液体をシェーダで作る

瓶に入った、粘性の高い液体をUnityで表現してみます。RPGの回復系液体ドリンク・・・・とはちょっと違いますね。笑今回はいちからUnityでシェーダを書くのではなく、ShaderToyで紹介されているシェーダを利用して液体を作ってみました。 ShaderToyを利用する…

【Unityシェーダ入門】フラットシェーディングでローポリっぽく見せる

シェーディングの方法は大きく分けると、次の二つの方法があります。 スムースシェーディング フラットシェーディング スムースシェーディングは少ないポリゴン数でも、表面がなめらかに見えるように法線情報を補間して表示する方法です。一方フラットシェー…

【Unityシェーダ入門】シェーダで作るノイズ5種盛り

ノイズといえば、砂嵐のようなランダムノイズから連続性を保ったパーリンノイズまで様々なノイズが考えられています。残念なことにUnityのシェーダにはノイズを生成するメソッドが用意されていないため、プログラムを作る必要があります。 この記事では、Uni…

【Unityシェーダ入門】シェーダでワイプエフェクトを作る

昔のマリオやペルソナ5でも使われている、だんだん視界が狭くなるワイプエフェクトをUnityのシェーダで作ってみます。このエフェクト、ワイプエフェクトとかアイリスエフェクトとか、色々な呼ばれ方をしているようで正式名称がわかりませんが、下のようなや…

【Unityシェーダ入門】Unityのポストエフェクトでモノクロ画面を作る

ポストエフェクトとは、カメラに映ったゲームシーンを一枚の画像として加工する処理のことです。UnityにはStandard Assetとして次のようなエフェクトが用意されています。qiita.com今回は画面を白黒にするモノクロのエフェクトを作りながらポストエフェクト…

【Unityシェーダ入門】円やリングをかっこよく動かす方法

Terrainの青いカーソルやシューティングゲームの着弾地点など、後からオブジェクトに幾何図形を描きたい時に使えるシェーダを紹介します。今回の記事の内容は次のようになります。 下準備をする 円を書いてみる リングを描いてみる リングをいっぱい描く リ…