webgl - 如果片段着色器不支持高精度，带有 `varying` 限定符的顶点着色器 `highp` 变量会发生什么情况？

Question

在 OpenGL ES 2.0 ( Shading Language 1.00 ) 中，使用 highp 限定符限定 varying 顶点着色器变量是否有任何影响，例如性能，如果 GL_FRAGMENT_PRECISION_HIGH 未定义？

例如，当 highp 在片段语言中不可用时，将以下片段着色器与以下两个顶点着色器中的每一个链接，一次一个，是否会产生等效程序？

片段:

#ifdef GL_FRAGMENT_PRECISION_HIGH
varying highp vec2 vTextureCoord;
#else
varying mediump vec2 vTextureCoord;
#endif
...

顶点 1:

...
attribute vec2 aTextureCoord;

varying highp vec2 vTextureCoord;

void main() {
    ...
    vTextureCoord = aTextureCoord;
}

顶点 2:

...
attribute vec2 aTextureCoord;

#ifdef GL_FRAGMENT_PRECISION_HIGH
varying highp vec2 vTextureCoord;
#else
varying mediump vec2 vTextureCoord;
#endif

void main() {
    ...
    vTextureCoord = aTextureCoord;
}

GLSL ES 1.00 spec 中的部分引用 GL_FRAGMENT_PRECISION_HIGH 是 4.5.4。

Answer 1

我的经验是第一版将无法在不支持片段着色器中的 highp 的机器上编译。这些基本上是旧手机。我不确定您必须使用哪一代手机，但我知道大多数最新的智能手机都支持片段着色器中的 highp。

根据我的经验，在台式机上，即使您使用 medimp，它们也总是使用 highp。请注意，就规范而言，这很好。该规范允许实现使用比要求更高的精度。

在移动设备上，至少到 2018 年为止，大多数 GPU 实际上都支持 mediump，并且性能会有差异。还将按照规定仅提供中等精度。

Here's a small example :

// WebGL 3D Lathe Compute Normals
// from https://webgl2fundamentals.org/webgl/webgl-3d-lathe-step-03.html

"use strict";

const vs = `
attribute vec4 a_position;
attribute vec2 a_texcoord;

varying vec2 v_texcoord;

void main() {
  gl_Position = a_position;

  v_texcoord = a_texcoord;
}
`;

const fs = `
precision mediump float;

// Passed in from the vertex shader.
varying vec2 v_texcoord;

uniform float u_scale;

void main() {
  gl_FragColor = vec4(v_texcoord * u_scale, 1, 1);
}
`;

function main() {
  const m4 = twgl.m4;
  twgl.setDefaults({attribPrefix: "a_"});

  // Get A WebGL context
  /** @type {HTMLCanvasElement} */
  const canvas = document.querySelector("canvas");
  const gl = canvas.getContext("webgl");
  if (!gl) {
    return;
  }

  // setup GLSL programs
  const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
  
  const size = 1/10000;
  
  const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
  position: {
    data: [
    -1, -1,
     1, -1,
    -1,  1,
     1,  1,
    ],
    numComponents: 2,
  },
  texcoord: [
    0, 0, 
    size, 0,
    0, size,
    size, size,
  ],
  indices: [
    0, 1, 2, 
    2, 1, 3,
  ],
 });

  function update() {
    render();
  }
  update();

  function render() {
    twgl.resizeCanvasToDisplaySize(gl.canvas, window.devicePixelRatio);

    // Tell WebGL how to convert from clip space to pixels
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    gl.enable(gl.DEPTH_TEST);

    // Clear the canvas AND the depth buffer.
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // Compute the projection matrix
    gl.useProgram(programInfo.program);

    // Setup all the needed attributes.
    twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);

    // Set the uniforms
    // calls gl.uniformXXX, gl.activeTexture, gl.bindTexture
    twgl.setUniforms(programInfo, {
      u_scale: 1 / size,
    });

    // calls gl.drawArrays or gl.drawElements.
    twgl.drawBufferInfo(gl, bufferInfo);
  }

}

main();

body {
  margin: 0;
}
canvas {
  width: 100vw;
  height: 100vh;
  display: block;
}

<canvas></canvas>

<script src="https://webgl2fundamentals.org/webgl/resources/twgl-full.min.js"></script>

这只是绘制一个四边形并在四边形中插入值。这些值从 0 到 0.0001，然后乘以 10000 得到从 0 到 1 的值。

使用 mediop 的桌面(我的桌面 GPU 实际上将使用 highp)

iPhoneX 使用 mediump(实际上会使用 mediump)