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

What happens to vertex shader `varying` variable with `highp` qualifier if high precision is unsupported in fragment shader?

在 OpenGL ES 2.0 (Shading Language 1.00) 中,如果 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。

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

根据我的经验,在台式机上,即使您使用 mediump,它们也总是使用 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 的值。

桌面使用 mediump(我的桌面 GPU 实际上会使用 highp)

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