リファレンス p5.Framebuffer

p5.Framebuffer

テクスチャのための高性能描画サーフェスを記述するクラスです。

p5.Framebuffer オブジェクトは、フレームバッファと呼ばれる 専用の描画サーフェスを提供します。これらは p5.Graphics オブジェクトに似ていますが、 はるかに高速に動作します。 フレームバッファが作成に使用されたキャンバスと同じWebGL コンテキストを共有しているため、パフォーマンスが向上します。

p5.Framebuffer オブジェクトは、メイン キャンバスのすべての描画機能を持っています。フレームバッファ用の描画命令は、 myBuffer.begin()myBuffer.end() の呼び出しの間に 配置する必要があります。結果の画像 は、p5.Framebuffer オブジェクトを texture() 関数に渡すことで、 テクスチャとして適用できます(例:texture(myBuffer))。 また、image() 関数に渡すことで、 メインキャンバスに表示することもできます(例:image(myBuffer, 0, 0))。

注意:createFramebuffer() が このクラスのインスタンスを作成する推奨される方法です。

シンタックス

p5.Framebuffer(target, [settings])

パラメーター

target
p5.Graphics|p5:

スケッチインスタンスまたは p5.Graphics オブジェクト。

settings
Object:

設定オプション。

フィールド

pixels

フレームバッファ内の各ピクセルの色を含む配列です。

myBuffer.loadPixels()myBuffer.pixels 配列にアクセスする前に 呼び出す必要があります。 myBuffer.updatePixels() は変更を加えた後に呼び出す必要があります。

注意:このプロパティを介してピクセルを更新することは、フレームバッファに 直接描画するよりも遅くなります。myBuffer.pixels をループする代わりに p5.Shader オブジェクトの使用を 検討してください。

color

フレームバッファの色データを格納するオブジェクトです。

各フレームバッファは内部で WebGLTexture オブジェクトを使用して色データを格納します。myBuffer.color プロパティ を使用すると、このデータを他の関数に直接渡すことができます。 例えば、texture(myBuffer.color)myShader.setUniform('colorTexture', myBuffer.color) を呼び出すことは、 高度な使用例で役立つかもしれません。

注意:デフォルトでは、フレームバッファのy座標は画像やビデオと比べて 反転しています。必要に応じてフレームバッファのy座標を反転させるのは 簡単です。例えば、plane(myBuffer.width, -myBuffer.height) を 呼び出すとフレームバッファが反転します。

depth

フレームバッファの深度データを格納するオブジェクトです。

各フレームバッファは内部で WebGLTexture オブジェクトを使用して深度データを格納します。myBuffer.depth プロパティ を使用すると、このデータを他の関数に直接渡すことができます。 例えば、texture(myBuffer.depth)myShader.setUniform('depthTexture', myBuffer.depth) を呼び出すことは、 高度な使用例で役立つかもしれません。

注意:デフォルトでは、フレームバッファのy座標は画像やビデオと比べて 反転しています。必要に応じてフレームバッファのy座標を反転させるのは 簡単です。例えば、plane(myBuffer.width, -myBuffer.height) を 呼び出すとフレームバッファが反転します。

メソッド

resize

フレームバッファを指定された幅と高さにリサイズします。

パラメータ widthheight は、フレームバッファの 寸法を設定します。例えば、myBuffer.resize(300, 500) を呼び出すと、 フレームバッファを300×500ピクセルにリサイズし、その後 myBuffer.width を300に、myBuffer.height を500に設定します。

pixelDensity

フレームバッファのピクセル密度を設定するか、現在の密度を返します。

コンピューターディスプレイは、ピクセルと呼ばれる小さな光の格子です。ディスプレイの ピクセル密度は、ある領域にどれだけのピクセルが詰め込まれているかを表します。 より小さなピクセルを持つディスプレイは、より高いピクセル密度を持ち、より鮮明な 画像を作成します。

パラメータ density はオプションです。数値が渡された場合、 例えば myBuffer.pixelDensity(1) のように、フレームバッファのピクセル密度を 設定します。デフォルトでは、フレームバッファのピクセル密度は、作成された キャンバスのピクセル密度と一致します。すべてのキャンバスは、デフォルトでディスプレイの ピクセル密度と一致します。

引数なしで myBuffer.pixelDensity() を呼び出すと、現在の ピクセル密度を返します。

autoSized

フレームバッファの自動サイズ調整モードを切り替えるか、現在のモードを返します。

デフォルトでは、フレームバッファは自動的にサイズを調整して、作成した キャンバスに合わせます。myBuffer.autoSized(false) を呼び出すと この動作を無効にし、myBuffer.autoSized(true) を呼び出すと 再び有効にします。

引数なしで myBuffer.autoSized() を呼び出すと、フレームバッファが 自動的にサイズ調整される場合は true を、そうでない場合は false を返します。

createCamera

フレームバッファで使用する新しい p5.Camera オブジェクトを作成します。

新しいカメラは、デフォルトの位置 (0, 0, 800) と デフォルトの透視投影で初期化されます。その属性は p5.Camera メソッド(例:myCamera.lookAt(0, 0, 0)) で制御できます。

フレームバッファのカメラは、 myBuffer.begin()myBuffer.end() の呼び出しの間に 作成する必要があります:

let myCamera;

myBuffer.begin();

// フレームバッファ用のカメラを作成します。 myCamera = myBuffer.createCamera();

myBuffer.end();

setCamera() を呼び出すと、 カメラを使用してフレームバッファの投影を更新します。 ビューを適切に変更するには、resetMatrix() も呼び出す必要があります:

myBuffer.begin();

// フレームバッファ用のカメラを設定します。 setCamera(myCamera);

// すべての変換をリセットします。 resetMatrix();

// 何かを描画します...

myBuffer.end();
remove

フレームバッファをGPUメモリから削除します。

myBuffer.remove() を呼び出すと、フレームバッファが使用していた GPUメモリを解放します。フレームバッファはCPU上でも少量のメモリを使用しており、 これは以下のように解放できます:

// フレームバッファをGPUメモリから削除します。 myBuffer.remove();

// フレームバッファをCPUメモリから削除します。 myBuffer = undefined;

注意:フレームバッファをCPUメモリから削除するには、フレームバッファを 参照するすべての変数に undefined 値を割り当てる必要があります。 変数がまだフレームバッファを参照している場合、ガベージコレクションの 対象にはなりません。

begin

フレームバッファへの図形の描画を開始します。

myBuffer.begin()myBuffer.end() を使用すると、フレームバッファに図形を描画できます。myBuffer.begin() は フレームバッファへの描画を開始し、 myBuffer.end() はフレームバッファへの 描画を停止します。変更は、フレームバッファが画像またはテクスチャとして 表示されるまで見えません。

end

フレームバッファへの図形の描画を停止します。

myBuffer.begin()myBuffer.end() を使用すると、フレームバッファに図形を描画できます。 myBuffer.begin() は フレームバッファへの描画を開始し、myBuffer.end() はフレームバッファへの 描画を停止します。変更は、フレームバッファが画像または テクスチャとして表示されるまで見えません。

draw

描画命令を含む関数を呼び出してフレームバッファに描画します。

パラメータ callback は、フレームバッファの描画命令を 含む関数です。例えば、myBuffer.draw(myFunction) を呼び出すと、 myFunction() という名前の関数を呼び出してフレームバッファに 描画します。これは以下と同じ効果があります:

myBuffer.begin(); myFunction(); myBuffer.end(); 
loadPixels

フレームバッファ内の各ピクセルの現在の値を pixels 配列に読み込みます。

myBuffer.loadPixels() は、 myBuffer.pixels から読み取りまたは 書き込みを行う前に呼び出す必要があります。

get

フレームバッファからピクセルまたはピクセル領域を取得します。

myBuffer.get() は使いやすいですが、 myBuffer.pixels ほど 高速ではありません。多くのピクセル値を読み取るには myBuffer.pixels を 使用してください。

パラメータなしの myBuffer.get() バージョンは、フレームバッファ全体を p5.Image オブジェクトとして返します。

2つのパラメータを持つ myBuffer.get() バージョンは、それらを 座標として解釈します。指定された点のピクセルの [R, G, B, A] 値を 含む配列を返します。

4つのパラメータを持つ myBuffer.get() バージョンは、それらを 座標と寸法として解釈します。フレームバッファのサブセクションを p5.Image オブジェクトとして返します。最初の2つの パラメータはサブセクションの左上隅の座標です。最後の2つの パラメータはサブセクションの幅と高さです。

updatePixels

pixels 配列のRGBA値で フレームバッファを更新します。

myBuffer.updatePixels() は、 myBuffer.pixels 配列の値を 変更した後にのみ呼び出す必要があります。このような変更は、 myBuffer.loadPixels() を呼び出した直後に直接行うことができます。

Notice any errors or typos? Please let us know. Please feel free to edit src/webgl/p5.Framebuffer.js and open a pull request!

関連するリファレンス