Wierd behaviour of single MorphTarget.position record on large buffer geometry

[GaoOufan]

** Bug description **

• I have in my project ONE MorphTarget only, which assume have no limit in vertex count, spread across a bufferGeometry of 90000 squares divided each into 4 triangles, simulating sea waves effect (a very simple one!)
• Though the result works fine on most of my desktop computers AND on my iPad, it fail with wierd effect on one of my desktops.
• Strange point is that computer is quite NEW, ALL desktops using THE SAME operating system (Win10), all computers have at least 6GB of RAM and the problematic one have even stronger graphics card!
• No need to mention that iPad suppose is weaker than computer but still can run easily the animation.

** Testing **

• Tested on mobile devices running with Android it fail as well. On Apple though, works fine.
• Tested on different browsers, the same effect if running in the same device, no matter which browser (Except Apple, tested only on Safari which is enough, works!)

** Code **

function ocean(mat){
    let x,y,w,vtx=[],uv=[],mrp=[],m=[-0.5,0],q,k,p,gm;
    // Instruction for connecting square points into 4 triangles
    q=[
        0,1,2,12,13,14,3,4,5,3,4,5,12,13,14,6,7,8,
        6,7,8,12,13,14,9,10,11,9,10,11,12,13,14,0,1,2
	];
	        
    for(y=0 ; y<QtyY ; y++)
        for(x=0 ; x<QtyX ; x++) {
            w=!!(x%2)^!!(y%2);
            // The points of ONE square: A-B-C-D-Center
            p=[
                x-0.5,y-0.5,m[w?1:0],x-0.5,y+0.5,m[w?0:1],
                x+0.5,y+0.5,m[w?1:0],x+0.5,y-0.5,m[w?0:1],x,y,m[w?1:0]
            ];
            for(k of q) vtx.push(p[k]);
            
            // UVs are constant for now:
	        uv.push(0,0,0.5,0.5,0,1,0,1,0.5,0.5,1,1,1,1,0.5,0.5,1,0,1,0,0.5,0.5,0,0);
	        
	        // Prepare morph targets
	        p[2]=m[w?0:1]; p[5]=m[w?1:0]; p[8]=m[w?0:1]; p[11]=m[w?1:0]; p[14]=m[w?0:1];
	        for(k of q) mrp.push(p[k]);
        }
    
    // Make the mesh:
    gm=new THREE.BufferGeometry(); 
    gm.setAttribute('position',new THREE.BufferAttribute(Float32Array.from(vtx),3));
    gm.setAttribute('uv',new THREE.BufferAttribute(Float32Array.from(uv),2));
    gm.morphAttributes.position=[];
    gm.morphAttributes.position[0]=new THREE.Float32BufferAttribute(mrp,3);
    gm.computeVertexNormals(); return new THREE.Mesh(gm,mat);
}

** Live example **
www.efsdk.com/ef5/test/ocean.htm

Expected behavior
Sea waves effect

** Screenshots **

**Tested on platforms **

• Device: Desktop, Mobile
• OS: Windows, Android, iOS]
• Browser: Chrome (v99.0.4844.51), Firefox (v97.0.2), Safari (works!), Edge (99.0.1150.36)]
• Three.js version: 137

[Mugen87]

Though the result works fine on most of my desktop computers AND on my iPad, it fail with wierd effect on one of my desktops.

Probably a driver issue. Do you mind testing if it works when using WebGL1Renderer on your problematic device? The issue is highly related to the new texture-based morph target code path which is WebGL 2 only.

[GaoOufan]

Tested with WebGL1Renderer really works. However:

1. I have tried before to remove the texture mapping and use single color, or even MeshBasicMaterial, but none of these worked.
   Changed back to what is was, just WebGL1Renderer, solved the problem.
2. Using WebGL1Renderer, which means I am using now the older version, I may not have some of the new features. I think this need to be notified in the manual regarding the morph targets, so the developer can be prepared, and when this issue will be fixed, I would like to know about it too.

Thank you very much

[Mugen87]

Strange point is that computer is quite NEW,

Can you please share more information about its hardware (CPU, GPU, GPU driver version)? It was also be helpful to copy the about:gpu report from Chrome into this issue.

A few similar issue regarding morph targets were reported in the past but I was not able to find a computer in my immediate surroundings that reproduces the issue.

Using WebGL1Renderer, which means I am using now the older version

To clarify, you just use WebGL 1 instead of WebGL 2. Most library features should still work especially if the device supports (half) float textures.

[GaoOufan]

Graphics Feature Status

• Canvas: Hardware accelerated
• Canvas out-of-process rasterization: Disabled
• Direct Rendering Display Compositor: Disabled
• Compositing: Hardware accelerated
• Multiple Raster Threads: Enabled
• OpenGL: Enabled
• Rasterization: Hardware accelerated
• Raw Draw: Disabled
• Skia Renderer: Enabled
• Video Decode: Hardware accelerated
• Video Encode: Hardware accelerated
• Vulkan: Disabled
• WebGL: Hardware accelerated
• WebGL2: Hardware accelerated

Driver Bug Workarounds

• clear_uniforms_before_first_program_use
• decode_encode_srgb_for_generatemipmap
• disable_delayed_copy_nv12
• enable_webgl_timer_query_extensions
• exit_on_context_lost
• disabled_extension_GL_KHR_blend_equation_advanced
• disabled_extension_GL_KHR_blend_equation_advanced_coherent

Problems Detected

• Some drivers are unable to reset the D3D device in the GPU process sandbox
  Applied Workarounds: exit_on_context_lost
• Clear uniforms before first program use on all platforms: 124764, 349137
  Applied Workarounds: clear_uniforms_before_first_program_use
• Disable KHR_blend_equation_advanced until cc shaders are updated: 661715
  Applied Workarounds: disable(GL_KHR_blend_equation_advanced), disable(GL_KHR_blend_equation_advanced_coherent)
• Decode and Encode before generateMipmap for srgb format textures on Windows: 634519
  Applied Workarounds: decode_encode_srgb_for_generatemipmap
• Delayed copy NV12 displays incorrect colors on NVIDIA drivers.: 728670
  Applied Workarounds: disable_delayed_copy_nv12
• Expose WebGL's disjoint_timer_query extensions on platforms with site isolation: 808744, 870491
  Applied Workarounds: enable_webgl_timer_query_extensions

ANGLE Features

• allow_compressed_formats (Frontend workarounds): Enabled: true
  Allow compressed formats
• disable_anisotropic_filtering (Frontend workarounds): Disabled
  Disable support for anisotropic filtering
• disable_program_binary (Frontend features) anglebug:5007: Disabled
  Disable support for GL_OES_get_program_binary
• disable_program_caching_for_transform_feedback (Frontend workarounds): Disabled
  On some GPUs, program binaries don't contain transform feedback varyings
• enableCompressingPipelineCacheInThreadPool (Frontend workarounds) anglebug:4722: Disabled: false
  Enable compressing pipeline cache in thread pool.
• enableProgramBinaryForCapture (Frontend features) anglebug:5658: Disabled
  Even if FrameCapture is enabled, enable GL_OES_get_program_binary
• enable_capture_limits (Frontend features) anglebug:5750: Disabled
  Set the context limits like frame capturing was enabled
• forceInitShaderVariables (Frontend features): Disabled
  Force-enable shader variable initialization
• forceRobustResourceInit (Frontend features) anglebug:6041: Disabled
  Force-enable robust resource init
• lose_context_on_out_of_memory (Frontend workarounds): Enabled: true
  Some users rely on a lost context notification if a GL_OUT_OF_MEMORY error occurs
• scalarize_vec_and_mat_constructor_args (Frontend workarounds) 1165751: Disabled: false
  Always rewrite vec/mat constructors to be consistent
• add_mock_texture_no_render_target (D3D workarounds) anglebug:2152: Disabled: isIntel && capsVersion >= IntelDriverVersion(160000) && capsVersion < IntelDriverVersion(164815)
  On some drivers when rendering with no render target, two bugs lead to incorrect behavior
• allowES3OnFL10_0 (D3D workarounds): Disabled: false
  Allow ES3 on 10.0 devices
• allow_clear_for_robust_resource_init (D3D workarounds) 941620: Enabled: true
  Some drivers corrupt texture data when clearing for robust resource initialization.
• allow_translate_uniform_block_to_structured_buffer (D3D workarounds) anglebug:3682: Enabled: IsWin10OrGreater()
  There is a slow fxc compile performance issue with dynamic uniform indexing if translating a uniform block with a large array member to cbuffer.
• call_clear_twice (D3D workarounds) 655534: Disabled: isIntel && isSkylake && capsVersion >= IntelDriverVersion(160000) && capsVersion < IntelDriverVersion(164771)
  Using clear() may not take effect
• depth_stencil_blit_extra_copy (D3D workarounds) anglebug:1452: Disabled: (part1 <= 13u && part2 < 6881) && isNvidia && driverVersionValid
  Bug in some drivers triggers a TDR when using CopySubresourceRegion from a staging texture to a depth/stencil
• disable_b5g6r5_support (D3D workarounds): Disabled: (isIntel && capsVersion >= IntelDriverVersion(150000) && capsVersion < IntelDriverVersion(154539)) || isAMD
  Textures with the format DXGI_FORMAT_B5G6R5_UNORM have incorrect data
• emulate_isnan_float (D3D workarounds) 650547: Disabled: isIntel && isSkylake && capsVersion >= IntelDriverVersion(160000) && capsVersion < IntelDriverVersion(164542)
  Using isnan() on highp float will get wrong answer
• emulate_tiny_stencil_textures (D3D workarounds): Disabled: isAMD && !(deviceCaps.featureLevel < D3D_FEATURE_LEVEL_10_1)
  1x1 and 2x2 mips of depth/stencil textures aren't sampled correctly
• expand_integer_pow_expressions (D3D workarounds): Enabled: true
  The HLSL optimizer has a bug with optimizing 'pow' in certain integer-valued expressions
• flush_after_ending_transform_feedback (D3D workarounds): Enabled: isNvidia
  Some drivers sometimes write out-of-order results to StreamOut buffers when transform feedback is used to repeatedly write to the same buffer positions
• force_atomic_value_resolution (D3D workarounds) anglebug:3246: Enabled: isNvidia
  On some drivers the return value from RWByteAddressBuffer.InterlockedAdd does not resolve when used in the .yzw components of a RWByteAddressBuffer.Store operation
• get_dimensions_ignores_base_level (D3D workarounds): Enabled: isNvidia
  Some drivers do not take into account the base level of the texture in the results of the HLSL GetDimensions builtin
• mrt_perf_workaround (D3D workarounds): Enabled: true
  Some drivers have a bug where they ignore null render targets
• pre_add_texel_fetch_offsets (D3D workarounds): Disabled: isIntel
  HLSL's function texture.Load returns 0 when the parameter Location is negative, even if the sum of Offset and Location is in range
• rewrite_unary_minus_operator (D3D workarounds): Disabled: isIntel && (isBroadwell || isHaswell) && capsVersion >= IntelDriverVersion(150000) && capsVersion < IntelDriverVersion(154624)
  Evaluating unary minus operator on integer may get wrong answer in vertex shaders
• select_view_in_geometry_shader (D3D workarounds): Disabled: !deviceCaps.supportsVpRtIndexWriteFromVertexShader
  The viewport or render target slice will be selected in the geometry shader stage for the ANGLE_multiview extension
• set_data_faster_than_image_upload (D3D workarounds): Enabled: !(isIvyBridge || isBroadwell || isHaswell)
  Set data faster than image upload
• skip_vs_constant_register_zero (D3D workarounds): Enabled: isNvidia
  In specific cases the driver doesn't handle constant register zero correctly
• use_instanced_point_sprite_emulation (D3D workarounds): Disabled: isFeatureLevel9_3
  Some D3D11 renderers do not support geometry shaders for pointsprite emulation
• use_system_memory_for_constant_buffers (D3D workarounds) 593024: Disabled: isIntel
  Copying from staging storage to constant buffer storage does not work
• zero_max_lod (D3D workarounds): Disabled: isFeatureLevel9_3
  Missing an option to disable mipmaps on a mipmapped texture

DAWN Info

<Discrete GPU> D3D12 backend - NVIDIA GeForce GTX 1060 3GB
[Default Toggle Names]
• lazy_clear_resource_on_first_use: https://crbug.com/dawn/145: Clears resource to zero on first usage. This initializes the resource so that no dirty bits from recycled memory is present in the new resource.
• use_d3d12_render_pass: https://crbug.com/dawn/36: Use the D3D12 render pass API introduced in Windows build 1809 by default. On versions of Windows prior to build 1809, or when this toggle is turned off, Dawn will emulate a render pass.
• use_d3d12_residency_management: https://crbug.com/dawn/193: Enable residency management. This allows page-in and page-out of resource heaps in GPU memory. This component improves overcommitted performance by keeping the most recently used resources local to the GPU. Turning this component off can cause allocation failures when application memory exceeds physical device memory.
• disallow_unsafe_apis: http://crbug.com/1138528: Produces validation errors on API entry points or parameter combinations that aren't considered secure yet.
[WebGPU Forced Toggles - enabled]
• disallow_spirv: https://crbug.com/1214923: Disallow usage of SPIR-V completely so that only WGSL is used for shader modules.This is useful to prevent a Chromium renderer process from successfully sendingSPIR-V code to be compiled in the GPU process.
[Supported Features]
• texture-compression-bc
• pipeline-statistics-query
• timestamp-query
• depth24unorm-stencil8
• depth32float-stencil8
• dawn-internal-usages
• multiplanar-formats
• dawn-native

<CPU> D3D12 backend - Microsoft Basic Render Driver
[Default Toggle Names]
• lazy_clear_resource_on_first_use: https://crbug.com/dawn/145: Clears resource to zero on first usage. This initializes the resource so that no dirty bits from recycled memory is present in the new resource.
• use_d3d12_resource_heap_tier2: https://crbug.com/dawn/27: Enable support for resource heap tier 2. Resource heap tier 2 allows mixing of texture and buffers in the same heap. This allows better heap re-use and reduces fragmentation.
• use_d3d12_render_pass: https://crbug.com/dawn/36: Use the D3D12 render pass API introduced in Windows build 1809 by default. On versions of Windows prior to build 1809, or when this toggle is turned off, Dawn will emulate a render pass.
• use_d3d12_residency_management: https://crbug.com/dawn/193: Enable residency management. This allows page-in and page-out of resource heaps in GPU memory. This component improves overcommitted performance by keeping the most recently used resources local to the GPU. Turning this component off can cause allocation failures when application memory exceeds physical device memory.
• disallow_unsafe_apis: http://crbug.com/1138528: Produces validation errors on API entry points or parameter combinations that aren't considered secure yet.
[WebGPU Forced Toggles - enabled]
• disallow_spirv: https://crbug.com/1214923: Disallow usage of SPIR-V completely so that only WGSL is used for shader modules.This is useful to prevent a Chromium renderer process from successfully sendingSPIR-V code to be compiled in the GPU process.
[Supported Features]
• texture-compression-bc
• pipeline-statistics-query
• timestamp-query
• depth24unorm-stencil8
• depth32float-stencil8
• dawn-internal-usages
• multiplanar-formats
• dawn-native

<Discrete GPU> Vulkan backend - GeForce GTX 1060 3GB
[Default Toggle Names]
• lazy_clear_resource_on_first_use: https://crbug.com/dawn/145: Clears resource to zero on first usage. This initializes the resource so that no dirty bits from recycled memory is present in the new resource.
• use_temporary_buffer_in_texture_to_texture_copy: https://crbug.com/dawn/42: Split texture-to-texture copy into two copies: copy from source texture into a temporary buffer, and copy from the temporary buffer into the destination texture when copying between compressed textures that don't have block-aligned sizes. This workaround is enabled by default on all Vulkan drivers to solve an issue in the Vulkan SPEC about the texture-to-texture copies with compressed formats. See Textured cube with CanvasRenderer shows borders #1005 (https://github.com/Texture-to-texture copy issue with compressed formats KhronosGroup/Vulkan-Docs#1005) for more details.
• vulkan_use_d32s8: https://crbug.com/dawn/286: Vulkan mandates support of either D32_FLOAT_S8 or D24_UNORM_S8. When available the backend will use D32S8 (toggle to on) but setting the toggle to off will make it use the D24S8 format when possible.
• disallow_unsafe_apis: http://crbug.com/1138528: Produces validation errors on API entry points or parameter combinations that aren't considered secure yet.
[WebGPU Forced Toggles - enabled]
• disallow_spirv: https://crbug.com/1214923: Disallow usage of SPIR-V completely so that only WGSL is used for shader modules.This is useful to prevent a Chromium renderer process from successfully sendingSPIR-V code to be compiled in the GPU process.
[Supported Features]
• texture-compression-bc
• pipeline-statistics-query
• timestamp-query
• depth-clamping
• depth24unorm-stencil8
• depth32float-stencil8
• dawn-internal-usages
• dawn-native

Version Information

Data exported	2022-03-13T09:04:06.628Z
Chrome version	Chrome/99.0.4844.51
Operating system	Windows NT 10.0.19041
Software rendering list URL	https://chromium.googlesource.com/chromium/src/+/d537ec02474b5afe23684e7963d538896c63ac77/gpu/config/software_rendering_list.json
Driver bug list URL	https://chromium.googlesource.com/chromium/src/+/d537ec02474b5afe23684e7963d538896c63ac77/gpu/config/gpu_driver_bug_list.json
ANGLE commit id	abdccddb7534
2D graphics backend	Skia/99 f85ab491eb97b54d0bfeac19fed27feb499b8912
Command Line	"C:\Program Files\Google\Chrome\Application\chrome.exe" --flag-switches-begin --flag-switches-end

Log Messages

• GpuProcessHost: The info collection GPU process exited normally. Everything is okay.

[LeviPesin]

I am getting the same issue with this example on my Android tablet (Samsung Galaxy Tab A (2016)).

[Mugen87]

@GaoOufan Can you please check if the following fiddles render on your device? It should look like a wavy plane without any glitches.

https://jsfiddle.net/798vpbsu/2/ (width < 4096, height = 1)
https://jsfiddle.net/798vpbsu/3/ (width < 8192, height = 1)
https://jsfiddle.net/798vpbsu/ (width < 16384, height = 1)
https://jsfiddle.net/3suw750k/1/ (width = 16384, height = 16)
https://jsfiddle.net/3suw750k/2/ (width = 16384, height = 17)

[Mugen87]

@GaoOufan Do you mind updating www.efsdk.com/ef5/test/ocean.htm such that is does not use a minified version of three.js?

[LeviPesin]

All 5 fiddles render normally when looking on them from small angles. After rotating them they all render with some issues.

[Mugen87]

@LeviPesin What is the max texture size of your device?

[LeviPesin]

4096. I have attached screenshots of the first fiddle (others give almost the same picture).

[Mugen87]

It actually looks as expected. The plane is rendered front-side only.

[Mugen87]

I was finally able to reproduce the issue on a Windows laptop. Filed a Chromium bug here:

https://bugs.chromium.org/p/chromium/issues/detail?id=1305968

[GaoOufan]

Hi, Tested on my problematic device, none of them render animation, there is white "freezed" pool and perhaps there is similar error to what I had before too: This is morph with texture width <4096&nbsp;, bigger width all the same. Yet haven't tested on the good device, as it is not with me now, I may try it tomorrow (China time) in the office. Thanks a lot Ram

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: "mrdoob/three.js" ***@***.***&gt;; 发送时间:&nbsp;2022年3月14日(星期一) 下午5:53 ***@***.***&gt;; ***@***.******@***.***&gt;; 主题:&nbsp;Re: [mrdoob/three.js] Wierd behaviour of single MorphTarget.position record on large buffer geometry (Issue #23711) @GaoOufan @LeviPesin Can you please check if the following fiddles render on your device? It should look like a wavy plane without any glitches. https://jsfiddle.net/798vpbsu/2/ (morph texture width < 4096 ) https://jsfiddle.net/798vpbsu/3/ (morph texture width < 8192 ) https://jsfiddle.net/798vpbsu/ (morph texture width < 16384) https://jsfiddle.net/798vpbsu/1/ (morph texture width &gt; 16384) — Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you were mentioned.Message ID: ***@***.***&gt;

[GaoOufan]

Dear Mr. Doob; Yes, I have modified the file to load unminified version of THREE.js (v. 137), yet single file. Thanks a lot Ram

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: "mrdoob/three.js" ***@***.***&gt;; 发送时间:&nbsp;2022年3月14日(星期一) 晚上6:14 ***@***.***&gt;; ***@***.******@***.***&gt;; 主题:&nbsp;Re: [mrdoob/three.js] Wierd behaviour of single MorphTarget.position record on large buffer geometry (Issue #23711) @GaoOufan Do you mind updating www.efsdk.com/ef5/test/ocean.htm such that is does not use a minified version of three.js? — Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you were mentioned.Message ID: ***@***.***&gt;

[GaoOufan]

Hi, testing my WebGL context is: MAX_TEXTURE_SIZE: 3379 But the texture I am using is only 128x128.... Thanks a lot Ram

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: "mrdoob/three.js" ***@***.***&gt;; 发送时间:&nbsp;2022年3月14日(星期一) 晚上6:42 ***@***.***&gt;; ***@***.******@***.***&gt;; 主题:&nbsp;Re: [mrdoob/three.js] Wierd behaviour of single MorphTarget.position record on large buffer geometry (Issue #23711) @LeviPesin What is the max texture size of your device? — Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you were mentioned.Message ID: ***@***.***&gt;

[GaoOufan]

Note that it happens also on FF. Thsnk a lot Ram

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: "mrdoob/three.js" ***@***.***&gt;; 发送时间:&nbsp;2022年3月14日(星期一) 晚上7:47 ***@***.***&gt;; ***@***.******@***.***&gt;; 主题:&nbsp;Re: [mrdoob/three.js] Wierd behaviour of single MorphTarget.position record on large buffer geometry (Issue #23711) I was finally able to reproduce the issue on a Windows laptop. Filed a Chromium bug here: https://bugs.chromium.org/p/chromium/issues/detail?id=1305968 — Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you were mentioned.Message ID: ***@***.***&gt;