Back to Index

GLSLスクールを受講いたしました!

お久しぶりです。タッキーこと瀧口です。
2025年11月から3ヶ月にかけてGLSLスクールを受講いたしました。
本講義を受けての感想などを綴っていこうかと思います。

きっかけ

過去にWebGLスクールを受講して以降、WebGLを採用した実案件に携わる機会や、興味から触れる機会が格段に増えました。
その中で、より表現の幅を広げたいと思ったことがきっかけです。

以前までの知ったかぶりWebGLプレイヤーではなく、いちWebGLプレイヤー(まだまだ未熟)としてレベルを上げられる良い機会だと感じ、受講させていただきました。

受講してみて

WebGLスクールのときは「JavaScriptでWebGLを動かす」という感覚でした。
今回はGLSLそのものがテーマということもあり、フラグメントシェーダーや頂点シェーダーの役割、attribute・uniform・varyingといった修飾子など、GLSLならではの書き方・概念を整理し直す必要がありました。
そういった点は難しいなと感じました。

「この関数を使えばこういう表現ができる」という知識は積み上がっていきました。
ただ、逆に「こういう表現を作りたい、じゃあどの計算・関数を使えばいい?」
という発想は、まだまだ乏しいのが正直なところです…。

これはもう、たくさん手を動かしていくしかないなと感じています!

スクールの課題

WebGLスクール同様に、講義ごとに課題が出されます。
「スクール=課題」は当たり前ではありますが、手を動かすきっかけにもなりますし、目標も定まるのでありがたいですよね。(宿題が嬉しい…!?)

さて、その課題の中から一つご紹介します。

とってもキュートです。愛くるしいです。

こちらは、SDFという手法を使って、さまざまな図形を組み合わせて描画しています。
GLSLは画像を加工するだけでなく、図形そのものを生成して表現することも可能です。
例えば「目」は、円形を3つ組み合わせて描いています。

こういった描画方法には以前から挑戦してみたいと思っていたので、今回形にできてよかったです!🐈

アイルー:https://ja.wikipedia.org/wiki/%E3%82%A2%E3%82%A4%E3%83%AB%E3%83%BC

2D SDF:https://iquilezles.org/articles/distfunctions2d/

社内の課題

今回も社内で制作物を1つ提出する課題がありました。

海外のサイトでこの表現を見て「やってみたい!」となり、今回の社内課題として挑戦してみました。

2D画像なのに立体的に見えるの不思議ですよね〜。

ディスプレイスメントマップとは、画像の色(主に輝度)をもとに、歪みの量を決める処理です。
今回は白黒画像を使用し、白の値が大きいほど大きくずれるようにしています。

無事、形にできてよかったです!

参考にしたサイト:https://good-fella.com/

最後に

本講義を受講したことで、挑戦してみたい表現の幅が広がり、
シェーダーが使われているサイトを見たときに「こうやっているのかな?」と、見え方が変わってきたと感じています。

また、最近はAIによってGLSLのハードルが下がってきているとは思いますが、
知識があるとないとではアプローチの仕方が変わるため、そういった意味でも受講してよかったと感じました。

これからも手を動かしながら、引き続き力を付けていきたいと思います!

ご一読いただき、ありがとうございました。

Contact us

ホームページやインターネット広告などに関するご相談、
ご質問などお気軽にお問い合わせください。
お見積りやご相談はすべて無料で承ります。

Tel:0287-69-6283(9:00-18:00 土日祝祭日を除く)