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?
Thanks a lot!
Possibly related:
yourInstancedMesh.frustumCulled = false;
<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.
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
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
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 
The problem does exist on Android phones.
Ohh it was just a precession issue in shader
I was using mediump. Just set it to highp and everything works fine 
Could you please post the code? I want to observe the differences. My scene objects still occasionally disappear and become invisible. It’s truly amazing.
Hope it helps
If you’re still facing the issue, please let me know. I haven’t been very active here lately, so I might miss messages. In that case, feel free to email me at ashutosh1008c@gmail.com or reach out via LinkedIn: https://www.linkedin.com/in/at010303/
Hello, I’m very glad to see your proposal.
In fact, I discovered more issues related to InstancedMesh. I think this is something worth paying attention to. When loading models or other graphics using InstancedMesh, if the visible setting of InstancedMesh is set to false or the visible setting of the upper Object3D is set to false, the instances will not be displayed after instantiation. This is the problem. To solve this, there is only one solution - either do not add it in a hidden manner, or keep executing renderer.render(…) in the setAnimationLoop, which is very inefficient in terms of performance. In summary, there is a problem when executing renderer.render(…) only once or twice after instantiating InstancedMesh.
It should be emphasized again that in many aspects of THREE.WebGPURenderer, the renderer.compile method is required; otherwise, there will be display issues.
There is another issue related to precision. When setting renderer.highPrecision = true, this problem naturally occurs.
