update control

shi-yan · Aug 3, 2024 · 6a92490 · 6a92490
1 parent 37590f6
commit 6a92490
Show file tree

Hide file tree

Showing 11 changed files with 250 additions and 228 deletions.
diff --git a/Control/colorpicking.png b/Control/colorpicking.png
diff --git a/Control/object_picking.html b/Control/object_picking.html
diff --git a/Control/picking_color_coding.png b/Control/picking_color_coding.png
diff --git a/Control/picking_ray.png b/Control/picking_ray.png
diff --git a/Control/raycasting.png b/Control/raycasting.png
diff --git a/Control/thumb_colorpicking.png b/Control/thumb_colorpicking.png
diff --git a/Control/thumb_picking_color_coding.png b/Control/thumb_picking_color_coding.png
diff --git a/Control/thumb_picking_ray.png b/Control/thumb_picking_ray.png
diff --git a/Control/thumb_raycasting.png b/Control/thumb_raycasting.png
diff --git a/code/3_02_1_picking_ray_casting/index.html b/code/3_02_1_picking_ray_casting/index.html
@@ -104,7 +104,6 @@
         @location(1) normal: vec3<f32>,
         @location(2) lightDir: vec3<f32>
     };
-
     @vertex
     fn vs_main(
         @builtin(instance_index) instanceIdx : u32,
@@ -124,7 +123,6 @@
         }
         return out;
     }
-
     // Fragment shader
 
     @fragment
@@ -176,7 +174,6 @@
             let normalMats = new Float32Array(16 * this.instanceCount);
 
             const circleRadius = 12;
-
             const teapotCenter = glMatrix.vec4.fromValues(center[0], center[1], center[2], 1.0);
 
             console.log("teapot center", teapotCenter);
@@ -220,8 +217,6 @@
                 this.ringPositionBuffer3.push(z + center[2]);
             }
             this.ringPositionBuffer3 = createGPUBuffer(device, new Float32Array(this.ringPositionBuffer3), GPUBufferUsage.VERTEX);
-
-
             for (let i = 0; i < this.instanceCount; ++i) {
 
                 const angle = 2.0 * Math.PI * i / this.instanceCount;
@@ -235,9 +230,6 @@
 
                 transformationMats.set(modelViewMatrix, i * 16);
 
-
-
-
                 let modelViewMatrixInverse = glMatrix.mat4.invert(glMatrix.mat4.create(), modelViewMatrix);
 
                 let normalMatrix = glMatrix.mat4.transpose(glMatrix.mat4.create(), modelViewMatrixInverse);
@@ -249,7 +241,6 @@
 
                 console.log('center ', center)
             }
-
             let transformationMatUniformBuffer = createGPUBuffer(device, transformationMats, GPUBufferUsage.UNIFORM);
             let normalMatUniformBuffer = createGPUBuffer(device, normalMats, GPUBufferUsage.UNIFORM);
             this.selectionUniformBuffer = createGPUBuffer(device, new Uint32Array([17]), GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST);
@@ -275,8 +266,6 @@
                 ]
             });
 
-
-
             let uniformBindGroupLayout = device.createBindGroupLayout({
                 entries: [
                     {
@@ -322,7 +311,6 @@
                 ]
             });
 
-
             this.ringUniformBindGroup = device.createBindGroup({
                 layout: ringUniformBindGroupLayout,
                 entries: [
@@ -347,7 +335,6 @@
                 ]
             });
 
-
             this.uniformBindGroup = device.createBindGroup({
                 layout: uniformBindGroupLayout,
                 entries: [
@@ -486,7 +473,6 @@
             this.pipeline = device.createRenderPipeline(pipelineDesc);
             this.ringPipeline = device.createRenderPipeline(ringPipelineDesc);
         }
-
         encode(encoder) {
             encoder.setPipeline(this.pipeline);
             encoder.setBindGroup(0, this.uniformBindGroup);
@@ -801,7 +787,6 @@
                 //selection mode
                 const currX = (x - originX) * 2.0 / width;
                 const currY = (originY - y) * 2.0 / height;
-
                 //https://gamedev.stackexchange.com/questions/17987/what-does-the-graphics-card-do-with-the-fourth-element-of-a-vector-as-the-final
                 //https://antongerdelan.net/opengl/raycasting.html
                 //https://gamedev.stackexchange.com/questions/153078/what-can-i-do-with-the-4th-component-of-gl-position
@@ -817,10 +802,8 @@
                 let dir = glMatrix.vec4.transformMat4(glMatrix.vec4.create(), camSpacePosition, modelViewMatrixInverse);
 
                 dir = glMatrix.vec3.normalize(glMatrix.vec3.create(), dir);
-
                 let found = false;
                 console.log("select", currX, currY, teapot.instanceCount);
-
                 for (let i = 0; i < teapot.instanceCount; ++i) {
                     let center = teapot.instanceCenters[i];
                     center = glMatrix.vec3.fromValues(center[0] - arcball.forwardVector[0],
@@ -843,7 +826,6 @@
                         break;
                     }
                 }
-
                 if (!found) {
                     const selectionUniformBufferUpdate = createGPUBuffer(device, new Uint32Array([17]), GPUBufferUsage.COPY_SRC);
                     commandEncoder = device.createCommandEncoder();

diff --git a/code/3_02_2_picking_color_coding/index.html b/code/3_02_2_picking_color_coding/index.html
@@ -39,7 +39,6 @@
         @builtin(position) clip_position: vec4<f32>,
         @location(0) @interpolate(flat) color: vec3<u32>
     };
-
     @vertex
     fn vs_main(
         @builtin(instance_index) instanceIdx : u32,
@@ -186,9 +185,7 @@
             const teapotCenter = glMatrix.vec4.fromValues(center[0], center[1], center[2], 1.0);
 
             let colorCodes = new Uint8Array(this.instanceCount * 4);
-
             for (let i = 0; i < this.instanceCount; ++i) {
-
                 const angle = 2.0 * Math.PI * i / this.instanceCount;
 
                 let translation = glMatrix.mat4.fromTranslation(glMatrix.mat4.create(),
@@ -209,7 +206,6 @@
 
                 let center = glMatrix.vec4.transformMat4(glMatrix.vec3.create(), teapotCenter, modelViewMatrix);
                 this.instanceCenters.push(glMatrix.vec3.fromValues(center[0], center[1], center[2]));
-
                 colorCodes.set([i & 0b11111111,
                 (i >> 8) & 0b11111111, (i >> 16) & 0b11111111, (i >> 24) & 0b11111111], i * 4 + 0);
             }
@@ -650,7 +646,6 @@
                 1.4, canvas.width / canvas.height, 0.1, 1000.0);
 
             projectionMatrixUniformBufferUpdate = createGPUBuffer(device, projectionMatrix, GPUBufferUsage.COPY_SRC);
-
             const colorCodeTextureDesc = {
                 size: [canvas.width, canvas.height, 1],
                 dimension: '2d',
@@ -671,7 +666,6 @@
             bufferWidth = (Math.floor(2 * 4 / 256.0) + 1) * 256;
             copiedBuffer = createGPUBuffer(device, new Uint8Array(bufferWidth * 2), GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ);
         }
-
         async function pick(x, y) {
             if (inRendering) {
                 return 17;
@@ -704,7 +698,6 @@
                     modelViewMatrixUniformBuffer, 0, modelViewMatrix.byteLength);
                 commandEncoder.copyBufferToBuffer(normalMatrixUniformBufferUpdate, 0,
                     normalMatrixUniformBuffer, 0, normalMatrix.byteLength);
-
                 passEncoder = commandEncoder.beginRenderPass(renderPassDescColorCode);
 
                 passEncoder.setViewport(0, 0, canvas.width, canvas.height, 0, 1);
@@ -723,8 +716,6 @@
                 modelViewMatrixUniformBufferUpdate.destroy();
                 normalMatrixUniformBufferUpdate.destroy();
 
-
-
                 await copiedBuffer.mapAsync(GPUMapMode.READ, 0, bufferWidth * 2);
                 //const imageData = new ImageData(new Uint8ClampedArray(copiedBuffer.getMappedRange()), bufferWidth / 4, 2);
 
@@ -741,7 +732,6 @@
             return 17;
         }
 
-
         async function render() {
             if (inRendering) {
                 return;