MeshBatched .sortObjects flicker on iOS(safari) WebGPU

[Makio64]

Description

Enable .sortObjects on MeshBatched introduce flickering ( WebGPU - Safari - iOS18 )
video recording : https://github.com/user-attachments/assets/5f43ab39-c780-4ca3-a260-e5c2a3bf402f

I also open a bug ticket on Webkit : https://bugs.webkit.org/show_bug.cgi?id=277465

Reproduction steps

1. create a BatchedMesh
2. batchedMesh.sortObjects = true
3. turn camera, on some angle element which should be visible will disapear

Code

Simple batchedMesh example

			const batchedMesh = new BatchedMesh(10000, maxVertices, maxIndices, scene.children[0].material )
			batchedMesh.perObjectFrustumCulled = true
			batchedMesh.sortObjects = true
			for(let i = 0; i < geometries.length; i++){
				let geometry = geometries[i]
				batchedMesh.addGeometry(geometry)
			}
			let dummy = new Object3D()
			for(let i = 0; i < 5000; i++){
				batchedMesh.addInstance( i % 200 )
				let angle = Math.random() * Math.PI * 2
				let dist = 15 + Math.random() * 200
				dummy.position.set(Math.cos(angle) * dist, ( Math.random() - .5) * 0.1, Math.sin(angle) * dist )
				dummy.rotation.set( 0, Math.random() * Math.PI, 0 )
				dummy.scale.set( 1, 1, 1 )
				dummy.updateMatrix()
				batchedMesh.setMatrixAt( i, dummy.matrix )
			}
			scene.add(batchedMesh)

Live example

Screenshots

No response

Version

r167

Device

Mobile

Browser

Safari

OS

iOS

[mwyrzykowski]

Indeed this is a WebKit bug, it is fixed with https://bugs.webkit.org/show_bug.cgi?id=276722 which can be verified in the next build or two of Safari Technology preview as the issue reproduces on macOS as well

[Mugen87]

@Makio64 Can you make a test with Safari Technology preview? In the meanwhile, the fix should have been landed so it's possible to verify if flickering is fixed.

[mwyrzykowski]

Yes it should be resolved in Safari Technology Preview 202 and later

[Makio64]

@Mugen87 @mwyrzykowski thanks, i'll put the test online this weekend so its easy to check but when I quick check on latest ios beta it seems to still be here.

[Mugen87]

I'm not sure testing on the beta is sufficient. You have to install the latest Safari Technology Preview from: https://webkit.org/downloads/

[Makio64]

Sorry for my late of reactivity on this, I've been busy on production!

I confirmed this bug is somehow present on safari tech preview on mac ( STP Release 204 (Safari 18.0, WebKit 20621.1.1.111.3) / M3 Max Pro ), it looks like the mesh is replace for a split second by the wrong one.
This bug is still present on latest iOS safari version (18.1 beta 5) when sortObjects = true

Additionally on mac there is what seems to be an out of sync bug Safari Technology Preview creating glitch on WebGPU

Online demo for testing :
https://bug-webgpu-safari-demo.netlify.app

@Mugen87 @mwyrzykowski

Edit:bug is still present when sortObjects = true on safari tech preview.

[mwyrzykowski]

Hi @Makio64 - I see this on iOS but with ToT WebKit so understandably that would be hard to verify without compiling WebKit as source into a 3rd party application:
https://github.com/user-attachments/assets/04efae13-53ec-4bb2-a747-673267ba5411

As long as things look correct on Apple Silicon on Safari Technology Preview, I would expect iOS to be ok once WebKit main ships to iOS at some point in time.

[Makio64]

fixed