Water2 shader glitching on older android (samsung s20)

Kemura · October 14, 2022, 1:14pm

Hello everyone,

When testing out my application on an “older” android device (samsung s20) the water2 shader glitches by only being visible from certain angles

I dont have this issue on newer models (like the samsung s22).
I debugged it remotely via chrome://inspect and this is the issues I got

three.module.js:16138 THREE.WebGLRenderer: OES_texture_float extension not supported.
get @ three.module.js:16138
WebGLCapabilities @ three.module.js:15898
initGLContext @ three.module.js:24411
WebGLRenderer @ three.module.js:24461
start @ app.js:122
(anonymous) @ ui.js:42
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2
three.module.js:16138 THREE.WebGLRenderer: OES_texture_half_float extension not supported.
get @ three.module.js:16138
initGLContext @ three.module.js:24417
WebGLRenderer @ three.module.js:24461
start @ app.js:122
(anonymous) @ ui.js:42
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2
three.module.js:16138 THREE.WebGLRenderer: OES_texture_half_float_linear extension not supported.
get @ three.module.js:16138
initGLContext @ three.module.js:24418
WebGLRenderer @ three.module.js:24461
start @ app.js:122
(anonymous) @ ui.js:42
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2
three.module.js:16138 THREE.WebGLRenderer: OES_texture_float_linear extension not supported.
get @ three.module.js:16138
initGLContext @ three.module.js:24425
WebGLRenderer @ three.module.js:24461
start @ app.js:122
(anonymous) @ ui.js:42
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2
three.module.js:16138 THREE.WebGLRenderer: EXT_frag_depth extension not supported.
get @ three.module.js:16138
WebGLPrograms.getParameters @ three.module.js:18825
initMaterial @ three.module.js:25648
setProgram @ three.module.js:25842
WebGLRenderer.renderBufferDirect @ three.module.js:24881
renderObject @ three.module.js:25630
renderObjects @ three.module.js:25600
WebGLRenderer.render @ three.module.js:25401
render @ app.js:401
requestAnimationFrame (async)
start @ app.js:414
(anonymous) @ ui.js:42
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2
three.module.js:16138 THREE.WebGLRenderer: WEBGL_draw_buffers extension not supported.
get @ three.module.js:16138
WebGLPrograms.getParameters @ three.module.js:18826
initMaterial @ three.module.js:25648
setProgram @ three.module.js:25842
WebGLRenderer.renderBufferDirect @ three.module.js:24881
renderObject @ three.module.js:25630
renderObjects @ three.module.js:25600
WebGLRenderer.render @ three.module.js:25401
render @ app.js:401
requestAnimationFrame (async)
start @ app.js:414
(anonymous) @ ui.js:42
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2
three.module.js:16138 THREE.WebGLRenderer: EXT_shader_texture_lod extension not supported.
get @ three.module.js:16138
WebGLPrograms.getParameters @ three.module.js:18827
initMaterial @ three.module.js:25648
setProgram @ three.module.js:25842
WebGLRenderer.renderBufferDirect @ three.module.js:24881
renderObject @ three.module.js:25630
renderObjects @ three.module.js:25600
WebGLRenderer.render @ three.module.js:25401
render @ app.js:401
requestAnimationFrame (async)
start @ app.js:414
(anonymous) @ ui.js:42
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2
6GLTFLoader.js:2029 THREE.GLTFLoader: Custom UV set 1 for texture emissiveMap not yet supported.
(anonymous) @ GLTFLoader.js:2029
Promise.then (async)
GLTFParser.assignTexture @ GLTFLoader.js:2007
GLTFParser.loadMaterial @ GLTFLoader.js:2304
GLTFParser.getDependency @ GLTFLoader.js:1636
GLTFParser.loadMesh @ GLTFLoader.js:2689
GLTFParser.getDependency @ GLTFLoader.js:1620
(anonymous) @ GLTFLoader.js:3082
GLTFParser.loadNode @ GLTFLoader.js:3138
GLTFParser.getDependency @ GLTFLoader.js:1616
GLTFParser.loadAnimation @ GLTFLoader.js:2892
GLTFParser.getDependency @ GLTFLoader.js:1648
(anonymous) @ GLTFLoader.js:1688
GLTFParser.getDependencies @ GLTFLoader.js:1686
GLTFParser.parse @ GLTFLoader.js:1508
parse @ GLTFLoader.js:287
(anonymous) @ GLTFLoader.js:146
(anonymous) @ three.module.js:36370
load (async)
load @ three.module.js:36348
load @ GLTFLoader.js:142
loadModelFile @ modelLoader.js:89
loadModels @ modelLoader.js:223
(anonymous) @ app.js:327
(anonymous) @ three.module.js:36370
load (async)
load @ three.module.js:36348
(anonymous) @ app.js:298
(anonymous) @ three.module.js:42145
(anonymous) @ three.module.js:36370
load (async)
load @ three.module.js:36348
load @ three.module.js:42128
start @ app.js:280
(anonymous) @ ui.js:42
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2
GLTFLoader.js:2029 THREE.GLTFLoader: Custom UV set 1 for texture emissiveMap not yet supported.
(anonymous) @ GLTFLoader.js:2029
Promise.then (async)
GLTFParser.assignTexture @ GLTFLoader.js:2007
GLTFParser.loadMaterial @ GLTFLoader.js:2304
GLTFParser.getDependency @ GLTFLoader.js:1636
GLTFParser.loadMesh @ GLTFLoader.js:2689
GLTFParser.getDependency @ GLTFLoader.js:1620
(anonymous) @ GLTFLoader.js:3082
GLTFParser.loadNode @ GLTFLoader.js:3138
GLTFParser.getDependency @ GLTFLoader.js:1616
buildNodeHierachy @ GLTFLoader.js:3231
(anonymous) @ GLTFLoader.js:3311
Promise.then (async)
buildNodeHierachy @ GLTFLoader.js:3296
loadScene @ GLTFLoader.js:3345
GLTFParser.getDependency @ GLTFLoader.js:1612
(anonymous) @ GLTFLoader.js:1688
GLTFParser.getDependencies @ GLTFLoader.js:1686
GLTFParser.parse @ GLTFLoader.js:1507
parse @ GLTFLoader.js:287
(anonymous) @ GLTFLoader.js:146
(anonymous) @ three.module.js:36370
load (async)
load @ three.module.js:36348
load @ GLTFLoader.js:142
loadModelFile @ modelLoader.js:89
loadModels @ modelLoader.js:223
(anonymous) @ app.js:327
(anonymous) @ three.module.js:36370
load (async)
load @ three.module.js:36348
(anonymous) @ app.js:298
(anonymous) @ three.module.js:42145
(anonymous) @ three.module.js:36370
load (async)
load @ three.module.js:36348
load @ three.module.js:42128
start @ app.js:280
(anonymous) @ ui.js:42
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2
three.module.js:21478 THREE.WebGLRenderer: Texture has been resized from (910x683) to (512x512).
resizeImage @ three.module.js:21478
uploadTexture @ three.module.js:22032
setTexture2D @ three.module.js:21733
safeSetTexture2D @ three.module.js:22626
setValueT1 @ three.module.js:17146
WebGLUniforms.upload @ three.module.js:17650
setProgram @ three.module.js:26038
WebGLRenderer.renderBufferDirect @ three.module.js:24881
renderObject @ three.module.js:25630
renderObjects @ three.module.js:25600
WebGLRenderer.render @ three.module.js:25397
render @ app.js:401
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
three.module.js:21478 THREE.WebGLRenderer: Texture has been resized from (849x193) to (512x128).
resizeImage @ three.module.js:21478
uploadTexture @ three.module.js:22032
setTexture2D @ three.module.js:21733
safeSetTexture2D @ three.module.js:22626
setValueT1 @ three.module.js:17146
WebGLUniforms.upload @ three.module.js:17650
setProgram @ three.module.js:26038
WebGLRenderer.renderBufferDirect @ three.module.js:24881
renderObject @ three.module.js:25630
renderObjects @ three.module.js:25600
WebGLRenderer.render @ three.module.js:25401
render @ app.js:401
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
requestAnimationFrame (async)
render @ app.js:384
2three.module.js:21478 THREE.WebGLRenderer: Texture has been resized from (1250x1000) to (1024x512).

It claims the following is not supported:

ES_texture_float extension not supported.
OES_texture_half_float extension not supported.
OES_texture_half_float_linear extension not supported.
OES_texture_float_linear extension not supported.
EXT_frag_depth extension not supported.
WEBGL_draw_buffers extension not supported.
EXT_shader_texture_lod extension not supported.

My initial thought was that the device does not support webgl, but then I saw that the water was actually there. Pretty sure it is not a issue related to near-far camera settings as newer devices does not have any issues with my parameters regarding the two settings…

Is there anyway to solve this or implement a work around?

Mugen87 · October 14, 2022, 1:21pm

Water2 uses Reflector and Refractor internally. Both classes use half float render targets. Since your device does not support them (missing OES_texture_half_float extension), it’s not possible to use the classes without modifications. Instead of creating the render targets like so:

const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight, { samples: multisample, type: HalfFloatType } );

try it with:

const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight );

Kemura · October 14, 2022, 1:38pm

I tried this, it did not work.

My initial Refractor and Reflector code looked like this:

    const parameters = {
      minFilter: LinearFilter,
      magFilter: LinearFilter,
      format: RGBFormat
    };

    const renderTarget = new WebGLRenderTarget(
      textureWidth,
      textureHeight
      parameters
    );

I commented out the parameters like so

    const parameters = {
      minFilter: LinearFilter,
      magFilter: LinearFilter,
      format: RGBFormat
    };

    const renderTarget = new WebGLRenderTarget(
      textureWidth,
      textureHeight
      //parameters
    );

On both files and nothing changed

Worth mentioning that the error derives from my app.js line 122 which is the following

  renderer = new THREE.WebGLRenderer({
    canvas,
    logarithmicDepthBuffer: true,
    antialias: true,
    alpha: true
  });

Kemura · October 14, 2022, 1:46pm

Found the issue, I put the logarithmicDepthBuffer to false

Mugen87 · October 14, 2022, 3:20pm

BTW: Latest three.js versions do not support THREE.RGBFormat anymore.

Topic		Replies	Views
Rendering issue in some mobiles Questions webgl-renderer , rendering	3	485	September 2, 2021
Water shader jaggering / glitching Questions geometry , shaders , water , threejs	0	733	October 5, 2022
Different render results on Android devices Questions textures , materials , shader-material , gltf	2	704	November 10, 2020
Reflection displays differently on Android (probably bug?) Questions materials , android	4	546	August 21, 2020
Very weird glitch on android Questions android	4	250	December 29, 2023

Water2 shader glitching on older android (samsung s20)

Related Topics