Question

我有两个监视器，第一个2560x1660，第二个1920x1200，它们都具有相同的画布，并且具有相同的尺寸（window.innerWidth = 1297，window.innerHeight = 788）。我为Points材质设置了一些自定义着色器，由于某种原因，在分辨率较高的屏幕上，Points的尺寸较小，但是画布尺寸相同，这可能是个问题吗？

着色器：

const vertexShader = `
  precision mediump float;

  uniform mat4 projectionMatrix;
  uniform mat4 modelViewMatrix;

  attribute vec3 position;

  attribute vec2 dim;
  attribute float scale;
  attribute vec2 size;

  varying vec2 vDim;
  varying vec2 vSize;

  void main() {
    vDim = dim;
    vSize = size;
    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);

    gl_PointSize = 650.0 * scale / length( mvPosition.xyz );
    gl_Position = projectionMatrix * mvPosition;
  }`

const fragmentShader = `
  precision mediump float;

  uniform sampler2D texture;

  varying vec2 vDim;
  varying vec2 vScale;
  varying vec2 vSize;

  uniform vec3 fogColor;
  uniform float fogNear;
  uniform float fogFar;

  void main() {

    gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 );
    gl_FragColor = gl_FragColor * texture2D( texture, vec2(vDim.x + (gl_PointCoord.x * vSize.x), vDim.y + (gl_PointCoord.y * vSize.y)) );

    float depth = gl_FragCoord.z / gl_FragCoord.w;

    float fogFactor = smoothstep( fogNear, fogFar, depth );
    gl_FragColor.rgb = mix( gl_FragColor.rgb, fogColor, fogFactor );
  }`;

Answer 1

在常规的PointsMaterial中，您具有size属性，可以根据屏幕尺寸进行相应调整。我不知道您的着色器中的“比例”浮动是什么，但是类似的东西应该可以工作：

var size = ( screen.width / 200 ) + ( screen.height / 200 );
var material = new THREE.CustomShaderMaterial({ color: 0xffffff, size: size });

为简单起见，这是一个基于“ window.innerWidth”和“ window.innerHeight”的Codepen示例。您可以只使用screen.width和screen.height更改它们。示例：Codepen ex.

...

function pointsSize() {
  return (( window.innerWidth / 100 ) + ( window.innerHeight / 100 ));
}
...

window.addEventListener( 'resize', function() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    points.material.size = pointsSize();

    renderer.setSize( window.innerWidth, window.innerHeight );

} );

不同显示器上的点大小不同

1 个答案: