WebGLが少しずつわかってきたのでいろいろ作ってみた
2023/12/16
ただの備忘録
Three.jsに挑戦しては挫折、というのをここ2年くらい何度もしていたのですが、最近になってようやくシェーダーの基礎が身についてきました。 まだまだ初心者の域を出ませんが、作品を備忘録として残しておきます。
直近で作った作品
Sky
初めて自分の力でVertexShaderを書いた作品です。 やってることはただ頂点をランダムに動かしているだけですが、今まで全く理解できなかったglslが少しだけわかるようになった実感があったため、一気にWebGLの学習が楽しくなりました
Magic Carpet
VertexShaderの扱い方はなんとなく理解できるようになってきたので、自分でattributeを規則正しく詰め込むことで波打つようなモーションを作りました。
これも、どうやって実装しているのか理解することが以前は全くできなかったので、成長を感じました。
Firework
WebGLを勉強し始めた時、ずっと花火のエフェクトを使ってみたいと思っていたので、作ってみました。
実装は普通のMeshと違い、Pointsを使う必要があったため、シェーダの書き方や頂点の配置などにかなり苦戦しました。
まだまだリアルとは程遠いので、今後よりレベルの高い実装をできるようにしたいと思います。
学習に使用している教材
NotEqual
Udemyで有名なCodeMafiaさんが作成されている教材です。日本語でのWebGLが少ない中、Three.jsの基礎から、WebGLが動く原理、応用までかなりボリュームのある教材となっています。
基礎編は毎日何度も寝る前に見たことで、シェーダーの書き方のイメージを頭に叩き込めました。
値段は少し高いですが、その分の価値がある教材だと思います。
Three.js Journey
現在はこちらの教材を進行中です。
Bruno Simonさんという方が作成されている教材です。Three.jsの基礎、パフォーマンスの最適化、Blender、シェーダーなど、かなり深くまで解説されています。
内容は英語ですが、自分は字幕 + Google翻訳で今の所問題なく視聴できています。
今後の目標
- Blenderなどでモデリングをできるようにする
- シェーダーの扱いがまだまだ（特にFragmentShader）なので、もっと書けるようになる
自分の思い描いたものがそのまま作れるようになるまでまだまだかかりそうですが、引き続き頑張りたいと思います。