如果片段着色器中不支持高精度，则使用`highp`限定符对顶点着色器`vary`变量会发生什么？

Question

在OpenGL ES 2.0（Shading Language 1.00）中，使用varying限定符限定highp顶点着色器变量是否会产生任何影响，例如性能，如果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;
}

GL_FRAGMENT_PRECISION_HIGH中引用var str = 'AABBBCAAEE'; var result = str.replace(/((.)\2*)/g, function(match) { var [letter] = match; return `${letter}${match.length}`; }); console.log(result);的部分为4.5.4。

Answer 1

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

在桌面上，根据我的经验，即使你放了mediump，他们总是使用highp。请注意，就规范而言，这是好的。规范允许实现使用更高的精度然后要求。

在移动设备上，至少到2018年，大多数GPU确实支持中介，并且性能会有所不同。还将指定仅一个中等水平的精度。

Here's a small example：

＆＃13;

＆＃13;

// 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();

＆＃13;

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

＆＃13;

<canvas></canvas>

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

＆＃13;

＆＃13;

＆＃13;

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

桌面使用mediump（我的桌面GPU实际上会使用highp）

iPhoneX使用mediump（实际上将使用mediump）