コピペで慣れる生WebGL#01ディストーションエフェクト｜斎藤健二ディストーションエフェクトは生WebGLで書くと100行前後、5KB以下です。 このエフェクトのためだけに500KB以上のthree.jsや400KB以上のpixi.jsを使うのは賢明とは言えないと思います。 今回作成したディストーションエフェクトを使用したサンプルです。 生WebGLバージョン+コード 仕組み ディストーション用テクスチャーの色情報をベースにでテクスチャー#00とテクスチャー#01を切り替える仕組みになっています。 ディストーション用テクスチャーの色が黒 -> 切り替わるタイミング早い ディストーション用テクスチャーの色が白 -> 切り替わるタイミング遅い という風になっています。 テクスチャの切り替えはfragmentシェーダーで行っているので、そちらを見てください。 1. レンダリングを開始する前に行う初期化 2. 毎フレーム実行するdraw関数などのレンダリング 3
