Texture not showing up on Android

Questions
,
1

I have a texture that is not showing up on Android. Also, on iPhone 6 and lower iPhones. It shows up fine on iPhone 7+. Though I’m not too concerned about the lower level iPhones, I am worried about the Adroid devices.

Here’s my shader code. It works fine in most places:

const textMat = new THREE.MeshStandardMaterial({    
    side: THREE.FrontSide, 
    color: 0xffffff,
    wireframe: false,

});

textMat.onBeforeCompile = ( shader ) => {
    shader.uniforms.time = hexUniforms.time;
    shader.uniforms.globalBloom = hexUniforms.globalBloom;
    shader.uniforms.instanceMatrices = textMat.userData.instanceMatrices;
    shader.vertexShader = `
        uniform mat4[ ${ textMatrix.length } ] instanceMatrices;
        attribute float meshIdx;
        attribute vec3 instColor;
        attribute vec2 colorPhase;
        varying vec3 vPos;
        varying vec3 vInstColor;
        varying vec2 vColorPhase;
    ${shader.vertexShader}
    `.replace(
       `#include <uv_vertex>`,
        #include <uv_vertex>
        #include <fog_vertex>`,
       `mat4 instanceMatrix = instanceMatrices[ int( floor( meshIdx + 1.0 ))];
       `vPos = vec3( transformed );
        vInstColor = vec3( instColor2 );
        vColorPhase = colorPhase;
    `
    ).replace(
       `#include <default normal_vertex>`,
       `vec3 transformedNormal = objectNormal;
        mat3 textMat = mat3( instanceMatrix );
        transformedNormal = textMat* transformedNormal;
        transformedNormal = normalMatrix * transformedNormal;
    `);
    shader.fragmentShader = `
        uniform float time;
        uniform float globalBloom;
        varying vec3 vPos;
        varying vec3 vInstColor;
        varying vec2 vColorPhase;
    ${ shader.fragmentShader }`
    .replace(
       `#include <dithering_fragment>`,
       `#include <dithering_fragment>
        gl_FragColor = globalBloom > 3.5 ? vec4( 0, 0, 0, 1 ) : gl_FragColor;
        float t = sin( time * PI * vColorPhase.y + vColorPhase.x ) * 0.01 + 0.01;
        vec3 c = mix( gl_FragColor.rgb, vInstColor, t );
        float a = smoothstep( 0.01, 0.01 + ( 0.6 - t ) * .05, abs( vPos.z ));
        gl_FragColor.rgb = mix( c, gl_FragColor.rgb, a );
    `);      
}
2

I bumped in the same issue, using such things :slight_smile: Here: NestedBoxesGeometry
It works well on PC, but fails on my Android phone. Inspecting the console messages of the respective codepen gave me this: ERROR too many uniforms.
uniform mat4[${layers}] layerMatrix;
Reducing the number of elements (layers) from 100 to 30, made that codepen work on the phone.

3

Ohhhh. That sucks. It works well on iPhone too. So, the android GPU does a size comparison of the mat4 array and determines its too large for memory? How does it determine there are “too many”?

4

Yep, you were right on this. It is completely based on GPU memory. The issues arises still with iOS mobile GPU as well. It is 100% dependent on the GPU. Reduce the number of mat4 in the shader and get them to appear. What is weird is that there is no buffer limit to tell how many is too many. If you reach the buffer limit then it simply doesnt show that layer at all. You would think it would show as many as possible and then just not show any after the size limit is reached, but it just shuts off the whole layer. All very good information though. I will continue to delve more into this for device specific adjustments. For now, in Android Ive limited the number of BatchedGeometries and thus the number mat4s with them. I’ve moved some of the text to pure InstancedMesh and these of course have no problems. A way to calculate the buffer limit against the size of my mat4s would be nice.

Thanks for the info!! The CodePen was sweet too btw!