Saving data as pixel color in geometry

Questions
, ,
1

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.

2

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.

3

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/