マガジンのカバー画像

コピペで慣れる生WebGL

5
運営しているクリエイター

#01

コピペで慣れる生WebGL#03ビデオと3D

コピペで慣れる生WebGL#03ビデオと3D

前回、#02パーティクルについて紹介しました。複数のプログラム(three.jsではMaterial)を使い、パーティクルのレンダリングを行うサンプルでした。前回までは行列をほとんど使いませんでした。今回から行列を使い3Dをレンダリングする手法を紹介します。

ビデオと3Dビデオの背景にシンクロさせて立方体をレンダリングする手法を紹介します。ビデオをWebGLのテクスチャとして使用する際、ビデオの

もっとみる
コピペで慣れる生WebGL#02パーティクル

コピペで慣れる生WebGL#02パーティクル

先週の#01ディストーションエフェクトの紹介を行いました。プログラム1つ、プログラムで使用するUniformを1つにするなど非常にシンプルなサンプルでした。

第2回目も非常によく目にするパーティクルについてのサンプルです。

パーティクルは
- 3Dモデルと一緒に使う
- 背景の一部
- シーンの遷移のアニメーション
- メインビジュアルのアニメーション・演出
など使用範囲が非常に広く、自由度が

もっとみる
コピペで慣れる生WebGL#01ディストーションエフェクト

コピペで慣れる生WebGL#01ディストーションエフェクト

#00 はじめにでコピペで慣れる生WebGLという5回のシリーズをなぜ始めるのかを書きました。今回から5週に渡り実践的なサンプルをアップしていきたいとおもいます。

1回目はよく目にするディストーションエフェクトです。
3年前ぐらいからよく目にするようになり、画像ギャラリーの切替からサイトのシーン全体の遷移アニメーションなどで使うことができます。アクセントとしてかっこよく見せることができますが、多

もっとみる