我是 webgpu 新手,尝试使用片段着色器渲染一些球体,球体定义为
struct Material {
category: u32,
attenuation: vec3f,
fuzz: f32,
refraction_index: f32,
}
struct Sphere {
center: vec3f,
radius: f32,
mat: Material
}
function createSpheresStorageBuffer2(spheres: Sphere[]): GPUBuffer {
const bufferElements: (Float32Array | Uint32Array)[] = [];
let size = 0;
let arrayBuffer;
for (const sphere of spheres) {
arrayBuffer = new Float32Array([...sphere.center, sphere.radius]);
size+=arrayBuffer.byteLength;
bufferElements.push(arrayBuffer);
const {type,attenuation,fuzz,refraction_index} = sphere.material;
arrayBuffer = new Uint32Array([type]);
size+=arrayBuffer.byteLength;
bufferElements.push(arrayBuffer);
arrayBuffer = new Float32Array([...attenuation,fuzz,refraction_index]);
size+=arrayBuffer.byteLength;
bufferElements.push(arrayBuffer);
}
const buffer = device.createBuffer({
label: "spheres buffer",
size: size,
usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
});
let offset = 0;
for(const buff of bufferElements){
device.queue.writeBuffer(buffer, offset, buff);
offset+=buff.byteLength
}
return buffer
}
enum MaterialType {
Labertian = 0,
Metal = 1,
}
const spheres: Sphere[] = [
{
center: [0, -100.5, -1],
radius: 100,
material: {
type: MaterialType.Labertian,
attenuation: [0.5,0.5,0.5],
fuzz: 1.0,
refraction_index: 1.0
}
},
{
center: [1, 0, -1],
radius: 0.5,
material: {
type: MaterialType.Metal,
attenuation: [0.5,0.5,0.5],
fuzz: 0,
refraction_index: 1.0
}
},
]
但是着色器中shpere 2的中心值为0.5,0.5,1,它们是衰减[2,3]+模糊的值(我可以通过反复试验知道)
当衰减为 f32 而不是矢量时,代码可以正常工作