LibraryGL

- Sample01

fragmentShaderで色を変更する

📄 メモ

fragmentShaderの最終出力は左から「r,g,b,a」と覚え、必ずvec4になる。
gl_FragColor = vec4(1.0,1.0,1.0,1.0)

- Sample02

テクスチャを貼り付ける(Promise利用)

📄 メモ

Promiseなどを使って、テクスチャが読み込まれた後に他の処理が実行されるようにすると良い。
テクスチャを貼り付けた際のアスペクト比調節については、もう少し検討が必要かもしれない。

- Sample03

複数のテクスチャを指定(mix・step)

📄 メモ

mix(x, y, a) : 線形補間(x(1-a)+y*aを返す)
=> xとyをmixする。aの値によってスムーズに切り替わる。通常は、0.0 ~ 1.0の値が使用される。
---
step(a, x) : 0.0 or 1.0の値を返す。 xがaと比較され、a未満は0。それ以上は、1を返す。

- Sample04

複数のテクスチャを指定(mix・smoothstep)

📄 メモ

smoothstepは、stepとは違い0.0 or 1.0の二極化ではなく、名前の通り滑らかな値を返してくれる。
一般的にテクスチャなどをアニメーションさせる際は、smoothstepを使うことのほうが多い印象。
smoothstep(0.0, 1.0, x) => 0.0 < x < 1.0の場合は、単調増加滑らかな値を返す。つまり線形補完みたいな感じ。

- Sample05

abs・distanceを使った表現

📄 メモ

abs(x) : xの絶対値を返す。 絶対値とは、0からどれだけ離れているかを表す値のことを指す。3も-3も絶対値は3。
---
distance(x, y) : xとyの距離をfloatで返す。2つの座標の距離を出す時に使うイメージがある(window座標と3D座標・マウス座標と3D座標)。

- Sample06

sin・cosを使った表現

📄 メモ

sinを使うと、sin波に沿って値が -1.0 ~ 1.0を行ったり来たりする。
サンプルでは、vertexShaderで頂点を操作し、sin波をメインとした波打ち表現を実装した。
sin・cosの両方を使うと円運動を実現できる(三角関数)。
サンプル内のRGBシフトはおまけ。

- Sample07

モーフィング表現

📄 メモ

Pointsでモーフィングを行う際は、BufferGeometryかつRawShaderMaterialで行うとうまくいく。
BoxやSphereの頂点座標を取得して、setAttribute()でBufferGeometryにセットする。
その後は、vertexshaderにてmix()と変化値を使って、モーフィングさせる。

- Sample08

レイキャスターを使った表現

📄 メモ

レイキャスターを使って擬似的な光線を飛ばす。光線に当たったオブジェクトに対して、何かしらの加工ができる。
shaderでは、「 float dist = length(vPosition - vMouse) 」 の記述で座標を一致させる(?)為に、大体必要になる記述。

- Sample09

３枚以上のテクスチャを使ったスライダー表現

📄 メモ

考え方は、一般的なスライダーを作る時と変わらない印象。
currentとnextの2つのuniformを用意して、current = nextのように切り替えが終わったら変化後のテクスチャをcurrentに格納。
progressをgsapのonComplete()を使って、1.0 => 0.0に戻しておく事が大事。

- Sample010

複数枚のテクスチャをグリッド形式で並べる

📄 メモ

以下の公式を覚える。
const row = Math.floor(index / 3);
const col = index % 3;
const spacing = 0.1;
const size = 0.66;
mesh.position.x = (col - 1) * (size + spacing);
mesh.position.y = (row - 1) * (size + spacing);

- Sample011

テクスチャをクリックで拡大(1枚)

📄 メモ

01.カメラ設定をいじって、1 = 1pxになるように変更する。
02.DOM画像から座標・サイズ・画像パスを取得する。
03.DOM画像の情報を元に、Meshに情報を割り当てる。
04.vertexShaderでscaleさせて、画面いっぱいに広げる。

- Sample012

テクスチャをクリックで拡大(複数枚)

📄 メモ

基本的には、１枚の時と同じだがスクロールが発生するので慣性スクロールを実装する必要がある。
requestanimationframe()を使って、常時DOMの位置を更新して、meshに反映する。

- Sample013

Refractionを使った表現(Shaderなし)

📄 メモ

MeshPhysicalMaterialを使う事で、Shaderなしでもレンズ表現ができる。
以下のパラメーターでTheレンズらしい歪みができる。
transmission: 1.0, roughness: 0.0, thickness: 1.0, transparent: true

- Sample014

Refractionを使った表現(Shaderあり)

📄 メモ

シェーダーを使って実装する場合は、以下のrefractをfragmentShaderで使う事がポイントになりそう
refract(eyeVector, normal, iorRatio)
最終的には、vec4 Tex = texture2D(u_texture, uv + refractVecR.xy);にして出力する。
色シフトをさせる またはレンズオブジェクトを変形させる等がない場合は、シェーダーなしでもいいかも？

- Sample015

テクスチャの一部を透過させる

📄 メモ

- ポイント
・背景透過されたテクスチャを用意する。
・transparent:trueにする。

- Sample016

GLB形式の3Dモデルを描画・加工

📄 メモ

Sample13と同じようにMeshPhysicalMaterialを使う事で、シェーダーなしでレンズ表現ができる。
「レンズ表現 + GLBモデル + ノイズ」で面白い表現ができそう。

- Sample017

postprocessing処理の実装(色の座標変更)

📄 メモ

EffectComposer, RenderPass, ShaderPassを使って実装する。
通常のレンダーではなく、コンポーザー用のレンダーに描画する。( this.composer.render())
vec2 uv = vUv;
gl_FragColor = texture2D(tDiffuse, uv);
上記で、通常の描画ができる。

- Sample018

postprocessing処理の実装(ノイズ)

📄 メモ

通常のMeshと同じようなやり方でノイズをかける事ができる。

- Sample019

Blenderで書き出したアニメーションを再生

📄 メモ

AnimationMixerを使って、Blender側で設定したアニメーションを取得する事ができる。
this.mixer.updateのアップデートを忘れずに。

- Sample020

Ripples Effect(テクスチャ限定)

📄 メモ

ノイズ・テクスチャそれぞれのシーンを作成し、WebGLRenderTargetを利用。
テクスチャ側のフラグメントシェーダーでノイズをmixする。

- Sample021

Ripples Effect(シーン全体)

📄 メモ

Three.jsでコンポーザーを使う時は、postprocessingではなく、Three.jsにある各種コンポーザーを使う。

- Sample022

サイト背景として使えるノイズ作成

📄 メモ

- Sample023

ドラッグ可能なメッシュの作成

📄 メモ

- Sample024

マウス領域のみにエフェクト追加

📄 メモ