WebGLはウェブページに3D表現を組み込むための技術です。そのWebGLを扱いやすくしたJSライブラリの「Three.js」。Theee.jsとシェーダー言語GLSLを組み合わせてプリンが揺れるデモを作成しました。本記事では、Three.jsでシェーダー言語を利用する手順を解説します。 使用技術について GLSLとはOpenGL Shading Languageの略でその名の通り、OpenGL(WebGL)で使用できるシェーディング言語です。WebGLではライブラリを使用しない場合は、このシェーディング言語を使用してシェーダー(3D描画のための一連の計算セット)を自力で作成しなければなりません。WebGLのシェーダーは2種類あり、バーテックスシェーダーでは頂点の情報を画面上に反映し、フラグメントシェーダーではピクセル単位での描画を行います。今回はバーテックスシェーダーで頂点の位置をずらし
![GLSLを使ってワンランク上の表現を! Three.jsでのぷるぷるシェーダーの作り方 - ICS MEDIA](https://cdn-ak-scissors.b.st-hatena.com/image/square/d621c3e6009c1ec4c7f09a3089f705404513b26a/height=288;version=1;width=512/https%3A%2F%2Fics.media%2Fentry%2F3228%2Fimages%2Feyecatch.png)