MeshBatched .sortObjects flicker on iOS(safari) WebGPU

Makio64 commented 3 months ago

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

create a BatchedMesh
batchedMesh.sortObjects = true
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 commented 3 months ago

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 commented 2 months ago

@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 commented 2 months ago

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

Makio64 commented 2 months ago

@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 commented 2 months ago

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 commented 1 month ago

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 commented 1 month ago

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.

mrdoob / three.js