No MSAA on main canvas, simpler blit shader

Author: davepagurek

src/webgpu/p5.RendererWebGPU.js

@@ -6,6 +6,7 @@ import { colorVertexShader, colorFragmentShader } from './shaders/color';
 import { lineVertexShader, lineFragmentShader} from './shaders/line';
 import { materialVertexShader, materialFragmentShader } from './shaders/material';
 import { fontVertexShader, fontFragmentShader } from './shaders/font';
+import { blitVertexShader, blitFragmentShader } from './shaders/blit';
 import { wgslBackend } from './strands_wgslBackend';
 import noiseWGSL from './shaders/functions/noise3DWGSL';
 import { baseFilterVertexShader, baseFilterFragmentShader } from './shaders/filters/base';
@@ -381,7 +382,7 @@ function rendererWebGPU(p5, fn) {
 
       const requestedSampleCount = activeFramebuffer ?
         (activeFramebuffer.antialias ? activeFramebuffer.antialiasSamples : 1) :
-        (this.antialias || 1);
+        1;  // No MSAA needed when blitting already-antialiased textures to canvas
       const sampleCount = this._getValidSampleCount(requestedSampleCount);
 
       const depthFormat = activeFramebuffer && activeFramebuffer.useDepth ?
@@ -1012,7 +1013,7 @@ function rendererWebGPU(p5, fn) {
       this.states.setValue('enableLighting', false);
       this.states.setValue('activeImageLight', null);
       this._pInst.setCamera(this.finalCamera);
-      this._pInst.resetShader();
+      this._pInst.shader(this._getBlitShader());
       this._pInst.resetMatrix();
       this._pInst.imageMode(this._pInst.CENTER);
       this._pInst.image(this.mainFramebuffer, 0, 0);
@@ -1619,6 +1620,17 @@ function rendererWebGPU(p5, fn) {
       return this._defaultFontShader;
     }
 
+    _getBlitShader() {
+      if (!this._defaultBlitShader) {
+        this._defaultBlitShader = new Shader(
+          this,
+          blitVertexShader,
+          blitFragmentShader
+        );
+      }
+      return this._defaultBlitShader;
+    }
+
     //////////////////////////////////////////////
     // Setting
     //////////////////////////////////////////////

src/webgpu/shaders/blit.js

@@ -0,0 +1,48 @@
+const uniforms = `
+struct Uniforms {
+  uModelViewMatrix: mat4x4<f32>,
+  uProjectionMatrix: mat4x4<f32>,
+};
+`;
+
+export const blitVertexShader = `
+struct VertexInput {
+  @location(0) aPosition: vec3<f32>,
+  @location(1) aNormal: vec3<f32>,
+  @location(2) aTexCoord: vec2<f32>,
+  @location(3) aVertexColor: vec4<f32>,
+};
+
+struct VertexOutput {
+  @builtin(position) Position: vec4<f32>,
+  @location(0) vTexCoord: vec2<f32>,
+};
+
+${uniforms}
+@group(0) @binding(0) var<uniform> uniforms: Uniforms;
+
+@vertex
+fn main(input: VertexInput) -> VertexOutput {
+  var output: VertexOutput;
+  output.vTexCoord = input.aTexCoord;
+  let positionVec4 = vec4<f32>(input.aPosition, 1.0);
+  output.Position = uniforms.uProjectionMatrix * uniforms.uModelViewMatrix * positionVec4;
+  return output;
+}
+`;
+
+export const blitFragmentShader = `
+struct FragmentInput {
+  @location(0) vTexCoord: vec2<f32>,
+};
+
+${uniforms}
+@group(0) @binding(0) var<uniform> uniforms: Uniforms;
+@group(0) @binding(1) var uSampler: texture_2d<f32>;
+@group(0) @binding(2) var uSampler_sampler: sampler;
+
+@fragment
+fn main(input: FragmentInput) -> @location(0) vec4<f32> {
+  return textureSample(uSampler, uSampler_sampler, input.vTexCoord);
+}
+`;