コピペで慣れる生WebGL#01ディストーションエフェクト｜斎藤健二
ディストーションエフェクトは生WebGLで書くと100行前後、5KB以下です。 このエフェクトのためだけに500KB以上のthree.jsや400KB以上のpixi.jsを使うのは賢明とは言えないと思います。 今回作成したディストーションエフェクトを使用したサンプルです。 生WebGLバージョン+コード 仕組み ディストーション用テクスチャーの色情報をベースにでテクスチャー#00とテクスチャー#01を切り替える仕組みになっています。 ディストーション用テクスチャーの色が黒 -> 切り替わるタイミング早い ディストーション用テクスチャーの色が白 -> 切り替わるタイミング遅い という風になっています。 テクスチャの切り替えはfragmentシェーダーで行っているので、そちらを見てください。 1. レンダリングを開始する前に行う初期化 2. 毎フレーム実行するdraw関数などのレンダリング 3
コピペで慣れる生WebGL#00はじめに｜斎藤健二
私はWebGLを専門とするプログラマーで、2016年12月からアムステルダムにあるSuperhero Cheesecakeという制作会社で働いています。 もともとWebGLを使うフロントエンドデベロッパーとして仕事していましたが、WebGL面白いなということで現在の仕事に転職しました。 企業サイト、企業のプロモーションサイトの一部、ゲームなどのためにWebGLのプログラムを作ります。 会社で最近関わったプロジェクト フリーランスとして最近関わったプロジェクト three.jsやpixi.jsといったWebGLライブラリを使用していたのですが、フロントエンドの方から”ファイルサイズ大きいから、ライブラリを使用しないでほしい”とか言われたり、ライブラリが巨大すぎて最終局面での最適化が面倒、100％自信を持って最適化されたと言えない状況がありました。 three.jsは非常に優れていますが、Bu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
