Merge pull request #48 from microsoft/feature/random-sampling

feat: random sampling for color mode, center-tap alignment, remove te…

Author: drdavidbrown

client/src/client.ts

@@ -452,13 +452,6 @@ export class Main {
             this._updateUI();
         }
 
-        // Multisample
-        const antialiasSelect = document.getElementById("antialiasSelect") as HTMLInputElement;
-        antialiasSelect.value = Core.Config.multisample.toString();
-        antialiasSelect.oninput = () => {
-            this._renderer.multisample = parseInt(antialiasSelect.value);
-        }
-
         // Depth
         this._depthAutoCheckbox = document.getElementById("depthAuto") as HTMLInputElement;
         this._depthMinRange = document.getElementById("depthMinRange") as HTMLInputElement;
@@ -485,24 +478,20 @@ export class Main {
 
         // Render mode options
         const raytraceOptions = document.getElementById("raytraceOptions") as HTMLDivElement;
-        const colorOptions = document.getElementById("colorOptions") as HTMLDivElement;
         const edgeOptions = document.getElementById("edgeOptions") as HTMLDivElement;
         const depthOptions = document.getElementById("depthOptions") as HTMLDivElement;
         const segmentOptions = document.getElementById("segmentOptions") as HTMLDivElement;
         const renderModeChanged = () => {
             // Hide all options
             raytraceOptions.style.display = "none";
-            colorOptions.style.display = "none";
             edgeOptions.style.display = "none";
             depthOptions.style.display = "none";
             segmentOptions.style.display = "none";
             // Show options for selected render mode
             switch (this._renderer.renderMode) {
                 case "raytrace":
-                    raytraceOptions.style.display = "flex";
-                    break;
                 case "color":
-                    colorOptions.style.display = "flex";
+                    raytraceOptions.style.display = "flex";
                     break;
                 case "edge":
                     edgeOptions.style.display = "flex";

client/wwwroot/client.html

@@ -449,8 +449,6 @@
                                         for="modeDepth" class="radioLabel">Depth</label></div>
                                 <div><input type="radio" name="renderMode" id="modeSegment" value="segment" /><label
                                         for="modeSegment" class="radioLabel">Segment</label></div>
-                                <div><input type="radio" name="renderMode" id="modeTexture" value="texture" /><label
-                                        for="modeTexture" class="radioLabel">Texture</label></div>
                             </div>
                         </div>
                         <!-- render options -->
@@ -486,26 +484,14 @@
                                     <input type="button" id="focusResetButton" value="Reset" />
                                 </div>
                             </div>
-                            <!-- color options -->
-                            <div id="colorOptions" class="renderOptions">
-                                <!-- antialias -->
-                                <div style="display: flex; flex-direction: row; gap: 8px; align-items: center;">
-                                    <label class="textboxLabel" style="width: 104px;">Antialias</label>
-                                    <div><select id="antialiasSelect" style="width: 100%;">
-                                            <option value="1">1x (none)</option>
-                                            <option value="2">2x</option>
-                                            <option value="3">3x</option>
-                                            <option value="4">4x</option>
-                                        </select></div>
-                                </div>
-                            </div>
+                            <!-- color options (shares raytraceOptions) -->
                             <!-- edge options -->
                             <div id="edgeOptions" class="renderOptions">
                                 <!-- color -->
                                 <div style="display: flex; flex-direction: row; gap: 8px; align-items: baseline;">
                                     <input type="radio" name="edgeMode" value="light" id="edgeLight" checked disabled />
                                     <label for="edgeLight" class="radioLabel disabled">Light</label>
-                                    <input type="radio" name="edgeMode" value="dark" id="edgeDart" disabled />
+                                    <input type="radio" name="edgeMode" value="dark" id="edgeDark" disabled />
                                     <label for="edgeDark" class="radioLabel disabled">Dark</label>
                                 </div>
                             </div>

core/src/config.ts

@@ -48,9 +48,6 @@ export class Config {
     public static readonly edgeForeground: ColorRGBA = [0, 0, 0, 1];
     public static readonly edgeBackground: ColorRGBA = [1, 1, 1, 1];
 
-    // Antialiasing
-    public static readonly multisample: number = 1; // Multisampling level
-
     // Stereo mode
     public static readonly stereoMode: string = "stereo";
 

core/src/renderer.ts

@@ -86,17 +86,6 @@ export abstract class Renderer {
     }
     public get idSource(): string { return this._idSource; }
 
-    // Multisample
-    protected _hasMultisampleChanged: boolean;
-    protected _multisample: number;
-    public set multisample(value: number) {
-        if (this._multisample !== value) {
-            this._multisample = value;
-            this._hasMultisampleChanged = true;
-        }
-    }
-    public get multisample(): number { return this._multisample; }
-
     // Visual collections
     public atlasVisuals: IAtlasVisual[];
     public imageVisuals: IImageVisual[];
@@ -287,9 +276,6 @@ export abstract class Renderer {
         this._renderMode = options?.renderMode ?? Config.renderMode;
         this._idSource = Config.idSource;
 
-        // Multisample
-        this._multisample = Config.multisample;
-
         // Camera
         this._cameraMode = Config.cameraMode;
         this._cameraPosition = vector3.clone(Config.cameraPosition);

renderers/webgpuraytrace/src/main.ts

@@ -38,7 +38,6 @@ export class Main extends Core.Renderer {
     private _computeColorPipeline: GPUComputePipeline;
     private _computeNormalDepthPipeline: GPUComputePipeline;
     private _computeSegmentPipeline: GPUComputePipeline;
-    private _computeTexturePipeline: GPUComputePipeline;
     private _computeBindGroup1Layout: GPUBindGroupLayout
     private _computeBindGroup2Layout: GPUBindGroupLayout
     private _computeBindGroup3Layout: GPUBindGroupLayout
@@ -51,7 +50,6 @@ export class Main extends Core.Renderer {
     private _quadNormalPipeline: GPURenderPipeline;
     private _quadDepthPipeline: GPURenderPipeline;
     private _quadSegmentPipeline: GPURenderPipeline;
-    private _quadTexturePipeline: GPURenderPipeline;
     private _quadEdgePipeline: GPURenderPipeline;
     private _quadBindGroup1: GPUBindGroup;
     private _quadBindGroup2: GPUBindGroup;
@@ -352,13 +350,11 @@ export class Main extends Core.Renderer {
                     computeColorPipeline,
                     computeNormalDepthPipeline,
                     computeSegmentPipeline,
-                    computeTexturePipeline,
                     clearPipeline,
                     quadPipeline,
                     quadNormalPipeline,
                     quadDepthPipeline,
                     quadSegmentPipeline,
-                    quadTexturePipeline,
                     quadEdgePipeline,
                 ] = await Promise.all([
                     // Compute pipelines
@@ -382,11 +378,6 @@ export class Main extends Core.Renderer {
                         layout: this._computePipelineLayout,
                         compute: { module: computeModule, entryPoint: "segment" },
                     }),
-                    this._device.createComputePipelineAsync({
-                        label: "Texture pipeline descriptor",
-                        layout: this._computePipelineLayout,
-                        compute: { module: computeModule, entryPoint: "texture" },
-                    }),
                     this._device.createComputePipelineAsync({
                         label: "Clear pipeline descriptor",
                         layout: clearPipelineLayout,
@@ -421,13 +412,6 @@ export class Main extends Core.Renderer {
                         fragment: { module: quadModule, entryPoint: "frag_segment", targets: [colorState] },
                         primitive: primitive,
                     }),
-                    this._device.createRenderPipelineAsync({
-                        label: "Quad texture pipeline descriptor",
-                        layout: quadPipelineLayout,
-                        vertex: vertex,
-                        fragment: { module: quadModule, entryPoint: "frag_texture", targets: [colorState] },
-                        primitive: primitive,
-                    }),
                     this._device.createRenderPipelineAsync({
                         label: "Quad edge pipeline descriptor",
                         layout: quadPipelineLayout,
@@ -442,13 +426,11 @@ export class Main extends Core.Renderer {
                 this._computeColorPipeline = computeColorPipeline;
                 this._computeNormalDepthPipeline = computeNormalDepthPipeline;
                 this._computeSegmentPipeline = computeSegmentPipeline;
-                this._computeTexturePipeline = computeTexturePipeline;
                 this._clearPipeline = clearPipeline;
                 this._quadPipeline = quadPipeline;
                 this._quadNormalPipeline = quadNormalPipeline;
                 this._quadDepthPipeline = quadDepthPipeline;
                 this._quadSegmentPipeline = quadSegmentPipeline;
-                this._quadTexturePipeline = quadTexturePipeline;
                 this._quadEdgePipeline = quadEdgePipeline;
                 console.log(`WebGPU pipelines created ${Core.Time.formatDuration(performance.now() - start)}`);
 
@@ -574,12 +556,6 @@ export class Main extends Core.Renderer {
             this._computeUniformBufferData.setCameraTypeId(cameraType);
         }
 
-        // Multisample mode
-        if (this._hasMultisampleChanged) {
-            this._hasMultisampleChanged = false;
-            this.frameCount = 0; // Reset frame count on multisample change
-        }
-
         // Camera
         // TODO: Move change events to update
         if (this._hasCameraChanged) {
@@ -608,14 +584,6 @@ export class Main extends Core.Renderer {
         this._computeUniformBufferData.setAmbientColor(this.ambientColor);
         this._computeUniformBufferData.setBackgroundColor(this.backgroundColor);
 
-        // Color render mode
-        switch (this._renderMode) {
-            case "color":
-                this._computeUniformBufferData.setAperture(0); // Disable aperture for color render mode
-                this._computeUniformBufferData.setMultisample(this._multisample);
-                break;
-        }
-
         // Id source
         this._computeUniformBufferData.setIdSource(this._idSource === "pick" ? 1 : 0);
         this._device.queue.writeBuffer(this._computeUniformBuffer, 0, this._computeUniformBufferData.buffer, this._computeUniformBufferData.byteOffset, this._computeUniformBufferData.byteLength);
@@ -1062,12 +1030,6 @@ export class Main extends Core.Renderer {
                 computePassEncoder.dispatchWorkgroups(dispatchX, dispatchY, 1);
                 computePassEncoder.end();
                 break;
-            // TODO: Remove texture render mode and pipeline, and add a textureType="uv" to the color/raytrace pipeline
-            case "texture":
-                computePassEncoder.setPipeline(this._computeTexturePipeline);
-                computePassEncoder.dispatchWorkgroups(dispatchX, dispatchY, 1);
-                computePassEncoder.end();
-                break;
             default:
                 // Raytrace
                 computePassEncoder.setPipeline(this._computePipeline);
@@ -1112,9 +1074,6 @@ export class Main extends Core.Renderer {
             case "edge":
                 renderPassEncoder.setPipeline(this._quadEdgePipeline);
                 break;
-            case "texture":
-                renderPassEncoder.setPipeline(this._quadTexturePipeline);
-                break;
         }
         renderPassEncoder.setBindGroup(0, this._quadBindGroup1);
         renderPassEncoder.setBindGroup(1, this._quadBindGroup2);