WebGPUはポイントへの描画をサポートしています。これを行うには、レンダーパイプラインでプリミティブトポロジを'point-list'に設定します。
頂点バッファに関する記事で紹介したアイデアから始めて、ランダムなポイントを持つ簡単な例を作成しましょう。
まず、単純な頂点シェーダーとフラグメントシェーダーです。簡単にするために、位置にはクリップ空間座標を使用し、フラグメントシェーダーでは色を黄色にハードコーディングします。
struct Vertex {
@location(0) position: vec2f,
};
struct VSOutput {
@builtin(position) position: vec4f,
};
@vertex fn vs(vert: Vertex,) -> VSOutput {
var vsOut: VSOutput;
vsOut.position = vert.position;
return vsOut;
}
@fragment fn fs(vsOut: VSOutput) -> @location(0) vec4f {
return vec4f(1, 1, 0, 1); // yellow
}
次に、パイプラインを作成するときに、トポロジを'point-list'に設定します。
const pipeline = device.createRenderPipeline({
label: '1 pixel points',
layout: 'auto',
vertex: {
module,
buffers: [
{
arrayStride: 2 * 4, // 2 floats, 4 bytes each
attributes: [
{shaderLocation: 0, offset: 0, format: 'float32x2'}, // position
],
},
],
},
fragment: {
module,
targets: [{ format: presentationFormat }],
},
+ primitive: {
+ topology: 'point-list',
+ },
});
頂点バッファにランダムなクリップ空間ポイントをいくつか入力しましょう。
const rand = (min, max) => min + Math.random() * (max - min);
const kNumPoints = 100;
const vertexData = new Float32Array(kNumPoints * 2);
for (let i = 0; i < kNumPoints; ++i) {
const offset = i * 2;
vertexData[offset + 0] = rand(-1, 1);
vertexData[offset + 1] = rand(-1, 1);
}
const vertexBuffer = device.createBuffer({
label: 'vertex buffer vertices',
size: vertexData.byteLength,
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(vertexBuffer, 0, vertexData);
そして、描画します。
const encoder = device.createCommandEncoder();
const pass = encoder.beginRenderPass(renderPassDescriptor);
pass.setPipeline(pipeline);
pass.setVertexBuffer(0, vertexBuffer);
pass.draw(kNumPoints);
pass.end();
そして、100個のランダムな黄色の点が得られます。
残念ながら、それらはすべて1ピクセルのサイズしかありません。1ピクセルサイズのポイントは、WebGPUがサポートするすべてです。もっと大きなものが必要な場合は、自分で行う必要があります。幸いなことに、それは簡単です。クワッドを作成し、インスタンス化を使用するだけです。
頂点シェーダーにクワッドとサイズ属性を追加しましょう。また、描画しているテクスチャのサイズを渡すためのユニフォームも追加しましょう。
struct Vertex {
@location(0) position: vec2f,
+ @location(1) size: f32,
};
+struct Uniforms {
+ resolution: vec2f,
+};
struct VSOutput {
@builtin(position) position: vec4f,
};
+@group(0) @binding(0) var<uniform> uni: Uniforms;
@vertex fn vs(
vert: Vertex,
+ @builtin(vertex_index) vNdx: u32,
) -> VSOutput {
+ let points = array(
+ vec2f(-1, -1),
+ vec2f( 1, -1),
+ vec2f(-1, 1),
+ vec2f(-1, 1),
+ vec2f( 1, -1),
+ vec2f( 1, 1),
+ );
var vsOut: VSOutput;
+ let pos = points[vNdx];
- vsOut.position = vec4f(vert.position, 0, 1);
+ vsOut.position = vec4f(vert.position + pos * vert.size / uni.resolution, 0, 1);
return vsOut;
}
@fragment fn fs(vsOut: VSOutput) -> @location(0) vec4f {
return vec4f(1, 1, 0, 1); // yellow
}
JavaScriptでは、ポイントごとにサイズ属性を追加し、stepMode: 'instance'を設定してインスタンスごとに属性を進めるように設定し、デフォルトの'triangle-list'が必要なのでトポロジ設定を削除できます。
const pipeline = device.createRenderPipeline({
label: 'sizeable points',
layout: 'auto',
vertex: {
module,
buffers: [
{
- arrayStride: 2 * 4, // 2 floats, 4 bytes each
+ arrayStride: (2 + 1) * 4, // 3 floats, 4 bytes each
+ stepMode: 'instance',
attributes: [
{shaderLocation: 0, offset: 0, format: 'float32x2'}, // position
+ {shaderLocation: 1, offset: 8, format: 'float32'}, // size
],
},
],
},
fragment: {
module,
targets: [{ format: presentationFormat }],
},
- primitive: {
- topology: 'point-list',
- },
});
頂点データにポイントごとにランダムなサイズを追加しましょう。
const kNumPoints = 100;
- const vertexData = new Float32Array(kNumPoints * 2);
+ const vertexData = new Float32Array(kNumPoints * 3);
for (let i = 0; i < kNumPoints; ++i) {
- const offset = i * 2;
+ const offset = i * 3;
vertexData[offset + 0] = rand(-1, 1);
vertexData[offset + 1] = rand(-1, 1);
+ vertexData[offset + 2] = rand(1, 32);
}
解像度を渡すことができるように、ユニフォームバッファが必要です。
const uniformValues = new Float32Array(2);
const uniformBuffer = device.createBuffer({
size: uniformValues.byteLength,
usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
});
const kResolutionOffset = 0;
const resolutionValue = uniformValues.subarray(
kResolutionOffset, kResolutionOffset + 2);
そして、ユニフォームバッファをバインドするためのバインドグループが必要です。
const bindGroup = device.createBindGroup({
layout: pipeline.getBindGroupLayout(0),
entries: [
{ binding: 0, resource: { buffer: uniformBuffer }},
],
});
次に、レンダリング時に、現在の解像度でユニフォームバッファを更新できます。
// キャンバスコンテキストから現在のテクスチャを取得し、
// レンダリングするテクスチャとして設定します。
const canvasTexture = context.getCurrentTexture();
renderPassDescriptor.colorAttachments[0].view =
canvasTexture.createView();
+ // ユニフォームバッファの解像度を更新します
+ resolutionValue.set([canvasTexture.width, canvasTexture.height]);
+ device.queue.writeBuffer(uniformBuffer, 0, uniformValues);
次に、バインドグループを設定し、ポイントごとにインスタンスをレンダリングします。
const encoder = device.createCommandEncoder();
const pass = encoder.beginRenderPass(renderPassDescriptor);
pass.setPipeline(pipeline);
pass.setVertexBuffer(0, vertexBuffer);
+ pass.setBindGroup(0, bindGroup);
- pass.draw(kNumPoints);
+ pass.draw(6, kNumPoints);
pass.end();
そして、サイズ変更可能なポイントができました。
ポイントにテクスチャを付けたい場合はどうすればよいでしょうか？頂点シェーダーからフラグメントシェーダーにテクスチャ座標を渡すだけです。
struct Vertex {
@location(0) position: vec2f,
@location(1) size: f32,
};
struct Uniforms {
resolution: vec2f,
};
struct VSOutput {
@builtin(position) position: vec4f,
+ @location(0) texcoord: vec2f,
};
@group(0) @binding(0) var<uniform> uni: Uniforms;
@vertex fn vs(
vert: Vertex,
@builtin(vertex_index) vNdx: u32,
) -> VSOutput {
let points = array(
vec2f(-1, -1),
vec2f( 1, -1),
vec2f(-1, 1),
vec2f(-1, 1),
vec2f( 1, -1),
vec2f( 1, 1),
);
var vsOut: VSOutput;
let pos = points[vNdx];
vsOut.position = vec4f(vert.position + pos * vert.size / uni.resolution, 0, 1);
+ vsOut.texcoord = pos * 0.5 + 0.5;
return vsOut;
}
そしてもちろん、フラグメントシェーダーでテクスチャを使用します。
+@group(0) @binding(1) var s: sampler;
+@group(0) @binding(2) var t: texture_2d<f32>;
@fragment fn fs(vsOut: VSOutput) -> @location(0) vec4f {
- return vec4f(1, 1, 0, 1); // yellow
+ return textureSample(t, s, vsOut.texcoord);
}
テクスチャのインポートに関する記事で説明したように、キャンバスを使用して単純なテクスチャを作成します。
const ctx = new OffscreenCanvas(32, 32).getContext('2d');
ctx.font = '27px sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('🥑', 16, 16);
const texture = device.createTexture({
size: [32, 32],
format: 'rgba8unorm',
usage: GPUTextureUsage.TEXTURE_BINDING |
GPUTextureUsage.COPY_DST |
GPUTextureUsage.RENDER_ATTACHMENT,
});
device.queue.copyExternalImageToTexture(
{ source: ctx.canvas, flipY: true },
{ texture, premultipliedAlpha: true },
[32, 32],
);
そして、サンプラーが必要であり、それらをバインドグループに追加する必要があります。
const sampler = device.createSampler({
minFilter: 'linear',
magFilter: 'linear',
});
const bindGroup = device.createBindGroup({
layout: pipeline.getBindGroupLayout(0),
entries: [
{ binding: 0, resource: { buffer: uniformBuffer }},
+ { binding: 1, resource: sampler },
+ { binding: 2, resource: texture.createView() },
],
});
透明度を得るために、ブレンドもオンにしましょう。
const pipeline = device.createRenderPipeline({
label: 'sizeable points with texture',
layout: 'auto',
vertex: {
module,
buffers: [
{
arrayStride: (2 + 1) * 4, // 3 floats, 4 bytes each
stepMode: 'instance',
attributes: [
{shaderLocation: 0, offset: 0, format: 'float32x2'}, // position
{shaderLocation: 1, offset: 8, format: 'float32'}, // size
],
},
],
},
fragment: {
module,
- targets: [{ format: presentationFormat }],
+ targets: [
+ {
+ format: presentationFormat,
+ blend: {
+ color: {
+ srcFactor: 'one',
+ dstFactor: 'one-minus-src-alpha',
+ operation: 'add',
+ },
+ alpha: {
+ srcFactor: 'one',
+ dstFactor: 'one-minus-src-alpha',
+ operation: 'add',
+ },
+ },
+ },
+ ],
},
});
そして、テクスチャ付きのポイントができました。
そして、続けていくことができます。ポイントごとに回転はどうでしょうか？行列演算に関する記事で説明した数学を使用します。
struct Vertex {
@location(0) position: vec2f,
@location(1) size: f32,
+ @location(2) rotation: f32,
};
struct Uniforms {
resolution: vec2f,
};
struct VSOutput {
@builtin(position) position: vec4f,
@location(0) texcoord: vec2f,
};
@group(0) @binding(0) var<uniform> uni: Uniforms;
@vertex fn vs(
vert: Vertex,
@builtin(vertex_index) vNdx: u32,
) -> VSOutput {
let points = array(
vec2f(-1, -1),
vec2f( 1, -1),
vec2f(-1, 1),
vec2f(-1, 1),
vec2f( 1, -1),
vec2f( 1, 1),
);
var vsOut: VSOutput;
let pos = points[vNdx];
+ let c = cos(vert.rotation);
+ let s = sin(vert.rotation);
+ let rot = mat2x2f(
+ c, s,
+ -s, c,
+ );
- vsOut.position = vec4f(vert.position + pos * vert.size / uni.resolution, 0, 1);
+ vsOut.position = vec4f(vert.position + rot * pos * vert.size / uni.resolution, 0, 1);
vsOut.texcoord = pos * 0.5 + 0.5;
return vsOut;
}
パイプラインに回転属性を追加する必要があります。
const pipeline = device.createRenderPipeline({
label: 'sizeable rotatable points with texture',
layout: 'auto',
vertex: {
module,
buffers: [
{
- arrayStride: (2 + 1) * 4, // 3 floats, 4 bytes each
+ arrayStride: (2 + 1 + 1) * 4, // 4 floats, 4 bytes each
stepMode: 'instance',
attributes: [
{shaderLocation: 0, offset: 0, format: 'float32x2'}, // position
{shaderLocation: 1, offset: 8, format: 'float32'}, // size
+ {shaderLocation: 2, offset: 12, format: 'float32'}, // rotation
],
},
],
},
...
頂点データに回転を追加する必要があります。
const kNumPoints = 100;
- const vertexData = new Float32Array(kNumPoints * 3);
+ const vertexData = new Float32Array(kNumPoints * 4);
for (let i = 0; i < kNumPoints; ++i) {
- const offset = i * 3;
+ const offset = i * 4;
vertexData[offset + 0] = rand(-1, 1);
vertexData[offset + 1] = rand(-1, 1);
* vertexData[offset + 2] = rand(10, 64);
+ vertexData[offset + 3] = rand(0, Math.PI * 2);
}
テクスチャを🥑から👉に変更しましょう。
- ctx.fillText('🥑', 16, 16);
+ ctx.fillText('👉', 16, 16);
簡単な答えは、頂点の3D数学を行った後、クワッド値を追加するだけです。
たとえば、フィボナッチ球の3D位置を作成するコードは次のとおりです。
function createFibonacciSphereVertices({
numSamples,
radius,
}) {
const vertices = [];
const increment = Math.PI * (3 - Math.sqrt(5));
for (let i = 0; i < numSamples; ++i) {
const offset = 2 / numSamples;
const y = ((i * offset) - 1) + (offset / 2);
const r = Math.sqrt(1 - Math.pow(y, 2));
const phi = (i % numSamples) * increment;
const x = Math.cos(phi) * r;
const z = Math.sin(phi) * r;
vertices.push(x * radius, y * radius, z * radius);
}
return new Float32Array(vertices);
}
3D数学に関するシリーズで説明したように、頂点に3D数学を適用してポイントで頂点を描画できます。
struct Vertex {
@location(0) position: vec4f,
};
struct Uniforms {
* matrix: mat4x4f,
};
struct VSOutput {
@builtin(position) position: vec4f,
};
@group(0) @binding(0) var<uniform> uni: Uniforms;
@vertex fn vs(
vert: Vertex,
) -> VSOutput {
var vsOut: VSOutput;
* let clipPos = uni.matrix * vert.position;
vsOut.position = clipPos;
return vsOut;
}
@fragment fn fs(vsOut: VSOutput) -> @location(0) vec4f {
return vec4f(1, 0.5, 0.2, 1); // orange
}
パイプラインと頂点バッファは次のとおりです。
const pipeline = device.createRenderPipeline({
label: '3d points with fixed size',
layout: 'auto',
vertex: {
module,
buffers: [
{
arrayStride: (3) * 4, // 3 floats, 4 bytes each
attributes: [
{shaderLocation: 0, offset: 0, format: 'float32x3'}, // position
],
},
],
},
fragment: {
module,
targets: [
{
format: presentationFormat,
},
],
},
primitive: {
topology: 'point-list',
},
});
const vertexData = createFibonacciSphereVertices({
radius: 1,
numSamples: 1000,
});
const kNumPoints = vertexData.length / 3;
const vertexBuffer = device.createBuffer({
label: 'vertex buffer vertices',
size: vertexData.byteLength,
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(vertexBuffer, 0, vertexData);
そして、行列用のユニフォームバッファとユニフォーム値、およびユニフォームバッファをシェーダーに渡すためのバインドグループです。
const uniformValues = new Float32Array(16);
const uniformBuffer = device.createBuffer({
size: uniformValues.byteLength,
usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
});
const kMatrixOffset = 0;
const matrixValue = uniformValues.subarray(
kMatrixOffset, kMatrixOffset + 16);
const bindGroup = device.createBindGroup({
layout: pipeline.getBindGroupLayout(0),
entries: [
{ binding: 0, resource: { buffer: uniformBuffer }},
],
});
そして、射影行列、カメラ、その他の3D数学を使用して描画するコードです。
function render(time) {
time *= 0.001;
// キャンバスコンテキストから現在のテクスチャを取得し、
// レンダリングするテクスチャとして設定します。
const canvasTexture = context.getCurrentTexture();
renderPassDescriptor.colorAttachments[0].view =
canvasTexture.createView();
// ユニフォームバッファに行列を設定します
const fov = 90 * Math.PI / 180;
const aspect = canvas.clientWidth / canvas.clientHeight;
const projection = mat4.perspective(fov, aspect, 0.1, 50);
const view = mat4.lookAt(
[0, 0, 1.5], // position
[0, 0, 0], // target
[0, 1, 0], // up
);
const viewProjection = mat4.multiply(projection, view);
mat4.rotateY(viewProjection, time, matrixValue);
mat4.rotateX(matrixValue, time * 0.5, matrixValue);
// ユニフォーム値をGPUにコピーします
device.queue.writeBuffer(uniformBuffer, 0, uniformValues);
const encoder = device.createCommandEncoder();
const pass = encoder.beginRenderPass(renderPassDescriptor);
pass.setPipeline(pipeline);
pass.setVertexBuffer(0, vertexBuffer);
pass.setBindGroup(0, bindGroup);
pass.draw(kNumPoints);
pass.end();
const commandBuffer = encoder.finish();
device.queue.submit([commandBuffer]);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
requestAnimationFrameループにも切り替えました。
見にくいので、上記の手法を適用するには、以前に行ったようにクワッド位置を追加するだけです。
struct Vertex {
@location(0) position: vec4f,
};
struct Uniforms {
matrix: mat4x4f,
+ resolution: vec2f,
+ size: f32,
};
struct VSOutput {
@builtin(position) position: vec4f,
};
@group(0) @binding(0) var<uniform> uni: Uniforms;
@vertex fn vs(
vert: Vertex,
+ @builtin(vertex_index) vNdx: u32,
) -> VSOutput {
+ let points = array(
+ vec2f(-1, -1),
+ vec2f( 1, -1),
+ vec2f(-1, 1),
+ vec2f(-1, 1),
+ vec2f( 1, -1),
+ vec2f( 1, 1),
+ );
var vsOut: VSOutput;
+ let pos = points[vNdx];
let clipPos = uni.matrix * vert.position;
+ let pointPos = vec4f(pos * uni.size / uni.resolution, 0, 0);
- vsOut.position = clipPos;
+ vsOut.position = clipPos + pointPos;
return vsOut;
}
@fragment fn fs(vsOut: VSOutput) -> @location(0) vec4f {
return vec4f(1, 0.5, 0.2, 1);
}
前の例とは異なり、各頂点に異なるサイズは使用しません。代わりに、すべての頂点に単一のサイズを渡します。
- const uniformValues = new Float32Array(16);
+ const uniformValues = new Float32Array(16 + 2 + 1 + 1);
const uniformBuffer = device.createBuffer({
size: uniformValues.byteLength,
usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
});
const kMatrixOffset = 0;
+ const kResolutionOffset = 16;
+ const kSizeOffset = 18;
const matrixValue = uniformValues.subarray(
kMatrixOffset, kMatrixOffset + 16);
+ const resolutionValue = uniformValues.subarray(
+ kResolutionOffset, kResolutionOffset + 2);
+ const sizeValue = uniformValues.subarray(
+ kSizeOffset, kSizeOffset + 1);
上記のように解像度を設定し、サイズを設定する必要があります。
function render(time) {
...
+ // ユニフォームバッファにサイズを設定します
+ sizeValue[0] = 10;
const fov = 90 * Math.PI / 180;
const aspect = canvas.clientWidth / canvas.clientHeight;
const projection = mat4.perspective(fov, aspect, 0.1, 50);
const view = mat4.lookAt(
[0, 0, 1.5], // position
[0, 0, 0], // target
[0, 1, 0], // up
);
const viewProjection = mat4.multiply(projection, view);
mat4.rotateY(viewProjection, time, matrixValue);
mat4.rotateX(matrixValue, time * 0.5, matrixValue);
+ // ユニフォームバッファの解像度を更新します
+ resolutionValue.set([canvasTexture.width, canvasTexture.height]);
// ユニフォーム値をGPUにコピーします
device.queue.writeBuffer(uniformBuffer, 0, uniformValues);
そして、以前に行ったように、ポイントの描画からインスタンス化されたクワッドの描画に切り替える必要があります。
const pipeline = device.createRenderPipeline({
label: '3d points',
layout: 'auto',
vertex: {
module,
buffers: [
{
arrayStride: (3) * 4, // 3 floats, 4 bytes each
+ stepMode: 'instance',
attributes: [
{shaderLocation: 0, offset: 0, format: 'float32x3'}, // position
],
},
],
},
fragment: {
module,
targets: [
{
format: presentationFormat,
},
],
},
- primitive: {
- topology: 'point-list',
- },
});
...
function render(time) {
...
- pass.draw(kNumPoints);
+ pass.draw(6, kNumPoints);
...
これにより、3Dのポイントが得られます。カメラからの距離に基づいてスケーリングもされます。
ポイントのサイズを固定したい場合はどうすればよいでしょうか？
遠近投影に関する記事から、GPUは頂点シェーダーから返す位置をWで除算することを思い出してください。この除算により、遠くのものが小さく見える遠近感が得られます。したがって、サイズを変更したくないポイントについては、それらをそのWで乗算するだけで、除算された後に本当に欲しかった値になります。
var vsOut: VSOutput;
let pos = points[vNdx];
let clipPos = uni.matrix * vert.position;
- let pointPos = vec4f(pos * uni.size / uni.resolution, 0, 0);
+ let pointPos = vec4f(pos * uni.size / uni.resolution * clipPos.w, 0, 0);
vsOut.position = clipPos + pointPos;
return vsOut;
そして、今では同じサイズを維持します。