Display texture on each point of point cloud

[vin-ni]

Hello,
I’m trying to display a texture on each point of the point cloud.

Unfortunately it only renders the color of the texture:

How would I need to change it to show the full texture?

This is the vertex shader:

	attribute float alpha;
	varying float vAlpha;
	varying vec2 vUv;
	uniform float size;
	uniform float scale;
	
    void main() {
		vUv = uv;

		vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
		gl_PointSize = size * ( scale / length( mvPosition.xyz ) );
		gl_Position = projectionMatrix * mvPosition;
    }

And this the fragment shader:

	uniform vec3 color;
	varying float vAlpha;
	uniform sampler2D image;
	uniform sampler2D texture1;
	varying vec2 vUv;
	
    void main() {
		vec4 mapTexel = texture2D( texture1, vUv.xy );
		gl_FragColor = mapTexel;
    }

The uniforms I pass are:

	uniforms = {
		color: { value: new THREE.Color(0xffffff) },
		texture1: { type: "t", value: THREE.ImageUtils.loadTexture("./textures/textureCircle3.png") },
		size: {
			value: 12
		},
		scale: {
			value: window.innerHeight / 2.0
		}
	};

[vin-ni]

Solution for the fragment Shader:

void main() {
	vec2 uv = vec2(gl_PointCoord.x, 1.0 - gl_PointCoord.y);
	gl_FragColor = texture2D(texture1, uv);
}

[Mugen87]

Why not just using the shader code from THREE.PointsMaterial?

BTW: When defining uniforms, it’s not necessary to define a type property. three.js can automatically derive the correct uniform type from the shader program. Besides, THREE.ImageUtils is deprecated. Load your textures with THREE.TextureLoader instead.