three.js - 为什么看起来多个像素具有相同的 gl_FragCoord.xy？答案

【问题标题】：three.js - why does it appear that multiple pixels have the same gl_FragCoord.xy?three.js - 为什么看起来多个像素具有相同的 gl_FragCoord.xy？
【发布时间】：2019-04-05 09:45:06
【问题描述】：

根据khronos group documentation，gl_FragCoord 指定任何位置在被着色的像素。

下面我有一个着色器，它根据坐标模 2 为像素着色。我们可以期望看到一个细粒度的棋盘状图案，其中每个像素的颜色与其相邻的每个像素都不同。但是，看起来大多数像素的gl_FragCoord.xy 不是以像素为单位的坐标，而是该值似乎是一个非整数，它是像素坐标的一些缩放。

var canvas;
var scene;
var renderer;
var camera;
var shader;
var quad;

function init() {

  let div = document.getElementById('div');
 
  let newCanvas = document.createElement('CANVAS');
  newCanvas.id = 'canvas';
  let height = 360;
  newCanvas.style.height = height + 'px';
  let width = 1440;
  newCanvas.style.width  = width + 'px';
  newCanvas.style.backgroundColor = 'black';
  newCanvas.style['border-radius'] = '12px';
  div.appendChild(newCanvas);
  div.appendChild(document.createElement('BR'));

  canvas = document.getElementById('canvas');
  scene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer({canvas: canvas});
  camera = new THREE.OrthographicCamera(-0.5*width, 0.5*width, -0.5*height, 0.5*height, 1, 1000);


  shader = new THREE.ShaderMaterial({
    vertexShader: 'void main() { gl_Position = vec4(position,1); }',
    fragmentShader: 'void main(){ gl_FragColor = vec4(mod(gl_FragCoord.xy, 2.0), 0, 1); }'
  });

  quad = new THREE.Mesh(new THREE.PlaneGeometry(width, height), shader);

  scene.add(quad);
}

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

var button = document.getElementById('start');
button.onclick = function() { init(); animate(); }

<html>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/98/three.js"></script>
  <div align="center" id="div">
  <button type="button" id="start" class="button" >Start</button>
  </div>
</body>
</html>

我使用了一个非常宽的画布并且在单击按钮后将画布附加到文档中可能看起来很奇怪，但这就是它在我正在处理的应用程序中的实现方式，所以我认为也许这些功能可能会以某种方式导致问题。

这是一个我以前从未遇到过的奇怪问题，所以我还没有真正想出任何方法来尝试调试它。到目前为止，我唯一尝试过的是改变四边形的高度和宽度，但这根本没有改变输出。

【问题讨论】：

标签： three.js

【解决方案1】：

我想通了！问题很简单：渲染器没有设置正确的大小（我以为默认大小是画布的大小，但显然我错了）。

添加

renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);

在声明渲染器后解决问题。

var canvas;
var scene;
var renderer;
var camera;
var shader;
var quad;

function init() {

  let div = document.getElementById('div');
 
  let newCanvas = document.createElement('CANVAS');
  newCanvas.id = 'canvas';
  let height = 360;
  newCanvas.style.height = height + 'px';
  let width = 1440;
  newCanvas.style.width  = width + 'px';
  newCanvas.style.backgroundColor = 'black';
  newCanvas.style['border-radius'] = '12px';
  div.appendChild(newCanvas);
  div.appendChild(document.createElement('BR'));

  canvas = document.getElementById('canvas');
  scene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer({canvas: canvas});
  renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
  camera = new THREE.OrthographicCamera(-0.5*width, 0.5*width, -0.5*height, 0.5*height, 1, 1000);


  shader = new THREE.ShaderMaterial({
    vertexShader: 'void main() { gl_Position = vec4(position,1); }',
    fragmentShader: 'void main(){ gl_FragColor = vec4(mod(gl_FragCoord.xy, 2.0), 0, 1); }'
  });

  quad = new THREE.Mesh(new THREE.PlaneGeometry(width, height), shader);

  scene.add(quad);
}

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

var button = document.getElementById('start');
button.onclick = function() { init(); animate(); }

<html>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/98/three.js"></script>
  <div align="center" id="div">
  <button type="button" id="start" class="button" >Start</button>
  </div>
</body>
</html>

【讨论】：

仅供参考：gl_FragCoord is not integer values