GLSL-ES3webGL2：如何从片段着色器测试扩展？

编程问答 2022-06-12

问题描述

在webGL1中，可以使用#ifdef GL_EXT_shader_texture_lod从片段着色器测试GLSL扩展的可用性。 它似乎不再在webGL2（= GLSL-ES3.0）中工作：扩展名不相同，但是例如#ifdef GL_EXT_color_buffer_float似乎是错误的，尽管https://webglreport.com/?v=2告知扩展存在。 还是我做错了什么？

解决方法

是否向GLSL添加标志取决于扩展名

EXT_shader_texture_lod是专门影响GLSL的扩展。 It's spec说，它添加了该宏

GLSL宏GL_EXT_shader_texture_lod定义为1。

EXT_color_buffer_float不是影响GLSL的扩展名。 It's spec没有提到任何GLSL宏。与WebGL1无关

尽管如此，那些标志在WebGL中还是很废话。您可以轻松地进行自己的字符串操作

const shaderTextureLodExt = gl.getExtension('EXT_shader_texture_lod');


const shader = `
#if ${shaderTextureLodExt ? 1 : 0}
   ... code if shader texture lod exists
#else
   ... code if shader texture lod does not exist
#endif

  ...
`;

或一千种其他方法来处理着色器字符串。

这是另一个

const colorBufferFloatExt = gl.getExtension('EXT_color_buffer_float');

function replaceIfDefs(s) {
  return `
  ${colorBufferExtension ? '#define EXTENSION_color_buffer_float' : ''}
  ${s.replace(/GL_EXT_color_buffer_float/g 'EXTENSION_color_buffer_float')}
  `;
}
const shader = replaceIfDefs(`
#ifdef GL_EXT_color_buffer_float
   ...
#endif
   ...
`);

等...

此外，由于即使在OpenGL中也从来没有GL_EXT_color_buffer_float，因此调用宏GL_EXT_color_buffer_float没有多大意义。实际上，这可能是一个坏主意，因为它最终看起来像是官方指定的宏，即使不是。最好选择一个以GL_开头的自己的名字。

还要考虑使用#ifdef可能不是一个好主意，因为您可以只使用字符串操作。例如

const colorBufferFloatExt = gl.getExtension('EXT_color_buffer_float');

const snippet = colorBufferFloatExt
  ? `
      float decode_float(vec4 v) {
        return v;
      }
    `
  : `
      float decode_float(vec4 v) {
         vec4 bits = v * 255.0;
         float sign = mix(-1.0,1.0,step(bits[3],128.0));
         float expo = floor(mod(bits[3] + 0.1,128.0)) * 2.0 +
                      floor((bits[2] + 0.1) / 128.0) - 127.0;
         float sig = bits[0] +
                     bits[1] * 256.0 +
                     floor(mod(bits[2] + 0.1,128.0)) * 256.0 * 256.0;
         return sign * (1.0 + sig / 8388607.0) * pow(2.0,expo);
       }
   `;

const shader = `
precision highp float;

${snippet}

uniform sampler2D data;
uniform vec2 dataSize;

void main(
   vec4 d = texture2D(data,gl_FragCoord.xy / dataSize);
   vec4 v = decode_float(d) * 2.0;
   gl_FragColor = v;
}
`;


...etc...
fragment-shaderglslglslglslglsleswebgl-extensionswebgl2