Вершинный шейдер GLSL gl_Position для gl.POINTS с большим gl.PointSize - PullRequest
Новая
       16

Вершинный шейдер GLSL gl_Position для gl.POINTS с большим gl.PointSize

0 голосов
/ 09 мая 2019

Я пытаюсь отрисовать много точек с большим gl_PointSize.Похоже, вершинный шейдер автоматически откажется от рендеринга gl.POINTS, если позиция отсутствует, если [-1, 1].

В моем случае, если позиция точки немного выходит за пределы [-1, 1], ее часть все равно должна отображаться на холсте.Любой способ позволить шейдеру сохранять точку рендеринга, когда положение вне [-1, 1]?

Вот код для рисования точки с положением немного за пределами холста.Но ожидается, что почти половина из них будет показана на холсте. 

  var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
  var positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

  var positions = [
    -1.0001, -1
  ];

  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

  ....

  gl.enableVertexAttribArray(positionAttributeLocation);
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

  gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset);

  gl.drawArrays(gl.POINTS, 0, 1);

В моем вершинном шейдере у меня есть 

  ....
  gl_PointSize = 32.0;
  ....

1 Ответ

1 голос
/ 09 мая 2019

Я не могу повторить вашу проблему. Мне кажется, что рисование вне холста с помощью POINTS

С спецификация OpenGL ES 2.0 сечение 2.13

Если рассматриваемый примитив является точкой, то отсечение отбрасывает ее, если она лежит вне ближней или дальней плоскости отсечения; в противном случае оно передается без изменений .

Видите ли вы другие результаты?

Конечно, имейте в виду, что и WebGL, и OpenGL ES 2.0 требуются только для поддержки максимального размера точки 1,0. Похоже, большинство поддерживают по крайней мере 60 

const gl = document.querySelector('canvas').getContext('webgl');
const vs = `
attribute vec4 position;
void main() {
  gl_Position = position;
  gl_PointSize = 64.0;
}
`;
const fs = `
precision mediump float;
void main() {
  gl_FragColor = vec4(1, 0, 0, 1);
}
`;
const program = twgl.createProgram(gl, [vs, fs]);
const positionLoc = gl.getAttribLocation(program, 'position');
const buf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
  -1.001, -1.001,
   1.001, -1.001,
  -1.001,  1.001,
   1.001,  1.001,
   0,      0,
]), gl.STATIC_DRAW);
gl.enableVertexAttribArray(positionLoc);
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);
gl.useProgram(program);
gl.drawArrays(gl.POINTS, 0, 5);
canvas { border: 1px solid black; }
<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>
<canvas></canvas>

Обновление

Согласно этой теме это проблема OpenGL против OpenGL ES

В спецификации OpenGL написано

Если рассматриваемый примитив является точкой, то отсечение пропускает его без изменений, если оно находится в объеме клипа; в противном случае оно отбрасывается.

Это немного отличается от спецификации OpenGL ES. OpenGL эффективно отсекает точки, а OpenGL ES - нет. Тем не менее, еще более странно то, что многие драйверы OpenGL не соответствуют заявленным в спецификации требованиям.

Короткая версия этого означает, что вы не можете рассчитывать на то, что точки не обрезаны в WebGL или нет, поэтому вы можете рассмотреть возможность рисования своих собственных квадратов. Вы можете заставить свой вершинный шейдер расширять квадраты на любое значение, которое вы в настоящее время используете для gl_PointSize, и либо использовать создание экземпляров графического процессора, либо создание вручную, чтобы нарисовать множество точек. Для каждой позиции POINT, если вы используете создание экземпляров графического процессора, есть одна позиция на точку, как сейчас. Если вы используете ручное создание экземпляров, вам нужно повторить позицию для каждой вершины или добавить идентификатор точки и поместить ваши позиции в текстуру, если вы не хотите повторять позиции в атрибутах.

Пример использования экземпляра GPU 

const m4 = twgl.m4;
const gl = document.querySelector('canvas').getContext('webgl');
const ext = gl.getExtension('ANGLE_instanced_arrays');
if (!ext) {
  alert('need ANGLE_instanced_arrays');
}

const vs = `
  attribute vec4 position;       // center point
  attribute vec2 cornerPosition; // the corners (-0.5 to 0.5)
  
  uniform vec2 resolution;
  
  varying vec3 pointCoord;  // only if you need gl_PointCoord substitute
  
  void main() {
    // do the normal thing (can mult by matrix or whatever here
    gl_Position = position; 

    float pointSize = 64.0;
    
    // -- point emulation
    
    gl_Position.xy += cornerPosition * (pointSize * 2.0 - 1.0) / 
                      resolution * gl_Position.w;
    
    // only if you need gl_PointCoord substitute
    pointCoord = vec3(cornerPosition * 0.5, gl_Position.z);
  }
`;

const fs = `
precision mediump float;
void main() {
  gl_FragColor = vec4(1, 0, 0, 1);
}
`;

const programInfo = twgl.createProgram(gl, [vs, fs]);

const program = twgl.createProgram(gl, [vs, fs]);
const positionLoc = gl.getAttribLocation(program, 'position');
const cornerPositionLoc = gl.getAttribLocation(program, 'cornerPosition');
const resolutionLoc = gl.getUniformLocation(program, 'resolution');

{
  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    -1.001, -1.001,
     1.001, -1.001,
    -1.001,  1.001,
     1.001,  1.001,
     0,      0,
  ]), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(positionLoc);
  gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);
  ext.vertexAttribDivisorANGLE(positionLoc, 1);
}

{
  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    -0.5, -0.5,
     0.5, -0.5,
    -0.5,  0.5,
    
    -0.5,  0.5,
     0.5, -0.5,
     0.5,  0.5,
  ]), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(cornerPositionLoc);
  gl.vertexAttribPointer(cornerPositionLoc, 2, gl.FLOAT, false, 0, 0);
}

gl.useProgram(program);
gl.uniform2f(resolutionLoc, gl.canvas.width, gl.canvas.height);
ext.drawArraysInstancedANGLE(gl.TRIANGLES, 0, 6, 5);  // 5 points, 6 verts per point
canvas { border: 1px solid black; }
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<canvas></canvas>

Вы должны увидеть это, создайте то же изображение, что и выше. Преимущество состоит в том, что он не подчиняется ограничению размера точки и работает с ошибками драйвера. Проверьте на своем оборудовании и посмотрите, решит ли это вашу проблему.

Просто помните, что если вы не используете объект массива вершин, вам, вероятно, нужно сбросить делитель атрибута обратно в ноль, прежде чем пытаться визуализировать что-то еще. 

  ext.vertexAttribDivisorANGLE(positionLoc, 0);

Еще один пример для проверки 

const m4 = twgl.m4;
const gl = document.querySelector('canvas').getContext('webgl');
const ext = gl.getExtension('ANGLE_instanced_arrays');
if (!ext) {
  alert('need ANGLE_instanced_arrays');
}

const vs = `
  attribute vec4 position;       // center point
  attribute vec2 cornerPosition; // the corners (-0.5 to 0.5)
  
  uniform vec2 resolution;
  uniform mat4 matrix;
  
  varying vec3 pointCoord;  // only if you need gl_PointCoord substitute
  
  void main() {
    // do the normal thing (can mult by matrix or whatever here
    gl_Position = matrix * position; 

    float pointSize = 20.0 / gl_Position.w;
    
    // -- point emulation
    
    gl_Position.xy += cornerPosition * (pointSize * 2.0 - 1.0) / 
                      resolution * gl_Position.w;
    
    // only if you need gl_PointCoord substitute
    pointCoord = vec3(cornerPosition * 0.5, gl_Position.z);
  }
`;

const fs = `
precision mediump float;
void main() {
  gl_FragColor = vec4(1, 0, 0, 1);
}
`;

const programInfo = twgl.createProgram(gl, [vs, fs]);

const program = twgl.createProgram(gl, [vs, fs]);
const positionLoc = gl.getAttribLocation(program, 'position');
const cornerPositionLoc = gl.getAttribLocation(program, 'cornerPosition');
const resolutionLoc = gl.getUniformLocation(program, 'resolution');
const matrixLoc = gl.getUniformLocation(program, 'matrix');
const numPoints = 100;

{
  // adapted from http://stackoverflow.com/a/26127012/128511

  function fibonacciSphere(samples, i) {
    const rnd = 1.;
    const offset = 2. / samples;
    const increment = Math.PI * (3. - Math.sqrt(5.));

    //  for i in range(samples):
    const y = ((i * offset) - 1.) + (offset / 2.);
    const r = Math.sqrt(1. - Math.pow(y ,2.));

    const phi = (i + rnd % samples) * increment;

    const x = Math.cos(phi) * r;
    const z = Math.sin(phi) * r;

    return [x, y, z];
  }
  
  const positions = [];
  for (let i = 0; i < numPoints; ++i) {
    positions.push(...fibonacciSphere(numPoints, i));
  }

  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(positionLoc);
  gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 0, 0);
  ext.vertexAttribDivisorANGLE(positionLoc, 1);
}

{
  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    -0.5, -0.5,
     0.5, -0.5,
    -0.5,  0.5,
    
    -0.5,  0.5,
     0.5, -0.5,
     0.5,  0.5,
  ]), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(cornerPositionLoc);
  gl.vertexAttribPointer(cornerPositionLoc, 2, gl.FLOAT, false, 0, 0);
}

function render(ms) {
  const secs = ms * 0.001;
  
  const mat = m4.perspective(
      60 * Math.PI / 180,
      gl.canvas.clientWidth / gl.canvas.clientHeight,
      0.1,
      100);
  m4.translate(mat, [0, 0, -2.11 + Math.sin(secs)], mat);
  m4.rotateX(mat, secs, mat);
  m4.rotateY(mat, secs * 0.93, mat);
  
  gl.useProgram(program);
  gl.uniform2f(resolutionLoc, gl.canvas.width, gl.canvas.height);
  gl.uniformMatrix4fv(matrixLoc, false, mat);
  
  // 6 verts per point
  ext.drawArraysInstancedANGLE(gl.TRIANGLES, 0, 6, numPoints);  
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);
canvas { border: 1px solid black; }
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<canvas></canvas>
...