Skip to content

Commit

Permalink
Refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@maierfelix
maierfelix committed Mar 30, 2020
1 parent 0a5c00b commit 58d74ba
Show file tree
Hide file tree
Showing 23 changed files with 171 additions and 141 deletions.
54 changes: 27 additions & 27 deletions InstanceBuffer.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,20 +51,11 @@ InstanceBuffer.prototype.init = function(instances, materials, images) {
let {geometryBuffer} = this;

// create copy and insert placeholder material
let placeHolderMaterial = {
color: [0, 0, 0],
metalness: 0.0,
roughness: 0.0,
specular: 0.0,
albedo: null,
normal: null,
emission: null,
metalRoughness: null
};
let placeHolderMaterial = {};
materials = [placeHolderMaterial, ...materials];

// create material buffer
let materialBufferStride = 12;
let materialBufferStride = 20;
let materialBufferTotalLength = materials.length * materialBufferStride;
let materialBuffer = device.createBuffer({
usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.STORAGE,
Expand All @@ -78,23 +69,32 @@ InstanceBuffer.prototype.init = function(instances, materials, images) {
let materialBufferDataU32 = new Uint32Array(materialBufferDataBase);
for (let ii = 0; ii < materials.length; ++ii) {
let material = materials[ii];
let {color} = material;
let {color, emission} = material;
let {metalness, roughness, specular} = material;
let {albedo, normal, emission, metalRoughness} = material;
let {textureScaling, emissionIntensity} = material;
let {textureScaling} = material;
let {albedoMap, normalMap, emissionMap, metalRoughnessMap} = material;
let {emissionIntensity, metalnessIntensity, roughnessIntensity} = material;
let offset = ii * materialBufferStride;
materialBufferDataF32[offset++] = Math.pow(color[0] / 255.0, 1.0 / 2.2);
materialBufferDataF32[offset++] = Math.pow(color[1] / 255.0, 1.0 / 2.2);
materialBufferDataF32[offset++] = Math.pow(color[2] / 255.0, 1.0 / 2.2);
materialBufferDataF32[offset++] = clamp(parseFloat(metalness), -0.999, 0.999);
materialBufferDataF32[offset++] = clamp(parseFloat(roughness), -0.999, 0.999);
materialBufferDataF32[offset++] = clamp(parseFloat(specular), -0.999, 0.999);
materialBufferDataF32[offset++] = textureScaling !== void 0 ? textureScaling : 1.0;
materialBufferDataF32[offset++] = emissionIntensity !== void 0 ? emissionIntensity : 1.0;
materialBufferDataU32[offset++] = albedo ? images.indexOf(albedo) + 1 : 0;
materialBufferDataU32[offset++] = normal ? images.indexOf(normal) + 1 : 0;
materialBufferDataU32[offset++] = emission ? images.indexOf(emission) + 1 : 0;
materialBufferDataU32[offset++] = metalRoughness ? images.indexOf(metalRoughness) + 1 : 0;
materialBufferDataF32[offset++] = color !== void 0 ? Math.pow(color[0] / 255.0, 1.0 / 2.2) : 0.0;
materialBufferDataF32[offset++] = color !== void 0 ? Math.pow(color[1] / 255.0, 1.0 / 2.2) : 0.0;
materialBufferDataF32[offset++] = color !== void 0 ? Math.pow(color[2] / 255.0, 1.0 / 2.2) : 0.0;
materialBufferDataF32[offset++] = 0.0; // alpha
materialBufferDataF32[offset++] = emission !== void 0 ? Math.pow(emission[0] / 255.0, 1.0 / 2.2) : 0.0;
materialBufferDataF32[offset++] = emission !== void 0 ? Math.pow(emission[1] / 255.0, 1.0 / 2.2) : 0.0;
materialBufferDataF32[offset++] = emission !== void 0 ? Math.pow(emission[2] / 255.0, 1.0 / 2.2) : 0.0;
materialBufferDataF32[offset++] = 0.0; // alpha
materialBufferDataF32[offset++] = clamp(parseFloat(metalness), 0.001, 0.999);
materialBufferDataF32[offset++] = clamp(parseFloat(roughness), 0.001, 0.999);
materialBufferDataF32[offset++] = clamp(parseFloat(specular), 0.001, 0.999);
materialBufferDataF32[offset++] = textureScaling !== void 0 ? parseFloat(textureScaling) : 1.0;
materialBufferDataU32[offset++] = albedoMap ? images.indexOf(albedoMap) + 1 : 0;
materialBufferDataU32[offset++] = normalMap ? images.indexOf(normalMap) + 1 : 0;
materialBufferDataU32[offset++] = emissionMap ? images.indexOf(emissionMap) + 1 : 0;
materialBufferDataU32[offset++] = metalRoughnessMap ? images.indexOf(metalRoughnessMap) + 1 : 0;
materialBufferDataF32[offset++] = emissionIntensity !== void 0 ? parseFloat(emissionIntensity) : 1.0;
materialBufferDataF32[offset++] = metalnessIntensity !== void 0 ? parseFloat(metalnessIntensity) : 1.0;
materialBufferDataF32[offset++] = roughnessIntensity !== void 0 ? parseFloat(roughnessIntensity) : 1.0;
materialBufferDataF32[offset++] = 0.0; // padding
};
materialBuffer.setSubData(0, materialBufferDataU32);

Expand Down Expand Up @@ -153,7 +153,7 @@ InstanceBuffer.prototype.init = function(instances, materials, images) {

let container = device.createRayTracingAccelerationContainer({
level: "top",
flags: GPURayTracingAccelerationContainerFlag.PREFER_FAST_TRACE,
flags: GPURayTracingAccelerationContainerFlag.ALLOW_UPDATE | GPURayTracingAccelerationContainerFlag.PREFER_FAST_TRACE,
instances: containerInstances
});
containers.push({
Expand Down
10 changes: 5 additions & 5 deletions RayPickingPass.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,12 +66,12 @@ RayPickingPass.prototype.getPickingResult = async function() {
queue.submit([ commandEncoder.finish() ]);

let result = await pickingReadBackBuffer.mapReadAsync();
let data = new Float32Array(new Float32Array(result));
let resultF32 = new Float32Array(result);

let x = data[4];
let y = data[5];
let z = data[6];
let instanceId = data[7];
let x = resultF32[4];
let y = resultF32[5];
let z = resultF32[6];
let instanceId = resultF32[7];

pickingReadBackBuffer.unmap();

Expand Down
22 changes: 11 additions & 11 deletions RayTracingPass.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,11 +80,11 @@ RayTracingPass.prototype.init = function(instances, materials, images, lights, g
let accumulationBuffer = device.createBuffer({ usage: GPUBufferUsage.STORAGE, size: accumulationBufferByteLength });
accumulationBuffer.byteLength = accumulationBufferByteLength;

let rayGenShaderModule = device.createShaderModule({ code: loadShaderFile(`shaders/ray-generation.rgen`) });
let rayCHitModule = device.createShaderModule({ code: loadShaderFile(`shaders/ray-closest-hit.rchit`) });
let rayMissShaderModule = device.createShaderModule({ code: loadShaderFile(`shaders/ray-miss.rmiss`) });
let rayShadowCHitShaderModule = device.createShaderModule({ code: loadShaderFile(`shaders/shadow-ray-closest-hit.rchit`) });
let rayShadowMissShaderModule = device.createShaderModule({ code: loadShaderFile(`shaders/shadow-ray-miss.rmiss`) });
let rayGenShaderModule = device.createShaderModule({ code: loadShaderFile(`shaders/shading/ray-generation.rgen`) });
let rayCHitModule = device.createShaderModule({ code: loadShaderFile(`shaders/shading/ray-closest-hit.rchit`) });
let rayMissShaderModule = device.createShaderModule({ code: loadShaderFile(`shaders/shading/ray-miss.rmiss`) });
let rayShadowCHitShaderModule = device.createShaderModule({ code: loadShaderFile(`shaders/shading/shadow-ray-closest-hit.rchit`) });
let rayShadowMissShaderModule = device.createShaderModule({ code: loadShaderFile(`shaders/shading/shadow-ray-miss.rmiss`) });

let shaderBindingTable = device.createRayTracingShaderBindingTable({
stages: [
Expand All @@ -110,11 +110,11 @@ RayTracingPass.prototype.init = function(instances, materials, images, lights, g
{ binding: 2, type: "storage-buffer", visibility: GPUShaderStage.RAY_GENERATION },
{ binding: 3, type: "uniform-buffer", visibility: GPUShaderStage.RAY_GENERATION | GPUShaderStage.RAY_CLOSEST_HIT },
{ binding: 4, type: "uniform-buffer", visibility: GPUShaderStage.RAY_GENERATION | GPUShaderStage.RAY_CLOSEST_HIT },
{ binding: 5, type: "storage-buffer", visibility: GPUShaderStage.RAY_GENERATION | GPUShaderStage.RAY_CLOSEST_HIT },
{ binding: 6, type: "storage-buffer", visibility: GPUShaderStage.RAY_GENERATION | GPUShaderStage.RAY_CLOSEST_HIT },
{ binding: 7, type: "storage-buffer", visibility: GPUShaderStage.RAY_GENERATION | GPUShaderStage.RAY_CLOSEST_HIT },
{ binding: 8, type: "storage-buffer", visibility: GPUShaderStage.RAY_GENERATION | GPUShaderStage.RAY_CLOSEST_HIT },
{ binding: 9, type: "storage-buffer", visibility: GPUShaderStage.RAY_GENERATION | GPUShaderStage.RAY_CLOSEST_HIT },
{ binding: 5, type: "storage-buffer", visibility: GPUShaderStage.RAY_CLOSEST_HIT },
{ binding: 6, type: "storage-buffer", visibility: GPUShaderStage.RAY_CLOSEST_HIT },
{ binding: 7, type: "storage-buffer", visibility: GPUShaderStage.RAY_CLOSEST_HIT },
{ binding: 8, type: "storage-buffer", visibility: GPUShaderStage.RAY_CLOSEST_HIT },
{ binding: 9, type: "storage-buffer", visibility: GPUShaderStage.RAY_CLOSEST_HIT },
{ binding: 10, type: "sampler", visibility: GPUShaderStage.RAY_CLOSEST_HIT },
{ binding: 11, type: "sampled-texture", visibility: GPUShaderStage.RAY_CLOSEST_HIT, textureDimension: "2d-array" },
]
Expand Down Expand Up @@ -144,7 +144,7 @@ RayTracingPass.prototype.init = function(instances, materials, images, lights, g
}),
rayTracingState: {
shaderBindingTable,
maxRecursionDepth: 1
maxRecursionDepth: 2
}
});

Expand Down
63 changes: 40 additions & 23 deletions index.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,28 +88,32 @@ Object.assign(global, glMatrix);
metalness: 0.001,
roughness: 0.068,
specular: 0.0117,
albedo: images[6],
normal: images[7],
metalRoughness: images[8],
albedoMap: images[6],
normalMap: images[7],
metalRoughnessMap: images[8],
textureScaling: 5.5,
},
{
color: [0, 0, 0],
metalness: 0.5,
roughness: -0.1634,
metalness: 0.0,
roughness: 0.0,
specular: 0.95,
albedo: images[0],
normal: images[1],
metalRoughness: images[2],
albedoMap: images[0],
normalMap: images[1],
metalRoughnessMap: images[2],
metalnessIntensity: 1.0,
roughnessIntensity: 0.1125,
},
{
color: [0, 0, 0],
metalness: 0.5,
roughness: -0.1634,
metalness: 0.0,
roughness: 0.0,
specular: 0.95,
albedo: images[3],
normal: images[4],
metalRoughness: images[5],
albedoMap: images[3],
normalMap: images[4],
metalRoughnessMap: images[5],
metalnessIntensity: 1.0,
roughnessIntensity: 0.1125,
},
{
color: [14600, 14600, 14600],
Expand All @@ -126,7 +130,7 @@ Object.assign(global, glMatrix);
geometry: bottomContainers[2],
transform: {
translation: { x: -32, y: 0, z: 128 },
rotation: { x: 0, y: -80, z: 0 },
rotation: { x: 0, y: 100, z: 0 },
scale: { x: 512, y: 512, z: 512 }
}
},
Expand All @@ -136,7 +140,7 @@ Object.assign(global, glMatrix);
geometry: bottomContainers[3],
transform: {
translation: { x: -32, y: 0, z: 128 },
rotation: { x: 0, y: -80, z: 0 },
rotation: { x: 0, y: 100, z: 0 },
scale: { x: 512, y: 512, z: 512 }
}
},
Expand Down Expand Up @@ -243,6 +247,11 @@ Object.assign(global, glMatrix);

let rpPass = new RayPickingPass({ device, topLevelContainer });

images = null;
instances = null;
materials = null;
geometries = null;

let blitBindGroupLayout = device.createBindGroupLayout({
bindings: [
{ binding: 0, type: "storage-buffer", visibility: GPUShaderStage.FRAGMENT },
Expand All @@ -264,11 +273,11 @@ Object.assign(global, glMatrix);
}),
sampleCount: 1,
vertexStage: {
module: device.createShaderModule({ code: loadShaderFile(`shaders/screen.vert`) }),
module: device.createShaderModule({ code: loadShaderFile(`shaders/blit/screen.vert`) }),
entryPoint: "main"
},
fragmentStage: {
module: device.createShaderModule({ code: loadShaderFile(`shaders/screen.frag`) }),
module: device.createShaderModule({ code: loadShaderFile(`shaders/blit/screen.frag`) }),
entryPoint: "main"
},
primitiveTopology: "triangle-list",
Expand All @@ -287,6 +296,8 @@ Object.assign(global, glMatrix);
}]
});

let pickedInstanceId = 0;

let isLeftMousePressed = false;
window.onmousedown = e => {
isLeftMousePressed = e.button === 0;
Expand All @@ -295,31 +306,37 @@ Object.assign(global, glMatrix);
rpPass.setMousePickingPosition(e.x, e.y);
queue.submit([ rpPass.getCommandBuffer() ]);
rpPass.getPickingResult().then(({ x, y, z, instanceId } = _) => {
console.log("Picked:", instanceId);
pickedInstanceId = instanceId;
console.log("Picked Instance:", pickedInstanceId - 1);
});
}
};
window.onmouseup = e => {
isLeftMousePressed = false;
};
let baseTransform = {
translation: { x: -32, y: 0, z: 128 },
rotation: { x: 0, y: -80, z: 0 },
scale: { x: 512, y: 512, z: 512 }
};
window.onmousemove = e => {
if (!isLeftMousePressed) return;
camera.deltaMovement.x = e.movementX * 0.25;
camera.deltaMovement.y = e.movementY * 0.25;
};
let rofl = false;
let resetAccumulation = false;
window.onmousewheel = e => {
// aperture
if (isKeyPressed("Ŕ")) { // shift key
camera.settings.aperture += e.deltaY * 0.01;
rofl = true;
resetAccumulation = true;
console.log(`Camera: Aperture: '${camera.settings.aperture}'`);
}
// focus distance
else {
camera.settings.focusDistance += e.deltaY * 0.125;
camera.settings.focusDistance = Math.max(0.1, camera.settings.focusDistance);
rofl = true;
resetAccumulation = true;
console.log(`Camera: Focus-Distance: '${camera.settings.focusDistance}'`);
}
};
Expand Down Expand Up @@ -367,9 +384,9 @@ Object.assign(global, glMatrix);
if (camera.hasMoved) camera.resetAccumulation();
else camera.increaseAccumulation();

if (rofl) {
if (resetAccumulation) {
camera.resetAccumulation();
rofl = false;
resetAccumulation = false;
}

let backBufferView = swapChain.getCurrentTextureView();
Expand Down
5 changes: 5 additions & 0 deletions objects/Geometry.mjs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export default class Geometry {
constructor({ } = _) {

}
};
5 changes: 5 additions & 0 deletions objects/GeometryInstance.mjs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export default class GeometryInstance {
constructor({ } = _) {

}
};
5 changes: 5 additions & 0 deletions objects/Material.mjs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export default class Material {
constructor({ } = _) {

}
};
5 changes: 5 additions & 0 deletions objects/Texture.mjs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export default class Texture {
constructor({ } = _) {

}
};
49 changes: 17 additions & 32 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 2 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,10 @@
"start": "node index.mjs"
},
"dependencies": {
"sbt-image": "file:../nvk-optix-denoiser",
"@cwasm/jpeg-turbo": "0.1.2",
"@cwasm/lodepng": "0.1.1",
"gl-matrix": "^3.1.0",
"simplex-noise": "^2.4.0",
"tolw": "^0.1.8",
"vox-parser": "^0.2.2",
"webgpu": "file:../webgpu"
}
}
0 shaders/screen.frag → shaders/blit/screen.frag
View file
File renamed without changes.
0 shaders/screen.vert → shaders/blit/screen.vert
View file
File renamed without changes.
Loading

0 comments on commit 58d74ba

Please sign in to comment.