このオリジナル記事は、WeChat 公開アカウント: Byte-Flow で最初に公開されたものであり、
著者 (WeChat ID: Byte-Flow) の許可なく転載することを禁止します。
以前にもシェーダープログラミングに関する記事をいくつか投稿しましたが、読者の方から「内容が断片的すぎる」というご意見をいただいたので、ここでシリーズとしてまとめてシェーダープログラミングを体系的に学習できるようにしたいと考えています。
ShaderToy や gl-transitions などの主流のシェーダ プログラミング Web サイトはすべて GLSL に基づいてシェーダを開発しており、MSL と GLSL の構文に大きな違いがないため、以降の一連の記事では主に GLSL を使用したシェーダ プログラミングを紹介します。
以降の Shader プログラミングでは、プログラミング環境として VSCode + ShaderToy プラグインを使用します。
-
VSCode https://code.visualstudio.com/downloadをダウンロードしてインストールします。
-
ShaderToy プラグインをインストールします。
-
拡張子 .frag が付いた新しいファイルを作成し、この記事のコードをコピーして貼り付けます。
-
現在のコードを右クリックし、ShaderToy:Show GLSL Preview を選択すると、特殊効果を楽しくデバッグできるようになります。
GLSL の一般的に使用されるいくつかの組み込み関数について別の記事を書く必要があるのでしょうか? 主に、初心者が ceil、fraction、smoothstep などのいくつかのキーワードをシェーダー プログラミングで目にするのを防ぐためです。