Problem with LUTPass and WebGL1

[nilsrydell]

Describe the bug

The LUTPass is not rendering output when used in a WebGL1 context (Safari and IOS). I have tried both the example (https://threejs.org/examples/?q=post#webgl_postprocessing_3dlut) and my own code with no luck.
Chrome and WebGL2 seems to work fine. Safari on desktop and on IOS produce the same errors to console:

WebGL: ERROR: 0:115: 'sampler3D' : Illegal use of reserved word
WebGL: ERROR: 0:115: 'sampler3D' : syntax error
THREE.WebGLProgram: shader error:
WebGL: INVALID_OPERATION: useProgram: program not valid

To Reproduce

Run this demo in Safari or IOS Safari: https://threejs.org/examples/?q=post#webgl_postprocessing_3dlut

Platform:

• Device: Desktop and Mobile
• OS: MacOS 10.15.7 (19H2) and iOS 14.4
• Browser: Safari 14.0 and IOS Safari
• Three.js version: 127dev and r126

[Mugen87]

/ping @gkjohnson

[gkjohnson]

WebGL: ERROR: 0:115: 'sampler3D' : Illegal use of reserved word
WebGL: ERROR: 0:115: 'sampler3D' : syntax error

It seems Safari is complaining about this line using sampler3d in WebGL1 even though it's excluded through a disabled define flag...

three.js/examples/jsm/postprocessing/LUTPass.js

Lines 37 to 39 in 05e9ac7

	#if USE_3DTEXTURE
	uniform sampler3D lut3d;
	#else

I'm not sure what the WebGL spec dictates but it seems like some weird behavior from Safari. Either way I think a solution is to update the ShaderMaterial fragment shader to manually exclude that line if using WebGL1 / 2D LUT rather than a #define.

[Mugen87]

This is no Safari specific issue. When I use WebGL1Renderer in webgl_postprocessing_3dlut with Chrome, I get the same runtime error.

If LUTPass is supposed to support WebGL 1, then this issue is a bug.

[nilsrydell]

three.js/examples/jsm/postprocessing/LUTPass.js

Lines 37 to 39 in 05e9ac7

	#if USE_3DTEXTURE
	uniform sampler3D lut3d;
	#else

I made some further research into it. It works on WebGL1 (Safari) if the shader is striped from all mentions of sampler3D and the if-statements.

I'm not sure what the WebGL spec dictates but it seems like some weird behavior from Safari. Either way I think a solution is to update the ShaderMaterial fragment shader to manually exclude that line if using WebGL1 / 2D LUT rather than a #define.

Yes, I guess this would be a good way to implement it, without changing to much. There is also the option of having 2 shaders and have the LUTPass pick the appropriate one. I guess that would render a lot of code, though.

[gkjohnson]

This is no Safari specific issue. When I use WebGL1Renderer in webgl_postprocessing_3dlut with Chrome, I get the same runtime error.

Oh I missed that! I must have changed that since I originally tested with WebGL1.

@nilsrydell

Yes, I guess this would be a good way to implement it, without changing to much.

My plan was to make a function that would conditionally include the snippets currently inside the USE_3DTEXTURE and update the fragment shader rather than the material defines. Would you like to make a PR with the change? Otherwise I'll be able to look into it in the next week.

[nilsrydell]

I have this solution currently working in both WebGL1 and 2 (Safari and Chrome):
https://github.com/nilsrydell/three.js/blob/7936ca7f6e16c4bed2f1d1a171b6741dd27fccaa/examples/jsm/postprocessing/LUTPass.js

Should I make a Pull Request for this one? I don't know if it is up to the coding standards, I just did it my way. Need this feature working tomorrow in a showcase. :). I have also made changes to the html of the example. Just fixed a variable spelling error in the parameters.

[mrdoob]

Here's the diff: nilsrydell@7936ca7?w=1

[gkjohnson]

I'll take a look at the diff and make a PR with updated formatting this weekend if that sounds good @nilsrydell.

Thanks!

[nilsrydell]

@gkjohnson Yes, sure sound great :).

[vanruesc]

It seems Safari is complaining about this line using sampler3d in WebGL1 even though it's excluded through a disabled define flag...

I think this issue might actually be caused by this line which occurs outside of the preprocessor directives.