Смещение координат текстуры при применении поворота Y в вершинном шейдере

Question

Я пытаюсь повернуть плоскость из двух треугольников в шейдере.все идет хорошо, за исключением того, что я не могу понять, что со значениями UV координат происходит, когда я применяю вращение.

Как я могу выполнить этот поворот с ожидаемыми результатами?

это выглядит как UV-координаты, интерполированные независимо для каждого треугольника.

let pid, rotateYlocation;
let gl = canvas.getContext('webgl');
let values = document.querySelector('span')
let loader = new Image();
loader.crossOrigin = "anonymous";
loader.src = "https://i.imgur.com/G9H683l.jpg";
loader.onload = function() { 
    canvas.width = loader.width;
    canvas.height = loader.height;
    pid = gl.createProgram();

    shader(`   
        float perspective = 1.0;          
        attribute vec2 coords;
        uniform float rotateY; 
        varying vec2 uv;

        void main(void) {
          mat3 rotY = mat3(vec3( cos(rotateY),  0.0, sin(rotateY)), 
                           vec3( 0.0,           1.0,          0.0),
                           vec3( -sin(rotateY), 0.0, cos(rotateY)));
          vec3 p =  vec3(coords.xy, 0.) * rotY;
          uv = coords.xy.xy*0.5 + 0.5;   
          gl_Position = vec4(p / (1.0 + p.z * perspective), 1.0);
      }
    `, gl.VERTEX_SHADER);

    shader(`
      precision highp float;

      uniform sampler2D texture;
      varying vec2 uv;

      void main(void) {
        gl_FragColor = texture2D(texture, uv);
      }
    `, gl.FRAGMENT_SHADER);

    gl.linkProgram(pid);
    gl.useProgram(pid);

    let array = new Float32Array([-1.0, -1.0,   1.0, -1.0,   -1.0, 1.0, 
                                  -1.0,  1.0,   1.0, -1.0,    1.0, 1.0]);
    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
    gl.bufferData(gl.ARRAY_BUFFER, array, gl.STATIC_DRAW);

    let al = gl.getAttribLocation(pid, "coords");
    gl.vertexAttribPointer(al, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(al);

    let texture = gl.createTexture();
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, loader);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.uniform1i(gl.getUniformLocation(pid, "texture"), 0);
    
    rotateYlocation = gl.getUniformLocation(pid, 'rotateY');

    draw();
  }
  
function draw() {
  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  gl.clearColor(0, 0, 0, 0);
  gl.uniform1f(rotateYlocation, rotateY.value/1000-0.5)
  gl.drawArrays(gl.TRIANGLES, 0, 6);
  values.textContent = `rotateY: ${(rotateY.value/1000-0.5).toFixed(3)}`;
}

function shader(src, type) {
  let sid = gl.createShader(type);
  gl.shaderSource(sid, src);
  gl.compileShader(sid);
  var message = gl.getShaderInfoLog(sid);
  gl.attachShader(pid, sid);
  if (message.length > 0) {
    console.log(src.split('\n').map(function (str, i) {
      return ("" + (1 + i)).padStart(4, "0") + ": " + str
    }).join('\n'));
    throw message;
  }
}

<input type="range" id="rotateY" min="0" max="1000" value="500" onmousemove="draw()">
<span></span><br>
<canvas id="canvas" style="zoom:0.4"></canvas>

Answer 1

varying переменные интерполируются в правильной перспективе. gl_Position - это Однородные координаты (x, y, z, w). Для правильной интерполяции перспективы координата должна быть установлена ​​правильно.

Когда вы делаете

gl_Position = vec4(p / (1.0 + p.z * perspective), 1.0) 

, тогда перспективная интерполяция не может быть выполнена правильно, потому что координата является просто декартовой координатой (x, y, z, 1), и это приводит к линейной интерполяции, потому что w = 1.
Для получения подробной информации о правильной интерполяции см. Как именно OpenGL выполняет перспективную коррекцию линейной интерполяции? .

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

gl_Position = vec4(p, 1.0 + p.z * perspective);

let pid, rotateYlocation;
let gl = canvas.getContext('webgl');
let values = document.querySelector('span')
let loader = new Image();
loader.crossOrigin = "anonymous";
loader.src = "https://i.imgur.com/G9H683l.jpg";
loader.onload = function() { 
    canvas.width = loader.width;
    canvas.height = loader.height;
    pid = gl.createProgram();

    shader(`   
        float perspective = 1.0;          
        attribute vec2 coords;
        uniform float rotateY; 
        varying vec2 uv;

        void main(void) {
          mat3 rotY = mat3(vec3( cos(rotateY),  0.0, sin(rotateY)), 
                           vec3( 0.0,           1.0,          0.0),
                           vec3( -sin(rotateY), 0.0, cos(rotateY)));
          vec3 p =  vec3(coords.xy, 0.) * rotY;
          uv = coords.xy.xy*0.5 + 0.5;   
          gl_Position = vec4(p, 1.0 + p.z * perspective);
      }
    `, gl.VERTEX_SHADER);

    shader(`
      precision highp float;

      uniform sampler2D texture;
      varying vec2 uv;

      void main(void) {
        gl_FragColor = texture2D(texture, uv);
      }
    `, gl.FRAGMENT_SHADER);

    gl.linkProgram(pid);
    gl.useProgram(pid);

    let array = new Float32Array([-1.0, -1.0,   1.0, -1.0,   -1.0, 1.0, 
                                  -1.0,  1.0,   1.0, -1.0,    1.0, 1.0]);
    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
    gl.bufferData(gl.ARRAY_BUFFER, array, gl.STATIC_DRAW);

    let al = gl.getAttribLocation(pid, "coords");
    gl.vertexAttribPointer(al, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(al);

    let texture = gl.createTexture();
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, loader);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.uniform1i(gl.getUniformLocation(pid, "texture"), 0);
    
    rotateYlocation = gl.getUniformLocation(pid, 'rotateY');

    draw();
  }
  
function draw() {
  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  gl.clearColor(0, 0, 0, 0);
  gl.uniform1f(rotateYlocation, rotateY.value/1000-0.5)
  gl.drawArrays(gl.TRIANGLES, 0, 6);
  values.textContent = `rotateY: ${(rotateY.value/1000-0.5).toFixed(3)}`;
}

function shader(src, type) {
  let sid = gl.createShader(type);
  gl.shaderSource(sid, src);
  gl.compileShader(sid);
  var message = gl.getShaderInfoLog(sid);
  gl.attachShader(pid, sid);
  if (message.length > 0) {
    console.log(src.split('\n').map(function (str, i) {
      return ("" + (1 + i)).padStart(4, "0") + ": " + str
    }).join('\n'));
    throw message;
  }
}

<input type="range" id="rotateY" min="0" max="1000" value="500" onmousemove="draw()">
<span></span><br>
<canvas id="canvas" style="zoom:0.4"></canvas>