Grass Disappears on Mobile with InstancedMesh

Questions
, , ,
1

Hey folks,

I made a grass field using InstancedMesh in R3F, taking inspiration from the grass field example in R3F (Grass shader - CodeSandbox). It works perfectly on desktop, but on mobile, the grass just disappears, and I can’t figure out why.

Here’s the live link: https://anime-style-grass.vercel.app/
GitHub repo: GitHub - AT010303/Anime-Style-grass

Any idea what could be causing this? Could it be a mobile limitation, shader issue, or something else?
WhatsApp Video 2025-01-28 at 19.08.47_ffbc9bd9

Thanks a lot!

1 Like
2

Possibly related:

3

yourInstancedMesh.frustumCulled = false;

4 
           <mesh frustumCulled = {false}>
                <instancedBufferGeometry
                    index={grassBlades.nodes.grassBlade.geometry.index}
                    attributes={
                        grassBlades.nodes.grassBlade.geometry.attributes
                    }
                    
                >
                    <instancedBufferAttribute
                        attach={'attributes-offset'}
                        args={[new Float32Array(attributeData.offesets), 3]}
                    />
                    <instancedBufferAttribute
                        attach={'attributes-orientation'}
                        args={[new Float32Array(attributeData.orientations), 4]}
                    />
                    <instancedBufferAttribute
                        attach={'attributes-stretch'}
                        args={[new Float32Array(attributeData.streches), 1]}
                    />
                    <instancedBufferAttribute
                        attach={'attributes-halfRootAngleSin'}
                        args={[
                            new Float32Array(attributeData.halfRootAngleSin),
                            1
                        ]}
                    />
                    <instancedBufferAttribute
                        attach={'attributes-halfRootAngleCos'}
                        args={[
                            new Float32Array(attributeData.halfRootAngleCos),
                            1
                        ]}
                    />
                </instancedBufferGeometry>
                <CustomShaderMaterial
                    ref={matRef}
                    baseMaterial={THREE.MeshBasicMaterial}
                    fragmentShader={grassBladeFragmentShader}
                    vertexShader={grassBladeVertexShader}
                    uniforms={uniforms}
                    side={THREE.DoubleSide}
                />
            </mesh>

still the same result. grass disappears eventually.

5

also why this only happens on mobile browser only. because on windows chrome browser it works perfectly fine.

link of codeSandbox : https://codesandbox.io/p/github/AT010303/Anime-Style-grass/master?import=true

6

Could be the orientation/aspect ratio of the phone. At first I was thrown off by the fact that it works on one platform not the other

7

New update
This only happens on some specific smartphone brand
Like samsung
I tried it on some other phones and it works fine on apple and oneplus :thinking: