12345678910111213141516
The post is a bit unclear… but lots of us here have worked with BufferGeometry + Particle systems, and doing color per particle isn’t very difficult. Is there a fiddle or codepen of something you need help with?
lol ok. good luck. 
https://vectorslave.com/gpuparticles/noise.html
Your code there can be replaced with:
let positions = activeGeometry.attributes.position.array.slice(0);
let colors = activeGeometry.attributes.color.array.slice(0);
Not sure why you have such complex logic for copying those arrays?
Perhaps I am missing something…
Anyway… please post a reproduction of your issue in a codepen or jsfiddle.
You are not providing enough information to solve your problem.
When you say “the colors don’t match correctly.” that is not helpful. Please explain how they “don’t match”, and provide working code that reproduces the issue. Don’t just cut and paste a few lines here and there that you think may be related.
To color a particle…
you set up the attribute in the vertex shader…
attribute vec3 color;
a varying to send it to the fragment shader:
varying vec3 vColor;
in the vertex shader:
vColor = color;
then in the fragment shader:
varying vec3 vColor;
....
at the end of the fragment shader:
gl_FragColor.rgb *= vColor;
If you want to see how PointsMaterial handles color, you can read the source code here:
https://ycw.github.io/three-shaderlib-skim/dist/#/latest/points/vertex
https://ycw.github.io/three-shaderlib-skim/dist/#/latest/points/fragment
Ahh great. Glad you figured it out. 
bruh just post some code in a code pen and we will fix you.
it doesn’t have to be like this.
4 Likes
- Why don’t you want to accept help from @manthrax?
- If you want points, modify
PointsMaterial. Just add the logics you need to it.
3 Likes
let pgeom = new THREE.PlaneGeometry(50,50,100,100)
let pts = new THREE.Points(pgeom,new THREE.PointsMaterial({
size:10.2,
color:'#222',
blending:THREE.AdditiveBlending,
transparent:true,
sizeAttenuation:false,
vertexColors:true,
}));
pts.rotation.x = Math.PI*.5;
pts.material.onBeforeCompile=(shader)=>{
shader.uniforms.time = {get value(){return performance.now()/1000}}
shader.vertexShader=`
uniform float time;
`+shader.vertexShader;
shader.vertexShader = shader.vertexShader.replace("#include <color_vertex>",`#include <color_vertex>
#ifdef USE_COLOR
vColor.rgb = abs(vec3(cos(time+position.x*1.7),sin(time+position.y*2.6),cos(time+position.x*1.3)));
#endif
`)
shader.vertexShader = shader.vertexShader.replace("#include <begin_vertex>",`#include <begin_vertex>
transformed = vec3( position );
transformed.z = sin(time+(transformed.x*.3))*sin((time*.7)+(transformed.y*.5))*1.2;
#ifdef USE_ALPHAHASH
vPosition = transformed;//vec3( position );
#endif
`)
shader.fragmentShader = shader.fragmentShader.replace(`#include <color_fragment>`,`#include <color_fragment>
diffuseColor.rgba *= smoothstep(1.,0.,length(gl_PointCoord-.5)*2.);
`)
}
scene.add(pts);
1 Like
@manthrax I do want to first genuinely thank you for your time and effort. I do mean it.
- Using PointsMaterial it works and that is not the problem I am trying to solve.
- the geometry and colors needs to come from a loaded PLY.
but if you really want to solve this I might as give you all the details. The goal is quite simple.
- load a ply with color data.
- render it using Points but Not using PointsMaterial rather ShaderMaterial.
Good luck!
As much as I appreciate @manthrax and I replied initially.
It’s not a matter of accepting help, the problem has been isolated and is very specific.
Team / Problem solving work first requires listening before trying to solve the problem and less of an aggressive approach.
- The method in which I did it is well documented by Nico at FBO particles – Youpi ! (scroll down to how he loads the mesh).
as per that method I run the “Simulation pass” ShaderMaterial to calculate my animations and a “render” pass which is another ShaderMaterial ( as per the posted link)
The PLY file loaded works as expected (displays colors) if I use a PointsMaterial but I can’t use this method as I need the performance of a ShaderMaterial whist animating positions.
I am able to correctly get the colors array from the PLY and I know how to call attributes, uniforms and varying to when needed in the vertex and fragment shaders.
I believe that the issue is the way things are mapped. animations happen along a Vec2 coordinate ( view blog post Render Shader)
vec3 pos = texture2D( positions, position.xy ).xyz;
Honestly all this detailed explanation is a big waste of everyones time.
At this point I am only doing it out of respect and professionalism.
But what is not a waste of time is a solution to do what I am trying to do which I am quite sure will be helpful for everyone.
I really don’t understand where the break down in communication is?
- Load a PLY with color data (the go to format well supported format for point clouds with color data)
- Animate using GPGPU ( so no PointsMaterial )
Can be done but color not correctly mapped (with Maxine / Nico’s / my method)
Using PointsMaterial will mean that I don’t get the computation performance of doing my animations in glsl.
Unfortunately its seems none has loaded a colored PLY, animated with GPGPU while keeping the color data of the loaded file.
I have tried to be as respectful and grateful as possible, but this a problem that only a handful on this forum can solve that is mugen87, yourself, and @akella methodical mind.
@akella just looping you in 
Solving this is not really about helping me but I can safely say everyone will benefit from knowing how to load a point cloud displayed with correct color and animating it with the performance that Threejs provides.
Create a minimal live code working(!) example with a PLY model with color data (jsfiddle, codepen, codesandbox etc.), including your implementation of shaders, that demonstrates the issue. Add a detailed description of the result you want to get (providing pics or gifs or vids, if possible).
2 Likes
Most of the “break down in communication” was because your original question had no mention at all of animating using GPGPU and instead only showed some code that wasn’t directly relevant. But now you have hidden that fact by deleting a bunch of your messages?? The post previous to the one I quoted also does not mention animating using GPGPU. You only said…
The goal is quite simple.
- load a ply with color data.
- render it using Points but Not using PointsMaterial rather ShaderMaterial.
And yes, that is simple. You could easily copy what PointsMaterial does in your own ShaderMaterial. However, in that post and your original post you left out the key information about animating with GPGPU. Now you say “Honestly all this detailed explanation is a big waste of everyones time.” That just isn’t true as the explanation is what will allow others to understand what you are trying to do. All that said, what @prisoner849 suggested is still a good idea since it will make it easier for someone to provide a solution.
Still there is more that you could explain that would help get you a better answer, because this depends on what you want to do with the animation. In some cases, this is as simple as just using the original vertex color the same way that PointsMaterial does and then use the simulation data only for manipulating the particle positions. That’s how its done in this lesson of the three.js journey course…
It uses GLTF instead of PLY, but that doesn’t matter as the concept is still the same. When you import either format, the vertex colors are setup the same way.
3 Likes
Can someone explain what happened here, half the posts are missing?
What is this number, how is it related to three.js ?
I think they were trying to overcome the 10 character minimum character limit to make a post.
How was PLY associated with vertex color so specifically? Isn’t that a file format? Once loaded, these things become Mesh BufferGeometry etc.
How does PLY play into this? Is it supposed to load vertex colors but it didnt load them? How can mapping be broken.
So many questions 
1 Like
OP was asking why their shader’ed FBO particles weren’t showing color, but didn’t appear to have a grasp of what was going on, and was resistant to providing code, and dismissive of attempts to educate themselves. also weirdly @'ing individual contributors …
Like… if you took your car to the mechanic, and then insisted that you need the president of Ford Motor Company to do the work because he was the most qualified.
2 Likes
Honestly that is the only thing in this thread that makes sense. I’ve seen that over the years. There is a certain type of person that only trusts the few of the most well known contributors.
2 Likes