Why does Chrome browser have moiré, but Chrome Dual-core browser does not display moiré

Questions
,
1

I have a problem. When I use the same code to load the same image as a map, Chrome will display moiré, but Chrome Dual-core browser will not display moiré. I don’t know how to solve the moiré problem in Chrome.

renderer = new THREE.WebGLRenderer({
physicallyCorrectLights: true,
logarithmicDepthBuffer: true,
antialias: true,
alpha: true,
});

…
const map = baseComposer.renderTarget2.texture
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.repeat = new THREE.Vector2(1, -1);
map.anisotropy = 32;

About Chrome： Version 126.0.6478.127 (Official Build) (64-bit)

About ChromeCore：
Version 6.1.5.4 (64-bit)
Kernal version: Chromium 101.0.4951.64 + IE (Trident 7~11)

Original image:

anwen
anwen1299×1732 415 KB

image
image842×470 41.1 KB

I want to confirm again, is this vertical stripe on chrome a moiré pattern?

image

2

have you tried playing with the min and mag mip filter values for the texture? you can give this a try to see if it solves…

map.minFilter = THREE.LinearFilter
3

What the heck is “dual core browser”… It sounds like malware.

Can you share your sphere example in a glitch or codepen?

4

This is the download address of “双核浏览器”： https://browser.cqttech.com/ , it’s not malware.

My code is just like what is described in the problem description. I just use composer to generate a texture without any other special processing.

5

I tried it, but it didn’t solve the problem

6

Sometimes effects like this are caused by a mis-match of renderer and composer width/height with actual dom width/height.

Is your renderer a full window renderer, and in your window resize handler, are you calling renderer.setSize, and also composer.setSize ?