恐れるに足らず！A-Frame × GLSL でWeb 3Dコンテンツ用のシェーダーを書く。 - VOYAGE GROUP VR室ブログ

こんにちは。 低温調理機を自作しようと思っているjujunjun110 です。生活を豊かにする電子工作素晴らしい。 今回はA-Frameでシェーダーを書く方法について調べたのでまとめてみたいと思います。A-FrameというよりはどちらかというとGLSL の説明という感じなので、React-VRなどThree.jsのラッパーであるWeb VRフレームワーク全般で使える内容だと思います。 目次 目次 シェーダーとは？ 何のためにシェーダーを書くのか A-Frameで使える2種類のシェーダー 一番シンプルなシェーダーを書いてみる Fragment Shader でグラデーションを実現する Fragment Shaderに引数を渡すことで、時間で色が変わるようにしてみる Vertex Shader で頂点を移動させてオブジェクトをぐにゃぐにゃ動かす まとめ シェーダーとは？ ざっくりいうと、シェー