Saving data as pixel color in geometry

Hello, so I’m trying to save data like x1,x2,x3,… (x1 is an array of 4 elements,…) as colors inside pixels. i.e. I need to have a geometry with pixels number = size of the data, pixel1 will get color including x1 using a fragment shader, pixel2 will get color including x2,… At some point, I need to get the color of each pixel. Is that applicable in Three.js?

I tried with the following:

var geometry = new THREE.PlaneBufferGeometry(2,2,1,1)
var colors = new Float32Array(99 * 4);
for (j = 0; j < 1; j++) {
      for (i = 0; i < 100; i++) {
        var x = d_x[j] - d_x[i];
        var y = d_y[j] - d_y[i];
        var euclSquared = x * x + y * y;
        var tStudent = 1. / (1. + euclSquared);
        const id = (i) * 4;
        colors[id + 0] = tStudent*100;
        colors[id + 1] = tStudent * tStudent * x *100;
        colors[id + 2] = tStudent * tStudent * y *100;
        colors[id + 3] = 1;
      }
}
geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 4 ) );
uniforms = {
	time: { type: "f", value: 1.0 }
};
material = new THREE.ShaderMaterial( {
	uniforms: uniforms,
	vertexShader: document.getElementById( 'vertexShader' ).textContent,
	fragmentShader: document.getElementById( 'fragmentShader' ).textContent
});
	mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );	
	renderer = new THREE.WebGLRenderer();
	<script id="vertexShader" type="x-shader/x-vertex">
		uniform float time;
		attribute vec4 color;
		varying vec4 vColor;
		void main()	{
			vColor = color;
			gl_Position = vec4( position, 1.0 );
		}
	</script>

	<script id="fragmentShader" type="x-shader/x-fragment">
		uniform float time;
		varying vec4 vColor;
		void main()	{
			vec4 color = vec4( vColor );
			gl_FragColor = vec4(color);
		}
	</script>

But it gave me pixels more than the data size with mixed colors not in orderas the data array.

I’m afraid your wording does not make sense. You can’t save colors “inside pixels”. What you can do is to store a color value for each vertex. If you then set the vertexColors property of shader material to THREE.VertexColors, it’s not even necessary to define a custom attribute. three.js does this automatically for you.

https://jsfiddle.net/qvgc5mzs/

Thank you! But I’m having the following problem: the buttom left and top right is mixing colors. I need something like https://codepen.io/bryik/pen/jmpZZN but with values from the shader. I tried giving each vertex a color but it was mixed https://jsfiddle.net/wedad_anbtawi/57oxdtsc/