Fix non integer viewport dimensions. Change to rgba16float HDR texture.

Author: Scthe

src/constants.ts

@@ -46,9 +46,11 @@ export const IS_WGPU = IS_DENO;
 export const MODELS_DIR = IS_DENO ? 'static/models' : 'models';
 
 export const DEPTH_FORMAT: GPUTextureFormat = 'depth24plus';
-export const HDR_RENDER_TEX_FORMAT: GPUTextureFormat = IS_DENO
-  ? 'rgba16float' // Cause: "Color state [0] is invalid: Format Rgba32Float is not blendable"
-  : 'rgba32float';
+/**
+ * Not 'rgba32float' cause: "Color state [0] is invalid: Format Rgba32Float is not blendable"
+ * - https://github.com/Scthe/nanite-webgpu/issues/5
+ */
+export const HDR_RENDER_TEX_FORMAT: GPUTextureFormat = 'rgba16float';
 
 /** 4 for Vec4, 3 for Vec3. ATM using Vec3  */
 export const CO_PER_VERTEX: number = 3;

src/index.deno.ts

@@ -4,7 +4,7 @@ import { parseArgs } from 'jsr:@std/cli/parse-args';
 import { Dimensions, replaceFileExt } from './utils/index.ts';
 import { Renderer } from './renderer.ts';
 import { SCENES, SceneName, isValidSceneName } from './scene/sceneFiles.ts';
-import { createGpuDevice } from './utils/webgpu.ts';
+import { createGpuDevice, ensureIntegerDimensions } from './utils/webgpu.ts';
 import { OnObjectLoadedCb, loadScene } from './scene/load/loadScene.ts';
 import { createErrorSystem } from './utils/errors.ts';
 import {
@@ -67,10 +67,11 @@ async function renderSceneToFile(
 
   // create canvas
   console.log('Creating output canvas..');
+  const canvasDimensions = ensureIntegerDimensions(VIEWPORT_SIZE);
   const { texture: windowTexture, outputBuffer } = createCapture(
     device,
-    VIEWPORT_SIZE.width,
-    VIEWPORT_SIZE.height
+    canvasDimensions.width,
+    canvasDimensions.height
   );
   const windowTextureView = windowTexture.createView();
 
@@ -112,7 +113,12 @@ async function renderSceneToFile(
   renderer.cmdRender(cmdBuf, scene, windowTextureView);
 
   // result to buffer
-  cmdCopyTextureToBuffer(cmdBuf, windowTexture, outputBuffer, VIEWPORT_SIZE);
+  cmdCopyTextureToBuffer(
+    cmdBuf,
+    windowTexture,
+    outputBuffer,
+    renderer.viewportSize
+  );
 
   // submit commands
   // profiler.endFrame(cmdBuf);
@@ -126,7 +132,7 @@ async function renderSceneToFile(
   });
 
   // write output
-  await writePngFromGPUBuffer(outputBuffer, VIEWPORT_SIZE, outputPath);
+  await writePngFromGPUBuffer(outputBuffer, renderer.viewportSize, outputPath);
 }
 
 async function exportScene(device: GPUDevice) {

src/renderer.ts

@@ -23,7 +23,10 @@ import { CullMeshletsPass } from './passes/cullMeshlets/cullMeshletsPass.ts';
 import { GpuProfiler } from './gpuProfiler.ts';
 import { Scene } from './scene/scene.ts';
 import { Frustum } from './utils/frustum.ts';
-import { assertIsGPUTextureView } from './utils/webgpu.ts';
+import {
+  assertIsGPUTextureView,
+  ensureIntegerDimensions,
+} from './utils/webgpu.ts';
 import { DepthPyramidPass } from './passes/depthPyramid/depthPyramidPass.ts';
 import { DepthPyramidDebugDrawPass } from './passes/depthPyramid/depthPyramidDebugDrawPass.ts';
 import { CullInstancesPass } from './passes/cullInstances/cullInstancesPass.ts';
@@ -39,7 +42,7 @@ export class Renderer {
   private readonly cameraFrustum: Frustum = new Frustum();
   private projectionMat: Mat4;
   private readonly _viewMatrix = mat4.identity(); // cached to prevent allocs.
-  private readonly viewportSize: Dimensions = { width: 0, height: 0 };
+  public readonly viewportSize: Dimensions = { width: 0, height: 0 };
   private frameIdx = 0;
 
   // render target textures
@@ -256,6 +259,7 @@ export class Renderer {
   }
 
   private handleViewportResize = (viewportSize: Dimensions) => {
+    viewportSize = ensureIntegerDimensions(viewportSize);
     console.log(`Viewport resize`, viewportSize);
     CONFIG.nanite.render.hasValidDepthPyramid = false;
 

src/sys_web/cavasResize.ts

@@ -1,4 +1,5 @@
 import { Dimensions } from '../utils/index.ts';
+import { ensureIntegerDimensions } from '../utils/webgpu.ts';
 
 export type ResizeHandler = (viewportSize: Dimensions) => void;
 
@@ -45,9 +46,9 @@ export function initCanvasResizeSystem(
   function getViewportSize(): Dimensions {
     // deno-lint-ignore no-explicit-any
     const devicePixelRatio = (window as any).devicePixelRatio || 1;
-    return {
+    return ensureIntegerDimensions({
       width: canvas.clientWidth * devicePixelRatio,
       height: canvas.clientHeight * devicePixelRatio,
-    };
+    });
   }
 }

src/utils/webgpu.ts

@@ -272,3 +272,11 @@ export const assertIsGPUTextureView = (maybeTexView: any) => {
     );
   }
 };
+
+/** https://github.com/Scthe/nanite-webgpu/issues/2 */
+export function ensureIntegerDimensions(dims: Dimensions): Dimensions {
+  return {
+    width: Math.ceil(dims.width),
+    height: Math.ceil(dims.height),
+  };
+}