webgl-memory

#WebGL #パフォーマンス

webgl-memoryは、WebGLのVRAM使用状況トレースできるくん

greggmanさんのライブラリ

https://github.com/greggman/webgl-memory

https://www.npmjs.com/package/webgl-memory

使い方

初期化

パッケージをインポートした上で、 GMAN_webgl_memory という拡張を取得する

code:js

import 'https://greggman.github.io/webgl-memory/webgl-memory.js';

code:js

const webglMemory = gl.getExtension('GMAN_webgl_memory');

getMemoryInfo()

オブジェクトタイプごとのリソース数・VRAM消費量を取得する関数

code:js

const info = webglMemory.getMemoryInfo();

info の中身

code:js

{

// 各リソースのbytes

memory: { buffer, texture, renderbuffer, drawingbuffer, total },

// 各リソースの数

resources: { buffer, renderbuffer, program, query, sampler, shader, sync, texture, transformFeedback, vertexArray },

}

getResourcesInfo()

v1.1.0の新機能

オブジェクトタイプごとに、各リソースのVRAM消費量と、それが作られた際のスタックトレースを保持している

それを取得する関数が getResourcesInfo()

引数として、オブジェクトのインタフェースを渡す

code:js

const bufferInfo = webglMemory.getMemoryInfo(WebGLBuffer);

bufferInfo の中身

code:js

[

{ size, stackCreated, stackUpdated? },

// ...

]

スタックごとにsetを作り、どこのコードパスからたくさんバッファが作られているかを調べる

code:js

const bufferInfo = webglMemory.getResourcesInfo(WebGLBuffer);

const bufferSetsByStack = new Map();

for (const buffer of bufferInfo) {

const key = buffer.stackCreated;

const set = bufferSetsByStack.get(key) ?? new Set();

set.add(buffer);

bufferSetsByStack.set(key, set);

}

console.log(bufferSetsByStack.values());

型定義

→ webgl-memory: Type Definition

しくみ

→ webgl-memoryのしくみ