THREE.Points with different textures

Questions
,
1

I have this problem with the shader of my THREE.Points object using the THREE.RawShaderMaterial

What I’m trying to do is assigning different textures to each point passing an id as an BufferAttribute for it’s corresponding texture and then with a conditional depending of that id I assign that texture on the fragment shader.

What happens is that the points flickers when I move the camera using OrbitControls.

Here is the vertex shader

uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat4 modelMatrix;

varying vec3 vColor;
varying float vId;
varying float vOpacity;

attribute vec3 position;
attribute float aTextureIndex;
attribute float aOpacity;

void main() {
	vColor = position;
	vId = aTextureIndex;

	vOpacity = aOpacity;
	vec4 mvPosition = viewMatrix * modelMatrix * vec4( position, 1.0 );
	gl_PointSize = 20. * ( 100.0 / -mvPosition.z );
	gl_Position = projectionMatrix * mvPosition;
}

and the fragment shader

uniform sampler2D points1;
uniform sampler2D points2;
uniform sampler2D points3;
uniform sampler2D points4;
uniform sampler2D points5;
uniform sampler2D points6;

varying vec3 vColor;
varying float vId;
varying float vOpacity;

void main() {
	vec4 c = vec4(1.0, 1.0, 1.0, vOpacity);
        vec4 tex;
        if(vId == 0.0){
                tex = texture2D(points1, gl_PointCoord);
        }else if(vId == 1.0){
                tex = texture2D(points2, gl_PointCoord);
        }else if(vId == 2.0){
                tex = texture2D(points3, gl_PointCoord);
        }else if(vId == 3.0){
                tex = texture2D(points4, gl_PointCoord);
        }else if(vId == 4.0){
                tex = texture2D(points5, gl_PointCoord);
        }else if(vId == 5.0){
                tex = texture2D(points6, gl_PointCoord);
        }
        gl_FragColor = tex * c;
}

I first tried passing an array with the textures as an uniform, but just to make sure that wasn’t the problem with the array, now I pass each texture as an independent uniform.

let shaderPoints = new THREE.RawShaderMaterial({
        vertexShader: myVertexShader,
        fragmentShader: myFragmentShader,
        uniforms: {
            points1: {value: iconsT[0] },
            points2: {value: iconsT[1] },
            points3: {value: iconsT[2] },
            points4: {value: iconsT[3] },
            points5: {value: iconsT[4] },
            points6: {value: iconsT[5] },
        },
        transparent: true,
})

I’m aware I could do it using THREE.Sprite but I want to know why this happens.

Also, this only happens on Firefox (version 78.8.0 (64-bit)) on a Mac with OS X 10.9.5 and on Chrome (version 88.0.4324.150) on a Lenovo Legion Y540 with Windows 10. On my Lenovo Ideapad 320-15IKB works well and on a Toshiba Satellite l855-s5405 also works well.

Haven’t tested in any other devices.
You can check it on this site www.polyhedronuniverse.com/?location=wonder

2

Since varyings are interpolated in the fragment shader, you can’t use them for numbers that should act like integers.

However, you can use a WebGL 2 feature called integer attributes like demonstrated in this demo: three.js WebGL 2 - buffergeometry - integer attributes