How can I make my custom point shader the same color as the default shader?

[Olon]

Hello,

I am making a point cloud viewer. Using the default PointsMaterial, I get the following result :

The code is :

import * as THREE from "three";
import { PLYLoader } from "three/examples/jsm/loaders/PLYLoader.js";

// Assume the usual setup and scene creation from the Threejs tutorial.

var pointCloudMaterial = new THREE.PointsMaterial({vertexColors: true, size: 1});

const loader = new PLYLoader();
const uri = "...";
            
loader.load(uri, (data) =>
{
    const points = new THREE.Points(data, pointCloudMaterial);
    
    scene.add(points);
}, undefined, (error) => {
    console.log(error);
});

However, I want to use a custom shader that changes the point size according to the distance of the points with the camera :

export const pointCloudeVertexShader = `
    precision highp float;
    varying vec3 vColor;

    void main() {
        vColor = color;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

        float dx = pow(position[0] - cameraPosition[0], 2.0);
        float dy = pow(position[1] - cameraPosition[1], 2.0);
        float dz = pow(position[2] - cameraPosition[2], 2.0);
        float delta  = pow(dx + dy + dz, 0.5);

        gl_PointSize = 1300.0 / delta; // The factor is model dependant
    }
`;

export const pointCloudFragmentShader = `
    precision highp float;
    varying vec3 vColor;

    void main() {
        gl_FragColor = vec4(vColor, 1);
    }
`;

I get a darker color for the model. How can I get the same color as the default shader?

Thank you

[mjurczyk]

Try wrapping the final gl_FragColor in linearToOutputTexel(vec4 color):

gl_FragColor = linearToOutputTexel(vec4(vColor, 1) );

[Olon]

@mjurczyk

linearToOutputTexel

It works, thanks!