Transmission blur is resolution and camera distance dependent

[vorg]

Cant this be something with how mipmap level is calculated?

See digits getting blurry faster than one would expect from mipmap blur

And when very far away / small on screen

Same scene at canvas resolution 1024 vs 4096

[dmnsgn]

Can you provide ior, thickness, attenuation, transmission, dispersion values?

Test example code:

import {
  renderEngine as createRenderEngine,
  world as createWorld,
  entity as createEntity,
  components,
} from "../index.js";

import createContext from "pex-context";
import { cube, plane, cylinder } from "primitive-geometry";
import { getEnvMap, getTexture, getURL } from "./utils.js";
import { quat } from "pex-math";

const pixelRatio = 1; // devicePixelRatio
const ctx = createContext({ pixelRatio });
const renderEngine = createRenderEngine({ ctx, debug: true });

const world = createWorld();

const cameraEntity = createEntity({
  transform: components.transform({ position: [0, 0, 100] }),
  camera: components.camera(),
  orbiter: components.orbiter(),
});
world.add(cameraEntity);

const skyEntity = createEntity({
  skybox: components.skybox({
    sunPosition: [1, 0.5, 1],
    backgroundBlur: 1,
    envMap: await getEnvMap(ctx, "assets/envmaps/garage/garage.hdr"),
  }),
  reflectionProbe: components.reflectionProbe(),
});
world.add(skyEntity);

const backgroundGeometry = createEntity({
  transform: components.transform({ position: [0, 0, -3] }),
  geometry: components.geometry(plane({ sx: 50 })),
  material: components.material({
    baseColorTexture: await getTexture(
      ctx,
      getURL(`assets/textures/uv/uv.png`),
    ),
  }),
  vertexHelper: components.vertexHelper({ size: 0.2 }),
  boundingBoxHelper: components.boundingBoxHelper(),
});
world.add(backgroundGeometry);

const geometryEntity = createEntity({
  transform: components.transform({
    rotation: quat.fromAxisAngle(quat.create(), [1, 0, 0], Math.PI / 2),
  }),
  geometry: components.geometry(cylinder({ height: 3.8, radius: 15 })),
  material: components.material({
    // baseColor: [0.8, 0.6, 0.6, 1],
    transmission: 1,
    metallic: 0,
    roughness: 0.3,
    // thickness: 1.0,
    // attenuationDistance: 0.8,
    // attenuationColor: [0.5, 0.5, 0.5],
    // cullFace: false,
  }),
  vertexHelper: components.vertexHelper({ size: 1 }),
});
world.add(geometryEntity);

ctx.frame(() => {
  renderEngine.update(world.entities);
  renderEngine.render(world.entities, cameraEntity);
});

[dmnsgn]

Speaking of mipmaps, it's hardware dependent: https://pema.dev/2025/05/09/mipmaps-too-much-detail/