Scaling of the Points component in the Views

[julurisaichandu]

Hi @drcmda, @CodyJasonBennett , I have a main scene which is rendered on a canvas and I am using Views component without any children to render the main scene into the Views. I am rendering the points in the main canvas. But the point sizes in the main canvas and the views are visually looking different but when I print the sizes both the sizes are same technically.

Note: In discord, @CodyJasonBennett said that gl_PointSize will be in pixels and so that would be the issue with scaling. So @CodyJasonBennett and @drcmda could you please explain more about this?

Code snippet

<div ref={viewdiv} style={/*its dimensions are less than the main canvas*/}/>
<Canvas>

/* points rendered in the main canvas*/
  <Points range={1000} limit={1000} positions={positionArray} stride={3}>
    <pointsMaterial size={10} vertexColors/>
  </Points>

/* View for displaying the same points which are there in the main canvas
* but View div has length and height as 30% of main canvas
*/
<View track={viewdiv} index={2}/>

</Canvas>

So here when I keep pointsize at 10, its increasing by a very less radius in the View. So could you please say how can we scale the points in the main view so that the Views also see the same change in pointsize.

[julurisaichandu]

@drcmda and @CodyJasonBennett i am passing a vertex shader as child of shaderMaterial and i am setting the gl_PointSize in it. The point size working fine now, But the colors array in the drei Points is not working. The colorsArray is passed by the user to the Points component, so how can we make the colors array work even with custom shader? If i define the fragment shader, then the colours defined in the fragment shader are taken by the points. If fragment shader is commented, then red points are visible. But in both cases, the colors array passed into drei Points component is not working.

Could you say if there is any solution for colouring points using the user passed colours array in the below implementation?

Code:

<Points positions={positionArray} colors={coloursArray} stride={3}>
     <shaderMaterial
          // fragmentShader={fragmentShader}
          vertexShader={vertexShader}
          uniforms={uniforms}
          vertexColors
        />
  </Points>

[julurisaichandu]

@drcmda and @CodyJasonBennett i am passing a vertex shader as child of shaderMaterial and i am setting the gl_PointSize in it. The point size working fine now, But the colors array in the drei Points is not working. The colorsArray is passed by the user to the Points component, so how can we make the colors array work even with custom shader? If i define the fragment shader, then the colours defined in the fragment shader are taken by the points. If fragment shader is commented, then red points are visible. But in both cases, the colors array passed into drei Points component is not working.

Could you say if there is any solution for colouring points using the user passed colours array in the below implementation?

Code:

<Points positions={positionArray} colors={coloursArray} stride={3}>
     <shaderMaterial
          // fragmentShader={fragmentShader}
          vertexShader={vertexShader}
          uniforms={uniforms}
          vertexColors
        />
  </Points>

I have written this code in vertex shader

attribute vec3 color;
varying vec3 v_color;
void main() {
  v_color = color;
//more code here
}

In the fragment shader, i am using v_volor varying and i am able to achive the required functionality of using the colorsArray sent into the drei Points. Is this the right method?