【GLSL】画像を切り替えエフェクト：遷移時にノイズをかけたり、歪ませたりする方法(デモあり)
WebGL(GLSL)を使って画像を切り替えエフェクト、遷移時にノイズをかける方法を紹介します。
またノイズを応用することで画像を歪ませながら遷移させることもできます。
合わせてデモをたくさん用意し ...
【GLSL】glslifyのノイズ(noise)の使い方とデモ
WebGL(GLSL)でよく使うglslifyのノイズ(noise)の使い方を紹介します。
デモもあるので確認してみてください。
【GLSL】画像の色の入れ替え、反転、座標をずらす、ゆっくり変化させる方法(デモ付き)
WebGL(GLSL)のフラグメントシェーダで色を入れ替えたり、色を反転させたり、色の座標をずらしたり、ゆっくりと色を変化させたり、画像を繰り返したりする方法を紹介します。
元画像の表示から分かるように7つ ...
【GLSL】Three.jsのShaderMaterialを使って画像や動画を出力する方法(デモ付き)
Three.jsのShaderMaterialを使って画像や動画を出力する方法を紹介します。
WebGL(GLSL)を使うので、これができるとWebサイトなどでは即応用ができるようになります。
デモ ...
【WebGL】GLSLで円や三角形、四角形、その他多角形の図形を描写する方法
WebGL(GLSL)で円や三角形、四角形、八角形、十角形といった多角形の図形を描写する方法を紹介します。
基本的なGLSLの計算方法については、GLSLで使う数学(三角関数、ベクトル)を文系エンジニア ...
【WebGL】GLSLで定数を定義する方法(define, constとその違いと注意点)
WebGL(GLSL)で定数を定義する方法を紹介します。
定数を定義するのは、2通りあります。
defineconst
この2つの使い方、その違いからくる注意点をみてみましょう ...
【WebGL】GLSLで使う数学(三角関数、ベクトル)を文系エンジニアのために実務でいるところだけ解説
WebGLにおいてGLSLを書く時、どうしても数学がでてきます。
ここでは数学(三角関数、ベクトル)を文系エンジニアのために、まず最初に抑えておきたいポイントだけ解説します。
難しいことは私もわかり ...
【WebGL】GLSLの曲者varyingとuniformとは？その挙動の説明と使い方について
WebGL(GLSL)において、データを受け渡しする方法には3つあります。
attributevarying
uniform
その中でもvaryingは特にわかりにくいです。 ...
【WebGL】GLSLのフラグメントシェーダー(Fragment Shader)とは？わかりやすく解説
WebGL(GLSL)を学習する上で、必ず理解しないといけないものの一つに、フラグメントシェーダー(Fragment Shader)があります。
フラグメントシェーダーとは何かについて、説明します。 ...
【WebGL】GLSLの頂点シェーダー(vertexShader バーテックスシェーダー)と頂点データ(attribute,頂点属性)とは？
WebGL(GLSL)を扱うときに必ずでてくる頂点シェーダー(vertexShader、バーテックスシェーダー）とは何か、何に使うのかについて説明します。
また、 attributeについても説明します。 ...