前回、03_ビデオと3Dについて紹介しました。行列を使い3Dをレンダリングをする手法を紹介しました。今回はフレームバッファーを使ったサンプルを紹介します。フレームバッファフレームバッファーを利用してオフスクリーンレンダリングの処理を行います。オフスクリーンレンダリングとは画面へ直接書き込まない描画処理のことを指し、メモリに描画結果を書き込んでいきます。13:48コピペで慣れる生WebGL#03ビデオと3D前回、#02パーティクルについて紹介しました。複数のプログラム(three.jsではMaterial)を使い、パーティクルのレンダリングを行うサンプルでした。前回までは行列をほとんど使いませんでした。今回から行列を使い3Dをレンダリングする手法を紹介します。ビデオと3Dビデオの背景にシンクロさせて立方体をレンダリングする手法を紹介します。13:41コピペで慣れる生WebGL#02パーティクル先週の#01ディストーションエフェクトの紹介を行いました。プログラム1つ、プログラムで使用するUniformを1つにするなど非常にシンプルなサンプルでした。第2回目も非常によく目にするパーティクルについてのサンプルです。はじめにでコピペで慣れる生WebGLという5回のシリーズをなぜ始めるのかを書きました。今回から5週に渡り実践的なサンプルをアップしていきたいとおもいます。1回目はよく目にするディストーションエフェクトです。3年前ぐらいからよく目にするようになり、画像ギャラリーの切替からサイトのシーン全体の遷移アニメーションなどで使うことができます。Cheesecakeという制作会社で働いています。WebGLを使うフロントエンドデベロッパーとして仕事していましたが、WebGL面白いなということで現在の仕事に転職しました。企業サイト、企業のプロモーションサイトの一部、ゲームなどのためにWebGLのプログラムを作ります。お問合せnoteカイゼン目安箱クリエイターの。