1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

HLSLを触ってみた話

Last updated at Posted at 2026-01-20

はじめに

はじめまして。kocidenといいます。
北大工学部情報学科2年です、Unityを2年触っていて、最近は専らXR開発をしています。

今回は、ずっと目を背けていたシェーダーのことを勉強しよう!というハナシです
つまり、初心者の開発記録と思っていただいて問題ないです。
間違っていることがあれば指摘していただければ幸いです。

Unityでシェーダーといえば、シェーダーグラフという便利な機能があると思います。
過去に触ったことがあるのですが、ノードをつないでいくだけでリッチな表現が可能になります。

ただ、Youtubeで見たライブコーディングの動画がめちゃくちゃかっこよくて、
こんな感じで自由にシェーダーを書いてみたい!と思いました。
それが昨日。

せっかくなのでUnity6で実験しています。

今日学んだこと

・Sceneビューの右上にあるレイヤーのトグルに「Always Refresh」ボタンがあり、それをオンにするとコンパイルを待たずともテクスチャが更新される
・行列とパラメーター表示のイメージ。最近は大学行ってないんですが、数学楽しいな。
・CGINCLUDEとENDCGの間に関数をかきこんだらうまくいく
・SubShaderとかはまだわからない。ここの中で上に宣言した関数を呼ぶ
・描画関数の引数の2次元ベクトル、float2の範囲は0から1の正方形だから、自乗して1を引くことで-1から1の範囲の正方形に移動する
・GLSLとHLSLは少し関数名が違う
・length()、abs()、floor()
・描画関数では4次元ベクトルを返す。(R,G,B,A)で、それぞれの値は本来0-1の範囲だが、
それ以上にすることでめっちゃ光る。(無限を返してもエラーにならない)
光の原則からして、RGBが全部一緒の値なら白黒系統になる。(0-1にかけて黒から白になる)
RGB内で差を作ることでいろんな色を表現する。
・3Dのシェーダーはレイマーチングということをしているらしい。よくわからん。

以下雑多

float2 p = uv2 -1;
float d = length(p);
float3 col = (1,1,1);
return float4 (col
d,1);
これだと、中心の黒から円形に徐々にグラデーションしていく。

d = length(p) - 0.5;
にすると、0以下(黒)になるのがO中心r=0.5の円の中身になるので、その中身は真っ黒。あとは0-1のグラデーションがその円外にある。
グラデーションがきもいなら、0か1で表せばよく、円をはっきりさせたいならif(0<d && d<1){d=1;}でもかませばいい。

lengthのイメージは原点を通る1次関数のグラフ。
abs(length(p)-0.5)のように絶対値にしたら、V次のグラフになって、0未満がなくなる

発展

sinやtan、時間関数を使うとより面白くなる。
レコーディング 2026-01-20 184635.gif

レイマーチングを使うとこんなこともできる。

ShaderToyというサイトに公開された作品(GLSL)をHLSLに変換した。
レコーディング 2026-01-20 173316.gif

参考記事

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?