WebGPURenderer: Mipmaps are not generated correctly for the WebGPU backend.

[ligaofeng0901]

Description

In my app, I use RenderTarget to render some scenes, and store each result to FrameBufferTexture. I found the behaviors of texture sampler is different of the two backends. The webgl backend is ok, the webgpu backend turns out a wrong result. It seems that then value of uv is more bigger than 1, the result of sampler is darker.

Reproduction steps

Code

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

let mesh, renderer, scene, camera, controls;

init();

const rtSize = 64;
let _rt = new THREE.RenderTarget(rtSize, rtSize, {
  depthBuffer: false,
});
const _camera = new THREE.OrthographicCamera(-0.5, 0.5, 0.5, -0.5, 0, 1);

let _mesh = new THREE.Mesh(new THREE.PlaneGeometry(1, 1, 1, 63), new THREE.MeshBasicMaterial({
    color: new THREE.Color(1, 1, 1),
}));
console.log(_mesh.geometry);

const _textureLoader = new THREE.TextureLoader();

function init() {

    // renderer
    renderer = new THREE.WebGPURenderer({
    	forceWebGL: false
    });
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setAnimationLoop( animate );
    document.body.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();
    scene.background = new THREE.Color( 0x000000 );
    
    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 0, 0, 20 );

    // controls
    controls = new OrbitControls( camera, renderer.domElement );
    
    // ambient
    scene.add( new THREE.AmbientLight( 0x222222 ) );
    
    // light
    const light = new THREE.DirectionalLight( 0xffffff, 1 );
    light.position.set( 20,20, 0 );
    scene.add( light );
    
    // axes
    scene.add( new THREE.AxesHelper( 20 ) );

    // geometry
    const geometry = new THREE.PlaneGeometry( 12, 12, 8 );
    
    // material
    const material = new THREE.MeshBasicMaterial( {
        color: 0xffffff, 
        map: null,
        // flatShading: true,
        // transparent: true,
        // opacity: 0.7,
    } );
    
    // mesh
    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
    
}

let x = 1230;
let loadingCount = 0;
function animate() {

    if (loadingCount <= 1) {
        loadingCount++;
        x++;
        const url = `https://ecn.t0.tiles.virtualearth.net/tiles/a132100120.jpeg?g=13651`;

        _textureLoader.load(url, texture => {
            texture.colorSpace = THREE.SRGBColorSpace;
            const oldTexture = mesh.material.map;
            let oldRenderTarget = renderer.getRenderTarget();
            let outputTexture = new THREE.FramebufferTexture(rtSize, rtSize);
            outputTexture.repeat = new THREE.Vector2(15, 15);
            outputTexture.generateMipmaps = true;
            outputTexture.minFilter = THREE.LinearMipmapLinearFilter;
            outputTexture.magFilter = THREE.LinearFilter;
            outputTexture.name = 'output-' + x;
            _mesh.material.map = texture;
            // _mesh.material.needsUpdate = true;
            renderer.setRenderTarget(_rt);
            renderer.clear();
            renderer.render(_mesh, _camera);
            renderer.copyFramebufferToTexture(outputTexture);
            renderer.setRenderTarget(oldRenderTarget);

            mesh.material.map = outputTexture;
            mesh.material.needsUpdate = true;
            if (oldTexture) {
                oldTexture.dispose();
            } 
            texture.dispose();
            setTimeout(() => {
                // loadingCount--;
            }, 5000);
            
        });

    }
    renderer.render( scene, camera );

}

Live example

looks these two examples. the only differenece is the parameters forceWebGL of WebGPURenderer.
(https://jsfiddle.net/ligaofeng0901/nqjxd3r1/19/) forceWebGL is false. the color is darker.
https://jsfiddle.net/ligaofeng0901/nqjxd3r1/20/ forceWebGL is true. the color is normal.

Screenshots

No response

Version

r176

Device

Desktop

Browser

Firefox, Chrome

OS

No response

[Mugen87]

At least on Chrome 137.0.7151.41 on macOS both fiddles render identical on my macMini. Can you share more information about your affected systems, e.g. by uploading a Chrome GPU report (chrome://gpu/)?

Does the darkening only happens with ClampToEdgeWrapping? What happens if you use RepeatWrapping or MirroredRepeatWrapping?

[ligaofeng0901]

At least on Chrome 137.0.7151.41 on macOS both fiddles render identical on my macMini. Can you share more information about your affected systems, e.g. by uploading a Chrome GPU report (chrome://gpu/)?

Does the darkening only happens with ClampToEdgeWrapping? What happens if you use RepeatWrapping or MirroredRepeatWrapping?

about-gpu-2025-05-22T09-08-54-053Z.txt
my chrome version is a little bit old, I will try to update it and check the effect again.

[ligaofeng0901]

These two screenshoots are from another windows pc, chrome version is 137.0.7151.41. the effects looks more same, but still different. The dark is less.

about-gpu-2025-05-22T09-16-23-406Z.txt

[ligaofeng0901]

Maybe The problem is relavant with FramebufferTexture. First I render a simple scene to a RenderTarget, copy the result to FramebufferTexture. Then, use the texture as a map of a material. If I directly use a raw texture loaded from server, the result is ok.

[Mugen87]

When testing with Chrome Canary 138.0.7194.0, I see the same result as in #31143 (comment). The WebGPU fiddle is a bit darked but not as dark as in your initial screenshot.

Using different wrapping modes has no affect on the darkening.

But generating mipmaps does. If you set generateMipmaps to false and use linear filtering, both fiddles are indentical.

outputTexture.generateMipmaps = false;
outputTexture.minFilter = THREE.LinearFilter;
outputTexture.magFilter = THREE.LinearFilter;

Can you confirm?

[WestLangley]

Setting

 outputTexture.repeat = new THREE.Vector2( 256, 256 );

results in a light green square in the WebGL case (as expected) and black square in the WebGPU case.

Could the higher-level mip(s) be undefined or invalid, so the linear filtering is averaging with black, resulting in a darker color as the repeat value is increased?

[ligaofeng0901]

Can you confirm?

set generateMipmaps to false, the dark problem is gone. Both on my mac and pc. So I guess maybe the mipmap of FrameBufferTexture is not in expection

[ligaofeng0901]

Setting

outputTexture.repeat = new THREE.Vector2( 256, 256 );
results in a light green square in the WebGL case (as expected) and black square in the WebGPU case.

Could the higher-level mip(s) be undefined or invalid, so the linear filtering is averaging with black, resulting in a darker color as the repeat value is increased?

I agree. This is a screenshot of my app. We can see, the higher level mipmap used, the pixel becames darker. The edge of earth and the north pole of earth is totally black.

[Mugen87]

The mipmap generation in WebGL happens with gl.generateMipmap() so with a WebGL command.

A feature like this does not exist in WebGPU so we have to generate mimaps manually. There might be an issue in the respective shaders or rendering setup.

three.js/src/renderers/webgpu/utils/WebGPUTexturePassUtils.js

Lines 27 to 73 in 2d978cb

	const mipmapVertexSource = `
	struct VarysStruct {
	@builtin( position ) Position: vec4<f32>,
	@location( 0 ) vTex : vec2<f32>
	};
	@vertex
	fn main( @builtin( vertex_index ) vertexIndex : u32 ) -> VarysStruct {
	var Varys : VarysStruct;
	var pos = array< vec2<f32>, 4 >(
	vec2<f32>( -1.0, 1.0 ),
	vec2<f32>( 1.0, 1.0 ),
	vec2<f32>( -1.0, -1.0 ),
	vec2<f32>( 1.0, -1.0 )
	);
	var tex = array< vec2<f32>, 4 >(
	vec2<f32>( 0.0, 0.0 ),
	vec2<f32>( 1.0, 0.0 ),
	vec2<f32>( 0.0, 1.0 ),
	vec2<f32>( 1.0, 1.0 )
	);
	Varys.vTex = tex[ vertexIndex ];
	Varys.Position = vec4<f32>( pos[ vertexIndex ], 0.0, 1.0 );
	return Varys;
	}
	`;
	const mipmapFragmentSource = `
	@group( 0 ) @binding( 0 )
	var imgSampler : sampler;
	@group( 0 ) @binding( 1 )
	var img : texture_2d<f32>;
	@fragment
	fn main( @location( 0 ) vTex : vec2<f32> ) -> @location( 0 ) vec4<f32> {
	return textureSample( img, imgSampler, vTex );
	}
	`;

three.js/src/renderers/webgpu/utils/WebGPUTexturePassUtils.js

Lines 307 to 314 in 2d978cb

	/**
	* Generates mipmaps for the given GPU texture.
	*
	* @param {GPUTexture} textureGPU - The GPU texture object.
	* @param {Object} textureGPUDescriptor - The texture descriptor.
	* @param {number} [baseArrayLayer=0] - The index of the first array layer accessible to the texture view.
	*/
	generateMipmaps( textureGPU, textureGPUDescriptor, baseArrayLayer = 0 ) {