Forcing All Shaders to Use # version 300 es (or be WebGL2 syntax-compatible)

[ilan-gold]

Is there a way to do this (from deck.gl also)? I have a custom shader hook that has a usampler2D argument and when I try to register it globally, it is appended onto all shaders which is a problem for shaders that can't use usampler2D. Is it just that not all shaders (in deck.gl) are written in a way that this is feasible? I'm not super familiar with shader compilation or versions. Thanks!

[ibgreen]

We "transpile" shaders between GLSL versions. Currently I believe the top level shader's #version directive determines the target version. The top level shaders would be the layer's shaders, and all imported shader modules will be transpiled to that version.

Hooks and injects do not declare a version and so are not transpiled, which is presumably the cause of your issue.

Ideally all deck.gl shaders should be written in the latest version, GLSL 3 and transpiled back to GLSL 1.3 on WebGL1 systems. Then hooks could safely be written in GLSL 3.00. (of course usampler still wouldn't work on WebGL1 but it would work as expected on WebGL2)

[ilan-gold]

But I don't think I would want my hooks transpiled? I have a check for injecting the usampler2D hook on WebGL1 systems, so it's only being injected on WebGL2 systems. I can try to make a quick example now that I understand this a bit better. The issue is not on my own custom shaders, it's on all the other deck.gl layers I am using, like LineLayer.

[ilan-gold]

For example (note the shader name)

luma.gl: GLSL compilation errors in fragment shader line-layer-fragment-shader-2
142: void DECKGL_SAMPLE_TEXTURE(inout float intensity, sampler2D channel, vec2 texCoord) {
143: }
144: void DECKGL_SAMPLE_UNSIGNED_TEXTURE(inout float intensity, usampler2D channel, vec2 texCoord) {
^^^ ERROR: 'usampler2D' : syntax error

and the source of that shader:

#version 100


#define SHADER_TYPE_FRAGMENT

#define INTEL_GPU
// Intel optimizes away the calculation necessary for emulated fp64
#define LUMA_FP64_CODE_ELIMINATION_WORKAROUND 1
// Intel's built-in 'tan' function doesn't have acceptable precision
#define LUMA_FP32_TAN_PRECISION_WORKAROUND 1
// Intel GPU doesn't have full 32 bits precision in same cases, causes overflow
#define LUMA_FP64_HIGH_BITS_OVERFLOW_WORKAROUND 1

#if (__VERSION__ > 120)

# define FEATURE_GLSL_DERIVATIVES
# define FEATURE_GLSL_DRAW_BUFFERS
# define FEATURE_GLSL_FRAG_DEPTH
# define FEATURE_GLSL_TEXTURE_LOD

// DEPRECATED FLAGS, remove in v9
# define FRAG_DEPTH
# define DERIVATIVES
# define DRAW_BUFFERS
# define TEXTURE_LOD

#endif // __VERSION

// FRAG_DEPTH => gl_FragDepth is available
#ifdef GL_EXT_frag_depth
#extension GL_EXT_frag_depth : enable
# define FEATURE_GLSL_FRAG_DEPTH
# define FRAG_DEPTH
# define gl_FragDepth gl_FragDepthEXT
#endif

// DERIVATIVES => dxdF, dxdY and fwidth are available
#ifdef GL_OES_standard_derivatives
#extension GL_OES_standard_derivatives : enable
# define FEATURE_GLSL_DERIVATIVES
# define DERIVATIVES
#endif

// DRAW_BUFFERS => gl_FragData[] is available
#ifdef GL_EXT_draw_buffers
#extension GL_EXT_draw_buffers : require
#define FEATURE_GLSL_DRAW_BUFFERS
#define DRAW_BUFFERS
#endif
// TEXTURE_LOD => texture2DLod etc are available
#ifdef GL_EXT_shader_texture_lod
#extension GL_EXT_shader_texture_lod : enable

# define FEATURE_GLSL_TEXTURE_LOD
# define TEXTURE_LOD

#endif



precision highp float;


#define MODULE_FP32
// END MODULE_fp32

#define MODULE_GEOMETRY

#define SMOOTH_EDGE_RADIUS 0.5

struct FragmentGeometry {
      vec2 uv;
} geometry;

float smoothedge(float edge, float x) {
      return smoothstep(edge - SMOOTH_EDGE_RADIUS, edge + SMOOTH_EDGE_RADIUS, x);
}
// END MODULE_geometry

#define MODULE_PROJECT
// END MODULE_project

#define MODULE_PROJECT32
// END MODULE_project32

#define MODULE_PICKING
uniform bool picking_uActive;
uniform vec3 picking_uSelectedColor;
uniform vec4 picking_uHighlightColor;

varying vec4 picking_vRGBcolor_Avalid;
vec4 picking_filterHighlightColor(vec4 color) {
      if (picking_uActive) {
        return color;
  }
  bool selected = bool(picking_vRGBcolor_Avalid.a);

  if (selected) {
        float highLightAlpha = picking_uHighlightColor.a;
    float blendedAlpha = highLightAlpha + color.a * (1.0 - highLightAlpha);
    float highLightRatio = highLightAlpha / blendedAlpha;

    vec3 blendedRGB = mix(color.rgb, picking_uHighlightColor.rgb, highLightRatio);
    return vec4(blendedRGB, blendedAlpha);
  } else {
        return color;
  }
}
vec4 picking_filterPickingColor(vec4 color) {
      if (picking_uActive) {
        if (picking_vRGBcolor_Avalid.a == 0.0) {
          discard;
    }
    return picking_vRGBcolor_Avalid;
  }
  return color;
}
vec4 picking_filterColor(vec4 color) {
      vec4 highightColor = picking_filterHighlightColor(color);
  return picking_filterPickingColor(highightColor);
}

// END MODULE_picking





void DECKGL_FILTER_COLOR(inout vec4 color, FragmentGeometry geometry) {
      
  // use highlight color if this fragment belongs to the selected object.
  color = picking_filterHighlightColor(color);

  // use picking color if rendering to picking FBO.
  color = picking_filterPickingColor(color);
    
}
void DECKGL_MUTATE_COLOR(inout vec4 rgba, float intensity0, float intensity1, float intensity2, float intensity3, float intensity4, float intensity5, vec2 vTexCoord) {
    
}
void DECKGL_PROCESS_INTENSITY(inout float intensity, vec2 contrastLimits, int channelIndex) {
    
}
void DECKGL_SAMPLE_TEXTURE(inout float intensity, sampler2D channel, vec2 texCoord) {
    
}
void DECKGL_SAMPLE_UNSIGNED_TEXTURE(inout float intensity, usampler2D channel, vec2 texCoord) {
    
}
#define SHADER_NAME line-layer-fragment-shader

precision highp float;

varying vec4 vColor;
varying vec2 uv;

void main(void) {
      geometry.uv = uv;

  gl_FragColor = vColor;

  DECKGL_FILTER_COLOR(gl_FragColor, geometry);
}

[ilan-gold]

In fact now that I think about it, my shaders don't error out specifically because I prepend # version 300 es to them - but for example, deck.gl's LineLayer does not have this: https://github.com/visgl/deck.gl/blob/master/modules/layers/src/line-layer/line-layer-fragment.glsl.js and furthermore, from what I have noticed poking around, the 100 version is actually prepended by default in the absence of other versions:

luma.gl/modules/webgl/src/adapter/resources/webgl-shader.ts

Lines 47 to 69 in 4f0a70b

	_compile(source: string): void {
	const addGLSLVersion = (source: string) => source.startsWith('#version ') ? source : `#version 100\n${source}`;
	source = addGLSLVersion(source);
	const {gl} = this.device;
	gl.shaderSource(this.handle, source);
	gl.compileShader(this.handle);
	// TODO - For performance reasons, avoid checking shader compilation errors on production?
	// TODO - Load log even when no error reported, to catch warnings?
	// https://gamedev.stackexchange.com/questions/30429/how-to-detect-glsl-warnings
	const compileStatus = gl.getShaderParameter(this.handle, GL.COMPILE_STATUS);
	if (!compileStatus) {
	const shaderLog = gl.getShaderInfoLog(this.handle);
	const messages = parseShaderCompilerLog(shaderLog).filter(message => message.type === 'error');
	const formattedLog = formatCompilerLog(messages, source);
	const shaderName: string = getShaderInfo(source).name;
	const shaderDescription = `${this.stage} shader ${shaderName}`;
	log.error(`GLSL compilation errors in ${shaderDescription}\n${formattedLog}`)();
	throw new Error(`GLSL compilation errors in ${shaderName}`);
	}
	}
	}

[ibgreen]

Yes this looks right and is consistent with what I described.

Shaders are assembled from fragments consisting of the main shader, a number of shader modules which can potentially be written in different versions (plus various injects). Currently the #version of the main shader determines which version the final shader will be. It may be possible to override getShaders in the layer and call transpileShader on the original shader in the override.

[ilan-gold]

@ibgreen Is the behavior of the LineLayer's transpiliation then expected? That it doesn't have #version 300 es prepended to it?

[ibgreen]

Not sure about the question:

• LineLayer shader is written in GLSL v1.3, not GLSL 3.00.
• The default GLSL version, if not specified, would be v1.30.
• Your inject used GLSL 3.00 construct, so it creates a syntax error in a v1.30 shader

If you rewrote or transpiled the line layer shaders to v3.00 it should work

If still not clear, maybe continue discussion in deck.gl slack?

[ilan-gold]

That makes sense. I think this is the answer I was looking for. We can chat about what my options are for working around this in slack if you could. Thanks!

[ibgreen]

In luma.gl v9.0, only GLSL 1.3 is supported for WebGL (and of course WGSL is used if running on WebGPU).