如果片段着色器不支持高精度,带有 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,并且性能会有差异。还将按照规定仅提供中等精度。
// 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)
在 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,并且性能会有差异。还将按照规定仅提供中等精度。
// 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)