How to send Custom Color DataTexture to Geometry

Questions
, ,
1

Hi Experts,

When custom colors (color array) are created with DataTexture as follows, how to send the color DataTexture to geometry? (1) Send it to shader through uniforms.value (2) send it to material, like new THREE.MeshStandardMaterial({map:DataTexture}) (3) Or send it geometry, like gemoetry.setAttribute(‘vColor’, Float32ArrayBufferAttribute(Color, 3));

Thanks!

const texture = new THREE.DataArrayTexture( data, width, height, depth );
texture.needsUpdate = true;
link: three.js docs

2

If you mean custom texture, then use new THREE.MeshStandardMaterial({map:DataTexture}) ,
If you want multiply material.map with you colored texture, then need to change shader

4

Thanks for info.

What do you mean by multiple material.map? Like what?

I want to apply the color array to different segments of one 3D object. Is the one better, new THREE.MeshStandardMaterial({map:DataTexture}) `? I do not need to write custom shader for fragment, right? Just pass the DataTexture to MeshStandardMaterial?

Correct me, if I’m mistaken. Thanks.

5

Several years ago here was topic, but didnt remember details, you can search.
But for array texture maybe need to change shader.
One of solution is need to use new THREE.MeshStandardMaterial({map:DataTexture}) and manually change UV to select part of texture which you need.
Second but of course bad solution is apply several materials with defines groups where you can point which triangles will use material.
Third solution is in 3ds max or Blender apply several materials to triangles which you want

6

Do you imagine something like this? Change the index in the uniforms and you will choose a different texture from the dataArrayTexture

Webgl

WebGPU

In the webgpu version I didn’t create the index as uniform

7

Thanks for your examples. WebGPU is thought to be the future of WebGL. So far, there’s not many examples available for learning.

I seem to make a mistake. Data3DTexture is for 3D object, right? And DataTexure is for 2D. So, if I want to apply one color to the nose area and another color to the lip area for, like the following 3D figure. What should I do ? Would you please advise? Thanks.

https://threejs.org/examples/#webgl_materials_matcap

8

Thanks for info.

I made a mistake. For 2D, it’s DataTexture. For 3D, it should be Data3DTexture. Right? I did search and found that for 3D, it’s much more complicated to implement it since it used WebGL a lot.
2D: https://codepen.io/alexpyzhianov/pen/vNjJWd
3D: https://codepen.io/boytchev/pen/XWQYmmb

9

Hi Experts,

As a beginner, I came across the impressive project as follows and got a few questions.
It uses self-made data texture. But, it’s a 3D object, not 2D. As I know, texture is for 2D image, correct? Why does the project create its texture, instead of getting 3D positions from the 3D object? What’s the purpose of using setTextureValue and Raycaster in the project? Raycaster is used for getting mouse movement/positions, right? But, no mouse interaction is applied here. Would you mind sharing your ideas? Thanks a lot.

10

Long story short: A Model of Wire

1 Like
12

Thanks for the info.

You mentioned, using Raycaster, take points on a model, then build curves from these points.

I thought Raycaster was only used for mouse movement or interaction, and just learned that it could be used to take points from a model.

13

Hi Pro,

I found one of your projects used dataTexture as follows. Could you share how to assign one color to a particular segment of the geometry, not just one color all the way? I created a color array and assign to the geometry but, it did not work, like g.setAttribute( ‘color’, new THREE.Float32BufferAttribute( colors,3));

Thanks a lot.