Разные размеры точек на разных мониторах - PullRequest
Новая
       7

Разные размеры точек на разных мониторах

0 голосов
/ 03 октября 2018

У меня есть два монитора, первый 2560x1660, второй 1920x1200, оба имеют одинаковый холст с одинаковыми размерами (window.innerWidth = 1297, window.innerHeight = 788).У меня есть несколько пользовательских шейдеров для материала Points, и по какой-то причине на экране с лучшим разрешением размер точек меньше, но размер холста такой же, в чем может быть проблема?

Shader: 

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 );
  }`;

1 Ответ

0 голосов
/ 06 октября 2018

В обычном PointsMaterial у вас есть свойство размера, которое вы можете настроить в соответствии с размером экрана.Я не знаю, что это за «масштабирование» float в вашем шейдере, но что-то вроде этого должно работать: 

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

Вот пример Codepen, основанный на «window.innerWidth» и «window.innerHeight»для простоты.Вы можете просто изменить их с помощью 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 );

} );
...