Skip to content

ForJobOk/ShaderAsobi

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

281 Commits

Assets

Assets

 
 

Packages

Packages

 
 

ProjectSettings

ProjectSettings

 
 

UserSettings

UserSettings

 
 

.gitignore

.gitignore

 
 

README.md

README.md

 
 

Repository files navigation

目次

Zenn Shader100記事マラソン戦いの記録

Shaderの勉強記録です。
100記事分くらい学べば私レベルの初心者でも
まあまあ理解できるかなと思ってやりました。

バージョン情報

Unity 2021.2.12f1
ShaderGraph 12.1.4
DoTween 1.2.632

サンプル

各記事とサンプルシーンを紐付けとくので参考にしたい方はどうぞお使いください。

Unite2017

Unite2017の動画を見ながら基礎をおさらい。

Path：Assets/DemoScenes/Unite2017/Scenes/Unite2017

キーワード - 基礎、フラグメントシェーダー、頂点シェーダー、ラスタライズ、プロパティ、半透明

【参考リンク】
そろそろShaderをやるパート1　Unite 2017の動画を見る(基礎知識～フラグメントシェーダーで色を変える)
そろそろShaderをやるパート2　Unite 2017の動画を見る(頂点シェーダーで大きさを変える)
そろそろShaderをやるパート3　Unite 2017の動画を見る(ラスタライズ)
そろそろShaderをやるパート4　Unite 2017の動画を見る(プロパティ、透明度)

Rotation2D

UVを回転。

Path：Assets/DemoScenes/Rotation/Scenes/Rotation2D

キーワード - UV、回転、_Time、セマンティクス

【参考リンク】
そろそろShaderをやるパート5　UVを回転させる

Mask

画像をマスク。おまけで回転も。

Path：Assets/DemoScenes/Mask/Scenes/Mask

キーワード - マスク、clip、UV、回転、UV1、UV2

【参考リンク】
そろそろShaderをやるパート6　画像をマスクする
そろそろShaderをやるパート7　マスクしてUVを回転させる

Slice

スライスさせる。

Path：Assets/DemoScenes/Slice/Scenes/Slice

キーワード - スライス、mul、frac、appdata_base、ワールド座標、ローカル座標

【参考リンク】
そろそろShaderをやるパート8　ピクセルのワールド座標を参照してスライスさせる
そろそろShaderをやるパート9　ピクセルのローカル座標を参照してスライスさせる

Scroll

スクロールさせる。

Path：Assets/DemoScenes/Scroll/Scenes/Scroll

キーワード - UVスクロール、tex2D、step、lerp

【参考リンク】
そろそろShaderをやるパート10　UVスクロールでテクスチャをスクロールさせる
そろそろShaderをやるパート11　UVスクロールでテクスチャを用いずスクロールさせる
そろそろShaderをやるパート12　線を描画してスクロールさせる

UseC#

C#のスクリプトからShaderにパラメータを渡す。

Path：Assets/DemoScenes/UseC#/Scenes/UseC#

キーワード - C#連携、distance

【参考リンク】
そろそろShaderをやるパート13　マウスのRayの座標をC#からShaderで受け取る

CameraDistance

カメラとの距離を使う。

Path：Assets/DemoScenes/CameraDistance/Scenes/CameraDistance

キーワード - カメラとの距離、_WorldSpaceCameraPos、length

【参考リンク】
そろそろShaderをやるパート14　カメラとの距離を測って使う

Random

ランダムな値を使う。

Path：Assets/DemoScenes/Random/Scenes/Random

キーワード - ランダム、シード値

【参考リンク】
そろそろShaderをやるパート15　ランダムな値を使う

Geometry

ジオメトリーシェーダー触ってみた。

Path：Assets/DemoScenes/Geometry/Scenes/Geometry

キーワード - ジオメトリーシェーダー、inout、法線、外積、ベクトル、unroll、SV_PrimitiveID

【参考リンク】
そろそろShaderをやるパート16　ジオメトリーシェーダーで法線方向にポリゴンを移動させる
そろそろShaderをやるパート17　ジオメトリーシェーダーでポリゴンの大きさを変える
そろそろShaderをやるパート18　ジオメトリーシェーダーでポリゴンごとに色を変える
そろそろShaderをやるパート19　ジオメトリーシェーダーでポリゴンを回転させる
そろそろShaderをやるパート20　ジオメトリーシェーダーでポリゴンの操作を組み合わせる

GeometryAnimation

ジオメトリーシェーダーをアニメーションで制御。

Path：Assets/DemoScenes/Geometry/Scenes/GeometryAnimation

キーワード - ジオメトリーシェーダー、Animation、Animator、C#連携

【参考リンク】
そろそろShaderをやるパート21　Animator使ってジオメトリーシェーダーを制御

SunSky

Skyboxで疑似的に太陽を表現。

Path：Assets/DemoScenes/Skybox/Scenes/SunSky

キーワード - Skybox、内積、pow、ZWrite

【参考リンク】
そろそろShaderをやるパート22　Skyboxで疑似太陽

SkyboxTest

Skyboxの歪みに対応。

Path：Assets/DemoScenes/Skybox/Scenes/SkyboxTest

キーワード - Skybox、歪み、atan2、asin

【参考リンク】
そろそろShaderをやるパート23　Skyboxの歪みに対応する

GradationSky

Skyboxでグラデーション。

Path：Assets/DemoScenes/Skybox/Scenes/GradationSky

キーワード - Skybox、グラデーション

【参考リンク】
そろそろShaderをやるパート24　Skyboxでグラデーション

NightSky

Skyboxとボロノイを組み合わせて星空を表現。

Path：Assets/DemoScenes/Skybox/Scenes/NightSky

キーワード - Skybox、ボロノイ、星空

【参考リンク】
そろそろShaderをやるパート25　Skyboxで星空をちりばめる

GradationNightSky

Skyboxに星をちりばめて良い感じにグラデーション。

Path：Assets/DemoScenes/Skybox/Scenes/GradationNightSky

キーワード - Skybox、星空、グラデーション、if文

【参考リンク】
そろそろShaderをやるパート26　Skyboxに星をちりばめて良い感じにグラデーション

D Ripple

波動方程式とCustomRenderTextureで波紋を描画。

Path：Assets/DemoScenes/Ripple/Scenes/2DRipple

キーワード - 波動方程式、波紋、CustomRenderTexture

【参考リンク】
そろそろShaderをやるパート27　波動方程式とCustomRenderTextureで波紋を描画

Tessellation

テッセレーションでポリゴンを自動で分割。

Path：Assets/DemoScenes/Tessellation/Scenes/Tessellation

キーワード - 波紋、テッセレーション、ハルシェーダー、ドメインシェーダー

【参考リンク】
そろそろShaderをやるパート28　テッセレーションで波紋表現

ClickRipple

クリックした箇所を起点に波紋を発生。

Path：Assets/DemoScenes/Ripple/Scenes/ClickRipple

キーワード - クリック、波紋、C#連携、CustomRenderTexture、UpdateZone

【参考リンク】
そろそろShaderをやるパート29　マウスクリックした箇所に波紋を発生させる

CollisionRipple

オブジェクトが衝突した箇所から波紋を出す。

Path：Assets/DemoScenes/Ripple/Scenes/CollisionRipple

キーワード - 衝突座標、UV、波紋

【参考リンク】
そろそろShaderをやるパート30　衝突座標から波紋を発生させる

Dot

内積を利用してテクスチャを塗分け。

Path：Assets/DemoScenes/Dot/Scenes/Dot

キーワード - 内積

【参考リンク】
そろそろShaderをやるパート31　内積を使う

Repeat

繰り返し処理を行う。

Path：Assets/DemoScenes/Repeat/Scenes/Repeat

キーワード - 繰り返し、fmod、step

【参考リンク】
そろそろShaderをやるパート32　繰り返し処理を行う

Scan

空間をスキャンする表現。

Path：Assets/DemoScenes/Scan/Scenes/Scan

キーワード - スキャン、smoothstep、UNITY_MATRIX_V、カメラの向き、C#連携、Animator

【参考リンク】
そろそろShaderをやるパート33　空間スキャン表現

Normal

法線を利用して色を塗分ける。

Path：Assets/DemoScenes/Normal/Scenes/Normal

キーワード - 法線

【参考リンク】
そろそろShaderをやるパート34　法線を使う

Diffuse

拡散反射。Directional Light、環境光も反映。

Path：Assets/DemoScenes/Normal/Scenes/Diffuse

キーワード - 拡散反射、Diffuse、内積、Lighting.cginc、環境光

【参考リンク】
そろそろShaderをやるパート35　Diffuse(拡散反射)

【参考リンク】
そろそろShaderをやるパート36　Directional Light、環境光を反映する

Shade

影の表現。

Path：Assets/DemoScenes/Normal/Scenes/Shade

キーワード - 影、AutoLight.cginc、multi_compile_shadowcaster

【参考リンク】
そろそろShaderをやるパート37　影を落とす、受ける

Glitch

グリッチ表現。

Path：Assets/DemoScenes/Normal/Scenes/Glitch

キーワード - グリッチ、ポスタライズ、パーリンノイズ

【参考リンク】
そろそろShaderをやるパート38　グリッチ表現

Holo

ホログラム表現。

Path：Assets/DemoScenes/Normal/Scenes/Holo

キーワード - ホログラム、RGBシフト、グリッチ、スクロール、透過

【参考リンク】
そろそろShaderをやるパート39　グリッチによるホログラムっぽい表現

SwitchTexture

Textureを切り替えたカードがめくれる表現。

Path：Assets/DemoScenes/Normal/Scenes/SwitchTexture

キーワード - DoTween、Bool値、C#連携

【参考リンク】
そろそろShaderをやるパート40　カードがめくれる表現をDoTweenと組み合わせて作る

WorkOnImageComponent

Imageコンポーネント上で適切に動くShader。

Path：Assets/DemoScenes/Normal/Scenes/WorkOnImageComponent

キーワード - Image、頂点カラー

【参考リンク】
そろそろShaderをやるパート41　Imageコンポーネントの色変更に対応したShader

Flag

風でたなびく旗のような表現。

Path：Assets/DemoScenes/Normal/Scenes/Flag

キーワード - 旗、揺らぎ、パーリンノイズ、_Time、頂点シェーダー

【参考リンク】
そろそろShaderをやるパート42　風でたなびく旗のような表現

CellularNoise

セルラーノイズで波打ち表現。

Path：Assets/DemoScenes/Normal/Scenes/CellularNoise

キーワード - 水面、トゥーン調、セルラーノイズ

【参考リンク】
そろそろShaderをやるパート43　セルラーノイズでトゥーン調の波を作ってみる

ToonWave

波打ち際の表現。

Path：Assets/DemoScenes/ToonWave/Scenes/ToonWave

キーワード - 深度テクスチャ、_CameraDepthTexture、LinearEyeDepth

【参考リンク】
そろそろShaderをやるパート44　深度テクスチャで波打ち際の表現

Cushion

クッションのように凹む表現。

Path：Assets/DemoScenes/Cushion/Scenes/Cushion

キーワード - 凹み、テッセレーション、CustomRenderTexture、C#連携、clamp

【参考リンク】
そろそろShaderをやるパート45　クッションのような凹み表現

Firework

ParticleからShaderへ値を渡すサンプル。花火。

Path：Assets/DemoScenes/Firework/Scenes/Firework

キーワード - Particle、CustomVertexStreams

【参考リンク】
そろそろShaderをやるパート46　ParticleからShaderへ値を渡す

Distortion

水面の歪みのような表現。

Path：Assets/DemoScenes/Distortion/Scenes/Distortion

キーワード - 歪み、GrabPass、深度テクスチャ、複数Pass

【参考リンク】
そろそろShaderをやるパート47　水面の歪みのような表現

RichToonWave

トゥーン調の水面の表現。

Path：Assets/DemoScenes/Distortion/Scenes/RichToonWave

キーワード - 歪み、GrabPass、深度テクスチャ、複数Pass、CGINCLUDEブロック、揺らぎ

【参考リンク】
そろそろShaderをやるパート48　ちょっとだけリッチなトゥーン調の波を作る

Rim

リムライト表現。

Path：Assets/DemoScenes/Rim/Scenes/Rim

キーワード - リムライト、saturate、法線、内積

【参考リンク】
そろそろShaderをやるパート49　リムライト

HexFloor

六角形のサイバーな床の表現。

Path：Assets/DemoScenes/Hex/Scenes/HexFloor

キーワード - 六角形、サイバー、カメラ、距離

【参考リンク】
トそろそろShaderをやるパート50　サイバーな床の表現

VolumeHolo

頂点ごとグリッチする3Dホログラムの表現。

Path：Assets/DemoScenes/VolumeHolo/Scenes/VolumeHolo

キーワード - グリッチ、スキャンライン、リムライト、ホログラム

【参考リンク】
そろそろShaderをやるパート51　頂点ごとグリッチする3Dホログラム

TilingOffset

タイリングとオフセットを設定する。

Path：Assets/DemoScenes/TilingOffset/Scenes/TilingOffsetr

キーワード - タイリング、オフセット、TRANSFORM_TEX、{TextureName}_ST

【参考リンク】
そろそろShaderをやるパート52　タイリング、オフセット

MeshGenerate

ポリゴン、メッシュの理解。

Path：Assets/DemoScenes/MeshGenerate/Scenes/MeshGenerate

キーワード - ポリゴン、メッシュ、ラスタイズ

【参考リンク】
そろそろShaderをやるパート53　四角錐を作りながらポリゴン、メッシュを理解する

WireFrame

ポリゴン、メッシュの理解。

Path：Assets/DemoScenes/WireFrame/Scenes/WireFrame

キーワード - ワイヤフレーム、トポロジ、ジオメトリーシェーダー

【参考リンク】
そろそろShaderをやるパート54　ワイヤフレームで描画する

Projection

プロジェクション座標変換のフローを可視化。

Path：Assets/DemoScenes/Projection/Scenes/Projection

キーワード - プロジェクション座標変換、ビューボリューム、ワイヤーフレーム

【参考リンク】
そろそろShaderをやるパート55　プロジェクション座標変換のフローを可視化する

MatirixStudy

平行移動・回転・拡大縮小行列を理解する。

Path：Assets/DemoScenes/MatrixStudy/Scenes/MatirixStudy

キーワード - 行列、平行移動、回転、拡大縮小、同次座標、アフィン変換、KeywordEnum

【参考リンク】
そろそろShaderをやるパート56　行列を理解する(平行移動編)
そろそろShaderをやるパート57　行列を理解する(回転編)
そろそろShaderをやるパート58　行列を理解する(拡大縮小編)

SpriteAnimation

UVを操作したスプライトアニメーションの表現。

Path：Assets/DemoScenes/SpriteAnimation/Scenes/SpriteAnimation

キーワード - スプライトアニメーション

【参考リンク】
そろそろShaderをやるパート59　UVを操作してスプライトアニメーションを行う

Toon

トゥーン調の影の表現。

Path：Assets/DemoScenes/Toon/Scenes/Toon

キーワード - トゥーン、ライトベクトル、法線、内積、影

【参考リンク】
そろそろShaderをやるパート60　トゥーン調の影の表現

用語整理

ビューイングパイプラインについて用語整理。

キーワード - ビューイングパイプライン、モデリング変換、視野変換、投影変換、ビューポート変換、MVP変換、行列

【参考リンク】
そろそろShaderをやるパート61　ビューイングパイプラインについて整理する

OutLine

アウトライン表現。

Path：Assets/DemoScenes/Toon/Scenes/OutLine

キーワード - トゥーン、アウトライン、Name、UsePass

【参考リンク】
そろそろShaderをやるパート62　アウトラインの表現

ShaderGraphBasic

ShaderGraphの基本操作。

Path：Assets/DemoScenes/ShaderGraphStudy/Scenes/ShaderGraphBasic

キーワード - ShaderGraph、BiRP

【参考リンク】
そろそろShaderをやるパート63　ShaderGraph 超入門編

ShaderGraphRim

ShaderGraphでリムライト作成。

Path：Assets/DemoScenes/ShaderGraphStudy/Scenes/ShaderGraphRim

キーワード - ShaderGraph、リムライト

【参考リンク】
そろそろShaderをやるパート64　ShaderGraphでリムライト

ShaderGraphFlag

ShaderGraphで旗がたなびく表現。

Path：Assets/DemoScenes/ShaderGraphStudy/Scenes/ShaderGraphFlag

キーワード - ShaderGraph、旗、頂点シェーダー

【参考リンク】
そろそろShaderをやるパート65　ShaderGraphで旗がたなびく表現

SimplePostEffect

ポストエフェクト表現。

Path：Assets/DemoScenes/PostEffect/Scenes/SimplePostEffect

キーワード - ポストエフェクト、OnRenderImage、Graphics.Blit

【参考リンク】
そろそろShaderをやるパート66　ポストエフェクトを自作してみる

Stencil

ステンシルバッファを使ってオブジェクトをマスクする表現。

Path：Assets/DemoScenes/Stencil/Scenes/Stencil

キーワード - ステンシルバッファ、ColorMask、Ref、Comp

【参考リンク】
そろそろShaderをやるパート67　ステンシルバッファを使ってオブジェクトをマスクする

RenderingStudy

ZWrite、ZTest、RenderQueueを理解する。

Path：Assets/DemoScenes/RenderingStudy/Scenes/RenderingStudy

キーワード - ZWrite、ZTest、RenderQueue

【参考リンク】
そろそろShaderをやるパート68　ZWrite、ZTest、RenderQueueを理解する

Shade

自作Shaderに影を落とす処理、受ける処理を追加する。

Path：Assets/DemoScenes/Shade/Scenes/Shade

キーワード - SubShader、Blend、影

【参考リンク】
そろそろShaderをやるパート69　影を落とす処理、受ける処理を自作Shaderに追加する

Occlusion

オクルージョン表現。

Path：Assets/DemoScenes/Occlusion/Scenes/Occlusion

キーワード - SubShader、Blend、影

【参考リンク】
そろそろShaderをやるパート70　オクルージョン用のShaderを作成する

ShadowOcclusion

影を受けるオクルージョン表現。

Path：Assets/DemoScenes/ShadowOcclusion/Scenes/ShadowOcclusion

キーワード - Occlusion、Shader.SetGlobalFloat、影

【参考リンク】
そろそろShaderをやるパート71　影を受けるオクルージョン用のShader

ColorfulShadow

色付きの影を受ける表現。

Path：Assets/DemoScenes/ColorfulShadow/Scenes/ColorfulShadow

キーワード - 色付き、影

【参考リンク】
そろそろShaderをやるパート72　色付きの影を受ける

Butterfly

蝶々がはばたく表現。

Path：Assets/DemoScenes/Butterfly/Scenes/Butterfly

キーワード - Custom Vertex Streams、Particle、蝶々

【参考リンク】
そろそろShaderをやるパート73　蝶々がはばたく表現

Phong

Phong鏡面反射。

Path：Assets/DemoScenes/Phong/Scenes/Phong

キーワード - reflect、Phong

【参考リンク】
そろそろShaderをやるパート74　Phong鏡面反射

Hole

穴あきAR表現。

Path：Assets/DemoScenes/Hole/Scenes/Hole

キーワード - AR、clip、Occulusion

【参考リンク】
そろそろShaderをやるパート75　穴あきAR表現

NormalMap

ノーマルマッピング。

Path：Assets/DemoScenes/NormalMap/Scenes/NormalMap

キーワード - NormalMap、TANGENT_SPACE_ROTATION、接空間

【参考リンク】
そろそろShaderをやるパート76　ノーマルマッピング

ParallaxMapping

視差マッピング。

Path：Assets/DemoScenes/ParallaxMapping/Scenes/ParallaxMapping

キーワード - NormalMap、ハイトマップ

【参考リンク】
そろそろShaderをやるパート77　視差マッピング

SimpleNoise

ノイズ表現。

Path：Assets/DemoScenes/SimpleNoise/Scenes/SimpleNoise

キーワード - ノイズ、Simple Noise Node

【参考リンク】
そろそろShaderをやるパート78　ノイズ

Electrification

帯電表現。

Path：Assets/DemoScenes/Electrification/Scenes/Electrification

キーワード - 帯電、ノイズ、Remap

【参考リンク】
そろそろShaderをやるパート79　帯電表現

Dissolve

帯電表現。

Path：Assets/DemoScenes/Dissolve/Scenes/Dissolve

キーワード - ディゾルブ、ノイズ

【参考リンク】
そろそろShaderをやるパート80　ディゾルブ

RecalculateNormal

頂点を動かしたのちに法線を再計算する。

Path：Assets/DemoScenes/RecalculateNormal/Scenes/RecalculateNormal

キーワード - 法線、接空間、近傍点

【参考リンク】
そろそろShaderをやるパート81 頂点を動かして法線を再計算する

Fresnel

フレネル反射を利用した海洋表現。

Path：Assets/DemoScenes/Fresnel/Scenes/Fresnel

キーワード - 法線、フレネル反射、波

【参考リンク】
そろそろShaderをやるパート82 海洋表現

About

Shaderとの闘いの記録

Resources

Readme
Activity

Stars

6 stars

Watchers

3 watching

Forks

2 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages